Huan Du (杜欢) , MagnetJoy Games               Twitter: @huandu
   When I Say HTML Here…    ◦ Not only talk about the mark-up language itself,      but also refers to all related web te...
   See what HTML can do with game now    ◦   Angry Birds: http://chrome.angrybirds.com/    ◦   The Pop Star Defense on Go...
Play with HTML Games   2011/5/30   4
   Portable    ◦ Based on public standard    ◦ Same API on different devices    ◦ Supported by all major browser vendors...
Let’s SeeWhat You Can Use    In Game   Play with HTML Games   2011/5/30   9
   Create and Use 2d Canvas Context    ◦ Quick start     var canvas = document.getElementById(the-canvas-id);     var con...
   Ways to improve 2d canvas performance    ◦ Use it less      More image, less stroke()/fill()      Reduce number of c...
   A Timeline-based Animation    ◦ Spec: http://www.w3.org/TR/css3-animations/    ◦ Must add –webkit- prefix in webkit ba...
   Audio quick start    ◦ <audio src="sample.mp3" autoplay></audio>      or      var audio = new Audio();      audio.src ...
   Problem    ◦ Cannot keep more than one audio object      Sample code       var a1 = new Audio(),           a2 = new A...
   Web fonts quick start    ◦ Spec:      http://www.w3.org/TR/css3-fonts/#font-resources    ◦ Sample     @font-face {    ...
   Resource    ◦ Google Web Font      http://www.google.com/webfonts     <link     href=http://fonts.googleapis.com/css?f...
   Stringify everything    ◦ All media can be stored/transferred as string      Audio      Video      Image    ◦ Embed...
   Local & Session storage    ◦ Key-value storage    ◦ Storage features      Persistent      Traceable - thru DOM event...
   Pretends to be a native app    ◦ Spec: http://www.w3.org/TR/html5/offline.html    ◦ Quick start      In HTML       <h...
   Detect offline status    ◦ Check online status      navigator.onLine      window.ononline and window.onoffline    ◦ ...
   Facebook integration                 Play with HTML Games   2011/5/30   24
   HTML Weakness    ◦ Overall performance isn’t good enough    ◦ Many standard specs are partially implemented   When to...
2D Canvas            3D Canvas         CSS Animation    Firefox 4                Yes                   Partial          No...
Audio                   Video       Web Fonts    Firefox 4                Yes                    Yes           Yes       I...
Data URL            Storage API       App Cache    Firefox 4                Yes                    Yes           Yes      ...
Messaging           HTTP Origin        Web Socket    Firefox 4                Yes                    Yes           Yes    ...
Welcome to follow me       My twitter @huanduPlay with HTML Games   2011/5/30   30
Nächste SlideShare
Wird geladen in …5
×

Play with html games

1.554 Aufrufe
1.465 Aufrufe

Veröffentlicht am

A brief introduction to technologies used in HTML games. The goal is to show off what HTML can do in game now.

