..to boldly go where no web developer has
                              gone before.




Building a game engine
with jQuery
Why build a game engine?
Aren‘t there enough already?
Game development
Browsergame 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 to...
The game industry
Convenience

Countless tools and
frameworks to choose from
Frameworks can be
extended with more genres
Modularity gives yo...
The browser game industry
Browser games are often grown
hobby projects
Development often copied from app
dev paradigms rather than games
No real tec...
Frameworks
 Few good commercial flash
 frameworks
 No commercial JavaScript
 alternatives
 A couple tiny projects
   most o...
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,
  H...
Additionally...

 Lots of knowledge needed to build sophisticated
 games
   ..but many started it as hobby
 Actual web dev...
Reality without frameworks:




Countless iterations of code!
Sweet!


I have no competition
There‘s high demand
Let‘s rock!
The open web stack
Picking the right technologies
Cross-browser?

 If your engine is platform specific, no need to care
 about cross-browser
   Example: Engine for mobile We...
Don‘t worry about today   Your game won‘t be
                          ready tomorrow!
Pick technologies from
the future  ...
Our pick

 Vanilla HTML (rendering)
 JavaScript (scripting, client + server!)
 Canvas (as tool, not for rendering)
   (mos...
..and of course
Architecture and API Design
What to keep in mind when building the web
Impossibilities

 Genres that can‘t be   Genres that can‘t be
 implemented now, but   implemented for many
 pretty soon:  ...
So what is left?
2D                 2.5D*
     Puzzles         RPG‘s

     Adventure       Strategy

     Board games       turn based

   ...
We chose...
I want...
 Free mouse panning         Pathfinding
 Infinite real-time worlds   Walking into houses
 Non-rectangular objects ...
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 Techniques
Two 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
      ...
Block rendering
Block rendering?
 Directly replace innerHTML with a huge string instead of
 multiple DOM append operations
 Huge performan...
Lazy node linking

 Fixes the main disadvantage of missing references
 After innerHTML has been set, run:
 var elements = ...
Smart rendering
Conservative method
Build <div>‘s and style
them via JavaScript (on      <div
                             style="position...
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:...
Web method

 Everything else is
 rendered through a
 CSS rule
 i.e. model-134
 Includes background,
 margin, padding etc
Delegation
jQuery events and click-through maps
What is event delegation?
 A technique to „forward“ events to implicit listeners
 In web development, usually the followin...
One event to rule them all

 „mousemove“
  Handles position detection, dragging
 „mousedown“
  Handles drag start, clickin...
..and with jQuery?

 With jQuery, it‘s even easier
 jQuery has live/die methods that
   work like bind/unbind
   abstracts...
live/die on objects


                      Yay, I can click on
                      houses!
                      Mh, I ...
Be creative!
Click through maps

Build up a pixel map for each object that tells us where
the transparent pixels are
If transparent, ch...
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 ...
Server-side JavaScript
Bridging the gap
„JavaScript is painful enough already, now you
want me to work with it in the backend as well?“
Why JavaScript?

A single scripting language per project dramatically
speeds up development
Great portions of client side ...
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
Node‘s features

 Google‘s V8 engine running on server
 Server and scripting combined
 Comes with sugar (pretty modules fo...
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 ment...
Show me the video!
http://tinyurl.com/dextrose-aves-engine-sneak
Thanks for your attention!
More at dextrose.com & paulbakaus.com
Rate this talk at http://spkr8.com/t/2986




           ...
Building a game engine with jQuery
Building a game engine with jQuery
Upcoming SlideShare
Loading in...5
×

Building a game engine with jQuery

40,130

Published on

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!

Published in: Technology
3 Comments
35 Likes
Statistics
Notes
  • bad thing that your engine is unavailable to indie devs (((
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • EPIC PRESENTATION!!!!!! :D :D :D :D :D :D :D :D :D * * * * *FIVE STARS * * * * *
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • great ideas about building a game engine with javascript
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
40,130
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
720
Comments
3
Likes
35
Embeds 0
No embeds

No notes for slide

Building a game engine with jQuery

  1. 1. ..to boldly go where no web developer has gone before. Building a game engine with jQuery
  2. 2. Why build a game engine? Aren‘t there enough already?
  3. 3. Game development Browsergame development vs. game industry* * PC/Console game publishers
  4. 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?
  5. 5. The game industry
  6. 6. Convenience Countless tools and frameworks to choose from Frameworks can be extended with more genres Modularity gives you flexible combinations inbetween
  7. 7. The browser game industry
  8. 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. 9. Frameworks Few good commercial flash frameworks No commercial JavaScript alternatives A couple tiny projects most of them concepts most of them dead
  10. 10. Why no frameworks?
  11. 11. Browser game development is pretty young! Game industry has an advantage of ~25 years
  12. 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. 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
  14. 14. Reality without frameworks: Countless iterations of code!
  15. 15. Sweet! I have no competition There‘s high demand Let‘s rock!
  16. 16. The open web stack Picking the right technologies
  17. 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. 18. Don‘t worry about today Your game won‘t be ready tomorrow! Pick technologies from the future Predict wisely
  19. 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
  20. 20. ..and of course
  21. 21. Architecture and API Design What to keep in mind when building the web
  22. 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)
  23. 23. So what is left?
  24. 24. 2D 2.5D* Puzzles RPG‘s Adventure Strategy Board games turn based Card games real time Platformers Simulation Jump & Runs etc. * isometry
  25. 25. We chose...
  26. 26. I want... Free mouse panning Pathfinding Infinite real-time worlds Walking into houses Non-rectangular objects Mashups with normal HTML content Animated characters Sound effects Chat bubbles Scalable viewports Collision detection MMO-ready server
  27. 27. Awesome! Sounds just like the Duke!
  28. 28. Errr... Yes, if we try to develop a classic game engine We‘re aiming for the web though, let‘s cheat!
  29. 29. Advanced Techniques Two examples
  30. 30. Rendering „How do I render 2000 objects in < 50ms?“
  31. 31. Uh uh, obviously I‘ll use Canvas!
  32. 32. 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
  33. 33. Block rendering
  34. 34. 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!
  35. 35. 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
  36. 36. Smart rendering
  37. 37. 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!
  38. 38. Dummy, forgot how to build websites?
  39. 39. 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
  40. 40. Web method Everything else is rendered through a CSS rule i.e. model-134 Includes background, margin, padding etc
  41. 41. Delegation jQuery events and click-through maps
  42. 42. 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
  43. 43. One event to rule them all „mousemove“ Handles position detection, dragging „mousedown“ Handles drag start, clicking „mouseup“ Handles drag stop, clicking
  44. 44. ..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!
  45. 45. live/die on objects Yay, I can click on houses! Mh, I can click on transparency, too.. This kind of sucks!
  46. 46. Be creative!
  47. 47. 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!
  48. 48. Building up those pixel maps is amazingly crappy work!
  49. 49. 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; }
  50. 50. Server-side JavaScript Bridging the gap
  51. 51. „JavaScript is painful enough already, now you want me to work with it in the backend as well?“
  52. 52. 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!
  53. 53. Meet node.js „So sexy it hurts“
  54. 54. „The most revolutionary technology for web developers since jQuery.“ Paul Bakaus
  55. 55. JavaScript in the Browser
  56. 56. JavaScript in node
  57. 57. 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
  58. 58. The great innovation?
  59. 59. Node is completely event- driven. db.query(‘ select..‘, function(result) {});
  60. 60. ? 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!
  61. 61. Show me the video! http://tinyurl.com/dextrose-aves-engine-sneak
  62. 62. 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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×