Modeling Patterns for JavaScript Browser-Based Games

Modeling Patterns for JavaScript Browser-Based Games

• 1.
  Modeling Patterns forJavaScript Browser-Based GamesJarodLong Ray ToalLoyola Marymount UniversityLos Angeles, CA USA2011-05-16
• 2.
  Topics Overview of ContributionsChallengesfor Browser-Based GamesWhat’s new with JavaScriptPatterns vs. FrameworksContributions in DetailJavaScript and HTML5 Game EnginesSummary
• 3.
  ContributionsDevelopment of JavaScriptdesign 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
• 4.
  Browser-Based Game IssuesRichdomain 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
• 5.
  JavaScriptThe most popularlanguage 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)
• 6.
  JavaScript OverviewArray andobject 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)”;
• 7.
  Software ModelingGames arenaturally 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?
• 8.
  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
• 9.
  Shared Behavior inPrototypesvarc = {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
• 10.
  Inheritance Inheritanceand overriding easy with prototypes
• 11.
  Buthow 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"
• 12.
  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)
• 13.
  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
• 14.
  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
• 15.
  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
• 16.
  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
• 17.
  How it allLooksPrivate data from closures not shown
• 18.
  Applicationshttp://manicmonkeymadness.googlecode.com
• 19.
  Why is thisUseful?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()
• 20.
  JavaScript Game EnginesTheRender 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/
• 21.
  SummaryGames benefit froman 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