cs255 ยป


Hello Snowflakes! Share your original Notes, Mindmaps, Sketches here!
For the transcripts taken from video subtitles and video screenshots, kindly use the Transcripts page

Outline of the course:
Lesson 0 - Optional HTML/Javascript crash course
Lesson 1 - Introduction to Canvas rendering
Lesson 2 - Atlases and Map rendering
Lesson 3 - Basic Input, handling events
Lesson 4 - The entity hierarchy
Lesson 5 - Box2D, and using external libraries
Lesson 6 - Adding sound
Lesson 7 - Asynchronous Loading


Lesson 0 - Optional HTML/Javascript crash course

Optional JavaScript crash-course

Some very basic Javascript. This notes are from the Javascript's course on codeacademy.com. You can learn more there for free!

end all lines with semicolon, to prevent run-on lines from occuring.

when using console, dont do it line by line, copy paste entire blocks.

Blog post mentioned in Classes lesson


Make sure your [body] looks like [body id='body'] [/body] ... or else

Notes from study group 0

  • Question: How to organize code when the project gets too big
    Answer: Look up companies sites that make great documentation: Valve, Insomniac, Crytek
    While I didn't look for specifics about code organization, here are some links of those companies tech stuff: Valve, Insomniac, Crytek

  • Question: What about physics?
    Answer: Google Erin Catto and follow him. See his posts and GDC presentations. He was the one who invented box2d (a free open source 2d physics engine).
    The javascript version of that engine was used in the Grits game.
    If you want to learn more about physics and game engine, start with: Physics for Game Developers

Lesson 1 - Introduction to Canvas rendering

  • Canvas: A new HTML5 element which exposes APIs allowing you to draw graphs, images, and text to portions of the page. A canvas only has two attributes specific to it, width and height, which specify what size this drawing surface is on your page.

  • Loading images: In order to draw an image to the canvas, we first have to load it, which is comprised of three steps: 1 - we need to declare the image object. 2 - we need to define its onload function. 3 - we need to set the image.source attribute.

  • Drawing images: After having an image loaded, we need to draw that image to the canvas via the canvas.drawImage API. This function takes: the image object itself, and the desired locations on the canvas to draw that image.

Lesson 2 - Atlases and Map rendering

  • Posicionamiento dentro de un atlas con trimmed

    I represented an hypothetical asset. A tree positionned so the bottom of the trunk is roughly at the center of the asset. When it's trimmed, the center of the asset isn't the same anymore.

    Basically you have to find the offset from the original center given using the original position of the trimmed frame within the source.

    "frame" gives you the position within the atlas and the size of the trimmed version "spriteSourceSize" gives you the position of the top left corner (x,y) of the trimmed rectangle relative to the original asset and the width/height of the trimming frame (which seem redundant with frame.w and frame.h) "sourceSize" gives you the real dimension of the original asset So the drawImage() should work like this:

Tree posicioning

if (trimmed) {
           cx =  -sprite.sourceSize.w/2 + sprite.spriteSourceSize.x;
           cy =  -sprite.sourceSize.h/2 + sprite.spriteSourceSize.y;
  • Ejemplo Another example

Notes from study group 2

  • Explanation about why use the center coordinates of the sprites starts at aprox. 30 minutes of video. 

  • Free gaming resources (art wise): OpenGameArt

Lesson 3 - Basic Input, handling events

Lesson 4 - The entity hierarchy

Lesson 5 - Box2D, and using external libraries

Lesson 6 - Adding sound

Lesson 7 - Asynchronous Loading

my Notes

code samples Inspecting JSON

parsedJSON = JSON.parse(weaponJSON);
return parsedJSON['frames']['chaingun_impact.png']['spriteSourceSize']['x'];

Image Types : JPEG, PNG and Web-P Coming soon "WebP" image formats which have both good compression and good transparency.  See: https://developers.google.com/speed/webp/

Both JSON and audio files can be loaded through XMLHttpRequest. Just need to set the correct 'responseType' for audio files as 'arraybuffer'

A=Class.extend() to extend Class

As soon as you set the src of an image object, browser starts loading the image. so make sure to register onload function before setting the src. Same applies to XMLHttpRequest with send() function.

Atlases: Texture Atlases - combine multiple small images into one big image for faster load times. SpriteSheet - for animation only

creating a texture packing program is NP program - bin packing program

GRITS Texture

Parsing texture packer output

Tecture Packer software download spriteSourceSize and spriteSoure to trim code change : sX - sW/2

3 very important files : core.js, sprite sheet.js, grit effects.js