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