O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

MW18 Workshop: No Cheat Codes Needed: We Built A Digital Game For A Museum And You Can, Too!

68 visualizações

Publicada em

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.

Publicada em: Educação
  • Seja o primeiro a comentar

MW18 Workshop: No Cheat Codes Needed: We Built A Digital Game For A Museum And You Can, Too!

  1. 1. LET’S BUILD A VIDEO GAME KATE MEYERS EMERY, PHD, GEORGE EASTMAN MUSEUM @KMEYERSEMERY JENNIFER LEIGH AHO, UNVALHE CONCEPT @UNVALHECONCEPT
  2. 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. 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. 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. 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. 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. 7. LET’S BUILD A GAME STEP 1: ALL THE ELEMENTS OF A GAME ▸ Time limit ▸ Environmental factors ▸ Decision making
  8. 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. 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. 10. LET’S BUILD A GAME STEP 2: LEARNING GOALS ▸ Why are you creating this game? ▸ How does it relate to the exhibition?
  11. 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. 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. 13. LET’S BUILD A GAME STEP 4: DESIGN ELEMENTS ▸ Background/Flooring, Walls, Title Screens
  14. 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. 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. 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. 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. 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. 19. LET’S BUILD A GAME STEP 4: DESIGNING A CHARACTER 1. Rough out the hair 2. Give it dimension
  20. 20. LET’S BUILD A GAME STEP 4: DESIGNING A CHARACTER 3. Create clothing base 4. Give it dimension
  21. 21. LET’S BUILD A GAME STEP 4: DESIGNING A CHARACTER 5. Continue the process across the sheet during coffee break
  22. 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. 23. LET’S BUILD A GAME STEP 4: DESIGNING A CHARACTER 8. Create a bigger canvas and space out the sprites
  24. 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. 25. LET’S BUILD A GAME STEP 4: DESIGNING A CHARACTER 10.Create the flashlight A. B. C.
  26. 26. LET’S BUILD A GAME STEP 4: DESIGNING A CHARACTER 11. Continue that process until all the sprites have their own light
  27. 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. 28. LET’S BUILD A GAME STEP 4: OPEN CONSTRUCT ▸ Construct 3 ▸ Start a new project ▸ Viewport = 500 x 300 ▸ Horizontal orientation
  29. 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. 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. 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. 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. 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. 34. LET’S BUILD A GAME STEP 5: MAKE MOVEMENT BETTER
  35. 35. LET’S BUILD A GAME STEP 5: MAKE MOVEMENT BETTER
  36. 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. 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. 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. 39. LET’S BUILD A GAME STEP 5: MAKE A BETTER LEVEL ▸ eastman.org/filmquest ▸ https://github.com/bonesdontlie/filmquest/tree/gh-pages
  40. 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. 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. 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. 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!

×