Rockstar Graphics with HTML5

13,818 views

Published on

An introduction and demonstration of graphics and animation techniques using canvas and CSS3 working in concert in webkit with html5. Targeted for Palm webOS devices, but compatible with other webkit implementations.

Published in: Technology
0 Comments
25 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
13,818
On SlideShare
0
From Embeds
0
Number of Embeds
175
Actions
Shares
0
Downloads
317
Comments
0
Likes
25
Embeds 0
No embeds

No notes for slide






































  • Rockstar Graphics with HTML5

    1. Rockstar Graphics with HTML5 Dave Balmer, Gobico Games Developer of Wobble Words and Poker Drops April 24, 2010
    2. A Clean Slate for Web Developers Breaking your skills out of the browser
    3. A Clean Slate for Web Developers Breaking your skills out of the browser • JavaScript is the focus instead of an addition • HTML and the DOM provide basic structure; layered semantic markup is not a priority • CSS is the presentation workhorse • Browser compatibility is not an issue, so development is faster • Most frameworks designed for browsers are not optimal for mobile devices because they’re firmly entrenched in browser-centric approaches (I’m looking at you, JQuery)
    4. The Webkit Stack
    5. The Webkit Stack JavaScript is front and center App Process JavaScript Canvas CSS3 Webkit Linux Kernel ARM CPU Hardware Graphics
    6. Rockstar Graphics with HTML5 Getting the most out of native code (without coding native)
    7. Rockstar Graphics with HTML5 Getting the most out of native code (without coding native) • Canvas Element • CSS3 • Layering techniques • Efficient JavaScript • Trickery
    8. Canvas Element
    9. Canvas Element What it is and when to use it • An empty box element where JavaScript directly draws lines, shapes, images, and other 2D primitives • Very similar concept to Java2D and Quartz 2D • Sophisticated path construction with strokes and fills • Image layering and transformation • Uses native code under the hood, so render time is fast • Use it to break outside the DOM “box” model • Ad-hoc graphs and charts • Synchronized animation with multiple images
    10. Sample Code: Line Graph A simple Canvas example • Basic stage • Simple “Graph” class • Array goes in • Graph goes out • Auto-scales Break away to example before clicking -- reveal screen after code walkthru
    11. Sample Code: Line Graph A simple Canvas example • Basic stage • Simple “Graph” class • Array goes in • Graph goes out • Auto-scales • Boring! Break away to example before • Does illustrate the point clicking -- reveal screen after code • Definitely not “Rockstar” material walkthru • We’ll add some goodies later
    12. Canvas: Other Uses Drawing lines is fine, but you can do a lot more • Image manipulation • Transformations (scale, rotate) • Compositing (think Photoshop layers) • Animation • Sprites • Complex physics • The downside: your animation loop will be in JavaScript, which can be difficult to get great performance
    13. Canvas Gotchas Current limitations to keep in mind • Today’s webOS Canvas element has limitations: • No pixel operations (getImageData, putImageData) • No shadows (shadowOffsetX/Y, shadowBlur, shadowColor) • Cannot save raster contents of canvas (toDataURL) • No “round” or “mitre” lineJoin or lineCap (“bevel” only)
    14. Canvas Gotchas Current limitations to keep in mind • Today’s webOS Canvas element has limitations: • No pixel operations (getImageData, putImageData) • No shadows (shadowOffsetX/Y, shadowBlur, shadowColor) • Cannot save raster contents of canvas (toDataURL) • No “round” or “mitre” lineJoin or lineCap (“bevel” only) • And Text? Forget it. • The W3 spec for Canvas text rendering is exciting, but largely unsupported anywhere • Layering with DOM/CSS3 is the practical approach for now
    15. CSS3
    16. CSS3 Mention the excitingg news about 3D and What it is and when to use it hardware accelerated transitions • Sophisticated declarative styling language • Pixel-perfect font, color, image properties • Scale, rotate, stretch, and move any DOM element • Animate property changes with simple physics • Huge benefits for • Adding unique and consistent look and feel to your apps • Creating your own specialized widgets • Simple, unsynchronized animations
    17. Sample Code: Screensaver A contrived yet fun example of CSS3 animation • CSS3 animation • Minimal JavaScript • Timer loop • Setting properties • Letting CSS do the hard stuff Break away to example before clicking -- reveal screen after code walkthru
    18. Sample Code: Screensaver A contrived yet fun example of CSS3 animation • CSS3 animation • Minimal JavaScript • Timer loop • Setting properties • Letting CSS do the hard stuff Break away to example before clicking -- reveal screen after code walkthru
    19. CSS3 Gotchas Current webOS limitations to keep in mind
    20. CSS3 Gotchas Current webOS limitations to keep in mind • No custom fonts • No textShadow or boxShadow (bummer) • No gradients • Have to use gradient background images today • No transitionEnd event • Limits synchronized animation chaining • For now, have to use setTimeout to match transition interval and “hope for the best”
    21. Layering
    22. Layering Using CSS3 and Canvas elements together can be powerful • Both can be controlled with JavaScript • A good example is a network diagram:
    23. Layering Using CSS3 and Canvas elements together can be powerful • Both can be controlled with JavaScript • A good example is a network diagram: CSS Styled Elements + Canvas 2D Lines 2 5 1 4 7 3 6
    24. Sample Code: Line Graph + Our first Canvas example was pretty boring • Canvas still draws the graph • CSS adds some spice • Activate/deactivate animation • More interesting styling • No additional JavaScript
    25. Sample Code: Line Graph + Our first Canvas example was pretty boring • Canvas still draws the graph • CSS adds some spice • Activate/deactivate animation • More interesting styling • No additional JavaScript
    26. Mix and Match for the Win Feature CSS Canvas Text Styling ✔ 2D Drawing Primitives ✔ Sprite Animation ✔ ✔ Generated Gradients ✔ Image Transformations ✔ ✔ “Set it and forget it” Animation ✔ Synchronized Animation ✔ Layered transitions ✔ Layered transformations ✔
    27. Mix and Match for the Win Dipping into both Canvas and CSS techniques Feature CSS Canvas Text Styling ✔ 2D Drawing Primitives ✔ Sprite Animation ✔ ✔ Generated Gradients ✔ Image Transformations ✔ ✔ “Set it and forget it” Animation ✔ Synchronized Animation ✔ Layered transitions ✔ Layered transformations ✔
    28. Layering Example: Poker Drops A quick peek at this game currently in testing • CSS3 Animations • Menu and UI transitions • Dealing cards • Rotating the game board to match device orientation • Custom scroller widget with basic physics • Canvas • Drawing the path between poker cards • Game timer
    29. Layering Example: Poker Drops A quick peek at this game currently in testing • CSS3 Animations • Menu and UI transitions • Dealing cards • Rotating the game board to match device orientation • Custom scroller widget with basic physics • Canvas • Drawing the path between poker cards • Game timer
    30. Trickery
    31. JavaScript Performance Efficiencies Boils down to taking all unnecessary computation out of loops • Pre-compute everything • Make the native code do more work by using CSS3, built-in array operations and other goodies wherever possible • Reduce garbage collection impact by re-using objects instead of tossing them
    32. Trickery: Examples Taking a second look at some of the goodness in the examples • Graph • Simple array-in, graph-out structure • Fancy transitions done with CSS3 • Screensaver Pull up graph example, walk thru use of CSS to offload the • CSS3 does all the heavy lifting goodies, and simple array processing • Our timer loop does very little • Our “random” animation paths are built from pre- computed data
    33. The Future
    34. What We Can Look Forward To Palm is on board—here’s hoping for speedy implementation • More complete CSS3 implementation • More complete Canvas implementation • Hardware accelerated CSS! • Canvas 3D • WebGL • 3D Transformations in CSS3
    35. Q &A
    36. More Information Dave Balmer, Gobico Games @balmer dave@gobico.com http://gobico.com Good CSS and HTML5 Walkthroughs http://css3.info http://diveintohtml5.org “Far Out Fowl” Canvas Game Development Tutorial http://bit.ly/cdfuQb

    ×