By Kate Meyers Emery, George Eastman Museum, USA Over the last decade, there has been increasing interest in how digital games can support learning goals within museums. These types of ‘serious games’ offer a unique, tactile and immersive form of education, which provides an alternative way for visitors to experience an exhibition, collection, or narrative. In November 2017, the George Eastman Museum launched its first digital game in conjunction with Abandoned and Rescued, and exhibition featuring materials and stories from the rescue of a collection of Indian films and ephemera. The goal of the digital game is to help visitors gain a first-hand appreciation for the circumstances under which these materials were rescued, understand the decisions made by the collections manager, and raise awareness of the historic value of these objects. This workshop shares the process of creating the game, including how we determined the educational goals, method of creating game mechanics that would match real-world decisions, and the iterative process of working with an exhibition and collection. During the workshop, participants will learn how to design their own game from the basic of the initial design to laying the foundations for their game in Construct 3.

1. LET’S BUILD A
VIDEO GAME
KATE MEYERS EMERY, PHD, GEORGE EASTMAN MUSEUM
@KMEYERSEMERY
JENNIFER LEIGH AHO, UNVALHE CONCEPT
@UNVALHECONCEPT

2. LET’S BUILD A GAME
TODAY’S SCHEDULE
▸ 9-9:30 Introduction and First Steps
▸ 9:30-10:15 Wireframing and Initial Design
▸ 10:15-10:45 Grab a Coffee and Work on Design
▸ 10:45-12 Let’s Create Level 1

3. LET’S BUILD A GAME
WHO WE ARE
Kate Meyers Emery, Ph.D.
Manager of Digital Engagement
George Eastman Museum
@kmeyersemery (tw/ig)
Jennifer Leigh Aho
Artist/Graphic Designer
UnValhe Concepts
@unvalheconcepts (tw)
@unvalhe_concepts (ig)

4. LET’S BUILD A GAME
STEPS IN CREATING A GAME
1. Find inspiration
2. Set learning goals
3. Wireframe the game
4. Design elements
5. Start building
6. Use first level as a prototype

5. LET’S BUILD A GAME
STEP 1: THE CALL
▸ In 2014, the museum received a call that a cinema in
California was going to be demolished, destroying a large
collection of a few hundred Indian films in the process
▸ The museum sent collections manager Deb Stoiber to
California with a small U-Haul to rescue the films
▸ When she arrived, it turned out things were not as they
seemed…

6. LET’S BUILD A GAME
STEP 1: WE’RE GOING TO NEED A BIGGER TRUCK
▸ The theater was scheduled to
be demolished in three
days…
▸ The lights didn’t work in the
building…
▸ The inventory that included
100 boxes of film was
wrong…

7. LET’S BUILD A GAME
STEP 1: ALL THE ELEMENTS OF A GAME
▸ Time limit
▸ Environmental factors
▸ Decision making

8. LET’S BUILD A GAME
STEP 2: LEARNING GOALS
▸ Establish what we hope to accomplish in advance
▸ Learning goal is the broad goal, not the in-game
player goal
▸ Why are you creating this game?
▸ How does it relate to the exhibition?

9. LET’S BUILD A GAME
STEP 2: LEARNING GOALS FROM FILM QUEST
1. Players will gain an appreciation for the circumstances
under which the collection was rescued
2. Players will understand the decisions that needed to be
made during the the rescue regarding how much was
collected and what was chosen
3. Create a game with a balance of fun and education

10. LET’S BUILD A GAME
STEP 2: LEARNING GOALS
▸ Why are you creating this game?
▸ How does it relate to the exhibition?

11. LET’S BUILD A GAME
STEP 3: BASIC DECISIONS
▸ What type of game?
▸ Character-based strategy
▸ First person exploration
▸ Trivia or puzzle
▸ What platform?
▸ Mobile
▸ In-gallery Kiosk
▸ Computer
▸ What content will you need?
▸ Text
▸ Music
▸ Objects
▸ Who can help you?
▸ What is your timeline?
▸ What is your budget?
▸ Construct 3: $40
▸ Designer: Free to $100s

