What it's needed to make a web game - demipel8/game-wrapper GitHub Wiki

To make a game a certain set of functionalities is required in a framework, lets discuss them.

##Assets

Every game needs different resources, from a cli adventure game that has all of its texts saved on a file, to top tier games that have models, filters, audio, meshes, sprites, animations...

The most basic ones are: images, audio and data (JSON objects in JS case). The game is loaded through the internet so the assets need a component that takes care of caching the data into the client browser and binding a logical name inside the game with the actual resource, the loader.

Also a standard interface must define the assets properties so any section of the game knows how to manipulate an asset, lets call it the resource interface.

##Visualization

For the user to interact and enjoy a game, he must see the graphics that the game is intended to show. The render takes care of the drawing tasks that are required. In web technologies there are 3 ways of rendering games, from the worst performance to the best: DOM, Canvas and webGL.

###DOM

The Document Object Model (DOM) is a programming interface for HTML, XML and SVG documents. It provides a structured representation of the document (a tree) and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content.

Basically is a technique that creates an html element for each rendered object in the game and it is rendered like any normal web would be. DOM rendering tends to slow on performance when a lot of objects are instantiated as it has to maintain an html element for each.

###Canvas

HTML5 Canvas is an immediate mode bitmaped area of the screen that can be manipulated with JavaScript. Immediate mode refers to the way the canvas renders pixels on the screen. HTML5 Canvas completely redraws the bitmapped screen on every frame by using Canvas API calls from JavaScript.

###webGL

WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plugins. Based on OpenGL ES 2.0 standard it runs in the majority of desktop and mobile.

##Update

If a game stays the same all the time, it's not a videogame, maybe even not a game. The game has to advance and change. This task is delegated to a Game Loop, which iterates all the time through certain aspect of the game like processing user input, updating object states and redrawing the screen. A game loop also helps to decouple I/O of the game from it's own advancement, making able to continue game execution while waiting for user input.

##User Input

A game is intended to be interactive, the user must be able to communicate and manipulate the game. In a day with so many type of devices user input has to be supported in multiple ways: keyboard, mouse, touch and controller.

##Physics

Lots of games try to imitate reality in a more or less realistic way. Physics libraries help to simulate forces on the objects of a game. This is a must in any ambitious game engine.

##Audio

A game audio is more than a song. It need ambient sound, sound effects when events happen. Some games change the music depending on the situation of the player or even use sound to indicate the user of things that are about to take place. That's why an audio manager is recommended.

##Tweening

Short for in-betweening, the process of generating intermediate frames between two images to give the appearance that the first image evolves smoothly into the second image. It's an easy way to move objects in simple ways without the use of a physic library which can over-complicate this task.

##Spritesheets and Animations

A sprite, or image, is a very basic object of a game. A living object of the game often needs not just one image but a set of them to make on or more animations. Spritesheets are a good way to organize these animations, as it also help to save memory and work for the GPU. //TODO explicar spritesheet mas a fondo