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

Designing Responsive Cross-Platform Games

Avatar for Graham Dobie Graham Dobie
October 02, 2014
Design
0
65

Designing Responsive Cross-Platform Games

Avatar for Graham Dobie

Graham Dobie

October 02, 2014
Tweet

More Decks by Graham Dobie

See All by Graham Dobie
Prototyping Interaction & Animation in the Design Process
Avatar for Graham Dobie silcrow
2
690

Other Decks in Design

See All in Design
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
440
Cyber Heart Online Book
Avatar for Hannah hjnasby
0
180
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
120
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
460
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
880k
Light My Fire/ハートに火をつけるコミュニティ
Avatar for kgsi kgsi
1
150
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.3k
Spectrum Tokyo_ デザイナーが事業責任者になってみた
Avatar for Woo seop Shin shin_2
0
130
minpaku-community-scrum-patterns
Avatar for Noriaki Kawanishi norinity1103
1
340
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
Avatar for Saiko.T _psyc0_
0
300
BPStudy#213〜ビジネスアナリシスとDDD（ドメイン駆動設計）パネルディスカッション資料 / BPStudy213-panel
Avatar for haru860 haru860
0
480
mento Design Team Portfolio
Avatar for mento _official mento0fficial
1
660

Featured

See All Featured
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
352
21k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.7k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
3
620
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
How GitHub (no longer) Works
Avatar for Zach Holman holman
315
140k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
330
21k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
30
9.6k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.8k

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