building a game engine with jquery
DESCRIPTION
This presentation was given at the jQuery conference 2010 in Mountain View and featured the first public premiere of a sneak peek video of our upcoming JavaScript game engine. The video preview can be found here: http://youtu.be/Ol3qQ4CEUTo Enjoy and follow me at @pbakaus on Twitter!TRANSCRIPT
![Page 1: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/1.jpg)
Building a game enginewith jQuery
..to boldly go where no web developer has gone before.
![Page 2: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/2.jpg)
Why build a game engine?Aren‘t there enough already?
![Page 3: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/3.jpg)
Game developmentBrowsergame development vs. game industry** PC/Console game publishers
![Page 4: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/4.jpg)
Same basic questions
What kind of genre for my game?
Singleplayer or multiplayer?
What platform(s) am I targeting?
What tools do I need for development?
How does the game scale?
![Page 5: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/5.jpg)
The game industry
![Page 6: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/6.jpg)
Convenience
Countless tools and frameworks to choose from
Frameworks can be extended with more genres
Modularity gives you flexible combinations inbetween
![Page 7: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/7.jpg)
The browser game industry
![Page 8: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/8.jpg)
Browser games are often grown hobby projects
Development often copied from app dev paradigms rather than games
No real technical standard (i.e. C++)
a lot (no seriously, a lot!) of legacy, custom code
![Page 9: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/9.jpg)
Frameworks
Few good commercial flash frameworks
No commercial JavaScript alternatives
A couple tiny projects
most of them concepts
most of them dead
![Page 10: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/10.jpg)
Why no frameworks?
![Page 11: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/11.jpg)
Browser game development is pretty young!
Game industry has an advantage of ~25 years
![Page 12: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/12.jpg)
Only very recently, we got
powerful enough hardware to run lots of crazy JS
new advanced technologies: CSS3, HTML5
highly optimized rendering engines: Nitro etc.
![Page 13: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/13.jpg)
Additionally...
Lots of knowledge needed to build sophisticated games
..but many started it as hobby
Actual web devs are seldom good game devs – and vice versa
Very few allrounders that know both worlds
![Page 14: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/14.jpg)
Reality without frameworks:
Countless iterations of code!
![Page 15: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/15.jpg)
Sweet!
I have no competition
There‘s high demand
Let‘s rock!
![Page 16: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/16.jpg)
The open web stackPicking the right technologies
![Page 17: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/17.jpg)
Cross-browser?
If your engine is platform specific, no need to care about cross-browser
Example: Engine for mobile WebKit
Pro‘s and con‘s
Limited audience
Extreme development speedup and advantage
![Page 18: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/18.jpg)
Don‘t worry about today
Pick technologies from the future
Your game won‘t be ready tomorrow!
Predict wisely
![Page 19: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/19.jpg)
Our pick
Vanilla HTML (rendering)
JavaScript (scripting, client + server!)
Canvas (as tool, not for rendering)
(mostly) cross-platform via ExCanvas
CSS Transforms
cross-platform via Transformie
![Page 20: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/20.jpg)
..and of course
![Page 21: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/21.jpg)
Architecture and API DesignWhat to keep in mind when building the web
![Page 22: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/22.jpg)
Impossibilities
Genres that can‘t be implemented now, but pretty soon:
Casual 3D games, simple shooters
Using WebGL
Genres that can‘t be implemented for many years to come:
Next-gen 3D games
WebGL is not advanced enough (yet)
![Page 23: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/23.jpg)
So what is left?
![Page 24: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/24.jpg)
Puzzles
Adventure
Board games
Card games
Platformers
Jump & Runs
RPG‘s
Strategy
turn based
real time
Simulation
etc.
2D 2.5D*
* isometry
![Page 25: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/25.jpg)
We chose...
![Page 26: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/26.jpg)
![Page 27: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/27.jpg)
I want...
Free mouse panning
Infinite real-time worlds
Non-rectangular objects
Animated characters
Chat bubbles
Collision detection
Pathfinding
Walking into houses
Mashups with normal HTML content
Sound effects
Scalable viewports
MMO-ready server
![Page 28: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/28.jpg)
Awesome! Sounds just like the Duke!
![Page 29: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/29.jpg)
Errr...
Yes, if we try to develop a classic game engine
We‘re aiming for the web though, let‘s cheat!
![Page 30: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/30.jpg)
Advanced TechniquesTwo examples
![Page 31: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/31.jpg)
Rendering„How do I render 2000 objects in < 50ms?“
![Page 32: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/32.jpg)
Uh uh, obviously I‘ll use Canvas!
![Page 33: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/33.jpg)
Oh noes! Canvas is a lot slower!
Canvas‘ image API is pretty inefficient, as it needs a DOM representation of the image first
Which means if you‘re working with lots of graphics, Canvas is actually way slower than generic HTML
![Page 34: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/34.jpg)
Block rendering
![Page 35: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/35.jpg)
Block rendering?
Directly replace innerHTML with a huge string instead of multiple DOM append operations
Huge performance boost:
Native parsing of HTML engine is really fast
Reflow and Repaint occur only once
Huge disadvantage:
No reference to individual nodes!
![Page 36: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/36.jpg)
Lazy node linking
Fixes the main disadvantage of missing references
After innerHTML has been set, run:
var elements = $(‘ *‘, container);
Now you have a collection of all elements!
Since you know the order of the construction, you can reference back
![Page 37: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/37.jpg)
Smart rendering
![Page 38: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/38.jpg)
Conservative method
Build <div>‘s and style them via JavaScript (on the style tag)
Render them out en bloque through innerHTML
Ugh, still kind of slow...
I want more!
<div style="position:absolute; top:122px; left:145px; z-index:102; background-image:url(house_1.png); margin-top:-10px; margin-left:-10px; background-position:10px 33px;"></div>
![Page 39: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/39.jpg)
Dummy, forgot how to build websites?
![Page 40: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/40.jpg)
Web method
Don‘t ignore the layout layers
expecially not external CSS
Keep the style tag of the <div> Object minimal:
z-index, top, left
![Page 41: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/41.jpg)
Web method
Everything else is rendered through a CSS rule
i.e. model-134
Includes background, margin, padding etc
![Page 42: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/42.jpg)
DelegationjQuery events and click-through maps
![Page 43: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/43.jpg)
What is event delegation?
A technique to „forward“ events to implicit listeners
In web development, usually the following:
Bind an event to the root node except for the actual child element
When an event happens (i.e. click), find out if the target or an ancestor matches the child element
Moves processing efforts to when the event happens, scales really well
![Page 44: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/44.jpg)
One event to rule them all
„mousemove“
Handles position detection, dragging
„mousedown“
Handles drag start, clicking
„mouseup“
Handles drag stop, clicking
![Page 45: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/45.jpg)
..and with jQuery?
With jQuery, it‘s even easier
jQuery has live/die methods that
work like bind/unbind
abstracts event delegation so..
..you don‘t need to worry about it
Sweet!
![Page 46: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/46.jpg)
live/die on objects
Yay, I can click on houses!
Mh, I can click on transparency, too..
This kind of sucks!
![Page 47: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/47.jpg)
Be creative!
![Page 48: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/48.jpg)
Click through maps
Build up a pixel map for each object that tells us where the transparent pixels are
If transparent, check behind until you find a valid target
Checking behind can be done, since you control the viewport, and you know where your elements are
W00t, this fixes our issue!
![Page 49: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/49.jpg)
Building up those pixel maps is amazingly crappy work!
![Page 50: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/50.jpg)
Let Canvas do it!
Canvas can read pixel data from images
Then, we can check if our pixel is in fact transparent
...and save this 0/1 value in a new optimized, smaller array
var clickMap = [];for (var i = 0, n = imageData.length; i < n; i += 4) { var row = Math.floor((i / 4) / width); var col = (i/4) - (row * width); if(!clickMap[row]) clickMap[row] = []; clickMap[row][col] = imageData[i+3] == 0 ? 0 : 1;}
![Page 51: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/51.jpg)
Server-side JavaScriptBridging the gap
![Page 52: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/52.jpg)
„JavaScript is painful enough already, now you want me to work with it in the backend as well?“
![Page 53: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/53.jpg)
A single scripting language per project dramatically speeds up development
Great portions of client side code (i.e. for calculations) can be reused without costs
JavaScript is awesome!
Why JavaScript?
![Page 54: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/54.jpg)
Meet node.js„So sexy it hurts“
![Page 55: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/55.jpg)
„The most revolutionary technology for web developers
since jQuery.“Paul Bakaus
![Page 56: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/56.jpg)
JavaScript in the Browser
![Page 57: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/57.jpg)
JavaScript in node
![Page 58: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/58.jpg)
Google‘s V8 engine running on server
Server and scripting combined
Comes with sugar (pretty modules for system, servers etc.)
EcmaScript 5
Node‘s features
![Page 59: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/59.jpg)
The great innovation?
![Page 60: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/60.jpg)
Node is completely event-driven.
db.query(‘ select..‘, function(result) {});
![Page 61: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/61.jpg)
![Page 62: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/62.jpg)
?
Professional game engine for the web
Commercially licensable
Cross-platform (yes, works on iPhone!)
Comes with all mentioned features (and more)
Currently in alpha Contact us for availability and pricing!
![Page 63: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/63.jpg)
Show me the video!http://tinyurl.com/dextrose-aves-engine-sneak
![Page 64: Building a game engine with jQuery](https://reader036.vdocument.in/reader036/viewer/2022070301/54623f04b1af9f92238b4dfb/html5/thumbnails/64.jpg)
Thanks for your attention!More at dextrose.com & paulbakaus.comRate this talk at http://spkr8.com/t/2986
@pbakaus
We‘re looking for investors and partners!
Contact us at [email protected] for more information.