Building a JavaScript-Based Game Engine for the Web

[KnolanCross]

Javascript is as fast as c?

Ok, i am stopping this here.

[NeroSNT]

in the backend javascript is almost as fast as c? wait what ?

[alehander42]

@cminusminus1 youtube com slash html5 and you watch it in html5.

[CDSNamaghi]

thats good

[MateiAlexandruBogdan]

Remind me never to have idiot background screaming kids of doom!

[flowewritharoma]

jQuery is cool and easy.so we must study this object language.

[casiothestrong]

38:47 Youtube translation fail, Harbour Hotel.... It's Habbo.

[saaawa]

He says "right" too many times. It is annoying.

[Ioganstone]

@saaawa at least its a condensed version of "is it right?"

[dragonzball24]

this video is very easy to masturbate to

[monkeyvonspencer]

The search for AwesomeCrazyDude's comment begins

[raskec1]

canvasrider com has very good engine in js

[GameEnginesAreGay]

Game engines are a pain in the ass.

I've tried others like Unity, DirectX Studio, GameStudio... the list goes on. The bottom line is that programming your own engine is the best way to go.

If the engine is very fast and flexible, chances are you'll have to suffer from no documentation.

Writing your own version of something that "acts" as an engine is way less gay than writing something gay like an engine, or using engines that bring not enough help.

Write games raw.

-Anti-Engine Team.

[cb2198]

Lol at "the Duke".

[LennyOyea]

Watch youtube video, learning java script*

[Jasperfritse]

I got here by Minecraft.

[AwesomeCrazyDude]

BORING>>>>>>

[agrs700]

@AwesomeCrazyDude You are clearly an idiot

[MadWizard777]

Did I build a javascript gameEngine? Yes. Did I ever release it? No.

[cminusminus1]

Like praising JS and HTML5 on youtube in a Flash movie!

True hypocrisy!

[erickpatrick1988]

@cminusminus1 Not if you played it by HTML5 player =)

[1337knarF]

@cminusminus1: see → youtube /html5 ...

[beppo05]

@cminusminus1 Youtube supports HTML5 as well.

[BleuShan]

@cminusminus1 well, it's available in html 5 if you want...

[Nyocurio]

@cminusminus1 watching this in html5 right now

[zc456]

@cminusminus1

It's not like they had choice. YouTube was around before HTML5. Google is, however, testing a new HTML5 player that you can try out right now.

[saaawa]

@cminusminus1 Youtube is not necessarily Flash. Flash is just one of the options among which you can access youtube.

[RedofYellow]

@saaawa The videos are played back using Flash. All though recently google are trying to move to HTML5.

[JohannLau]

@cminusminus1 you're the weakest link... go to youtube com html5 and step into the light ;)

[DoomedYouth666]

@JohannLau xDDD nice one. I ran the beta video player the day it came out. How cool am I? :PP

[ATOGAMESJ]

@cminusminus1 Nerd.

[suleymanmanadigital]

@cminusminus1 Woooww we have a badass here.

[6580006247]

As I suspected Javascript programmers are morons. You can create games with Flash... and you don't need premium to upload long duration videos.

[TheYeomanDroid]

Ironically. Won't work on a Chromebook. :-D

[MrRobert422]

Interesting

[SuperBader1980]

how de fuck did u make a video of 49 minute?!

[camarenalove]

@SuperBader1980 premium youtube account

[hunterslolvideos]

@camarenalove premium i have a 58 minute vid im not pre

[bellicjr]

@SuperBader1980 It is a Google Video, Google owns Youtube...

[444004541]

i really dont feel .like watching a 58 minute video

[NerdBryant64]

it didnt start till 40:53

[callepro]

Unity 3D supports web players, if you wanna make a game, use it.

[herbg3]

this guy says a couple of things that are incorrect. first, he says there are no people who do web and games. not true. myself, Zynga, processingjs. Secondly, he says you cannot incorporate javascript into flash -- not true, JS hooks exist and are built around the video players on this very website. plus, you can use JS to overlay flash applications. so, two strikes.

[baozer900]

DAMN! 48 Minutes! WTF! I never knew you could go that long!

[D34N6232]

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

[ToXedVirus1]

Reminds me of 1999 mmporg games :D

Ultima Online!

[drums4woodstock]

great lecture

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

[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

[mrPhero]

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

[BassPounderX]

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

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

[reshba]

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

[LocalLongBorders]

6:10 that fist has six fingers LOL

[QwertzTV]

@LocalLongBorders LOOOL Holy shit XD

[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);

[bloodychan]

he said allrighty

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

[folcwine]

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

Thanks.

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

[Mongify1]

SHIT!

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

[cybersalad]

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

[spamero2]

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

[timtallisman]

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

[jacob303]

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

[Scarabus82]

Browser games will never be fullscreen. Reason: ads.

[DaFuseBomb]

@Scarabus82 true, even if you look at runescape, if you want completely full screen, you need to be a member which costs money

[617jorge]

Cool

[wangjulia]

node.js

[killerpacdot]

Great. Two big hinderences for me have been the difficulty and the publishing. JavaScript should handle both nicely.

[0000000rel]

Feels like a big mess to me...

[lonnmaj15]

@Thecashflowman it is a new feature of HTML5

[wilfscorner]

Thanks Paul. This introduces the concept of pixel transparency to me using Canvas. Something I need to help with collision detection in my games. Just now I have sprites colliding in code but not visually.

[barisusakli]

Paul is giving divs an id and referencing them with those ids in javascript an option? Or is it too slow when you have lots of divs on the screen? Is referencing elements with $(" *",container) the only way?

[iferio]

Get a life.

[MrManuelNoriega]

Crappy graphics and no audio? I wanna have it!

[mike73340]

HTML5 games = future. Flash games = past

[macoronicheez]

@mike73340 html games are fucking shit :L now that flash can make iphone and android apps means its never gonna die

[MonsuerLePlague]

@macoronicheez Actually AIR via flash is horribly slow. lots of overhead. There are a lot of 3rd party tools that allow you to compile HTML5/CSS3/JS via Webkit to iOS and Android ( and other mobile devices ). The performance generally tends to be a lot better.

[DaVince21]

@macoronicheez Too bad Flash games are just as fucking shit.

[StoukiStudio]

@mike73340 I dare you to name one great HTML5 game for ten great Flash Games issued in 2011

[dncounty]

@StoukiStudio Angry Birds. :) It's among the many, many games that Google now has in their Google Plus (Google+) games section.

