![Page 1: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/1.jpg)
IMGD 2900Digital Game Design I
Class 2: Thursday 11.01
![Page 2: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/2.jpg)
Today’s topics
Reporting bugsToys!More about PerlenspielAssignment 04Prototyping, designing puzzles
![Page 3: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/3.jpg)
Reporting bugs
Always include the exact text of any error messages, either from the Perlenspiel message box, from Aptana or Firefox
![Page 4: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/4.jpg)
Toys!
![Page 5: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/5.jpg)
Perlenspiel 2.2.2
Introduction to more features
![Page 6: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/6.jpg)
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 )
![Page 7: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/7.jpg)
Using PS.ALL
PS.BeadColor ( PS.ALL, 0, PS.COLOR_RED );PS.BeadGlyph ( 0, PS.ALL, “P” );PS.BeadAlpha ( PS.ALL, PS.ALL, 50 );
![Page 8: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/8.jpg)
The setters are also the getters!
var rgb = PS.BeadColor ( x, y, (opt) rgb );var g = PS.BeadGlyph ( x, y, (opt) g );
![Page 9: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/9.jpg)
Using the grid
PS.GridSize ( width, height )PS.GridBGColor ( rgb )PS.GridLineWidth ( width )
![Page 10: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/10.jpg)
Using color1. Use color constants
PS.COLOR_RED;
2. Use PS.MakeRGB ()
PS.MakeRGB ( 255, 0, 0 );
3. Use hexadecimal notation
0xFF0000
![Page 11: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/11.jpg)
Using color well
kuler.adobe.comhttp://colorschemedesigner.com/http://colorcombos.com/
![Page 12: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/12.jpg)
Meet the clockFind:
PS.Init = function (){ "use strict“;
// change to the dimensions you want
PS.GridSize ( 8, 8 );
// Put any other init code here};
![Page 13: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/13.jpg)
Meet the clockAdd:
PS.Init = function (){ "use strict“;
// change to the dimensions you want
PS.GridSize ( 8, 8 );
PS.Clock (60);};
![Page 14: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/14.jpg)
Meet the clock
Find:
PS.Tick = function (){
"use strict";
// Put code here to handle clock ticks};
![Page 15: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/15.jpg)
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);}
};
![Page 16: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/16.jpg)
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
![Page 17: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/17.jpg)
Doug Crockford
Formerly of Lucasfilm GamesCreator of JSLint, JSMin, JSONAuthor of Javascript: The Good PartsThe nanny of Javascript coding style
![Page 18: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/18.jpg)
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
![Page 19: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/19.jpg)
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
};
![Page 20: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/20.jpg)
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 );
};
![Page 21: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/21.jpg)
Always use brackets to delineatestatement blocks
if ( !G.WearingArmor )G.HitPoints -= 1;
if ( !G.WearingArmor ) G.HitPoints -= 1;
if ( !G.WearingArmor ){
G.HitPoints -= 1;}
![Page 22: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/22.jpg)
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!”);
}
![Page 23: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/23.jpg)
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;}
![Page 24: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/24.jpg)
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;
}
![Page 25: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/25.jpg)
About coding style
Sloppy code is discouragingWell-styled code is a pleasure and
encourages improvementGames are made of codeTake pride in your workmanship
![Page 26: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/26.jpg)
Today’s vocabulary
Puzzle
![Page 27: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/27.jpg)
What is a puzzle?
Play = Superfluous actionToy = Something that elicits playGame = Toy with a rules and a goal
![Page 28: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/28.jpg)
What is a puzzle?
Play = Superfluous actionToy = Something that elicits playGame = Toy with a rules and a goal
Puzzle = A game with a solution
![Page 29: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/29.jpg)
Assignment 04:Prototype a puzzle
Prototype a puzzle with PerlenspielJournal as you design and codePost it before class on MondayBring to Monday’s class
![Page 30: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/30.jpg)
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
![Page 31: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/31.jpg)
Objective 2:Journal as you design/code
Document your creative processIdeas, code fragments, sketchesJournals will be inspected
![Page 32: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/32.jpg)
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
![Page 33: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/33.jpg)
Objective 4:Bring prototype backups to Monday’s class
Use flash drivesMake sure both team members bring it
![Page 34: IMGD 2900 Digital Game Design I Class 2: Thursday 11.01](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649db95503460f94aa98e4/html5/thumbnails/34.jpg)
Questions?
Next class: Monday 11.05Come ready to playtest your puzzle!