IMGD 2900 Digital Game Design I Class 2: Thursday 11.01

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

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

Toys!

Perlenspiel Introduction to more features

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 )

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

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

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

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

Using color well kuler.adobe.com

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 };

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

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

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); } };

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

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

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

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 };

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 ); };

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; }

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!”); }

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; }

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; }

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

Today’s vocabulary Puzzle

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

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

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

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

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

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

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

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