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

Designing Responsive Cross-Platform Games

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Graham Dobie Graham Dobie
October 02, 2014
Design
0
67

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
710

Other Decks in Design

See All in Design
2026年の勢い / Momentum for 2026
Avatar for bebe bebe
0
390
Figmaレクチャー会Part2 もっと使いこなす編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
1
280
30分でわかるインサイトマネジメント（2025年12月バージョン）
Avatar for Centou centou
1
460
CULTURE DECK／Frontend Engineer
Avatar for M-HAND,Inc. mhand01
0
940
CREATIVE CLASS受講課題｜無印良品を題材としたブランド再構築について
Avatar for satoshi kobayashi happy_ferret153
0
700
「ツール」から「パートナー」へ。AI伴走時代のUXデザインとは？～操作を減らし、成果を最大にするための設計～
Avatar for NCDC ncdc
1
240
ClaudeCodeでマーケターの課題を解決する
Avatar for 太田賢一 kenichiota0711
5
8.4k
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
Avatar for 株式会社ルート root_recruit
0
410
OSO2025-マサカリと太陽：伝え方の情報デザイン
Avatar for majimasachi majimasachi
0
730
TWCP#21 UXデザインと哲学のはなし
Avatar for MAMIYA Shinsuke shinn
0
310
絵や写真から学ぶ、要素がもたらす副作用
Avatar for keigo kspace
0
200
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
Avatar for yamamoto-yuta yamamotoyuta
2
680

Featured

See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
150
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
120
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.1k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
9.8k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
79

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