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

Designing Responsive Cross-Platform Games

Graham Dobie
October 02, 2014
Design
0
64

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
630

Other Decks in Design

See All in Design
Starry | Storyboards | Scene 1-21
giofortuna_story
0
160
東急URBAN HACKSのデザイナーって何やってるの？ 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
240
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
5.3k
今日から意識できるアクセシビリティ
fumiko
0
200
LayerX DesignersDeck
layerx
PRO
1
7.5k
portfolio_YumiYasuda
yum0418
0
230
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは？
atsushihomma
1
390
Social Anxiety
ksmith2024
0
190
セブンデックス カルチャーブック
sevendex
1
9.7k
「Figmaプラグイン開発してみた」＠スタメンデザイナーオープン勉強会
kiyoshifuwa
0
160
なぜ今必要？Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
0
760
オリジナルのデザイン地図を作ってみた！〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
450

Featured

See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.5k
The Cost Of JavaScript in 2023
addyosmani
49
7.7k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
4 Signs Your Business is Dying
shpigford
183
22k
What's in a price? How to price your products and services
michaelherold
245
12k
How to Ace a Technical Interview
jacobian
276
23k
Practical Orchestrator
shlominoach
187
11k
Faster Mobile Websites
deanohume
306
31k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Rebuilding a faster, lazier Slack
samanthasiow
81
8.9k

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