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

Designing Responsive Cross-Platform Games

Graham Dobie
October 02, 2014
Design
0
60

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
480

Other Decks in Design

See All in Design
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
4
630
20231122_Design Leader Impact Award_Presentation_FAKE Okazaki
okazakityo
1
250
ポートフォリオ思考を通じたデザイナーキャリアの形成と未来への展望
recruitengineers
PRO
3
2.3k
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
310
Desarrollo de Carrera en Diseño y Producto
solmesz1
2
170
新しい資産運用サービスALTERNA（オルタナ）の伝え方の工夫
layerx
PRO
0
940
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
1
240
Designship 2023｜想いを可視化するデザインの力
weddingpark
0
240
もち的デザイナーのキャリアデザイン新提言：副業起業家のすゝめ
mochitaro
0
1.3k
メドレーという会社と デザインチームのひみつ/About Medley design team
medley
0
400
現象と向き合うデザイン @Spectrum Tokyo Festival 2023
hirokazu_oda
3
1.3k
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
fkady
1
170

Featured

See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
Raft: Consensus for Rubyists
vanstee
132
6.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Faster Mobile Websites
deanohume
299
30k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
Docker and Python
trallard
34
2.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
How GitHub (no longer) Works
holman
304
140k
The Invisible Side of Design
smashingmag
294
49k
Making Projects Easy
brettharned
108
5.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k

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