Rockstar Graphics with HTML5

Rockstar Graphics with HTML5 Dave Balmer, Gobico Games Developer of Wobble Words and Poker Drops April 24, 2010

A Clean Slate for Web Developers Breaking your skills out of the browser

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 ﬁrmly entrenched in browser-centric approaches (I’m looking at you, JQuery)

The Webkit Stack

The Webkit Stack JavaScript is front and center App Process JavaScript Canvas CSS3 Webkit Linux Kernel ARM CPU Hardware Graphics

Rockstar Graphics with HTML5 Getting the most out of native code (without coding native)

Rockstar Graphics with HTML5 Getting the most out of native code (without coding native) • Canvas Element • CSS3 • Layering techniques • Efficient JavaScript • Trickery

Canvas Element

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

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

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 • We’ll add some goodies later

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

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)

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

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

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

CSS3 Gotchas Current webOS limitations to keep in mind

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”

Layering

Layering Using CSS3 and Canvas elements together can be powerful • Both can be controlled with JavaScript • A good example is a network diagram:

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

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

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 ✔

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 ✔

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

Trickery

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

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

The Future

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

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

http://www.slideshare.net	132
http://palmplatform.com	3
http://www.blogger.com	2
http://ideasdenegocio.upbbga.edu.co	2
http://webcache.googleusercontent.com	2
https://190.96.167.74	1
http://www.brijj.com	1
http://facebook.slideshare.com	1
http://www.lmodules.com	1

Rockstar Graphics with HTML5

by Dave Balmer on Apr 25, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

9 Embeds 145

Statistics

Rockstar Graphics with HTML5 — Presentation Transcript