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
680

Other Decks in Design

See All in Design
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
Avatar for Shota Ikeyatsu ikeyatsu
2
1.8k
CMS管理画面のアクセシビリティ
Avatar for Rikiya Ihara / magi magi1125
7
2.1k
“ブロック”で作る、WordPress制作フロー変革のすすめ
Avatar for Koots koots2021
4
1.8k
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
Avatar for Aki spring_aki
4
300
なぜプレイドにデザインエンジニアが必要だったのか？
Avatar for t32k t32k
0
530
オリジナルのデザイン地図を作ってみた！〜OpenMapTilesとMaputnikを活用した地図スタイル〜
Avatar for Hajime Kato hjmkth
1
580
新年あけおめWSの実施スキルをみんなで振り返りタイムのススメ
Avatar for sugiyama sugiyama_sukedachi
0
140
ブランドパーソナリティ言語化における生成AI活用の実際
Avatar for Hiroki Hosaka h0sa
0
170
ポートフォリオ_webデザイナー
Avatar for Nami_designer/corder nami_webdesigner
0
100
タイミーでフィールドワークしたら、サービスデザインが始まった
Avatar for 太田賢一 kenichiota0711
1
2k
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
Avatar for bebe bebe
0
650
「デザイン」を信じるには
Avatar for なつ iflection
0
280

Featured

See All Featured
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
A better future with KSS
Avatar for Kyle Neath kneath
238
17k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.9k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
48
2.9k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.5k
Side Projects
Avatar for Sacha Greif sachag
455
42k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
820
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k

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