Developing Simulations & Games in Adobe Flash: Challenges & Solutions

Transcription

1 302 Developing Simulations & Games in Adobe Flash: Challenges & Solutions Jon Aleckson & Joe Rheaume, Madison Producings, Inc. and Web Courseworks February 15 & 16, 2007 Produced by New Techniques for Designing and Developing

2 Flash Games Challenges Session Expectations? Actions you can take to improve communications and control scope creep Ideas on how to gain efficiency through parallel development At least one coding technique that will improve your work 2 Page 1

3 Participant Polls 1. Who are you? 2. Rate your Flash experience level 3. Quiz: What is the purpose of the Library Window in Flash? 4. Quiz: You want to reference a MovieClip in your ActionScript code. What do you have to do? 3 What We ll Cover Pre-development: Organizing the Project Defining Roles Brainstorming Activity Blueprinting : Getting it Done Proof of Concept: Is this going to work? Parallel : Will the pieces fit together? Making Changes Easier: Reusable, updateable assets Coding Tips Post-development: There s Never Enough Time! Final Packaging and Organization Project Review & Evaluations Documentation 4 Page 2

4 Game or Simulation? Virtual Anesthesia Machine Food Fight Score Your Pour 5 Game or Simulation? If a game sounds frivolous, call it a simulation. If a simulation sounds too stuffy or expensive, call it a game. - William Horton ELearning by Design Immersive Learning Simulations 6 Page 3

5 Pre-development--Organizing What does pre-development have to do with programming? 7 Our Definition of Roles Pre-development Illustrator/Artist/Animator Flash Programmer Instructional Designer/Blueprinter Writer 8 Page 4

6 Brainstorming Tools Learning Objectives and Content Outline Activity List Benchmarking Include people with different roles! Pre-development 9 Brainstorming Process: Clark Quinn Pre-development Include all players programmers/graphic artists Circulate your criteria for a solution Have your team brainstorm on their own Allow time for ideas to incubate Allow several hours for team meeting Review ISD criteria Do warm up or loosen-up (relate to experience, trip, character) activity Get individual contributions - no value judgments Look for connections between ideas Insist on wild ideas Juxtapose random ideas After all ideas presented, move to select key ideas through evaluation process 10 Page 5

7 Types of Games Personal-response Simulations Branching Story Device Simulations Virtual Machine Trivia Games Quiz Show Arcade Games Twitch Learning Mouse Clicks Interactive Spreadsheets Pre-development 11 Pre-development Poll: How Do You Describe Your Activity Before You Start? 12 Page 6

8 Blueprinting Pre-development This is the MAIN COMMUNICATION TOOL! Serves many purposes Use concept of versions to control scope creep 13 Blueprinting Pre-development 1 2 Score: 3Team Name Opponent Outs: 9 th Inning (title page) Enter Team Name Introduction and Instructions Baseball field scene Start Begin Swing 3.5 Score: Team Name Opponent Outs: Steal a base? Baseball Yes/No field scene Swing Score: 4Team Name Opponent Outs: Baseball question field scene Swing 5 Score: Team Name Opponent Outs: remediation Baseball field scene Swing 6 Score: Team Name Opponent Outs: Final Baseball question field scene 7 Final Score And remediation Play Again 14 Page 7

9 Proof of Concept: Is This Going to Work? 15 Proof of Concept: Why and How? Project needs to be large enough to justify 200 plus hours Context for estimating programming time Idea of how much more functionality can be added - scope control Identify core game functionality Identify complex functionality Example: three stages of prototypes 16 Page 8

10 Proof of Concept: Miller Prototype Queued Actions: Prototype v1 Clicking on a point creates an Action object Contains a location, and target for the action When bartender is not in the middle of an action, game checks the list of actions 17 Proof of Concept: Miller Prototype Contextual Actions: Prototype v4 The Bartender object has a list of what actions are appropriate given the context e.g. Is the glass full or empty? 18 Page 9

11 Proof of Concept: Miller Prototype Core Functionality: Prototype v6 All core game functionality Not all of it finalized No level differentiation Artist is still working on graphics/animation 19 Parallel 20 Page 10

12 Parallel : Naming Conventions Thanks to naming conventions, the same code can be used to zoom in and out of both the forks and the hydraulics. The developer can begin coding using scratch graphics before the artist has finished the animation. 21 Parallel : Object Structure The broken seatbelt and the leaky hydraulics are structured in the same way 22 Page 11

13 Parallel : Managing Scratch Graphics, Audio, Text Programmer can begin programming with placeholder content Use real names for scratch graphics and audio and swap out when real ones are complete Use Latin text for formatting color, fonts, size, etc. 23 Making Edits Easier Changes are inevitable! Plan for changes upfront you will save a lot more time and resources Graphics Internal libraries External libraries Text Code 24 Page 12

