Html5 Game Development.pptx

7/31/2019 Html5 Game Development.pptx

1/32

1

Yin Yang(synthesized from internet and http://www.slideshare.net/ )
http://www.slideshare.net/http://www.slideshare.net/


2/32

Javascript and HTML5 Game

Overview of Canvas

Game Programming

Libraries & Tools

Demo

Resources & References


3/32

- Lets Get Start

3


4/32

H T M L 5

Web Socket Drag & Drop

Web Storage History

Web Worker Offline App

Web Database /Indexed DB Geolocation

Canvas Video / Audio


5/32

Easy to developFast deploymentEasy to debugOpen sourceFree toolsWide support: Web browers

Mobile devices Social networking application


6/32


7/32

Javascript codeLogic

Graphics

Onkeydown, onmousedown, Input

Sound / Music

Ajax, WebSocketMultiplayer

Images, Video, File APIGame Assets


8/32

- A Quick Tour of Using Canvas from Javascript

8


9/32

2D drawing platform within the browserUses nothing more than JavaScript and HTML no pluginsExtensible through a JavaScript APICreated by Apple for dashboard widgetsNow openly developed as a W3C spec


10/32

Data visualisation

Animated graphics

Web applications


11/32

Uses the standard screen-based coordinatesystem


12/32

Everything is drawn onto the 2D renderingcontext (ctx)


13/32

var canvas =document.getElementById("canvas");var ctx = canvas.getContext("2d");ctx.fillStyle = 'rgb(255, 0, 0)';

ctx.strokeStyle = 'rgba(0, 255, 0, 0.5)';

llRect(x, y, w, h) Draws a rectangle using the

current ll style strokeRect(x, y, w, h) Draws the outline of a rectangle

using the current stroke style

clearRect(x, y, w, h) Clears all pixels within the givenrectangle


14/32

TextShadows & blurringLines, shapes, imageGradientsSaving state of drawing contextTransformationsComposites

Pixel Manipulation

http://www.html5canvastutorials.com/
http://www.html5canvastutorials.com/http://www.html5canvastutorials.com/


15/32


16/32

HTML5 Canvas More open than Flash Smaller result. Javascript is built into browsers Works on most of platforms No need to compile.Adobe Flash Great authoring tool, easy to go from idea to working

product Better sound support - many JavaScript libraries

use SoundManager2 , which falls back on Flash and tendsto lag

Do not work good in all platforms, for example Linux.
http://www.schillmania.com/projects/soundmanager2/doc/getstarted/http://www.schillmania.com/projects/soundmanager2/doc/getstarted/


17/32

- Get to the Core of the Problem

17


18/32

var FPS = 60;setInterval(gameTick,1000/FPS)

function gameTick()

{processInput();updateGame();draw();

}

dont always need a game loop


19/32

Rotation (known angle) Rotation (unknown angle) Rotation (triangle overlay)

Rotation + particles

Position Velocity

Acceleration Collisions
http://labs.skookum.com/demos/barcampclt_physics/euclid/0http://labs.skookum.com/demos/barcampclt_physics/euclid/1http://labs.skookum.com/demos/barcampclt_physics/euclid/2http://labs.skookum.com/demos/barcampclt_physics/euclid/3http://labs.skookum.com/demos/barcampclt_physics/newton/0http://labs.skookum.com/demos/barcampclt_physics/newton/1http://labs.skookum.com/demos/barcampclt_physics/newton/2http://labs.skookum.com/demos/barcampclt_physics/newton/3http://labs.skookum.com/demos/barcampclt_physics/newton/3http://labs.skookum.com/demos/barcampclt_physics/newton/2http://labs.skookum.com/demos/barcampclt_physics/newton/1http://labs.skookum.com/demos/barcampclt_physics/newton/0http://labs.skookum.com/demos/barcampclt_physics/euclid/3http://labs.skookum.com/demos/barcampclt_physics/euclid/2http://labs.skookum.com/demos/barcampclt_physics/euclid/1http://labs.skookum.com/demos/barcampclt_physics/euclid/0


20/32

Optimizing game loop, skipping draw.Use requestAnimationFrame instead of setInterval / setTimeout.Frame buffering, multiple canvases.Avoid unnecessary canvas state change.Dirty rectangle: redraw only those areas thathave changed.

Use DOM Elements whenever possible.


21/32

Make everything simple

21


22/32

A port of Box2D Physics Engine to JavaScript.

Using HTML5 and Flash, provides reliable cross-platform audio under a single JavaScript API.

A Javascript sprite library for HTML5 Canvas similar toFLASH/ActionScript3

Built on Chrome's JavaScript runtime for easily building

fast, scalable network applications.
http://code.google.com/p/v8/http://code.google.com/p/v8/


23/32

1. HTML5 Game Engine High Performance Fully Documented 2d Physics Intuitive Interface Offline Support

http://www.scirra.com/html5-game-engine
http://www.scirra.com/html5-game-enginehttp://www.scirra.com/html5-game-enginehttp://www.scirra.com/html5-game-enginehttp://www.scirra.com/html5-game-enginehttp://www.scirra.com/html5-game-enginehttp://www.scirra.com/html5-game-engine


24/32


25/32

3. Isogenic Engine Advanced Realtime Networking Facebook Integration

High Performance Canvas Physics system built-in utilising Box2d

http://www.isogenicengine.com/
http://www.isogenicengine.com/http://www.isogenicengine.com/


26/32

- A Two Week Game from Scratch

26


27/32

All the usual gameplay, collect coins andfinish the levels.No need to download any plugins to play.Online version and source code are availableon http://vietgamedev.net/apps/23/mario/
http://vietgamedev.net/apps/23/mario/http://vietgamedev.net/apps/23/mario/http://vietgamedev.net/apps/23/mario/


28/32


29/32

- For further research

29


30/32

List of HTML5 Presentation Resources Earlier post with

many links for this session HTML5: Edition for Web Authors Focused subset of the

specification for web devs HTML5 on the Internet Explorer Learning Site Videos,

tutorials, articles HTML5 Demos from Giorgio Sardo HTML5, CSS, JS, etc. HTML5 Doctor HTML5 articles, Element Index, and

resources

CanIUse.com Details support by browser for HTML5,CSS3, and other technologies Modernizr HTML5 & CSS3 fe ature detection made easy HTML5 Cross Browser Polyfills Helpful for implementing

features while supporting a range of browsers
http://blogs.msdn.com/b/cbowen/archive/2011/07/13/list-of-html5-presentation-resources.aspxhttp://www.w3.org/TR/html5-author/http://www.w3.org/TR/html5-author/http://msdn.microsoft.com/en-us/ie/aa740476http://msdn.microsoft.com/en-us/ie/aa740476http://www.giorgiosardo.com/HTML5/DemoPack/Index.htmhttp://html5doctor.com/http://www.giorgiosardo.com/HTML5/DemoPack/Index.htmhttp://html5doctor.com/http://caniuse.com/http://www.modernizr.com/https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfillshttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfillshttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfillshttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfillshttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfillshttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfillshttp://www.modernizr.com/http://caniuse.com/http://html5doctor.com/http://www.giorgiosardo.com/HTML5/DemoPack/Index.htmhttp://www.giorgiosardo.com/HTML5/DemoPack/Index.htmhttp://msdn.microsoft.com/en-us/ie/aa740476http://msdn.microsoft.com/en-us/ie/aa740476http://www.w3.org/TR/html5-author/http://www.w3.org/TR/html5-author/http://blogs.msdn.com/b/cbowen/archive/2011/07/13/list-of-html5-presentation-resources.aspx


31/32

HTML5 Specificationhttp://developers.whatwg.org/

Dive into HTML5http://diveintohtml5.info/

Physics for Lazy Game Developers http://labs.skookum.com/demos/barcampclt_physics/ Developing Your First HTML5 Game http://www.script-tutorials.com/html5-game-

development-lesson-1 HTML5 Canvas Tutorial

http://www.html5canvastutorials.com/ HTML5 Game Development Resourceshttp://blogs.msdn.com/b/cbowen/archive/2011/12/15/html5-game-development-resources-from-the-game-camps.aspx
http://developers.whatwg.org/http://diveintohtml5.info/http://labs.skookum.com/demos/barcampclt_physics/http://www.script-tutorials.com/html5-game-development-lesson-1http://www.script-tutorials.com/html5-game-development-lesson-1http://www.html5canvastutorials.com/http://blogs.msdn.com/b/cbowen/archive/2011/12/15/html5-game-development-resources-from-the-game-camps.aspxhttp://blogs.msdn.com/b/cbowen/archive/2011/12/15/html5-game-development-resources-from-the-game-camps.aspxhttp://blogs.msdn.com/b/cbowen/archive/2011/12/15/html5-game-development-resources-from-the-game-camps.aspxhttp://blogs.msdn.com/b/cbowen/archive/2011/12/15/html5-game-development-resources-from-the-game-camps.aspxhttp://blogs.msdn.com/b/cbowen/archive/2011/12/15/html5-game-development-resources-from-the-game-camps.aspxhttp://blogs.msdn.com/b/cbowen/archive/2011/12/15/html5-game-development-resources-from-the-game-camps.aspxhttp://blogs.msdn.com/b/cbowen/archive/2011/12/15/html5-game-development-resources-from-the-game-camps.aspxhttp://blogs.msdn.com/b/cbowen/archive/2011/12/15/html5-game-development-resources-from-the-game-camps.aspxhttp://blogs.msdn.com/b/cbowen/archive/2011/12/15/html5-game-development-resources-from-the-game-camps.aspxhttp://blogs.msdn.com/b/cbowen/archive/2011/12/15/html5-game-development-resources-from-the-game-camps.aspxhttp://blogs.msdn.com/b/cbowen/archive/2011/12/15/html5-game-development-resources-from-the-game-camps.aspxhttp://blogs.msdn.com/b/cbowen/archive/2011/12/15/html5-game-development-resources-from-the-game-camps.aspxhttp://blogs.msdn.com/b/cbowen/archive/2011/12/15/html5-game-development-resources-from-the-game-camps.aspxhttp://blogs.msdn.com/b/cbowen/archive/2011/12/15/html5-game-development-resources-from-the-game-camps.aspxhttp://blogs.msdn.com/b/cbowen/archive/2011/12/15/html5-game-development-resources-from-the-game-camps.aspxhttp://blogs.msdn.com/b/cbowen/archive/2011/12/15/html5-game-development-resources-from-the-game-camps.aspxhttp://blogs.msdn.com/b/cbowen/archive/2011/12/15/html5-game-development-resources-from-the-game-camps.aspxhttp://blogs.msdn.com/b/cbowen/archive/2011/12/15/html5-game-development-resources-from-the-game-camps.aspxhttp://blogs.msdn.com/b/cbowen/archive/2011/12/15/html5-game-development-resources-from-the-game-camps.aspxhttp://www.html5canvastutorials.com/http://www.html5canvastutorials.com/http://www.script-tutorials.com/html5-game-development-lesson-1http://www.script-tutorials.com/html5-game-development-lesson-1http://www.script-tutorials.com/html5-game-development-lesson-1http://www.script-tutorials.com/html5-game-development-lesson-1http://www.script-tutorials.com/html5-game-development-lesson-1http://www.script-tutorials.com/html5-game-development-lesson-1http://www.script-tutorials.com/html5-game-development-lesson-1http://www.script-tutorials.com/html5-game-development-lesson-1http://www.script-tutorials.com/html5-game-development-lesson-1http://www.script-tutorials.com/html5-game-development-lesson-1http://www.script-tutorials.com/html5-game-development-lesson-1http://www.script-tutorials.com/html5-game-development-lesson-1http://www.script-tutorials.com/html5-game-development-lesson-1http://labs.skookum.com/demos/barcampclt_physics/http://labs.skookum.com/demos/barcampclt_physics/http://labs.skookum.com/demos/barcampclt_physics/http://diveintohtml5.info/http://diveintohtml5.info/http://developers.whatwg.org/http://developers.whatwg.org/


32/32

http://vietgamedev.net http://yinyangit.wordpress.com
http://vietgamedev.net/http://yinyangit.wordpress.com/http://yinyangit.wordpress.com/http://vietgamedev.net/

Html5 Game Development.pptx

Documents

Transcript of Html5 Game Development.pptx