Building a JavaScript-Based Game Engine for the Web

What people said

Strong rec Seth Battin · 2013-03 · Game Development Stack Exchange · on “Isometric rendering and picking?”

Very late to the question and I don't even have a complete answer, but there was a very good Google Tech Talk on this precise subject. Their setup includes picking the non-transparent portion of arbitrary images (in javascript, no less). [this video]

Recommends Ricket · 2010-10 · Game Development Stack Exchange · on “What are good JS libraries for game dev?”

jQuery [LINK] and MooTools [LINK] are awesome JavaScript libraries; I prefer jQuery myself. Either one will assist you in your JS game development if you use the DOM. If you go with Canvas rendering, I still think you should use one of those libraries, but you will need to learn the Canvas functions. Here is a tutorial [LINK] which introduces you to canvas by creating a Breakout clone, so it might be exactly the kind of thing you're looking for (and it uses jQuery). Animating sprites is a matter of changing an image src, or preloading several images and swapping them out, or in a canvas just drawing frames of an animation. The above libraries can help with any of these cases. The libraries a

Recommends jtsao22 · 2011-08 · Stack Overflow · on “How to achieve good performance animations using only Web standards?”

You should checkout this google tech talk: [this video] The speaker talks about using HTML5, client/server side javascript, css, and canvas. I agree, WebGL is probably overkill for simple animations. Here are some animation frameworks: [LINK]

Recommends geoffreak · 2011-11 · Stack Overflow · on “Pass Left Click Message to HTML element below another one”

One option is to place the groups of elements that need to share a click into another element and handle the click there. If you are designing a game and have many elements where this will be occurring, what you would have to do is actually assign a single click handler to the entire body of the web page and calculate which element is clicked on. It's actually quite quick to do this. For more information, watch this Google Tech Talk [this video] .

Recommends Henderk · 2011-12 · Stack Overflow · on “Read transparent pixels from image”

Well this question is actually answered by the dude from GoogleTechTalks in this video on javascript-based game engines. [this video] It should start at the point where it is explained. Edit: So I will summarize what is told in the video and provide a code-example. It was a lot tougher than I had expected. The trick is to load your image onto a canvas and then check each pixel if it is transparent. The data is put into a two dimension array. Like alphaData[pixelRow][pixelCol]. A 0 is representing transparency while a 1 is not. When the alphaData array is completed it is put in global var a. var a; function alphaDataPNG(url, width, height) { var start = false; var context = null; var c = document.

Recommends GitaarLAB · 2012-08 · Stack Overflow · on “Pre-Rendering an animation on a canvas in javascript”

1: you might want to look into var fragment = document.createDocumentFragment(); 2: yes via css, is much faster! I think this youtube video [this video] will be worth your while. Good luck UPDATE: 9 Jan 2013 Just stumbled over this. In css3 there is a animation feature using steps. Basically you create a sprite (in canvas) and then use css3 to animate the sprite using a background-property on a element. Pretty cool (and should use the optimized browser's own code to do this, thus not load the users cpu as much as with javascript/canvas). It's still not creating a animated gif however (but I think even that should be possible, using a library, since gif and pnp are quite alike, and then feed that

Cites Aurea · 2010-11 · Stack Overflow · on “Advice for switching from Flash to <canvas>”

(after edit) Ignore the previous version of this, though Canvas was something else. Anyway - you can use Canvas as the View in MVC structure. M odel - JavaScript, also has OOP V iew - this will be the Canvas C ontroller - JavaScript listening for keys and / or mouse downs, ups What is bad is that you will have to rebuild some basic stuff in JavaScript, in Flash things like that are already in the API. You will need: an array - the global display list a DisplayItem class - this will also have "Children", "Graphics", "Bitmap", positions, z-order and other essential variables Children - another array of DisplayItems Graphics - some kind of data which you can parse and tell what to do with it (D

Cites mythicalprogrammer · 2011-03 · Stack Overflow · on “What exactly is Block Rendering?”

[this video] @20:43 min of the video talks about Block Rendering - "Directly replace innerHtml with a huge string instead of multiple DOM append operations" What does that exactly mean? Does it mean that the code are some how in blocks of strings of html already instead of progressively manipulating the DOM tree? If so does anyone have an example of this? Using javascript/html/css without php? Does he mean that he has hidden divs and then displays them later? Thank you in advance.

Cites sublime · 2012-12 · Stack Overflow · on “Web-Based Game Engines - Request For Input”

There are certainly people out there who think that HTML5 is going to replace flash in online games. Here is an HTML/Javascript based engine that I heard about few days ago [this video] I haven't actually used it but it looks really promising and It's designed for similar set of requirements that you've put. It lets you design 2D / 2.5D ( isometric projections ) games. And it does look promising.

Cites Nick Westgate · 2014-03 · Game Development Stack Exchange · on “Where is the Aves game engine?”

Paul Bakaus shared some info in a 26 Oct 2012 comment on this Google Talk video [this video] . As creator of the engine, let me chime in. You are partially right in that we have never released the full blown iso engine, but we did in fact release individual components of it at [LINK] . Most notably our state-of-the-art build system Jasy ( [LINK] ), our JavaScript foundation Core ( [LINK] ), and a couple of highly performance optimized frontend components such as Scroller ( [LINK] ) or Viewporter ( [LINK] ). I know you'd really like to see more isometric game-centric code, and hey, never say never. We need more people like you pushing for it to make it happen. In a conversation with Jason Mayes on