12. LET’S BUILD A GAME
STEP 3: WIREFRAME
▸ Wireframe: an image or set of images which displays the
functional elements, typically used for planning a site's
structure and functionality
START
ABOUT

13. LET’S BUILD A GAME
STEP 4: DESIGN ELEMENTS
▸ Background/Flooring, Walls, Title Screens

14. LET’S BUILD A GAME
STEP 4: DESIGNING A CHARACTER
▸ Can hire a video game designer to do it for you
▸ Can do it yourself: Construct, Pixel and Paint, Photoshop

15. LET’S BUILD A GAME
STEP 4: FILE EXTENSIONS AND BACKGROUNDS
▸ Pixen
▸ Has it’s own file extension
that is automatically has
transparent backgrounds:
PXI
▸ Will need to save as TIFF
▸ Transparent backgrounds
are indicated with the grey
and white diagonal lines

16. LET’S BUILD A GAME
STEP 4: FILE EXTENSIONS AND BACKGROUNDS
▸ Photoshop
▸ Photoshop is able to
work with PNG and TIFF
files both which save
with transparent
backgrounds.
▸ Transparent
backgrounds are
indicated with grey and
white-checkered boxes

17. LET’S BUILD A GAME
STEP 4: CHARACTER DESIGN ON PAPER
▸ Start with a rough sketch of
the design
▸ When working with 8 bit,
hair in the main focal
point and requires the
most attention.
▸ Clothing is mainly just
color schemes
▸ Know your main colors
like hair skin and clothing

18. LET’S BUILD A GAME
STEP 4: COLOR PALETTE
▸ Pick your main colors
▸ Skin, Hair, and clothing
▸ Keep it simple
▸ Each color should have 2 or
3 variants for highlights and
shadows
▸ Hair is naturally more
dynamic so using more than
2 colors helps to define the
shapes

19. LET’S BUILD A GAME
STEP 4: DESIGNING A CHARACTER
1. Rough out the hair 2. Give it dimension

20. LET’S BUILD A GAME
STEP 4: DESIGNING A CHARACTER
3. Create clothing base 4. Give it dimension

21. LET’S BUILD A GAME
STEP 4: DESIGNING A CHARACTER
5. Continue the process across the sheet during coffee break

22. LET’S BUILD A GAME
STEP 4: DESIGNING A CHARACTER
6. Add important in-game
elements
7. Export to TIFF and change to
Photoshop

23. LET’S BUILD A GAME
STEP 4: DESIGNING A CHARACTER
8. Create a bigger canvas and space out the sprites

24. LET’S BUILD A GAME
STEP 4: DESIGNING A CHARACTER
9. Line them up with enough space on the sides to add the
flashlight stoplight

25. LET’S BUILD A GAME
STEP 4: DESIGNING A CHARACTER
10.Create the flashlight
A. B. C.

26. LET’S BUILD A GAME
STEP 4: DESIGNING A CHARACTER
11. Continue that process until all the sprites have their own light

27. LET’S BUILD A GAME
STEP 4: DESIGNING A CHARACTER
▸ Download the base character sheet from
the Drive Folder
▸https://goo.gl/fQf2Ty
▸ Note: this character is pulled from online
so you can use it for testing but not in your
actual game
▸ Will need to start from scratch

28. LET’S BUILD A GAME
STEP 4: OPEN CONSTRUCT
▸ Construct 3
▸ Start a new project
▸ Viewport = 500 x 300
▸ Horizontal orientation

29. LET’S BUILD A GAME
STEP 4: OPEN SPRITE BUILDER
▸ Don’t worry about
placement, just begin
▸ Double click in the open
space, add sprite
▸ For characters, import
our base file to edit

