Building a JavaScript-Based Game Engine for the Web

19042011

Google Tech Talk June 11, 2010 ABSTRACT Presented by Paul Bakaus. There are many professional game engines out there for consoles, PCs, and mobile handhelds. However, there is one big empty gap, even in 2010: Not a single game engine targets desktop and mobile browsers natively without the use of plugins. In this session, Paul will talk about the challenges of building a pure browser-based gaming engine, how web programming concepts like event-driven architecture need to be considered, and what it means to fully utilize the open web stack—HTML5, client- and server-side JavaScript, external Stylesheets, server-side JavaScript and, of course, Canvas—to squeeze every millisecond of rendering time. We will go into the details of our own upcoming Aves Engine for isometric real-time games and will give you a very solid idea of what needs to be done to build graphically rich, real-time, full featured games for the web. Paul Bakaus is the CTO of the Germany-based startup Dextrose AG, and his corporate work mostly focuses on UX, UI and tricky JavaScript challenges. He is best known for creating jQuery UI, the popular official UI framework for jQuery, where he was the driving force behind many of its plugins.Video Rating: 4 / 5

SVG has poor support on mobile devices. You shouldn’t base a tech assessment off the absolute current version of something unless it has aggressive auto-update (like Chrome). iOS didn’t have SVG until 4, and Android started supporting it in 2.2.

19042011

jack08642qazw(04:27:41) :

I know they based this game engine off html css and javascript but i wonder if they have ever heard of php because you could do all this stuff they were talking about a lot easier using php something thats close anough to what they were talking about that i can think of is called ikariam and another one is called battledawn but still if they also used php they could of done all of this a lot faster and easier

19042011

BassPounderX(05:03:25) :

crytek started over LOL they made cryengine 3 and used it for crysis 2

19042011

reshba(05:41:11) :

@pleabargain I think that SVG is more widely supported, even in mobile browsers (i think the latest version of android supports SVG). But I think that it does poorly when doing large complex animations. That maybe their reason to use canvas.

19042011

pleabargain(06:18:59) :

@reshba Not all browsers support SVG… ?

19042011

QwertzTV(06:56:46) :

@LocalLongBorders LOOOL Holy shit XD

19042011

reshba(07:28:24) :

What is wrong with using SVG to render games on the browser?

19042011

LocalLongBorders(07:40:32) :

6:10 that fist has six fingers LOL

19042011

timwintle(08:00:50) :

@folcwine No, I’m talking about loading sprite sheets to a different graphics context first (and scaling them etc before that). That avoids all the extra memory overhead from javascript image objects that the speaker mentioned. It also means the graphics should already be in the right format and can just be blitted to the main canvas displayed.

19042011

folcwine(08:46:26) :

@timwintle You are talking about double-buffering in, for example, 3D games with opengl? But… now with canvas.

I don’t believe the argument about canvas elements. There’s no reason to hold an Image instance for each image at all – simply blit all images to a second canvas from the start, and use that as a sprite sheet, before deleting your reference to the images (and freeing RAM).

Sometimes i think nobody remembers how to do 2d games efficiently any more – I’ve seen lots of reports about how slow canvas apparently is, but they’ve all been trying to do things in a very inefficient manner.

19042011

Mongify1(11:05:03) :

SHIT!
i was gonna watch this befor i saw: 48:11… -.-

19042011

timtallisman(11:26:49) :

@spamero2 Waiiittt :], Is there a designer talking :]?

19042011

BasiltheBatlord377(12:00:13) :

@cwolves read the disclaimer at the begginning. Don’t take this alll personally.

19042011

cybersalad(12:18:08) :

Wow, JS game dev sounds like a complete cluster-f. But Dextrose got bought by Zynga before anyone could try out their engine.

19042011

spamero2(12:27:15) :

pro tip: don’t use dark blue font on black background -.-

19042011

Monty6Pythons(12:43:43) :

lol some NPC says ‘The cake is a lie’

19042011

jacob303(13:34:57) :

wow, someone else is making isometric game demos in javascript, look for werewolf soon