脱出ゲームの作り方

1. スマートフォンでの
脱出ゲームの作り方
presented by Takao Uchikawa @tentsan

2. 前提

3. スマートフォンの脱出ゲーム、
特にiOSで作るのを想定しています
!
ただ、基本的な考え方は
別のOSでも応用できると思います
!
オブジェクト指向プログラミングができない
プログラミング言語を使用していると
応用するのが辛いかもしれません

4. 脱出ゲームを作る
・脱出ゲームの構成要素
!
・モデル化
!
・オブジェクトを設置する
!
・(補足)補完背景について

5. 脱出ゲームを作る
・脱出ゲームの構成要素
!
・モデル化
!
・オブジェクトを設置する
!
・(補足)補完背景について

6. ・背景
・タッチ領域
・補完背景
・アイテム関連 (今回は取り扱いません)
・操作ボタン関連 (今回は取り扱いません)

7. 背景

8. クオリティに最も影響のある部分
!
サイズもでかいし容量も食う
!
アプリ全体で50MB以下に抑えましょう
!
app storeでwifiが必要かどうか決まります
!
jpgにするのも手
!
designerさんいないなら
写真でいいんじゃないかな
!

9. タッチ領域

10. このへんに
あるよ

11. 普通規模の脱出ゲームなら
70個ほどのタッチ領域
!
(移動するなど)イベントの
トリガーを仕込むので
データがでかい
!
タッチ領域の大きさによって
難易度が変わってくる
(さっきの画像だと右下のが大変)
!タッチ領域を広告に近づけて
広告誤タップさせようとする
けしからん業者もしばしば…
(社会人ツライ)

12. 補完背景

13. 背景にのせて
差分として使う

14. のせると
変化したように
見える

15. 普通規模の脱出ゲームなら
50個ほどの補間画像
!
特に他の情報を管理しないため
データは楽
!
が…設定するのはものすごく
めんどくさい
!
扱い方を間違えると死ぬ(後述)

16. だいたい
この3つを
プログラミング
すれば

17. 完成!

18. 脱出ゲームを作る
・脱出ゲームの構成要素
!
・モデル化
!
・オブジェクトを設置する
!
・(補足)補完背景について

19. 背景

20. 持っている情報
・id
・右ボタン移動先の背景id
・左ボタン移動先の背景id
・特殊な仕掛けid(後述)

21. 移動先の背景idを管理しているだけなので
とりあえず簡単です

22. タッチ領域

23. データデカイよ！

24. タッチ領域のデータ
・id
・viewId
(どの背景に置くのか)
・requireItemId
(特定のアイテムを選択してないとタッチ無効)
・warpId
(タッチした移動先の背景id)

25. タッチ領域のデータ
・appearGimmickIds
(指定した新しいタッチ領域を出現させる)
・removeGimmickIds
(指定したタッチ領域を消す)
・appearSupplementIds
(指定した補間画像を出現させる)
・removeSupplementIds
(指定した補間画像を消す)

26. タッチ領域のデータ
・enFlag (指定したフラグをtrueに)
・deFlag (指定したフラグをfalseに)
・se (指定した効果音を鳴らす)
・width (幅)
・height (高さ)
・xPoint (設置するx座標)
・yPoint (設置するy座標)

27. タッチ領域のデータ
・present
(画面上に出すか？）
・action
(データでは管理できない
動作をさせたい場合に文字列を指定して
それを元にタッチ領域クラスで管理する)

28. イベントの90%はここで管理するため
データでかくなりがち

29. 補完背景

30. 持っている情報
・id
・viewId
(どの背景にのせるか)
・present
(画面にだすか)

31. 簡単だ

32. どうやってデータ
管理してるの?

33. plistで管理して
アプリ内のDB
に流して使ってるよ

34. 脱出ゲームを作る
・脱出ゲームの構成要素
!
・モデル化
!
・オブジェクトを設置する
!
・(補足)補完背景について

35. 脱出ゲームを作る
・脱出ゲームの構成要素
!
・モデル化
!
・オブジェクトを設置する
!
・(補足)補完背景について

36. 背景に…

37. タッチ領域と

38. 補完背景を

39. touch!
のせよう

40. touch!
のせよう

41. 今見ている背景のidを参照して
!
タッチ領域データと
!
補完背景データのpresentが
!
present == true
!
!
なら背景にのせましょう
!
!
!
簡単だ！

42. 脱出ゲームを作る
・脱出ゲームの構成要素
!
・モデル化
!
・オブジェクトを設置する
!
・(補足)補完背景について

43. 補完背景の取り扱い方には
気をつけよう

44. 間違えると無駄に
寿命を浪費するよ

45. 補間画像を
座標を指定して
管理すると…

46. 微妙にずれやすい…

47. 修正のためには

48. 座標設定→
ビルド→
確認→
ズレ修正→
座標設定→

49. 座標設定→
ビルド→
確認→
ズレ修正→
座標設定→
ビルド→
確認→
ズレ修正→
座標設定→

50. 座標設定→
ビルド→
確認→
ズレ修正→
座標設定→
ビルド→
確認→
ズレ修正→
座標設定→
ビルド→
確認→
ズレ修正→
座標設定→
ビルド→
確認→
ズレ修正→
座標設定→
ビルド→
確認→
ズレ修正→
ビルド→
確認→
ズレ修正→
座標設定→
ビルド→

51. (ノ｀Д´)ノ彡┻━┻

52. 座標で管理するのをやめよう

53. 補間背景を
背景と同じサイズにしよう

54. 重ねるとぴったり！

55. 必要な部分以外は透過することで
そこまで容量は気にならないようになります
!
座標の管理が楽になることで
作業スピードがかなり違ってきます
!
!
!

56. さぁ、

57. 脱出ゲームをつくろう！