Veröffentlicht in: Technologie, Design
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.554
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
33
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Play with html games

  1. 1. Huan Du (杜欢) , MagnetJoy Games Twitter: @huandu
  2. 2.  When I Say HTML Here… ◦ Not only talk about the mark-up language itself, but also refers to all related web technologies ◦ Including features listed on http://www.w3.org/standards/webdesign/  HTML and CSS  Audio and Video  Scripting and AJAX  Graphics  Etc… Play with HTML Games 2011/5/30 2
  3. 3.  See what HTML can do with game now ◦ Angry Birds: http://chrome.angrybirds.com/ ◦ The Pop Star Defense on Google I/O 2011 ◦ http://agent8ball.com/ ◦ http://www.benjoffe.com/code/games/torus/ ◦ And more… More and more people create HTML games now Play with HTML Games 2011/5/30 3
  4. 4. Play with HTML Games 2011/5/30 4
  5. 5.  Portable ◦ Based on public standard ◦ Same API on different devices ◦ Supported by all major browser vendors Light weight and easy to play  No installation required  Seamless integration with existing web sites Play with HTML Games 2011/5/30 5
  6. 6. Let’s SeeWhat You Can Use In Game Play with HTML Games 2011/5/30 9
  7. 7.  Create and Use 2d Canvas Context ◦ Quick start var canvas = document.getElementById(the-canvas-id); var context = canvas.getContext(2d); // start to draw something on context context.font = 20pt Tahoma; context.fillText(Hello, world!, 10, 50); ◦ Tutorial  https://developer.mozilla.org/en/Canvas_tutorial Play with HTML Games 2011/5/30 10
  8. 8.  Ways to improve 2d canvas performance ◦ Use it less  More image, less stroke()/fill()  Reduce number of calls to stroke()/fill()  Use getImageData()/putImageData() ◦ Use other technology  3d context (webgl) if available  Fallback to CSS or DOM animation Play with HTML Games 2011/5/30 11
  9. 9.  A Timeline-based Animation ◦ Spec: http://www.w3.org/TR/css3-animations/ ◦ Must add –webkit- prefix in webkit based browser @-webkit-keyframes move { from {top: 10px;} to {top: 100px;} } .move {-webkit-animation: move 1s; top: 100px;} ◦ DOM Events: webkitAnimationStart/End/Iteration Play with HTML Games 2011/5/30 12
  10. 10.  Audio quick start ◦ <audio src="sample.mp3" autoplay></audio> or var audio = new Audio(); audio.src = "sample.mp3"; // or data URL // always play from beginning audio.currentTime = 0; audio.play(); Video is similar to audio Play with HTML Games 2011/5/30 13
  11. 11.  Problem ◦ Cannot keep more than one audio object  Sample code var a1 = new Audio(), a2 = new Audio(); // assign different values to a1.src and a2.src // play a1, then play a2, and then a1 a1.play(); a2.play(); // a1 will be stopped automatically a1.play(); // iOS Safari fails to play it Solution? Play with HTML Games 2011/5/30 14
  12. 12.  Web fonts quick start ◦ Spec: http://www.w3.org/TR/css3-fonts/#font-resources ◦ Sample @font-face { font-family: VT323; src: local(VT323), url(the-url) format(woff); } Benefits ◦ Enrich system fonts – Important on mobile device ◦ International Play with HTML Games 2011/5/30 15
  13. 13.  Resource ◦ Google Web Font http://www.google.com/webfonts <link href=http://fonts.googleapis.com/css?family=VT323 rel=stylesheet type=text/css> Play with HTML Games 2011/5/30 16
  14. 14.  Stringify everything ◦ All media can be stored/transferred as string  Audio  Video  Image ◦ Embed small images to files to save download cost ◦ Possible to generate dynamic media files Play with HTML Games 2011/5/30 17
  15. 15.  Local & Session storage ◦ Key-value storage ◦ Storage features  Persistent  Traceable - thru DOM event “storage”  More than 5 MB space (Vary in different browsers) Usage ◦ Game auto-save/high score/… ◦ Cache media resource thru data url Play with HTML Games 2011/5/30 18
  16. 16.  Pretends to be a native app ◦ Spec: http://www.w3.org/TR/html5/offline.html ◦ Quick start  In HTML <html manifest=“your-app-cache.manifest">  In manifest file (served as text/cache-manifest) CACHE MANIFEST CACHE: your.html your.css your.js NETWORK: * Play with HTML Games 2011/5/30 19
  17. 17.  Detect offline status ◦ Check online status  navigator.onLine  window.ononline and window.onoffline ◦ Application cache object  Global app cache object window.applicationCache  Listen events  progress/cached/checking/…  Update cache  applicationCache.update()/swapCache() Play with HTML Games 2011/5/30 20
  18. 18.  Facebook integration Play with HTML Games 2011/5/30 24
  19. 19.  HTML Weakness ◦ Overall performance isn’t good enough ◦ Many standard specs are partially implemented When to Use HTML ◦ Casual game without complex UI or game logic ◦ Want to integrate into some mobile web sites ◦ Design for Chrome Market Play with HTML Games 2011/5/30 25
  20. 20. 2D Canvas 3D Canvas CSS Animation Firefox 4 Yes Partial No IE9 Yes No No Chrome 11 Yes Partial Yes Safari 5 Yes No Yes Opera 11.1 Yes No No iOS Safari 4.2 Yes No Yes Android 2.2 Yes No YesData from http://www.caniuse.com/ on May, 2011 Play with HTML Games 2011/5/30 26
  21. 21. Audio Video Web Fonts Firefox 4 Yes Yes Yes IE9 Yes Yes Yes Chrome 11 Yes Yes Yes Safari 5 Yes Yes Yes Opera 11.1 Yes Yes Yes iOS Safari 4.2 Yes Yes Yes Android 2.2 Yes Yes PartialData from http://www.caniuse.com/ on May, 2011 Play with HTML Games 2011/5/30 27
  22. 22. Data URL Storage API App Cache Firefox 4 Yes Yes Yes IE9 Yes Yes No Chrome 11 Yes Yes Yes Safari 5 Yes Yes Yes Opera 11.1 Yes Yes Yes iOS Safari 4.2 Yes Yes Yes Android 2.2 Yes Yes YesData from http://www.caniuse.com/ on May, 2011 Play with HTML Games 2011/5/30 28
  23. 23. Messaging HTTP Origin Web Socket Firefox 4 Yes Yes Yes IE9 Yes Partial No Chrome 11 Yes Yes Yes Safari 5 Yes Yes Yes Opera 11.1 Yes No Yes iOS Safari 4.2 Yes Yes Yes Android 2.2 Yes Yes NoData from http://www.caniuse.com/ on May, 2011 Play with HTML Games 2011/5/30 29
  24. 24. Welcome to follow me My twitter @huanduPlay with HTML Games 2011/5/30 30

×