Tilemapはいいぞ！

2018年6月9日(土)に開催されたABC 2018 Springで発表した「Tilemapはいいぞ！」の資料です。

ABC 2018 Springの公式サイト

https://abc.android-group.jp/2018s/

Transcript

1. Tilemapはいいぞ！ 2018/06/09(土) ABC 2018 Spring Unity部トラック @RyotaMurohoshi
2. Unity部トラックにようこそ！
3. Unity部のメンバーやゲストが ゲームエンジンUnityの話をします！ ABCだけどAndroid成分は多くないです。Unityを知っている人向けになっています。多分…
4. #abc2018s_unity
5. Tilemapはいいぞ！ 2018/06/09(土) ABC 2018 Spring Unity部トラック @RyotaMurohoshi
6. ところで・・・
7. 皆さんはUnityに出会ったときのこと 覚えていますか？
8. 数年前、私がUnityを知ったときのこと
9. 『Unityってのがあるのかー 無料だし、ゲーム作りたい！ 使ってみるか！』
10. 『ファイアーエムブレムみたいな 2Dの戦略シミュレーションゲーム 作りたいな！！！』
11. 『よっしゃ！ チュートリアルやるぞ！ 球転がし作るぞ！！ コインプッシャー作るぞ！！！』
12. 数年前の自分は、気づいたのです
13. 『Unity、2Dゲーム作るのめんどくね？』
14. ※ 数年前のことです。今じゃないです。
15. ここ数年でUnityの2D向け機能もパワーアップ • 2D系のPhysics • SpriteRenderer • uGUI
16. そんなUnity、つい最近まで面倒だったもの…
17. そんなUnity、つい最近まで面倒だったもの… 『2Dマップ』
18. つい最近まではUnityで 2Dのマップを作るのは面倒”だった”
19. ”だった”
20. 今のUnityならば 2Dマップもバッチこい！
21. “いま”のUnity、こんなことができるんです！
22. Tilemap
23. Tilemapを使うことで 矩形画像を敷き詰めたマップ 簡単に作れるようになりました
25. Unityでもこんな感じの2Dのマップを 簡単に作成できること、ご存知でした？
26. Tilemap
27. このセッションのゴール • Tilemapの概要とできることを理解してもらう • Tilemapの基本的な使い方を知ってもらう • Tilemapの拡張性の雰囲気をつかんでもらう • 「Tilemapを使ってみたい」と思ってもらう
28. このセッションの対象 Unityの基本的な使い方がわかり SpriteやSpriteRendererなどの アセットやクラスを知っている人
29. むろほし(@RyotaMurohoshi) • Unity部 運営 • Tilemapで技術同人誌 • Tilemapで商業誌の1章を担当 • TilemapでUniteに応募、落選
30. Tilemapはいいぞ！ 2018/06/09(土) ABC 2018 Spring Unity部トラック @RyotaMurohoshi
31. ここから 概要とできること
32. Tilemap、ざっくり言うと…
33. Tilemap、ざっくり言うと… 矩形画像などを敷き詰めた2Dマップを 効率的に作成できるUnityの公式機能
34. こんなゲームに使えそうですね！ • アクションゲーム • 戦略シミュレーションゲーム • ローグライクゲーム • ロールプレイングゲーム
36. こんな感じのマップを作る デモ！
37. Tilemapは2017年の秋にリリースされた Unity 2017.2から利用可能！
38. ちょいちょいバグフィックスが！ リリースノートをよく見ましょう！ 必要に応じてアップデート！ 例えば、TilePaletteにTileが表示されないというバグも…
39. Tilemapの登場前、2Dマップを作るには… • マップエディターを自作する • マップエディターをアセットストアで買って使う • 愚直にSpriteRendererを配置する それぞれ問題が…
40. 公式機能・Tilemapが登場！ もうみんながバラバラに2Dマップエディターを 作らなくていいんだ！！！
41. Tilemapが公式機能であるということは… • マップエディターを自作しなくていい • 「アセットごとに使い方が違う」などがない • 情報が増える、聞ける人が増える • 拡張したアセットが公開される（かも！）
42. 公式であること、強い
43. Tilemapを使えば 2Dマップを効率よく作成できる！ いけてるマップエディター
44. でも実はそれだけじゃない Tilemapの強さ、それは…
45. 拡張性
46. いろいろ拡張・カスタマイズすることで 見た目だけじゃなくステージを構築できる
47. Tilemapを使いこなすと マップエディターというよりも レベルデザイナーになる！
48. 概要とできること • 2Dのマップが効率よくつくれるやつ • Unity 2017.2から使える • 公式の機能であること、強い • 拡張性があり、カスタマイズできる
49. ここまで 概要とできること
50. ここから 基本的な使い方
51. • いくつかの構成要素がある • 作成・描画までにいくつか下準備 Tilemapは…
52. Tilemapの構成要素
53. Tilemap関連ゲームオブジェクト 要素その1
54. Hierarchyウィンドウ上のTilemap関連ゲームオブジェクト 要素その1 Tilemap関連ゲームオブジェクト
55. GridゲームオブジェクトのInspectorウィンドウ 要素その1 Tilemap関連ゲームオブジェクト
56. TilemapゲームオブジェクトのInspectorウィンドウ 要素その1 Tilemap関連ゲームオブジェクト
57. Tile Palette 要素その2
58. Tile Palette ウィンドウ そして Tile Palette アセット 要素その2 Tile Palette
59. Tile Paletteウィンドウ 要素その2 Tile Palette
60. Tile Paletteウィンドウ Paletteを切り替える 要素その2 Tile Palette
61. Project中のTile Palette アセット 要素その2 Tile Palette TODO画像
62. Tileアセット 要素その3
63. 要素その3 Tileアセット Tile Paletteウィンドウ上でTileを切り替えて描画
64. 要素その3 Tileアセット Paletteの上にあるのはSpriteではなくTile Palette上のTileを選び Tilemap上にTileを描画する
65. 要素その3 Tileアセット Projectウィンドウ上のTileアセット
66. 要素その3 Tileアセット TileアセットのInspectorウィンドウ
67. 要素その3 Tileアセット 拡張したTileは複数のSpriteを参照することもある
68. Sprite 要素その4
69. 要素その4 Sprite 例えば、Tileに使う画像はこんな感じ。一枚の中に15個のSprite
70. 要素その4 Sprite TileがSpriteを参照する
71. Tilemapの構成要素 • Tilemap関連ゲームオブジェクト • Tile Palette • Tileアセット • Sprite
72. 構成要素の紹介の次は 実際に作成するまでの下準備
73. Tilemapの描画までの手順を ざっくり紹介！
74. おすすめサンプルプロジェクト 2d-techdemos https://github.com/Unity-Technologies/2d-techdemos
75. 2d-techdemos • Unity公式の2D向けサンプルプロジェクト • Tilemapのサンプルアセットやコードがある • 「こんなことできる」の参考になる
76. ざっくり手順はこんな感じ！ 1. Spriteの準備 2. TilePaletteの作成 3. Tileアセットの作成 4. Tile関連ゲームオブジェクトの作成 5. マップの作成・描画
77. Spriteの準備 手順 その1
78. 手順 その1 Spriteの準備 今回使うのは、Tilemap/Tiles/Rule Tiles/Dungeon Tile/Sprites/dungeon.png
79. 一枚の画像中に複数Sprite Sprite Editorで分割する 手順 その1 Spriteの準備 https://docs.unity3d.com/ja/current/Manual/SpriteEditor.html
80. 手順 その1 Spriteの準備 1枚の画像から15個のSprite
81. 手順 その1 Spriteの準備 こんな感じでノイズが発生してしまうことがある
82. 分割したSprite群から SpriteAtlasを作成する 手順 その1 Spriteの準備 https://docs.unity3d.com/ja/current/Manual/SpriteAtlas.html
83. プロパティの設定も忘れずに 特に「Pixels Per Unit」 手順 その1 Spriteの準備
84. 手順 その1 Spriteの準備 これをやらないと間が空いたり、重なったりしてしまう
85. 手順 その1 Spriteの準備 Pixels Per Unitは Spriteがシーンで描画される際の大きさを司る Pixels Per Unitの値がUnity上の長さ1に相当
86. 手順 その1 Spriteの準備 • 画像を分割してSpriteを作ったり • SpriteAtlasを作ったり • Pixels Per Unitなどのプロパティを設定したり
87. Tile Paletteの作成 手順 その2
88. メニュー「Window > TilePalette」で TilePaletteウィンドウを表示 手順 その2 TilePaletteの作成
89. 手順 その2 TilePaletteの作成 こんな感じでTilePaletteウィンドウが開く
90. 手順 その2 TilePaletteの作成 左上のタブから、「Create New Palette」を選択
91. 手順 その2 TilePaletteの作成 プロジェクト内にPaletteが存在しないときはこんな感じ
92. 手順 その2 TilePaletteの作成
93. 手順 その2 TilePaletteの作成 プロジェクト内にPaletteが作成できる
94. Tileアセットの作成 手順 その3
95. 手順 その3 Tileアセットの作成
96. TilePaletteウィンドウに Spriteをまとめてドラッグ&ドロップ 手順 その3 Tileアセットの作成
97. 手順 その2 TilePaletteの作成
98. 手順 その2 TilePaletteの作成 プロジェクト内にTileアセット群ができる
99. 手順 その2 TilePaletteの作成 TilePaletteにTileが登録される。SpriteじゃなくてTile
100. Spriteを1個ずつドラッグ&ドロップ もしくは メニューからも作成できる 手順 その3 Tileアセットの作成
101. Tilemap関連ゲームオブジェクト作成 手順 その4
102. Hierarchyウィンドウにて Createタブの「2D Object > Tilemap」 手順 その4 Tilemap関連ゲームオブジェクト作成
103. Hierarchyウィンドウ上のTilemap関連ゲームオブジェクト 手順 その4 Tilemap関連ゲームオブジェクト作成
104. GridゲームオブジェクトのInspectorウィンドウ 手順 その4 Tilemap関連ゲームオブジェクト作成
105. GridコンポーネントのInspectorウィンドウ 手順 その4 Tilemap関連ゲームオブジェクト作成
106. TilemapゲームオブジェクトのInspectorウィンドウ 手順 その4 Tilemap関連ゲームオブジェクト作成
107. TilemapコンポーネントのInspectorウィンドウ 手順 その4 Tilemap関連ゲームオブジェクト作成
108. TilemapRendererコンポーネントのInspectorウィンドウ 手順 その4 Tilemap関連ゲームオブジェクト作成
109. マップの作成・描画 手順 その5
110. TilePaletteウィンドウで描画準備 Sceneウィンドウ上にTileを描画 手順 その5 マップの作成・描画
111. 手順 その5 マップの作成・描画 TilePalleteで描画準備
112. 手順 その5 マップの作成・描画 • 描画したいTileを選択 • 筆のアイコンを選択 • DefaultBrushを選択 • Active TilemapをTilemapに
113. 手順 その5 マップの作成・描画 SceneウィンドウのTileを描画したい場所をクリック
114. 描画・塗りつぶし・スポイトなど 便利な機能あり！ ショートカットもあり！ 手順 その5 マップの作成・描画
115. 詳しくはQiitaに書いたから見てね 手順 その5 マップの作成・描画 https://qiita.com/RyotaMurohoshi/items/6fe23e65b18b818467e0
116. アクションゲームにはColliderが必須 手順 おまけ Colliderの設定
117. TilemapCollider2D そして CompositeCollider 手順 おまけ Colliderの設定
118. 手順 おまけ Colliderの設定 TilemapゲームオブジェクトにTilemapCollider2Dコンポーネントを付与
119. 手順 おまけ Colliderの設定 セルごとにColliderが！
120. セルごとにColliderが… ひとつにまとめたい 手順 おまけ Colliderの設定
121. CompositeColliderを付与して… 手順 おまけ Colliderの設定
122. 手順 おまけ Colliderの設定 TilemapCollider2DのUsed By Compositeをtrueに
123. 手順 おまけ Colliderの設定 セルごとのColliderではなくなった！
124. ここまで 基本的な使い方
125. ここから 拡張性と公式サンプル
126. Tilemapの強み
127. Tilemapの強み 拡張性
128. Tilemapの強み いろいろ自分好みにカスタマイズできる アセットだって作れる！
129. Tilemapの強み 便利な拡張アセット ガンガン使おう！
130. Unity公式のTilemap拡張 2d-extras https://github.com/Unity-Technologies/2d-extras
131. 2d-extras • Unity公式の2D向け便利アセット集 • Tilemapの拡張アセットがある • Tilemap以外もターゲットだけど、今はTileのみ • 2d-techdemosは2d-extrasを内包している
132. Tilemapの拡張ポイント Tile
133. Tilemapの拡張ポイント 普通のTileは1つのSpriteを表示 拡張Tileは表示や挙動をカスタマイズできる
134. 2d-extrasの拡張 Tile紹介 その1 Random Tile
135. 2d-extrasの拡張 Tile紹介 その1 Random Tileは 事前に登録したSpriteを ランダムに表示するTile
136. デモ
137. 2d-extrasの拡張 Tile紹介 その2 Terrain Tile
138. デモ
139. 2d-extrasの拡張 Tile紹介 その2 Terrain Tileは 隣接する8個のセルのTileの有無で 表示するSpriteが切り替わるTile
140. 2d-extrasの拡張 Tile紹介 その3 Rule Tile
141. デモ
142. 2d-extrasの拡張 Tile紹介 その3 Rule Tileは Terrain Tileみたいに隣接するTileで表示変更 表示ルールを自分でカスタマイズ
143. Tileをカスタマイズして 作業効率を爆上げ！
144. 拡張Tileのポイント 中身はどうなっているの？
145. そもそもTileは UnityEngine.Tilemaps.Tileクラス
146. UnityEngine.Tilemaps.Tileは UnityEngine.Tilemaps.TileBaseを継承 UnityEngine.Tilemaps.TileBaseは UnityEngine.ScriptableObjectを継承
147. そう、TileアセットはScriptableObject！
148. 拡張TileはTileBaseクラスを継承する
149. TileBaseクラスにはvirtualメソッドがある • StartUp • RefreshTile • GetTileData • GetTileAnimationData
150. 拡張TileではTileBaseのvirtualメソッドを いい感じにオーバライド！
151. 例えば、Random Tile
152. Random Tileを実現するためには Tileを描画する際に Spriteをランダムで出しわける
153. GetTileDataメソッドは、位置とTilemap全体の状態から Tileを表示するための情報を定める public virtual void GetTileData( Vector3Int position, ITilemap tilemap, ref TileData tileData )
154. RandomTileは… • フィールドとしてSprite一覧を保持 • GetTileDataでランダムに表示するSpriteを定める
155. 例えば、Terrain Tile
156. Terrain Tileを実現するためには あるTileを置いた後に それに隣接するTileも更新しないといけない
157. RefreshTIleメソッドは、 Tileが追加・削除されたときに呼ばれる public virtual void RefreshTile( Vector3Int position, ITilemap tilemap )
158. RefreshTileを使って RefreshTileがよばれた => 隣接タイルも更新
159. TerrainTileは… • 隣接8タイルの有無に基づいてSpriteを表示 • RefreshTileをトリガーに隣接するTileの更新を促す
160. こんな感じで、TileBaseのvirtualメソッドを オーバライドして拡張Tileを作ろう！
161. Tilemapの拡張ポイント Brush
162. Tilemapの拡張ポイント Brushを使うと Tileをマップに描画するときの 挙動をカスタマイズできる！
163. 2d-extrasの拡張 Brush紹介 その1 Line Brush
164. 2d-extrasの拡張 Brush紹介 その1 Line Brushで 2点間を結ぶようにTileを描画
165. デモ
166. 2d-extrasの拡張 Brush紹介 その2 Random Brush
167. 2d-extrasの拡張 Brush紹介 その2 Random Brushで 事前に登録したTileをランダムに描画
168. デモ
169. Tilemapの拡張ポイント その1 Brushをカスタマイズして 作業効率を爆上げ！
170. Tilemapの拡張ポイント その1 Brushのポイント インスタンスを作るか・作らないか
171. Tilemapの拡張ポイント その1 Line Brushは線を引く 設定はいらない インスタンスを作らなくても使える
172. Tilemapの拡張ポイント その1 Random Brushは 別々のランダム設定で使いたい インスタンスを作らないと使えない
173. Tilemapの拡張ポイント その1 インスタンスを作るか・作らないかは BrushのCustomGridBrush属性で設定
174. ここまで 拡張性と公式サンプル
175. ここから 実践と実例
176. Unity公式のTilemapを活用サンプル 2d-gamedemo-robodash https://github.com/Unity-Technologies/2d-gamedemo-robodash
178. 2d-gamedemo-robodash • Unity公式のTilemap活用サンプル • シンプルなアクションゲーム • Brushを活用したレベルデザイン！
179. Scenes/mainで遊んでみましょう
180. むずかしいね！
181. Tilemapはマップエディターだけど レベルデザイナーにもなる それをrobodashでお見せします！
182. Initialize Sceneを押そう！
183. いろいろ作成される！
184. 修正するべきところもLevel Brushなら教えてくれる
185. ポチポチって障害物を置こう
186. ここまで 実践と実例
187. まとめ
188. このセッションのゴール • Tilemapの概要とできることを理解してもらう • Tilemapの基本的な使い方を知ってもらう • Tilemapの拡張性の雰囲気をつかんでもらう • 「Tilemapを使ってみたい」と思ってもらう
189. Tilemap始めてみたくなりましたか？
190. Tilemapはいいぞ！ 2018/06/09(土) ABC 2018 Spring Unity部トラック @RyotaMurohoshi