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!
4. 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?
8. 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
9. Frameworks
Few good commercial flash
frameworks
No commercial JavaScript
alternatives
A couple tiny projects
most of them concepts
most of them dead
12. 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.
13. 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
16. The open web stack
Picking the right technologies
17. 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
18. Don‘t worry about today Your game won‘t be
ready tomorrow!
Pick technologies from
the future Predict wisely
19. 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
22. Impossibilities
Genres that can‘t be Genres that can‘t be
implemented now, but implemented for many
pretty soon: years to come:
Casual 3D games, Next-gen 3D games
simple shooters
WebGL is not
Using WebGL advanced enough (yet)
33. 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
35. 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!
36. 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
38. Conservative method
Build <div>‘s and style
them via JavaScript (on <div
style="position:absolut
the style tag) e; top:122px; left:
145px; z-index:102;
Render them out en background-image:url
bloque through (house_1.png); margin-
innerHTML top:-10px; margin-
left:-10px; background-
position:10px 33px;"></
Ugh, still kind of slow... div>
I want more!
43. 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
44. One event to rule them all
„mousemove“
Handles position detection, dragging
„mousedown“
Handles drag start, clicking
„mouseup“
Handles drag stop, clicking
45. ..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!
46. live/die on objects
Yay, I can click on
houses!
Mh, I can click on
transparency, too..
This kind of sucks!
48. 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!
50. 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;
}
52. „JavaScript is painful enough already, now you
want me to work with it in the backend as well?“
53. Why JavaScript?
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!
58. Node‘s features
Google‘s V8 engine running on server
Server and scripting combined
Comes with sugar (pretty modules for system, servers
etc.)
EcmaScript 5
60. Node is completely event-
driven.
db.query(‘ select..‘, function(result) {});
61.
62. ?
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!
63. Show me the video!
http://tinyurl.com/dextrose-aves-engine-sneak
64. Thanks for your attention!
More at dextrose.com & paulbakaus.com
Rate this talk at http://spkr8.com/t/2986
@pbakaus
We‘re looking for investors and
partners!
Contact us at contact@dextrose.com
for more information.