Html5 Game Development.pptx
Transcript of 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/ -
7/31/2019 Html5 Game Development.pptx
2/32
Javascript and HTML5 Game
Overview of Canvas
Game Programming
Libraries & Tools
Demo
Resources & References
-
7/31/2019 Html5 Game Development.pptx
3/32
- Lets Get Start
3
-
7/31/2019 Html5 Game Development.pptx
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
-
7/31/2019 Html5 Game Development.pptx
5/32
Easy to developFast deploymentEasy to debugOpen sourceFree toolsWide support: Web browers
Mobile devices Social networking application
-
7/31/2019 Html5 Game Development.pptx
6/32
-
7/31/2019 Html5 Game Development.pptx
7/32
Javascript codeLogic
Graphics
Onkeydown, onmousedown, Input
Sound / Music
Ajax, WebSocketMultiplayer
Images, Video, File APIGame Assets
-
7/31/2019 Html5 Game Development.pptx
8/32
- A Quick Tour of Using Canvas from Javascript
8
-
7/31/2019 Html5 Game Development.pptx
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
-
7/31/2019 Html5 Game Development.pptx
10/32
Data visualisation
Animated graphics
Web applications
-
7/31/2019 Html5 Game Development.pptx
11/32
Uses the standard screen-based coordinatesystem
-
7/31/2019 Html5 Game Development.pptx
12/32
Everything is drawn onto the 2D renderingcontext (ctx)
-
7/31/2019 Html5 Game Development.pptx
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
-
7/31/2019 Html5 Game Development.pptx
14/32
TextShadows & blurringLines, shapes, imageGradientsSaving state of drawing contextTransformationsComposites
Pixel Manipulation
http://www.html5canvastutorials.com/
http://www.html5canvastutorials.com/http://www.html5canvastutorials.com/ -
7/31/2019 Html5 Game Development.pptx
15/32
-
7/31/2019 Html5 Game Development.pptx
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/ -
7/31/2019 Html5 Game Development.pptx
17/32
- Get to the Core of the Problem
17
-
7/31/2019 Html5 Game Development.pptx
18/32
var FPS = 60;setInterval(gameTick,1000/FPS)
function gameTick()
{processInput();updateGame();draw();
}
dont always need a game loop
-
7/31/2019 Html5 Game Development.pptx
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 -
7/31/2019 Html5 Game Development.pptx
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.
-
7/31/2019 Html5 Game Development.pptx
21/32
Make everything simple
21
-
7/31/2019 Html5 Game Development.pptx
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/ -
7/31/2019 Html5 Game Development.pptx
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 -
7/31/2019 Html5 Game Development.pptx
24/32
-
7/31/2019 Html5 Game Development.pptx
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/ -
7/31/2019 Html5 Game Development.pptx
26/32
- A Two Week Game from Scratch
26
-
7/31/2019 Html5 Game Development.pptx
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/ -
7/31/2019 Html5 Game Development.pptx
28/32
-
7/31/2019 Html5 Game Development.pptx
29/32
- For further research
29
-
7/31/2019 Html5 Game Development.pptx
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 -
7/31/2019 Html5 Game Development.pptx
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/ -
7/31/2019 Html5 Game Development.pptx
32/32
http://vietgamedev.net http://yinyangit.wordpress.com
http://vietgamedev.net/http://yinyangit.wordpress.com/http://yinyangit.wordpress.com/http://vietgamedev.net/