Game Development With HTML5
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Game Development With HTML5

on

  • 65,048 views

Game development using HTML5 technologies presentation, May 2010. ...

Game development using HTML5 technologies presentation, May 2010.

This lecture was given by Gil Megidish at AlphaGeeks #6 meetup in Tel Aviv, Israel.

The talk begins with some review of the game graphics techniques, and how you can achieve these with today's browsers and client side code.

4 demos were presented: sprites with canvas (luigi), framebuffer access (apple2 emulator), primitives and polygons (another world js) and image modifiers (droste effect.)

The lecture was given in Hebrew, ppt is English.

Statistics

Views

Total Views
65,048
Views on SlideShare
63,547
Embed Views
1,501

Actions

Likes
55
Downloads
1,434
Comments
8

31 Embeds 1,501

http://www.scoop.it 536
http://www.dnjg.be 296
http://www.slideshare.net 139
http://paper.li 121
http://nicoworld.altervista.org 110
http://dev.bundlr.com 106
http://blog.dreamcss.com 58
http://bundlr.com 44
http://feerojkumarp.blogspot.com 18
https://twitter.com 17
http://us-w1.rockmelt.com 8
http://www.linkedin.com 8
http://markup.worklab.in 5
http://www2.verious.com 5
http://dnjg.be 4
http://192.168.1.44 3
http://pmomale-ld1 3
http://secure.bundlr.com 3
http://192.168.6.52 2
http://www.pinterest.com 2
http://buildgamehtml5.blogspot.com 2
http://feerojkumarp.blogspot.in 2
http://dev.gobundlr.com 1
http://blog.naver.com 1
https://www.linkedin.com 1
http://www.pearltrees.com 1
http://e52.bundlr.com 1
http://pinterest.com 1
https://si0.twimg.com 1
http://www.twylah.com 1
http://www.yutzu.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 8 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • no more need for flash? an understandable first impression but please, by all means, if you'd prefer to indulge the tyranny of javascript over the orders of magnitude more pleasant to program in Actionscript 3... be my guest :) In all seriousness though, I think flash is going to remain around, particularly in games development for years to come. Just check out the flash portals. They're thriving. More new content than ever. Adobe has released Molehill. Unity3D compiles to Flash swf format now. The Epic UDK produces flash. Some of the bets as3 books have only recently been released. There has been very substantial flash as3 publishing activity actually lately. I think that the fundamental confusion here is that Adobe has handed off the Flex SDK to Apache to do with as they will. This by no means whatsoever constitutes a plan to abandon the flash as3 platform. In fact, it's oly just peaked. With Starling and Stage3D and Molehill, 3rd party tools like Aweay3d 4Gold... sky is the limit!
    Are you sure you want to
    Your message goes here
    Processing…
  • @OctavOnu it's called The Incredible Machine. Was my favourite game when I was a kid.
    Are you sure you want to
    Your message goes here
    Processing…
  • ho my God....guru meditation... ;O) Tnx, nice slide!!
    Are you sure you want to
    Your message goes here
    Processing…
  • @OctavOnu That's The Incredible Machine. Thanks for the comments :)
    Are you sure you want to
    Your message goes here
    Processing…
  • great overview..
    can you please let me know the name of the game posted in slide no 34 ?
    I ve been looking for it for so many time!
    Thank you very much
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Game Development With HTML5 Presentation Transcript

  • 1. <games /> Gil Megidish [email_address]
  • 2. And I love writing / rewriting / reverse engineering games
  • 3.  
  • 4. What The Heck is HTML5 Canvas Video Audio Web Sockets Web Storage Web Worker Web Database Selectors Validation File API Semantic Elements
  • 5. Man will make it to Mars before HTML5 is on my Firefox! W3C’s ETA: Year 2022
  • 6. Games + Javascript? = wtf
  • 7. Why Bother With Javascript?
    • Fun to develop
      • Hacker’s spielplatz!
    • Fast deployment
      • Serve static files
    • Easy to debug
      • alert(), firebug.. Still better than the alternative!
    • Open source and free tools
      • Notepad, vi, emacs
    • B.Y.O. framework
      • jQuery?
    spielplatz
  • 8. But Why REALLY?
    • Has been around for ages
    • Won’t go away any time soon
    • Wide support:
      • Web browsers
      • Mobile devices
      • Facebook applications
      • On a rocket near you
  • 9. Anatomy of a Game LOGIC GRAPHICS INPUT SOUND MUSIC MULTIPLAYER GAME ASSETS
  • 10. Anatomy of a Game LOGIC GRAPHICS INPUT SOUND MUSIC MULTIPLAYER GAME ASSETS javascript code <canvas> onkeydown, onmousedown <audio> <audio> ajax, WebSocket Images, Audio, Video and Binary supported by browsers
  • 11. Graphics
  • 12. Framebuffer (raw) 0,0 0,1 0,2 0,3 0,4 0,5 0,6 0,7 0,x 1,0 1,1 1,2 1,3 1,4 1,5 1,6 1,7 1,x y,0 y,1 y,2 y,3 y,4 y,5 y,6 y,7 y,x x y … … … . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  • 13.  
  • 14. Tile + Sprite Memory
  • 15.  
  • 16. Scene Graph Placeholder For Future Presentation
  • 17.  
  • 18. Canvas is King
  • 19. DEMO TIME!
  • 20. Three Demos To Rule Them All Framebuffer demo http://www.megidish.net/apple2js/ Sprites demo http://www.megidish.net/alphageeks6/luigi/ Vector graphics demo http://www.megidish.net/awjs/
  • 21. Catch me a canvas
    • <canvas id=“graphics” width=“640” height=“480”>
    • Guru Meditation: No canvas supported!
    • </canvas>
    • var canvas = document.getElementById(“graphics”);
    • var context = canvas.getContext(“2d”);
  • 22.  
  • 23. Drawing Primitives
    • ctx.fillStyle = “#c80000&quot;;
    • ctx.fillRect (10, 10, 55, 50);
    • ctx.fillStyle = &quot;rgba(0, 0, 200, 0.5)&quot;;
    • ctx.fillRect (30, 30, 55, 50);
    Other drawing methods: arc, bezierCurve, lineTo, quadraticCurve, rect, stroke, fillText, strokeText, beginPath/closePath and fill
  • 24. (but who needs that ?)
  • 25. Drawing Images
    • var sprite = new Image();
    • sprite.src = “luigi.png”;
    • var x = 0, y = 0;
    • ctx.drawImage(sprite, x, y);
  • 26. Drawing Images 2
    • var spritemap = new Image();
    • spritemap.src = “sprite-map.png”;
    • ctx.drawImage(
    • spritemap,
    • sx, sy,
    • sw, sh,
    • dx, dy,
    • dw, dh
    • );
    Sprite maps save loading time by fewer requests and better compression. drawImage() also provides scaling and cropping.
  • 27. Going Crazy With Images // context state checkpoint ctx.save(); ctx.translate(0, 80); ctx.rotate(-45 * Math.PI / 180.0); ctx.scale(3.0, 1.0); ctx.drawImage(luigi, 0, 0); // revert all context changes ctx.restore();
  • 28. Accessing Pixels
    • var block = ctx.getImageData(sx, sy, sw, sh);
    • block = {
    • width: width in pixels,
    • height: height in pixels,
    • data: array of 4*width*height bytes
    • };
    • Alternatively: ctx.createImageData(w, h);
  • 29. Accessing Pixels
    • var block = ctx.getImageData(0, 0, canvas.width/2, canvas.height);
    • for (var y=0; y<block.height; y++)
    • {
    • for (var x=0; x<block.width; x++)
    • {
    • block.data[(y*block.width+x)*4+0] ^= 0xff;
    • block.data[(y*block.width+x)*4+1] ^= 0xff;
    • block.data[(y*block.width+x)*4+2] ^= 0xff;
    • }
    • }
    • ctx.putImageData(block, 0, 0);
  • 30. Why Access Pixels ? Complicated things impossible without putImageData() Read image pixels getImageData combined with primitive drawing = save image to disk! These examples are available to http://www.chromeexperiments.com/
  • 31. The Jazz Singer
  • 32. Let There Be Sound!
    • <audio id=“sfx001” src=“/mp3/boom.mp3”></audio>
    • $(“sfx001”).play();
  • 33. Let There Be Sound!
    • <audio id=“sfx001” src=“/mp3/boom.mp3”></audio>
    • $(“sfx001”).play();
    • Other methods:
    • $(“sfx001”).pause();
    • Other attributes:
    • $(“sfx001”).currentTime = 35.0;
    • $(“sfx001”).volume = 0.5;
    • $(“sfx001”).duration (read only)
  • 34. Putting It All Together
  • 35. Typical Game Loop
    • function gameTick()
    • {
    • processKeyboard();
    • moveEnemies();
    • drawGraphics();
    • updateAudio();
    • }
    • var fps = 60;
    • setInterval(gameTick, 1000 / fps);
  • 36. The Future is Upon Us!
  • 37. Quake2 HTML5
  • 38. What’s Coming Up Next
    • WebGL
      • OpenGL interface for Javascript
      • As of May, 2010: good luck finding a stable browser!
    • WebSocket
      • UDP and nonblocking transport layer
      • Not there yet! (KAAZING?)
    • WebStorage
      • Save games?
  • 39. Code Like It’s 2020! ftw! ‘ s Blackberry coming June 1 st !
  • 40. Q&A
  • 41. Q&A
    • Yes! You can use <canvas> in Internet Explorer 6?
    • <!--[if IE]>
    • <script type=&quot;text/javascript“ src=&quot;/js/excanvas.js&quot;>
    • </script>
    • <![endif]-->
    • PS. Remember to upgrade your mother’s IE!
  • 42. Links!
    • Chrome Experiments: Not Your Momma’s JS
      • http://www.chromeexperiments.com
    • Appcelerator’s Titanium
      • www.appcelerator.com
    • Box 2D: real time physics for JS games
      • http://box2d-js.sourceforge.net/index2.html
    • Mozilla’s Canvas tutorial
      • https:// developer.mozilla.org/en/Canvas_tutorial
  • 43.  
  • 44. GO MAKE GAMES! http://www.megidish.net