Building a JavaScript-Based Game Engine for the Web

HTML5 Canvas와 jQuery 등의 JavaScript FrameWork를 이용한 게임개발에 대한 설명과 AVES 엔진에 대한 설명입니다.
도영상 마지막 부분에는 프로토타입으로 만든 게임영상을 볼 수 있군요.

영어를 못하니 대충 지나가는 말중에 10%도 못 알아 먹고, 결국은 PT자료를 보고서 조금 더 이해를 할 수 있었습니다.

** Building a JavaScript-Based Game Engine for the Web

- Paul Bakaus, June 11, 2010, Google

......

* Oh noes! Canvas is a lot slower!

- Canvas image API is pretty inefficient, as it needs as DOM representation of the image first.

- Which means if you're working with lots of graphics. Canvas is actually way slower than generic HTML.

* Block Rendering.

* Block rendering?

- directly replace innerHTML with a huge string instead of multiple DOM append Operations.

- Huge performance boost.

 -- active parsing of HTML engine is really fast.

 -- Reflow and Repaint occur only once.

- Hug disadvantage.

 -- No reference to individual nodes!

* Lazy node linking.

- Fixes the main disadvantage of missing references.

- After innerHTML has been set. run:

- var elements = S('"', container);

- Now you have a collection of all elements!

- Since you know the order of the construction. you can reference back.

* Conservative method.

- Build <div>'s and style them via JavaScript (on the style tag).

- Render them out enbloque through innerHTML.

- Ugh. still kind of slow...

- I want more!

 -- <div style="position: absolute; top: 122px; left: 145px; z-index: 102; background-image: url(house_1.png); margin-top: -10px; margin-left: -10px; background-position: 10px 33px;"></div>

* Web method

- Don't ignore the layout layers.

 -- expecially not external CSS

- Keep the style tag of the <div> Object minimal:

 -- z-index top, left

* What is event delegation?

- A technique to .. forward" events to implicit listeners.

- In web development. usually the following:

 -- Bind an event to the root node except for the actual child element.

 -- When an event happens (i.e. click). find out if the target or an ancestor matches the child element.

 -- Moves processing efforts to when the event happens, scales really well.

* One event to rule them all.

- "???"

 -- Handles position detection. dragging.

- "???"

 -- Handles drag start. clicking.

- "???"

 -- Handles drag stop. clicking.

* Clicking on objects.

- Yay, I can click on houses!

- Mh, I can click on transparency. too...

- This kind of sucks!

* Click through maps.

- Build up a ??? for each object that tells us where the transparent pixels are.

- if transparent, check behind until you find a valid target.

 -- ???

- WOOt. this fixes our issue!

* Building up those pixel maps is amazingly crappy owrk!

* Let Canvas do it!

- Canvas can read pixel data form images.

- then, we can check if our pixel is in fact transparent.

- ...and save this 0/1 value in a new optimized. smaller array.

- ???

* Action surfaces.

* ?

- Basically a droppable for widgets or other objects.

- Transformed to isometric projection in real item using CSS Transforms.

- Way cool!

* CSS Transforms needed

- ???

* Server-side JavaScript

* WTF?!?!

,,JavaScript is painful enough already, now you want me to work with it in the backend as wel?"

* Why JavaScript?

- A single scripting lanauage per project dramatically speeds up development.

- Great portions of client side code (i.e. for calculations) can be reused without costs.

- ???

* JavaScript in the Browser.

* JavaScript in node.

* Node's features.

- Google's V8 engine running on server.

- Server and scripting combined.

- Comes with sugar ( pretty modules for system. servers etc. )

- Everything is non-blocking (file system calls etc.)

- EcmaScript 5

* Modules

- CommonJS module system.

- Very handy for organizing code.

- No way around it in Node.js - without modules. no(useful) app.

- Common modules: sys, fs, http, process.

* The great innovation?

* Node is completely event-driven.

- ???

* Server

- not threaded.

- no multiple processes.

- can serve and thandle a lot more requests at a time.

- eats a lot less memory.

* IO / API

- Accessing external data is always non-blocking.

- You got that right - node.js cat't be stopped easily!

* Hello world in node.js

- ???

* Finally - get rid of limitations.

- ???

* "MMOGs" in browsers.

- almost all games are limited to a couple thousand players per world instance.

- we want real multiplayer!

 -- worlds with millions of players

 -- no (thechnical) fragmentation between worlds.

 -- 200+ characters on a single viewport.

* "AVES" ENGINE

* ?

- Professional game engine for the web.

- Commercially licensable.

- Cross-platform (yes, works on smartphones!)

- Comes with all mentioned features ( and more )

- Currently in alpha.