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
690

Other Decks in Design

See All in Design
アプリ360onWeb使い方と裏ワザ？紹介！
Avatar for ikejun360 ikejun360
0
300
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
Avatar for Hiromi Morikawa hiromitsuuuuu
1
680
What makes a great Director?
Avatar for _Limex_ _limex_
0
300
【最新】マズロー安達の弟子実績（1期-4期の26人分）
Avatar for マズロー安達 maslow_akkun
0
2.8k
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
500
Portfolio 齋藤明敏 Hiroyuki Saito
Avatar for HIROYUKI SAITO crearedesign
0
110
Light My Fire/ハートに火をつけるコミュニティ
Avatar for kgsi kgsi
1
160
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
270
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
PRO
1
24k
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
Avatar for 北見海貴 kitami
1
390
21 Ways to Call American Airlines Customer Care Full Guide USA
Avatar for Sonny americanhub
0
210
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
Avatar for ため tame
0
270

Featured

See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.5k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
237
140k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
232
18k
It's Worth the Effort
Avatar for 3n 3n
187
28k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.7k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
Writing Fast Ruby
Avatar for Erik Berlin sferik
629
62k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
9
850
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k

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