Modeling Patterns for JavaScript Browser-Based Games

Modeling Patterns for JavaScript Browser-Based GamesJarodLong Ray ToalLoyola Marymount UniversityLos Angeles, CA USA2011-05-16

Topics Overview of ContributionsChallenges for Browser-Based GamesWhat’s new with JavaScriptPatterns vs. FrameworksContributions in DetailJavaScript and HTML5 Game EnginesSummary

ContributionsDevelopment of JavaScript design patterns specifically for modules and typesNote: patterns, not frameworksPatterns are independent of game engineApplication of these patterns in a 2-D, physics-based, HTML5 gameSurvey of JavaScript game engines

Browser-Based Game IssuesRich domain models OOP was motivated by graphical applicationsGraphics and physics enginesCan mix Canvas and the DOM don’t forget CSS! (esp. CSS3)Full source code visibilityAjaxHigh score lists difficult to implement

JavaScriptThe most popular language for programming the client-side web (competes with Flash and Java)Created in 1996 but only “understood” in mid 2000sRecent AdvancesECMAScript 5V8 and other modern engines (>100x faster)Server-side (e.g., node.js)(BIG FUTURE IN THIS)

JavaScript OverviewArray and object literalsvarx = [3, “true”, 2.2];var point = {lat: 27.95, lon: -140.4};A functional programming language -- closer to Scheme than CmyArray.map(function (x) {return x * x;});data.map(square).filter(isOdd).reduce(plus);Prototypes, not classesvarmyCircle = Object.create(yourCircle);myCircle.color = “rgb(23,100, 122)”;

Software ModelingGames are naturally event-driven and feature an object-oriented architectureModules and TypesCommon types: vector, sprite, fortress, level, weapon, enemy, projectile, …Common modules (singletons): math, world, camera, game, util, ui, input, contact, … How can these be represented in JavaScript?

JavaScript Prototypesvarc = {x: 0, y: 0, radius: 1, color: black};var c1 = Object.create(c);c1.x = 3; c1.color = "green";var c2 = Object.create(c);c1.x = 4; c1.radius = 15;var c3 = Object.create(c);assert(c2.color === "black");The prototype is NOT a "class" object

Shared Behavior in Prototypesvarc = {x: 0, y: 0, radius: 1, color: black, area: function () {return this.radius * Math.PI * Math.PI;}, . . .};Because we don't want separate function copies in each object

Inheritance Inheritance and overriding easy with prototypes

But how to do "super"? Do we care?Implementation ApproachesUse JavaScript's new (pseudo-classical?)Adopt a framework that does classes ("class", "extend", "inherit", "super", …)Dean Edwards' BaseMooToolsMany others . . .Embrace prototypes and use patterns"Frameworks (sort of) change the language"

A Module Pattern<package>.M = (function () {var privatePropertyOrMethod1 = …; …var M = {}; M.publicProperty1 = …; M.publicMethod1 = function (…) {…}; … return M;}());Already familiar to JavaScript professionals(We just prefer avoiding object literals)

Type Pattern<package>.T = (function () {var T = {}; ...T.create = function (…) {vart = Object.create(this); ... return t; } return T;}());Instantiate with: varx = <package>.T.create(…);The "type" object and the prototype are one! Differs from operator new, which equates the type with the constructor (prototype separate)Shared properties and methods go hereAssign theown propertieshere

Root Types<package>.GameObject = (function () {varGameObject = {};GameObject.GameObject = GameObject;GameObject.create = function (id) {varg = Object.create(this);g.id = id; return g; }GameObject.update = function () {alert("Updating game object " + this.id); } return GameObject;}());Self reference will allow multiple levels of "super"Of course we are going to override this on the next slide

Subtypes<package>.Projectile = (function () {var Projectile = Object.create(<package>.GameObject);Projectile.Projectile = Projectile;Projectile.create = function (id, name) {varp = <package>.GameObject.create.call(this, id);p.name = name; return p; }Projectile.update = function () { // override!this.GameObject.update.call(this);alert("Updating projectile " + this.name); } return Projectile;}());Note use of "this" instead of the package name – it shows we are using an ancestor type

Subtypes, Slightly Cleaner<package>.Projectile = (function (supertype) {var Projectile = Object.create(supertype);Projectile.Projectile = Projectile;Projectile.create = function (id, name) {varp = supertype.create.call(this, id);p.name = name; return p; }Projectile.update = function () { // override!supertype.update.call(this);alert("Updating projectile " + this.name); } return Projectile;}(package.GameObject));Or mention an ancestor type directly

How it all LooksPrivate data from closures not shown

Applicationshttp://manicmonkeymadness.googlecode.com

Why is this Useful?No extra scripts to includeNo framework to learn No need to say "new Base" and ".extend""Super" functionality is still available if neededProgrammer can apply the pattern selectivelyIt's real JavaScript Closures and Function.call are hardcoreMaintains prototypal feel, even though class-likeType.create()

JavaScript Game EnginesThe Render EngineImpactAves (Zynga Germany)EffectIsogenicgameQueryRocket Engine (acquired by Disney)See engine lists and comparisons athttps://github.com/bebraw/jswiki/wiki/Game-Enginesandhttp://www.cssgalleries.com/2011/02/the-big-list-of-javascript-game-engines/

SummaryGames benefit from an object-oriented, event-driven architectureMany approaches exist for modeling an OO software architecture in JavaScriptWe presented framework-free, engine independent modeling patternsPatterns were applied in a real HTML5, no-Flash application

Modeling Patterns for JavaScript Browser-Based Games

Recommended

More Related Content

What's hot (17)

Similar to Modeling Patterns for JavaScript Browser-Based Games (20)

More from Ray Toal (7)

Recently uploaded (20)

Modeling Patterns for JavaScript Browser-Based Games