Building a game engine with jQuery

..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 ﬂexible 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 ﬂash 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 speciﬁc, 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 Pathﬁnding Inﬁnite 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 inefﬁcient, as it needs a DOM representation of the image ﬁrst 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 Reﬂow 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), ﬁnd 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 ﬁnd a valid target Checking behind can be done, since you control the viewport, and you know where your elements are W00t, this ﬁxes 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.

http://marcuswelz.com	585
http://www.slideshare.net	248
http://chalchicha.es	163
http://paper.li	26
http://hapztron.wordpress.com	14
http://www.brijj.com	7
http://u-sync.blogspot.com	7
http://www.twylah.com	3
http://all-apk.blogspot.com	1
http://translate.googleusercontent.com	1
http://webcache.googleusercontent.com	1
http://twittertim.es	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
http://isearch.avg.com	1

Building a game engine with jQuery

by Paul Bakaus on Apr 29, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

19 Embeds 1,064

Statistics

Building a game engine with jQuery — Presentation Transcript