Modeling Patterns for JavaScript Browser-Based Games

5,478 views

Published on

Published in: Technology, Design
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,478
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Modeling Patterns for JavaScript Browser-Based Games

  1. 1. Modeling Patterns for JavaScript Browser-Based Games<br />JarodLong Ray Toal<br />Loyola Marymount University<br />Los Angeles, CA USA<br />2011-05-16<br />
  2. 2. Topics <br />Overview of Contributions<br />Challenges for Browser-Based Games<br />What’s new with JavaScript<br />Patterns vs. Frameworks<br />Contributions in Detail<br />JavaScript and HTML5 Game Engines<br />Summary<br />
  3. 3. Contributions<br />Development of JavaScript design patterns specifically for modules and types<br />Note: patterns, not frameworks<br />Patterns are independent of game engine<br />Application of these patterns in a 2-D, physics-based, HTML5 game<br />Survey of JavaScript game engines<br />
  4. 4. Browser-Based Game Issues<br />Rich domain models <br />OOP was motivated by graphical applications<br />Graphics and physics engines<br />Can mix Canvas and the DOM <br />don’t forget CSS! (esp. CSS3)<br />Full source code visibility<br />Ajax<br />High score lists difficult to implement<br />
  5. 5. JavaScript<br />The most popular language for programming the client-side web (competes with Flash and Java)<br />Created in 1996 but only “understood” in mid 2000s<br />Recent Advances<br />ECMAScript 5<br />V8 and other modern engines (>100x faster)<br />Server-side (e.g., node.js)<br />(BIG FUTURE IN THIS)<br />
  6. 6. JavaScript Overview<br />Array and object literals<br />varx = [3, “true”, 2.2];<br />var point = {lat: 27.95, lon: -140.4};<br />A functional programming language -- closer to Scheme than C<br />myArray.map(function (x) {return x * x;});<br />data.map(square).filter(isOdd).reduce(plus);<br />Prototypes, not classes<br />varmyCircle = Object.create(yourCircle);<br />myCircle.color = “rgb(23,100, 122)”;<br />
  7. 7. Software Modeling<br />Games are naturally event-driven and feature an object-oriented architecture<br />Modules and Types<br />Common types: vector, sprite, fortress, level, weapon, enemy, projectile, …<br />Common modules (singletons): math, world, camera, game, util, ui, input, contact, …<br /> How can these be represented in JavaScript?<br />
  8. 8. JavaScript Prototypes<br />varc = {<br />x: 0, y: 0, <br /> radius: 1,<br /> color: black<br />};<br />var c1 = Object.create(c);<br />c1.x = 3; c1.color = "green";<br />var c2 = Object.create(c);<br />c1.x = 4; c1.radius = 15;<br />var c3 = Object.create(c);<br />assert(c2.color === "black");<br />The prototype is NOT a "class" object<br />
  9. 9. Shared Behavior in Prototypes<br />varc = {<br />x: 0, y: 0, radius: 1, color: black,<br /> area: function () {return this.radius * Math.PI * Math.PI;},<br /> . . .<br />};<br />Because we don't want separate function copies in each object<br />
  10. 10. Inheritance<br /><ul><li> Inheritance and overriding easy with prototypes
  11. 11. But how to do "super"? Do we care?</li></li></ul><li>Implementation Approaches<br />Use JavaScript's new (pseudo-classical?)<br />Adopt a framework that does classes ("class", "extend", "inherit", "super", …)<br />Dean Edwards' Base<br />MooTools<br />Many others . . .<br />Embrace prototypes and use patterns<br />"Frameworks (sort of) change the language"<br />
  12. 12. A Module Pattern<br /><package>.M = (function () {<br />var privatePropertyOrMethod1 = …;<br /> …<br />var M = {};<br /> M.publicProperty1 = …;<br /> M.publicMethod1 = function (…) {…};<br /> …<br /> return M;<br />}());<br />Already familiar to JavaScript professionals<br />(We just prefer avoiding object literals)<br />
  13. 13. Type Pattern<br /><package>.T = (function () {<br />var T = {};<br /> ...<br />T.create = function (…) {<br />vart = Object.create(this);<br /> ...<br /> return t;<br /> }<br /> return T;<br />}());<br />Instantiate with: varx = <package>.T.create(…);<br />The "type" object and the prototype are one! Differs from operator new, which equates the type with the constructor (prototype separate)<br />Shared properties and methods go here<br />Assign the<br />own properties<br />here<br />
  14. 14. Root Types<br /><package>.GameObject = (function () {<br />varGameObject = {};<br />GameObject.GameObject = GameObject;<br />GameObject.create = function (id) {<br />varg = Object.create(this);<br />g.id = id;<br /> return g;<br /> }<br />GameObject.update = function () {<br />alert("Updating game object " + this.id);<br /> }<br /> return GameObject;<br />}());<br />Self reference will allow multiple levels of "super"<br />Of course we are going to override this on the next slide<br />
  15. 15. Subtypes<br /><package>.Projectile = (function () {<br />var Projectile = Object.create(<package>.GameObject);<br />Projectile.Projectile = Projectile;<br />Projectile.create = function (id, name) {<br />varp = <package>.GameObject.create.call(this, id);<br />p.name = name;<br /> return p;<br /> }<br />Projectile.update = function () { // override!<br />this.GameObject.update.call(this);<br />alert("Updating projectile " + this.name);<br /> } <br /> return Projectile;<br />}());<br />Note use of "this" instead of the package name – it shows we are using an ancestor type<br />
  16. 16. Subtypes, Slightly Cleaner<br /><package>.Projectile = (function (supertype) {<br />var Projectile = Object.create(supertype);<br />Projectile.Projectile = Projectile;<br />Projectile.create = function (id, name) {<br />varp = supertype.create.call(this, id);<br />p.name = name;<br /> return p;<br /> }<br />Projectile.update = function () { // override!<br />supertype.update.call(this);<br />alert("Updating projectile " + this.name);<br /> } <br /> return Projectile;<br />}(package.GameObject));<br />Or mention an ancestor type directly<br />
  17. 17. How it all Looks<br />Private data from closures not shown<br />
  18. 18. Applications<br />http://manicmonkeymadness.googlecode.com<br />
  19. 19. Why is this Useful?<br />No extra scripts to include<br />No framework to learn <br />No need to say "new Base" and ".extend"<br />"Super" functionality is still available if needed<br />Programmer can apply the pattern selectively<br />It's real JavaScript <br />Closures and Function.call are hardcore<br />Maintains prototypal feel, even though class-like<br />Type.create() <br />
  20. 20. JavaScript Game Engines<br />The Render Engine<br />Impact<br />Aves (Zynga Germany)<br />Effect<br />Isogenic<br />gameQuery<br />Rocket Engine (acquired by Disney)<br />See engine lists and comparisons at<br />https://github.com/bebraw/jswiki/wiki/Game-Engines<br />and<br />http://www.cssgalleries.com/2011/02/the-big-list-of-javascript-game-engines/<br />
  21. 21. Summary<br />Games benefit from an object-oriented, event-driven architecture<br />Many approaches exist for modeling an OO software architecture in JavaScript<br />We presented framework-free, engine independent modeling patterns<br />Patterns were applied in a real HTML5, no-Flash application<br />

×