Building a JavaScript-Based Game Engine for the Web

19 04 2011

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


Actions

Information

25 responses

19 04 2011
mrPhero

@jack08642qazw You don’t know what you’re talking about

19 04 2011
altu892

they use svg because they use jquery

19 04 2011
D34N6232

FROSTBITE 2.0 FTW!!!!!!!!!!!

19 04 2011
ToXedVirus1

Reminds me of 1999 mmporg games😀
Ultima Online!

19 04 2011
drums4woodstock

great lecture

19 04 2011
developitca

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.

19 04 2011
jack08642qazw

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

19 04 2011
BassPounderX

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

19 04 2011
reshba

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

19 04 2011
pleabargain

@reshba Not all browsers support SVG… ?

19 04 2011
QwertzTV

@LocalLongBorders LOOOL Holy shit😄

19 04 2011
reshba

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

19 04 2011
LocalLongBorders

6:10 that fist has six fingers LOL

19 04 2011
timwintle

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

19 04 2011
folcwine

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

Thanks.

19 04 2011
folcwine

i think this isometric transformation is too better than yours:
-moz-transform-origin: left top;
-webkit-transform-origin: left top;
-moz-transform: rotate(45deg) skew(-15deg, -15deg);
-webkit-transform: rotate(45deg) skew(-15deg, -15deg);

19 04 2011
bloodychan

he said allrighty

19 04 2011
timwintle

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.

19 04 2011
Mongify1

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

19 04 2011
timtallisman

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

19 04 2011
BasiltheBatlord377

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

19 04 2011
cybersalad

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

19 04 2011
spamero2

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

19 04 2011
Monty6Pythons

lol some NPC says ‘The cake is a lie’

19 04 2011
jacob303

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




%d bloggers like this: