Tilemapはいいぞ！ - Speaker Deck

Tilemapはいいぞ！

by RyotaMurohoshi

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

Slide 189

Slide 189 text

Tilemap始めてみたくなりましたか？

Slide 190

Slide 190 text

Tilemapはいいぞ！ 2018/06/09(土) ABC 2018 Spring Unity部トラック @RyotaMurohoshi