Download - Building a game engine with jQuery
Building a game enginewith jQuery
..to boldly go where no web developer has gone before.
Why build a game engine?Aren‘t there enough already?
Game developmentBrowsergame development vs. game industry** PC/Console game publishers
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?
The game industry
Convenience
Countless tools and frameworks to choose from
Frameworks can be extended with more genres
Modularity gives you flexible combinations inbetween
The browser game industry
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
Frameworks
Few good commercial flash frameworks
No commercial JavaScript alternatives
A couple tiny projects
most of them concepts
most of them dead
Why no frameworks?
Browser game development is pretty young!
Game industry has an advantage of ~25 years
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.
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
Reality without frameworks:
Countless iterations of code!
Sweet!
I have no competition
There‘s high demand
Let‘s rock!
The open web stackPicking the right technologies
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
Don‘t worry about today
Pick technologies from the future
Your game won‘t be ready tomorrow!
Predict wisely
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
..and of course
Architecture and API DesignWhat to keep in mind when building the web
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)
So what is left?
Puzzles
Adventure
Board games
Card games
Platformers
Jump & Runs
RPG‘s
Strategy
turn based
real time
Simulation
etc.
2D 2.5D*
* isometry
We chose...
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
Awesome! Sounds just like the Duke!
Errr...
Yes, if we try to develop a classic game engine
We‘re aiming for the web though, let‘s cheat!
Advanced TechniquesTwo examples
Rendering„How do I render 2000 objects in < 50ms?“
Uh uh, obviously I‘ll use Canvas!
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
Block rendering
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!
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
Smart rendering
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>
Dummy, forgot how to build websites?
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
Web method
Everything else is rendered through a CSS rule
i.e. model-134
Includes background, margin, padding etc
DelegationjQuery events and click-through maps
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
One event to rule them all
„mousemove“
Handles position detection, dragging
„mousedown“
Handles drag start, clicking
„mouseup“
Handles drag stop, clicking
..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!
live/die on objects
Yay, I can click on houses!
Mh, I can click on transparency, too..
This kind of sucks!
Be creative!
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!
Building up those pixel maps is amazingly crappy work!
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;}
Server-side JavaScriptBridging the gap
„JavaScript is painful enough already, now you want me to work with it in the backend as well?“
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?
Meet node.js„So sexy it hurts“
„The most revolutionary technology for web developers
since jQuery.“Paul Bakaus
JavaScript in the Browser
JavaScript in node
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
The great innovation?
Node is completely event-driven.
db.query(‘ select..‘, function(result) {});
?
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!
Show me the video!http://tinyurl.com/dextrose-aves-engine-sneak
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.