imgd 2900 digital game design i class 2: thursday 11.01

IMGD 2900Digital Game Design I

Class 2: Thursday 11.01

Today’s topics

Reporting bugsToys!More about PerlenspielAssignment 04Prototyping, 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 propertiesPS.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 color1. 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.comhttp://colorschemedesigner.com/http://colorcombos.com/

Meet the clockFind:

PS.Init = function (){    "use strict“;

    // change to the dimensions you want

    PS.GridSize ( 8, 8 );

    // Put any other init code here};

Meet the clockAdd:

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 clockvar 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-onsDownload / install Firebug 1.9.2b1Download / install Aptana Studio 3

This adds Aptana Debugger to Firefox

Enable JSLint in the Aptana editorGoogle “Aptana JSLint” for instructions

Know the power of the Dark Side

Doug Crockford

Formerly 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 codelooks good

But Uncle Crock does!Clean, consistent, well-commented code is easier to read, debugClean, consistent, well-commented code is more valuable to you,

collaborators and employersMany employers enforce code style

Use a global namespace for allgame variables and functions

Capitalize names of global vars/functionsUse ALL CAPS for constantsUse suggestive var/function namesComment liberally

// Global namespace variablevar G = {

// ConstantsMAX_ZOMBIES: 32,// VariablesZombieCnt: 3, // active zombiesBulletCnt: 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 delineatestatement blocks

if ( !G.WearingArmor )G.HitPoints -= 1;

if ( !G.WearingArmor ) G.HitPoints -= 1;

if ( !G.WearingArmor ){

G.HitPoints -= 1;}

Always use parenthesis todelineate 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 discouragingWell-styled code is a pleasure and

encourages improvementGames are made of codeTake pride in your workmanship

Today’s vocabulary

Puzzle

What is a puzzle?

Play = Superfluous actionToy = Something that elicits playGame = Toy with a rules and a goal

What is a puzzle?

Play = Superfluous actionToy = Something that elicits playGame = Toy with a rules and a goal

Puzzle = A game with a solution

Assignment 04:Prototype a puzzle

Prototype a puzzle with PerlenspielJournal as you design and codePost it before class on MondayBring to Monday’s class

Objective 1:Prototype a puzzle with Perlenspiel

This is a rough pass – don’t polish!Must meet definition of a puzzleMust be for a single playerMust be replayableMust work without breakingMust be self-documentingMust be named

Objective 2:Journal as you design/code

Document your creative processIdeas, code fragments, sketchesJournals will be inspected

Objective 3:Post your puzzle beforeclass on Monday

Put a link on your team web siteMake sure the link starts the puzzleMake sure it runs without crashing

Objective 4:Bring prototype backups to Monday’s class

Use flash drivesMake sure both team members bring it

Questions?

Next class: Monday 11.05Come ready to playtest your puzzle!