1. IMGD 2900 Digital Game Design I Class 2: Thursday 11.01

2. Today’s topics Reporting bugs Toys! More about Perlenspiel Assignment 04 Prototyping, designing puzzles

3. Reporting bugs Always include the exact text of any error messages, either from the Perlenspiel message box, from Aptana or Firefox

4. Toys!

5. Perlenspiel 2.2.2 Introduction to more features

6. Other bead properties PS.BeadColor ( x, y, rgb ) PS.BeadGlyph ( x, y, glyph ) PS.BeadShow ( x, y, flag ) PS.BeadAlpha ( x, y, alpha ) PS.BeadBorderShow ( x, y, flag ) PS.BeadBorderColor ( x, y, rgb ) PS.BeadBorderAlpha ( x, y, alpha ) PS.BeadGlyphColor ( x, y, rgb ) PS.BeadFlash ( x, y, flag ) PS.BeadFlashColor ( x, y, rgb ) PS.BeadData ( x, y, data ) PS.BeadAudioFile ( x, y, audio ) PS.BeadAudioVolume ( x, y, volume ) PS.BeadAudioLoop ( x, y, flag ) PS.BeadFunction ( x, y, f )

7. Using PS.ALL PS.BeadColor ( PS.ALL, 0, PS.COLOR_RED ); PS.BeadGlyph ( 0, PS.ALL, “P” ); PS.BeadAlpha ( PS.ALL, PS.ALL, 50 );

8. The setters are also the getters! var rgb = PS.BeadColor ( x, y, (opt) rgb ); var g = PS.BeadGlyph ( x, y, (opt) g );

9. Using the grid PS.GridSize ( width, height ) PS.GridBGColor ( rgb ) PS.GridLineWidth ( width )

10. Using color 1. Use color constants PS.COLOR_RED; 2. Use PS.MakeRGB () PS.MakeRGB ( 255, 0, 0 ); 3. Use hexadecimal notation 0xFF0000

11. Using color well kuler.adobe.com http://colorschemedesigner.com/ http://colorcombos.com/

12. Meet the clock Find: PS.Init = function () { "use strict“; // change to the dimensions you want PS.GridSize ( 8, 8 ); // Put any other init code here };

13. Meet the clock Add: PS.Init = function () { "use strict“; // change to the dimensions you want PS.GridSize ( 8, 8 ); PS.Clock (60); };

14. Meet the clock Find: PS.Tick = function () { "use strict"; // Put code here to handle clock ticks };

15. Meet the clock var Count = 6; PS.Tick = function () { "use strict"; Count -= 1; if ( Count < 1 ) { PS.Clock(0); PS.StatusText( "Liftoff!" ); } else { PS.StatusText("Count: " + Count); } };

16. Using Aptana Studio Download and install latest version of Mozilla Firefox (16.0.2) Disable auto-update of Firefox add-ons Download / install Firebug 1.9.2b1 Download / install Aptana Studio 3 This adds Aptana Debugger to Firefox Enable JSLint in the Aptana editor Google “Aptana JSLint” for instructions Know the power of the Dark Side

17. Doug Crockford Formerly of Lucasfilm Games Creator of JSLint, JSMin, JSON Author of Javascript: The Good Parts The nanny of Javascript coding style

18. About coding style Compiler doesn’t care if your code looks good But Uncle Crock does! Clean, consistent, well-commented code is easier to read, debug Clean, consistent, well-commented code is more valuable to you, collaborators and employers Many employers enforce code style

19. Use a global namespace for all game variables and functions Capitalize names of global vars/functions Use ALL CAPS for constants Use suggestive var/function names Comment liberally // Global namespace variable var G = { // Constants MAX_ZOMBIES: 32, // Variables ZombieCnt: 3, // active zombies BulletCnt: 11 // bullets left };

20. Choose a bracketing style and use it consistently if ( G.Foo > 31 ) { PS.StatusText( “Out of bullets!” ); } if ( G.Foo > 31 ) { PS.StatusText( “Out of bullets!” ); } G.KillRobot = function ( ) { G.Score += 1; PS.StatusText( “Score: “ + G.Score ); };

21. Always use brackets to delineate statement blocks if ( !G.WearingArmor ) G.HitPoints -= 1; if ( !G.WearingArmor ) G.HitPoints -= 1; if ( !G.WearingArmor ) { G.HitPoints -= 1; }

22. Always use parenthesis to delineate multiple conditions if ( G.BulletCnt < x - 1 && !G.AmmoWarned ) { G.AmmoWarned = true; PS.StatusText(“Out of bullets!”); } if ( (G.BulletCnt < (x – 1)) && !G.AmmoWarned ) { G.AmmoWarned = true; PS.StatusText(“Out of bullets!”); }

23. Keep all local variable declarations at the top of a function definition if ( hp < 1 ) { var dead = true; } var dead; if ( hp < 1 ) { var dead = true; }

24. Don’t use ++ or -- syntax += and -= are more explicit and easier to change while ( i < len ) { G.BlowAwayZombie(i); i++; } while ( i < len ) { G.BlowAwayZombie(i); i += 1; }

25. About coding style Sloppy code is discouraging Well-styled code is a pleasure and encourages improvement Games are made of code Take pride in your workmanship

26. Today’s vocabulary Puzzle

27. What is a puzzle? Play = Superfluous action Toy = Something that elicits play Game = Toy with a rules and a goal

28. What is a puzzle? Play = Superfluous action Toy = Something that elicits play Game = Toy with a rules and a goal Puzzle = A game with a solution

29. Assignment 04: Prototype a puzzle Prototype a puzzle with Perlenspiel Journal as you design and code Post it before class on Monday Bring to Monday’s class

30. Objective 1: Prototype a puzzle with Perlenspiel This is a rough pass – don’t polish! Must meet definition of a puzzle Must be for a single player Must be replayable Must work without breaking Must be self-documenting Must be named

31. Objective 2: Journal as you design/code Document your creative process Ideas, code fragments, sketches Journals will be inspected

32. Objective 3: Post your puzzle before class on Monday Put a link on your team web site Make sure the link starts the puzzle Make sure it runs without crashing

33. Objective 4: Bring prototype backups to Monday’s class Use flash drives Make sure both team members bring it

34. Questions? Next class: Monday 11.05 Come ready to playtest your puzzle!