Tilemapはいいぞ!

 Tilemapはいいぞ!

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

ABC 2018 Springの公式サイト

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

F46c97bb74758d481531990654933050?s=128

RyotaMurohoshi

June 09, 2018
Tweet

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を使うことで 矩形画像を敷き詰めたマップ 簡単に作れるようになりました

  24. None
  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. こんなゲームに使えそうですね! • アクションゲーム • 戦略シミュレーションゲーム • ローグライクゲーム • ロールプレイングゲーム

  35. None
  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

  177. None
  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