Rockstar Graphics with HTML5
26 likes2,776 views
The document discusses advancements in web development using HTML5, particularly focusing on the capabilities of JavaScript, the canvas element, and CSS3 for creating rich graphics and animations. It highlights the limitations of current technologies, offers examples of practical applications, and emphasizes the benefits of combining CSS3 and canvas for enhanced performance and visual appeal. Future expectations include improved implementations and support for 3D transformations and hardware acceleration.
Rockstar Graphics with HTML5
- 2. Rockstar Graphics with HTML5 Dave Balmer, Gobico Games Developer of Wobble Words and Poker Drops April 24, 2010
- 3. A Clean Slate for Web Developers Breaking your skills out of the browser
- 4. 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 theyre 鍖rmly entrenched in browser-centric approaches (Im looking at you, JQuery)
- 6. The Webkit Stack JavaScript is front and center App Process JavaScript Canvas CSS3 Webkit Linux Kernel ARM CPU Hardware Graphics
- 7. Rockstar Graphics with HTML5 Getting the most out of native code (without coding native)
- 8. Rockstar Graphics with HTML5 Getting the most out of native code (without coding native) Canvas Element CSS3 Layering techniques Efficient JavaScript Trickery
- 10. 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 鍖lls 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
- 11. 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
- 12. 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 De鍖nitely not Rockstar material walkthru Well add some goodies later
- 13. Canvas: Other Uses Drawing lines is 鍖ne, 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
- 14. Canvas Gotchas Current limitations to keep in mind Todays 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)
- 15. Canvas Gotchas Current limitations to keep in mind Todays 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
- 16. CSS3
- 17. 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 bene鍖ts for Adding unique and consistent look and feel to your apps Creating your own specialized widgets Simple, unsynchronized animations
- 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. 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
- 20. CSS3 Gotchas Current webOS limitations to keep in mind
- 21. 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
- 22. Layering
- 23. Layering Using CSS3 and Canvas elements together can be powerful Both can be controlled with JavaScript A good example is a network diagram:
- 24. 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
- 25. Sample Code: Line Graph + Our 鍖rst Canvas example was pretty boring Canvas still draws the graph CSS adds some spice Activate/deactivate animation More interesting styling No additional JavaScript
- 26. Sample Code: Line Graph + Our 鍖rst Canvas example was pretty boring Canvas still draws the graph CSS adds some spice Activate/deactivate animation More interesting styling No additional JavaScript
- 27. 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
- 28. 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
- 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. 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
- 31. Trickery
- 32. 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
- 33. 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 of鍖oad 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
- 34. The Future
- 35. What We Can Look Forward To Palm is on boardheres hoping for speedy implementation More complete CSS3 implementation More complete Canvas implementation Hardware accelerated CSS! Canvas 3D WebGL 3D Transformations in CSS3
- 36. Q &A
- 37. 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