Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing Responsive Cross-Platform Games

Graham Dobie
October 02, 2014
Design
0
62

Designing Responsive Cross-Platform Games

Graham Dobie

October 02, 2014
Tweet

More Decks by Graham Dobie

See All by Graham Dobie
Prototyping Interaction & Animation in the Design Process
silcrow
2
560

Other Decks in Design

See All in Design
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
2
1.3k
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
100
Night Shift (beginning sequence)
cpineda57
0
950
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
7.8k
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
320
GAtechnologies_Designer_Culture_Deck_会社紹介資料
gatechnologies
0
120
デザインシステム構築の進め方　基本から実践まで、具体的な手順を徹底解説
ncdc
1
360
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
2.5k
Tableau曲線表現講座(2024.11.21)
cielo1985
0
210
Design System for training program
mct
0
170
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
3
220
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
4.6k

Featured

See All Featured
Fireside Chat
paigeccino
34
3.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Agile that works and the tools we love
rasmusluckow
328
21k
A better future with KSS
kneath
238
17k
How GitHub (no longer) Works
holman
312
140k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
Scaling GitHub
holman
459
140k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
KATA
mclloyd
29
14k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k

Transcript

  1. Designing Responsive Cross-Platform Games Graham Dobie — Chunk

  2. None

  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”

  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None

  14. Viewport

  15. None

  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

  23. None
  24. None
  25. None

  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

  32. None
  33. None

  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
  38. None
  39. None

  40. Weight

  41. None

  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