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.