ready to play: javascript / html5 game development
Post on 08-May-2015
18.843 Views
Preview:
DESCRIPTION
TRANSCRIPT
Ready to Play: JavaScript / HTML5 Game Development
@zacharyjohnsonhttp://www.zachstronaut.com/
Friday, June 10, 2011
What does HTML5 have to do with video games?
Friday, June 10, 2011
And what the hell is HTML5 anyway?
Mostly, HTML5 the markup language, is just a bunch of new tags like: <canvas>, <audio>,
<video>, <article>, <nav> ...
Friday, June 10, 2011
And what the hell is HTML5 anyway?
... but, HTML5 the marketing buzz word, has come to mean: all those new tags, plus CSS3 and
highly optimized browser JavaScript engines.
Friday, June 10, 2011
Can I actually use this stuff now?
Friday, June 10, 2011
Yes, let’s start with <canvas> and <audio>!
Friday, June 10, 2011
<audio> lets you play... audio.Background music, sound effects, volume
control, multiple channels.
Basic and generic JavaScript API.
Friday, June 10, 2011
<canvas> is a 2D drawing surface.
Low level pixel manipulation or higher level functions to draw paths, images, circles, etc.
Generic JavaScript API, not game-specific.
Friday, June 10, 2011
Can I see it in action?Why yes! Yes you can!
Friday, June 10, 2011
Commander Clonehttp://a.stronaut.com/z1e
-<canvas> and <audio>-Akihabara Engine
-Experimental Gameplay Project
Friday, June 10, 2011
Re-Infiltration at Duskhttp://a.stronaut.com/z1b
-<canvas> and <audio>-Custom Engine
Friday, June 10, 2011
Works in Safari, Chrome, Firefox, Opera,
and...
Friday, June 10, 2011
... [drum roll] ...
Friday, June 10, 2011
... Internet Explorer 9!
Friday, June 10, 2011
[applause]
Friday, June 10, 2011
Yeah but it probably sucks in IE right?
No, actually it is crazy fast in IE9 because it is hardware accelerated via DirectX.
Friday, June 10, 2011
Good point Zach, how is the performance of <canvas>?
Why thank you.
Friday, June 10, 2011
Performance of <canvas> on your desktop/laptop is
very good.Hardware acceleration of graphics in Chrome
and IE9, partial acceleration in Safari and Firefox... rapidly progressing.
Friday, June 10, 2011
How good is very good?You could get 60 FPS if you made Tiny Wings or
Angry Birds or Super Mario World or Zelda: A Link to the Past.
Friday, June 10, 2011
What about the physics part of Angry Birds though?
HTML5’s <canvas> only gives youa place to draw graphics...
Friday, June 10, 2011
Fast JavaScript engines to the rescue!
There are now at least two ports of theBox2D physics library to JavaScript.
Friday, June 10, 2011
Impact Demohttp://impactjs.com/demos/physics/
Friday, June 10, 2011
2D Physics / 3D Blockshttp://a.stronaut.com/z1i
-NO <canvas> this time-HTML and CSS3
-Box2D.js
Friday, June 10, 2011
So you don’t have to use <canvas> to make a game?
Sometimes it is better to use your web development skillz and make all your sprites and
layers with HTML and CSS.
Friday, June 10, 2011
When/why would I use HTML/CSS?
-High level, can shorten dev cycle-Can be more backwards compatible-Can outperform <canvas> on mobile/
iOS (for now)
Friday, June 10, 2011
If I make a game with HTML5 and JavaScript won’t it just
work on iOS?Well... that depends!
Friday, June 10, 2011
So what are the gotchyas for mobile HTML5 games?
-<audio> is crippled in mobile web browser-<canvas> is slow, not yet hardware accelerated
-HTML/CSS *do* have some acceleration!!-Should use touch events, not mouse events
-JavaScript engine slower, trouble with math-heavy things like physics
Friday, June 10, 2011
That sounds like a lot of problems...
Actually there are plenty of games you can make for mobile phones with “HTML5” and a commercial market is already forming.
Friday, June 10, 2011
Are there any tools to help me?Sure, let me tell you about a few tools...
Friday, June 10, 2011
Akihabarahttp://www.kesiev.com/akihabara/
-<canvas> based game library/framework-Free and open source (MIT license)
-several game genre examples-mobile web support out-of-the-box,
but keep your game and graphics simple
Friday, June 10, 2011
Impacthttp://impactjs.com/
-<canvas> based game library/framework-$99 flat fee, supports custom modules
-Visual level editor-Box2D physics already plugged in
-mobile support out-of-the-box,web *AND* beta conversion tool to make a
native OpenGL iOS app
Friday, June 10, 2011
What about distribution?Of course you can put your HTML5 game on a web site, but there are other options as well...
Friday, June 10, 2011
Titaniumhttp://www.appcelerator.com/
-Free and open source-Package game as native app for Windows, Linux, Mac, Mac App Store, iOS App Store,
Android.
Friday, June 10, 2011
See also...PhoneGap, NimbleKit, Chrome Web Store, and a
reminder: Impact can port to iOS (alpha support)
Friday, June 10, 2011
Aren’t you forgetting something? You haven’t said
much about 3D...That’s because all the good games are in 2D.
I kid, I kid.
Friday, June 10, 2011
Quickly, let me mention WebGL-WebGL is an implementation of OpenGL
-It is hardware accelerated and low level-GL pros will be right at home with shaders, etc.
-Google already ported Quake II to WebGL
Friday, June 10, 2011
That sounds spiffy, when can I use that?
You can use it now in Chrome 10 and Firefox 4. Safari support is imminent, and Opera support
will follow.
NO <3 on Internet Explorer or iOS.
Friday, June 10, 2011
Anything else I should know?Yeah... come to think of it you should know about
Web Sockets. This brings network i/o for multiplayer games to Safari, Chrome, and iOS
with Firefox support coming soon.
Check out: http://caniuse.com/
Friday, June 10, 2011
Thanks, do you have a closing thought?
Yes... web technology is moving so rapidly that, the longer your game’s dev cycle is, the more
compelling JavaScript / HTML5 become!
Friday, June 10, 2011
It’s dangerous to go alone! Take this!
http://a.stronaut.com/z1g
Friday, June 10, 2011
I’ve got a question!I’ve got an answer!
Friday, June 10, 2011
Thank You
Friday, June 10, 2011
top related