Designing Responsive Cross-Platform Games

Transcript

1. Designing Responsive Cross-Platform Games Graham Dobie — Chunk
3. We create entertaining interactive content that helps brands, broadcasters and entertainment companies to achieve their goals
4. Image — Kevin Cornell — http://alistapart.com/article/responsive-web-design/ “Responsive”
5. “Responsive”
6. <body> <game> tear-jerkingly beautiful game code </game> </body> “Cross-Platform”
14. Viewport
16. Browser Chrome
17. Image — Jeremy Keith
18. Larger Ratio Discrepancy
19. Establishing a list of target devices, OS versions and browsers is essential – primarily for the sake of sanity.
20. Layers
21. Separate UI & Gameplay Layers Gameplay layer UI layer HTML Canvas Element HTML CSS Javascript
22. Canvas
26. Playable Area = Narrowest Ratio
27. Pad with non-interactive content
28. Sufficient background art
29. Orientation
30. Device browsers are multiorientable i.e. we have no control over locking to a particular orientation.
31. Please rotate your device
34. In general, we design games to landscape due to the widescreen format of desktops & laptops.
35. Beakeriser
36. Input
37. ! It’s tempting to base game controls on new available input methods, but these are cross-platform games
40. Weight
42. Compress all images as much as possible ! Pngyu | ImageOptim
43. Graham Dobie @rebobaydobay @chunkdigital chunkgroup.com Icon Credits — Porthole by Alessandro Bertoni, Cake by Julien Deveaux, Easel by Jeanette Clement, Balloon by Julien Deveaux, Mouse by Zoë Austin, Scale by Yorlmar Campos from The Noun Project