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
510

Other Decks in Design

See All in Design
管理画面の全体UXは利用時品質モデルで考える
readymadegogo
1
1.5k
Du Bois Challenge 2024 Recap
ajstarks
1
120
Карта процесса-опыта. Презентация метода
ashapiro
0
150
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
1
260
AIイラスト生成・編集テクニック紹介
piyo7
2
200
丸井グループが取り組むエンタープライズアジャイルと プロダクトマネージャーの役割
muture
3
1.4k
JBUG京都#1登壇資料_「考える」をマネジメントする_ビーワークス高濱
webnaut
1
440
What Was UX Design All About?
ykazu
3
660
JBUG東京#22登壇資料_日頃クライアントワークを行っているディレクターが自社コーポレートサイトリニューアルを担当して学んだこと
webnaut
0
370
MLP_Cleanup_Olga
olgastoryboard
0
110
美しいUIを作るために デザイナーが意識している ちょっとした考え方
yuichi_hara7
18
11k
IPの世界観に寄り添う、マルチブランドなカラーシステム設計
jirosh1998
1
10k

Featured

See All Featured
It's Worth the Effort
3n
182
27k
Speed Design
sergeychernyshev
20
420
Understanding Cognitive Biases in Performance Measurement
bluesmoon
25
1.3k
A Philosophy of Restraint
colly
202
16k
Bash Introduction
62gerente
608
210k
Faster Mobile Websites
deanohume
304
30k
GitHub's CSS Performance
jonrohan
1029
450k
We Have a Design System, Now What?
morganepeng
48
7.1k
How to Ace a Technical Interview
jacobian
275
23k
The Language of Interfaces
destraynor
153
23k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k

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