14 Using The Internal Library All the foods in this activity share the same tray and label graphics You can alter all the trays by just altering one Sharing graphics also makes your file size smaller 25 Using The External Library Activity 1 Activity 2 External Library Activity 3 26 Page 13

15 Reusing The Library Creating Food Fight was faster because much of the work was just altering graphics in the library 27 Making Edits Easier: XML 9th Inning randomly loads quiz questions from XML <data> <questions> <question value="single"> <text>how many days per week should you get physical activity?</text> <response correct="">a. 3</response> <response correct="">b. 5</response> <response correct="yes">c. 7</response> <feedback_correct>it&apos;s a single base hit!</feedback_correct> <feedback_incorrect>you&apos;re out! Actually, we should be active every day. </feedback_incorrect> </question> 28 Page 14

16 Making Edits Easier: URL Strings Our video player uses a URL String in the HTML that embeds the SWF to load movies, stills, and set other options src="video_player.swf?hivideo=forklift_256. flv&lovideo=forklift_128.flv&audiocontrol=0 &autoplay=0&still=forklift_2.png&lo=128&hi =256" 29 ActionScript Programming Tips Reuse code Understand variable scope Make code easy to find Comment your code Know where to find help 30 Page 15

17 Know Where to Find Help Use Flash Help Find online tutorials and forums Programming Tips: For Your Reference Page 16

18 Reuse Code Programming Tips frozen_pizza.onpress = function(){ frozen_pizza.startdrag(); _global.dragging = frozen_pizza; //..more code here } sliced_carrots.onpress = function(){ sliced_carrots.startdrag(); _global.dragging = sliced_carrots; //..more code here } mixed_vegetables.onpress = function(){ mixed_vegetables.startdrag(); _global.dragging = mixed_vegetables; //..more code here } frozen_pizza.onpress = sliced_carrots.onpress = mixed_vegetables.onpress = function(){ this.startdrag(); _global.dragging = this; //..more code here } Quick and easy to make changes Takes less time to write Might be more computationally efficient 33 Reuse Code Programming Tips //loop through all 100 dragmovie clips and assign functionality for(var i:number = 1; i<=100; i++){ this["dragmovie"+i].onpress = pressfunction; //assign the drag function this["dragmovie"+i].onrelease = releasefunction; //assign the stop dragging function // assign more variables or functions here } function pressfunction(){ startdrag(this); What if you had 100 MovieClips named _global.dragging = this; dragmovie1 through dragmovie100 //..more code here that all need some functions attached } to them? function releasefunction(){ stopdrag(); Is there a way to do this using only a few _global.dragging = undefined; lines of code? //..more code here } 34 Page 17

19 Reuse Code: Tips Programming Tips Use variables instead of hard coded numbers if you might need to make a change later Use Switch blocks instead of long if-else blocks Any time you find yourself writing the same or similar lines of code repeatedly, make a function instead Learn when and how to use ActionScript class files for true OOP. There are many fine tutorials 35 Understand Variable Scope Programming Tips var home:string = "I am from Madison, WI"; function Vegas(){ var whathappens:string = "I went to Quark's Bar"; trace(whathappens); //outputs "I went to Quark's Bar" trace(home); //outputs "I am from Madison, WI" } //will display "undefined" because a variable //defined in a function ceases to exist after the function ends trace(whathappens); trace(home); //outputs "I am from Madison, WI" 36 Page 18

20 Make Code Easy to Find Programming Tips For you and future coders Try to place all or most of your (non OOP) code in the main timeline If you must place code in Buttons or MovieClips make a comment in the main timeline. Say what objects have code in them and what they do Put your code in its own layer, named actions or something similar 37 //Comment Your Code Programming Tips Comment each function you write, explain what it does and which other functions call it Comment variables when you define them. Say what they are used for Explain lines of complicated-looking code Commenting can be fun. Think of it as leaving messages for yourself and others in the future! 38 Page 19

21 //Comment Your Code Programming Tips Using comments as pseudo-code is a great way to help you think through the problem Comment hacks or kludges as such Comment wish lists for features that should be added in the future 39 Poll: What Do You Do Once Project Is Over? 40 Page 20

22 Post-development Packaging Folder Structure Fonts Post-mortem Tasks Documentation Meeting Developers hate to do documentation because it takes time away from development But developers hate it when they have to work on a poorly-documented project! 41 QUESTIONS? Page 21

23 References & Must Reads ELearning by Design by William Horton, 2006 Simulations and the Future of Learning by Clark Aldrich, 2004 Engaging Learning: Designing elearning Simulation Games by Clark N. Quinn, 2005 Rules of Play: Game Design Fundamentals by Katie Salen/Eric Zimmerman, THANK YOU! Jon: Joe: Julie: Page 22