The Beauty of the Web: An Inside Look into Bringing Contre Jour to HTML5Nathan Gonzalez: Lead Developer, Clarity ConsultingMaksym Hyrniv: Owner, Mokus Games

Background 2D Puzzler Released for the iPhone on

August 25, 2011 Also supported on Windows

Phone Critical acclaim includes

“Best Mobile Game of E3” by GamePro and “Best Mobile Game of E3 Finalist” by IGN.

HTML5 version went live October 9, 2012.

www.contrejour.ie

HTML5 / JavaScript Performance

Touch Integration

Graphics

Agenda

Compiled vs Interpreted Languages: The Performance Factor

Performance Intensive Gaming TasksGames require aspects of programming that JavaScript has traditionally been unable to handle with adequate speed:

1. Requires a way to update the game world at regular intervals without wasting cycles.

2. Relies heavily on an object oriented programming style.3. Floating point math is used extensively.4. Creates and destroys many small objects (such as vectors

for math computations) very rapidly.

Compiled Language Benefits Native languages such as C++ and Objective C are extremely

fast because don’t have to be interpreted like a script language and are less dynamic.

Classes can be allocated on the stack, which is less expensive than creating new objects on the heap.

Managed languages such as C# lose some of these benefits, but retain useful features like structs and the ability to do math calculations much faster than JavaScript.

For Contre Jour on Windows Phone, Max had to use object pools and structs to avoid triggering too many garbage collection calls.

Browser Performance DemoDemo

Not All Browsers are Created Equal

Opera 12.1 Firefox 16.02 Chrome 22 Internet Explorer 100

5

10

15

20

25

30

35

40

45

50

55

60

Contre Jour Level 3-10 Peformance Comparison

(Windows 8 Tablet with i5-2467M, Intel HD 3000 Graphics)

The Benefits of IE10 The latest version of Internet Explorer implements some

internal structures to help lower the performance cost of techniques used in game development.

A deep look into the Chakra JavaScript interpreter used by IE can be found at an IE blog written by Andrew Miadowicz.

Highlights: Dynamic profiling allows the compiler to gather information

on what object types functions use and output machine code.

Profiling is also used to generate faster floating point math with less boxing and unboxing.

Reduction in time spent garbage collecting.

requestAnimationFrame() HTML5 introduced the requestAnimationFrame API for

running high speed callbacks. Compared to using other methods such as setInterval to

create an infinite game loop, this method is more efficient because it only calls back when the browser is ready to draw.

Saves cycles on frames that would otherwise be rendered but then not drawn because the browser isn’t ready.

Source and further reading: MSDN

Contre Jour Performance Experience Main performance bottlenecks: drawing and object creation. Drawing performance will be covered in the graphics section. Contre Jour did not create many game objects after the

initial level load. However, it did create a massive amount of vector objects for math calculations.

In an early build 5.2 million vector objects were created in 30 seconds!

The Silver Bullet This is a very important problem to

solve. We can’t let something as simple as object creation be the second most expensive part of our application.

The solution: be lazy! The best solution is to not create vectors at runtime.

Instead, create all the vector objects needed for calculations on the game element’s initialization.

Use these objects with good old pass by reference functions to ensure no new objects are created by the element.

Results After refactoring the game to eliminate as much vector

creation as possible the results over a 30 second span are impressive. We only create a fraction of a percent as many vectors which takes only a few milliseconds.

Less pressure on the garbage collector results in less hiccups during gameplay.

Touch Integration: Methods to Make Handling Touch Easier.

Touch in Mobile ApplicationsTouch on a platform such as Windows Phone or the iPhone is a lot easier to implement than on the web because it is standardized.1. There is only one

interface to interact with touch.

2. Touch coordinates come back in a standard format.

Processing Multiple Touch Input Models Unlike a native platform such as the iPad, for a web game we

need to support multiple types of input (touch and mouse). Some devices (such as Windows 8 tablets) may need to support both types of input.

Also, we need to handle when browsers implement touch differently. IE10 wraps both mouse and touch events in the MSPointer class, while other touch enabled browsers keep mouse and touch events separate and implement touch by the touch event interface.

Lastly, we need a unified way to get the correct touch coordinates from every system that correctly accounts for the scaling done to make the canvas fit on different screen sizes.

Detecting the Touch Interface This code detects which of

the three input possibilities are present on the device and wires up the appropriate events.

Move events are hooked up in the appropriate start handlers.

Each type specific handler processes their touch events and feeds it to the default handler, which adds the touch point to the array of game touches.

Transforming the Touch Coordinates Due to the css transforms

applied to the game canvas to make it fit different size screens and the differences in how browsers give touch coordinates it is essential to find a method that will transform the given touch coordinates to the standard 960x640 screen.

We accomplish this by localizing every touch coordinate to the upper left corner of the canvas and then multiplying it by the inverse css scale of the canvas.

Processing Move Events It is possible that multiple move events