30. LET’S BUILD A GAME
STEP 5: ADD A BACKGROUND
▸ Double click and select
‘Tiled Background’
▸ Create it in whatever size,
then click out
▸ Once complete, make the
size the same as the layer
▸ Make this Background,
then add a Layer 1 above

31. LET’S BUILD A GAME
STEP 5: ADD A CHARACTER
▸ Right click the animation frame and select import
frames from strip
▸ Choose 3x4 vertical
▸ Make edits if you want to
▸ Make sure the line around is tight
▸ Select ‘yes’ for loop
▸ Duplicate the default 8 times
▸ Create walk down, left, right, up- delete
unnecessary files
▸ Create stand down, left, right, up- delete
unnecessary files
▸ Default is an additional stand down
▸ Preview animations to make sure they don’t bounce,
may need to adjust the center mark
▸ Click out and rename, ex. MuseumGirlAnimations

32. LET’S BUILD A GAME
STEP 5: ADD A CHARACTER
▸ Create a blank sprite that is the same size
as the sprite (24 x 33)
▸ Name without animations, ex.
MuseumGirl
▸ Pin the animation file to the player
▸ Select add behavior
▸ Go to event sheet and select:
▸ System > On start of layout
▸ Add action > MuseumGirlAnimations
> Pin to MuseumGirl

33. LET’S BUILD A GAME
STEP 5: ADD MOVEMENT
▸ MuseumGirl add behavior 8 direction
▸ Set angle to ‘No’
▸ Directions to ‘4 Directions’
▸ Test the behavior!

34. LET’S BUILD A GAME
STEP 5: MAKE MOVEMENT BETTER

35. LET’S BUILD A GAME
STEP 5: MAKE MOVEMENT BETTER

36. LET’S BUILD A GAME
STEP 5: MAKE A BETTER LEVEL
▸ Let’s create a wall
▸ Double click and create
a sprite
▸ Make it a wall
▸ Add it to the map
▸ Add a behavior > solid
▸ Preview and make sure
the player can’t walk
through

37. LET’S BUILD A GAME
STEP 5: MAKE A BETTER LEVEL
▸ Let’s pick up objects
▸ Create a sprite and put it on
the map
▸ Add an event
▸ On collision with player
> sprite destroyed
▸ Preview to make sure

38. LET’S BUILD A GAME
STEP 5: MAKE A BETTER LEVEL
▸ Let’s make the screen move with the parachuter
▸ Add an event
▸ System > Every Tick >System Scroll to object

39. LET’S BUILD A GAME
STEP 5: MAKE A BETTER LEVEL
▸ eastman.org/filmquest
▸ https://github.com/bonesdontlie/filmquest/tree/gh-pages

40. LET’S BUILD A GAME
STEP 5: MAKE A BETTER LEVEL
▸ Heads Up Display (HUD)
▸ Requires new layer
that isn’t available on
free account
▸ Add global variable
▸ Add action to
painting collision
▸ System > add to
> score = 1

41. LET’S BUILD A GAME
STEP 5: MAKE A BETTER LEVEL
▸ Create paper object
with text
▸ System > every tick
▸ Score set to Score
▸ Pin all the text and
paper elements to the
character

42. LET’S BUILD A GAME
NEXT STEPS
▸ Check out Scirria’s tutorials for Construct and work through
those that will help
▸ Add a home screen, loading screen, and other levels
▸ Add more design elements
▸ To do a lot, you will need to purchase an account
▸ Educational Account $40/year

43. LET’S BUILD A GAME
NEED HELP?
▸ Kate Meyers Emery
▸ @kmeyersemery (ig/tw)
▸ kemery@eastman.org
▸ Jennifer Leigh Aho
▸ @unvalheconcepts (tw)
▸ @unvalhe_concepts (ig)
▸ jennifer.leigh.aho@gmail.com
▸ Want us to help build your game? Contact us!