IMGD 2900 Digital Game Design I

IMGD 2900Digital 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 2.2.2 • 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 http://colorschemedesigner.com/ http://colorcombos.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 / installAptana 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 CrockfordFormerly of Lucasfilm GamesCreator of JSLint, JSMin, JSONAuthor of Javascript: The Good PartsThe 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 usebrackets 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 beforeclass 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 11.05 Come ready to playtest your puzzle!

IMGD 2900 Digital Game Design I