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

Building a game engine with jQuery

on

  • 44,498 views

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. ...

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!

Statistics

Views

Total Views
44,498
Views on SlideShare
42,547
Embed Views
1,951

Actions

Likes
35
Downloads
703
Comments
3

24 Embeds 1,951

http://marcuswelz.com 1277
http://chalchicha.es 317
http://www.slideshare.net 248
http://paper.li 26
http://cajunwebsite.com 19
http://hapztron.wordpress.com 14
http://www.linkedin.com 9
http://u-sync.blogspot.com 8
http://u-sync.blogspot.kr 8
http://www.brijj.com 7
http://www.twylah.com 4
http://translate.googleusercontent.com 2
http://isearch.avg.com 1
http://131.253.14.66 1
http://twittertim.es 1
http://all-apk.blogspot.com 1
http://webcache.googleusercontent.com 1
http://clubpenguinworldwide.com 1
http://chalchicha.com 1
https://hapztron.wordpress.com 1
http://www.weebly.com 1
http://www.lmodules.com 1
http://www.ianlewis.org 1
https://duckduckgo.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • bad thing that your engine is unavailable to indie devs (((
    Are you sure you want to
    Your message goes here
    Processing…
  • EPIC PRESENTATION!!!!!! :D :D :D :D :D :D :D :D :D * * * * *FIVE STARS * * * * *
    Are you sure you want to
    Your message goes here
    Processing…
  • great ideas about building a game engine with javascript
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Building a game engine with jQuery Building a game engine with jQuery Presentation Transcript

  • ..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 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 stack Picking 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 Your game won‘t be ready tomorrow! Pick technologies from the future 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 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: years to come: Casual 3D games, Next-gen 3D games simple shooters WebGL is not Using WebGL advanced enough (yet)
  • So what is left?
  • 2D 2.5D* Puzzles RPG‘s Adventure Strategy Board games turn based Card games real time Platformers Simulation Jump & Runs etc. * isometry
  • We chose...
  • 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
  • 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 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 <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!
  • 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
  • Delegation jQuery 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 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 code (i.e. for calculations) can be reused without costs JavaScript is awesome!
  • 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 for system, servers etc.) EcmaScript 5
  • 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.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.