on the same touch may be called in one frame. However, it is wasteful to process all the logic associated with moving a touch event multiple times a frame.

The delta change between same frame touch events will be very small so it isn’t likely to affect the move’s outcome.

Instead, for every touch move event we update the associated touch object with the new touch coordinates and then within the game update we process each touch, which ensures that we won’t double process a move.

Graphics: A Tale of Two Paradigms

Translating Physics into Graphics Before we get into how a snot is drawn, we need to

quickly go over how they are represented in terms of the physics engine.

Each one is made up of several “bodies” connected together with “joints”.

For each body, offset points are calculated that are used as points to create quadratic curves.

Drawing a Snot – OpenGL / DirectX

All that these languages can do is draw triangles. Fortunately they draw triangles very fast.

To draw anti-aliased part of line we need to draw 6 triangles. ABC & ACD filled with solid color. AEB, EBF & 2 others filled with gradient color: vertices A&B solid, vertices E&F transparent.

In a Perfect World

In Reality

Results

The anti-aliasing causes the edges to look blurry.

This is a good look for a game with Contre Jour’s art style.

Drawing a Snot – HTML5 Luckily for us, there is a much

simpler way to implement drawing the snot in HTML5. All we need are the control points calculated from the physics bodies.

Instead of using them to create a bunch of triangles, we can simply feed each set of control and anchor points into the canvas's quadraticCurveTo() method. The resulting path can then be filled to make the solid shape.

Snot Drawing DemoDemo

Drawing the Ground - Physics The ground is also represented in

the physics world by many bodies.

The position of these bodies determines the shape of the ground. When you interact with the ground in the game, you are actually shifting the bodies around which makes a new curve.

Drawing the Ground – OpenGL / DirectX Triangulation (Objective C)

No Triangulation (C#)

Drawing the Ground – HTML5 Not much to talk about from an HTML5 perspective because

we use the same technique to draw the shape of the ground as we do the snot.

Ground Drawing DemoDemo

Shading the Ground – OpenGL / DirectX

Remember – all we have is triangles, no pixel shading.

Dynamically calculate the light angle

Draw the shading with gradient triangles.

Anti-alias the border the same way as described before.

Shading the Ground – HTML5 This was a very tough issue to tackle. Drawing the gradient by subdividing the area into triangles

and applying linear gradients would be extremely slow, without the guarantee that it would look authentic.

We decided to go down a different route that would create a different looking gradient without too much of a performance cost.

Shading the Ground - Cont. The least expensive way to alter

the edge of the ground is to recycle the existing path.

Using that logic, we reused the path created in canvas by the original ground outline to redraw the shape a few extra times with an increasing stroke width and a lighter color.

Gives the appearance of a gradient without having to calculate one for each section of the ground.

Image by Ryan Mott

Graphics Performance Tricks Despite all the optimization done so far, there is still work to

be done. HTML5 drawImage() method is by far the costliest of the app,

over 25-30% of all the game’s cycles are spent on it. Also, drawing the ground is a very expensive task, since one

can be made up of over 100 quadratic curves as well as the multiple strokes to make the gradient.

We must find some way to cut down the expense of rendering the game without altering the look of it too much.

Dividing up Graphics Elements The best way to gain performance while drawing is simply to

draw less. Be lazy! The question is how to do this while keeping the game's graphic fidelity intact.

If you examine a game scene, you will notice that there are many “secondary” elements in the game's background. They help enhance the realism of the world, but aren't necessarily the most important things and the player may or may not be able to interact with them.

If we can cut down on drawing them it will save a lot of time.

Multi Canvas Rendering Instead of rendering everything to one

canvas, we stack two canvases on top of each other.

The foreground canvas is redrawn every frame to make sure the elements it contains have the smoothest movement possible and look the most impressive.

The secondary canvas contains the elements that don't need to be drawn every frame. The elements only draw themselves to the canvas every x frames. However, the game still updates them every frame so they stay in sync.

Image by Ryan Mott

Multi Canvas Rendering DemoDemo

Drawing the Ground Optimized The ground presents a special case. It is very expensive to

draw, so we should definitely try to cut down on how often it is drawn. However, it is also a primary way the user interacts with the game, so we really need it to look good.

Luckily, the ground doesn't change unless it is being manipulated by the user. In the original game, the ground's draw points are only recalculated when the ground is changed, so we extended this idea by making the ground render itself in the same way.

At level creation, each ground body dynamically creates a canvas element and adds it to the page's DOM and draws the initial shape. From then on the canvas in only cleared and redrawn on when the shape of the ground is being changed.

Summary Take performance considerations into mind when developing

intensive applications that use a lot of graphics and or calculations. Don’t make objects!

Plan ahead when integrating touch so that you don’t run into problems where some browsers or screen sizes mess with your application.

HTML5 Canvas has the ability to do a lot of powerful things and has its pros and cons when compared to a low level graphics library.

Build apps on Windows. Discover your new home.

http://msdn.be/apps

THANK YOU