[Onyxagargaryll]

You mention you have a pixel based transparency check for clicked pngs. Now I'm wondering what you do about semi-transparent pixels or transparent pixels within the object, e.g. if I have a house with an inner courtyard and I want it to be clickable as well? Further I'd love to know why you didn't dynamically build image maps, i.e. why you've chosen this "pixel transparency detection" way.

[pbprojects]

@Onyxagargaryll I'm simply checking for all complete transparent pixels in an image right now, regardless of their position, so a courtyard works. What do you mean by dynamically building the map? Isn't this dynamic enough? :)

[Onyxagargaryll]

@pbprojects Thanks for your answer! What about semi-transparence, like a street light with a wide glow?

According to your answer a courtyard would not work, since I want it to be clickable, though it's transparent.

Hehe it is :) I was just interested because I can't see the advantage of your pixel wise way. Why did you implement something proprietary instead of the already existing "map area" image maps? (since in case of hover effects you'd have to constantly check your immense pixel array)

[pbprojects]

@Onyxagargaryll semi-transparence is right now taken as non-transparent, thus clickable. Courtyard would right now not work, you're right :) if you'd use HTML image maps, the event would still not blend-through to the image below I think, to i.e. hover a house behind another house. Anyway, a work in progress!

[Onyxagargaryll]

@pbprojects Thanks again for the quick answer

Sure it is - an area shape can take any form and size, and its anchors are its edge coordinates. Having several such shapes laying on each other is very well possible. And in case you need all hovered elements (i.e. a tree completely covered by a big building) you can work with the coordinates.

Simply another idea ofc :)

There's an example in my channel of it, and don't hesitate to contact me if you want to see the realtime example

Thanks for all!

[ThreeFatSlags]

Excellent talk! I find it amazing that drawing thousands of divs in a string and re-parsing the whole DOM is quicker than pixel-bashing a single canvas, but if that's what your experiments show then I have to believe it! I'm playing around with making an isometric RTS engine (like Command and Conquer) using YUI3 and canvas and I have to agree that the rendering time can be painfully slow for large canvases.

[DevelX666]

@ThreeFatSlags Do you have any demo or a proof-of-concept? I have been thinking a long long time about creating a browser-based online RTS in C&C style like you've described (but without any framework to increase the performance) so I may give you a hand if you would like to cooperate with me.

[boukeversteegh]

Great talk. I have done some experiments using an Image Map overlay with polygon's that determine the clickable area of an object, and it did the job pretty well. I was able to build a very simple isometric engine, with clickable tiles and scrollable view this way. I haven't compared the performance with an array based solution, but it was as fast as normal DOM click events.

[davitodude]

Steve Jobs is a n00b. :p

[davitodude]

FLASH SUCKS ASS

[sin331]

@davitodude steve jobs sucks

[MonsuerLePlague]

@davitodude why

[cwolves]

@pbprojects You're right that you need a DOM image to render them to canvas, but it doesn't need to be IN the DOM to render it to canvas, just in memory. Further, you can much more efficiently use sprites since you're not taking any performance hit for having a larger image in DOM, only for the initial drawImage call (and the performance hit here is small). This ultimately results in a single DOM element for the entire game and you're only limited by the drawImage speed.

[mama95962]

what cwolves said. use canvas, this messing with the dom tree to get imgs... not worth it.

[cwolves]

I've done this for a company called moblyng and you've come to all the wrong conclusions.

First, canvas is vastly vaster than img nodes because you only have ONE element on the page. As long as you don't have hundreds of animations going, it will always be faster.

Second, using canvas to detect opacity does NOT work on a mobile device, which is one of your targets. You NEED to pre-cache all the alpha data for compatibility.

I'd comment more but am at my length limit...

[pbprojects]

@cwolves actually I disagree. I've been testing canvas performance and it just doesn't scale, as you always need to have DOM representations of images before you can render them to canvas. In fact, in the case were you just have to animate all kinds of things, canvas works pretty well, but not with lots of graphics, that's just my experience though. Anyway, feel free to contact me at paul.bakaus@dextrose.com to chat a bit, maybe you got some interesting insights!

[anmvamp]

@cwolves he said he wanted 2000.... more than a few hundred.

[BasiltheBatlord377]

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

[altu892]

@cwolves for my opinion, canvas is sucks on redrawing... And if you use css transformation, it got hardware acceleration

[rondlite]

@altu892 you seen isogenic game engine? canvas doing pretty well on there (90+ fps)

[altu892]

@rondlite yup... the guy behind the engine told me that they do some "technique" to acheive that kinda framerate.... which is pretty complicated, My game engine is going to written in canvas :D

[jeromewilson]

Whoever it is that's making a noise in the background needs a big punch on the nose

[actraiser]

Maybe important to note is that the framerate is actually much higher than it seems here, probably an encoding-issue. Search for the Aves Engine E3 Prototype on Youtube to get more ingame-video.

[DevelX666]

Faved, Looks like a great piece of code, just the something I was longing for.

[baconspam]

this owns