1.
1
使って覚える
TileMap
#Unity 道場

2.
今日の流れ
●Unity と 2D
●TileMap の機能紹介
●実際に使用してみる
●TileMap のカスタマイズの紹介
●UFO ゲーム（仮）を作ってみる

3.
3
1. Unity と 2D

4.
4
“ 手軽に 3D ゲームを開発可能な Unity 、
一時 Unity 3D と名乗る事もありまし
た .”
３ D

5.
5
“2013 年頃から 2D にも力を入れ始めて
”やっとある程度の形になりました

6.
6

7.
7
“2D ”向けスプライトの表現
“2D ”向け物理演算
“ 以前よりまともな UI ”システム

8.
8
“ 最近では、いきなり機能を追加せず
Experimental Build （実験ビルド）で
一旦フィードバックを集めてから
”エンジンに反映させる形を取っています
Experimental Build
Beta
Release
Patch Build

9.
9
“2D は 2D Experimental Preview で公開
”幾つかの機能がエンジンに着地し始めた

10.
10

11.
11
“9-Slice”

12.
12
“Physics Shape Editor”
当たり判定の形状を Sprite 単位で設定

13.
13
“Composite Collider”
Collider を結合

14.
14
“Sorting Group”
描画順を一纏めにして制御

15.
15
“Axis Distance Sort”
描画順のルールを変更
（例えば下が手前等）

16.
16
“Sprite Atlas”
スプライトをまとめる

17.
17
“Sprite Mask”
スプライトのマスク制御

18.
18
Demo

19.
19
“TileMap”

20.
20
“Character Animation”
“Smart Sprite”

21.
21
“ 今回は Tilemap ”について紹介

22.
22
2. TileMap の機能の紹
介

23.
TileMap
●グリッドにタイルを設定して
ステージを構築するシステム
●AssetStore の人気ジャンルの一つ
●プログラマなら誰でも一度は作る
Unity 2017.2 より
標準機能として搭載

24.
24
Unity 2017.2 の
タイルマップの機能
Grid （ Tilemap ）
タイルをセットするグリッド
Tile
タイルのアセット
Palette
タイルを塗る際に使用するパレット

25.
Grid (& TileMap)
●タイルの間隔や、タイルの向き
を制御する項目
●TilemapRenderer は
登録したタイルを最小限の
描画回数で描画する
●描画順制御は SpriteRenderer と同様

26.
Tile Asset
●TileMap にタイルを塗り込む際に
利用するアセット情報
●Sprite にタイルマップ用の
情報（当たり判定や色）を
追加したもの

27.
Tile Palette
●TileMap に塗る TileAsset を
選択する際に使用する。
●タイルの登録や、パレットの編集、
TileMap の選択等が出来る。
●ブラシ（選択・区系・塗りつぶし）
等を選択出来るが、これは標準の
動作を上書きする点に注意
●実体は Prefab

28.
28
“Tile Asset を作成し、
Tile Palette に登録、
Tile Map に塗る
”という流れ
1
2
3

29.
29
“ 描画周りは SpriteRender に近いので
Sprite Render ”と組み合わせても使える
Order In Layer や
Sorting Layer による描画順制御
Sorting Group による描画順の
グループ化
Sprite Atlas による
パスの最小化
Sprite Mask による
マスキング

30.
30
3. 実際に使用してみる

31.
作業の流れ
●Tile Palette を作成
●Tile Asset を作成
●TileMap を作成
●塗る
• Tile Palette ウィンドウを開く
• Tile Palette の設定をプロジェクトに保存
• Texture をインポートして Sprite を指定サイズに分割
• Sprite を TilePalette に登録（ Tile Asset を生成）
• Tile Palatte から塗りたいタイルを選択
• Hierarchy の TileMap を選択
• Tile の Draw を選択し、 SceneView をなぞる

32.
Tile Palette の作成
●メニューアイテムの
Window > Tile Palette を開く
●Create New Palette を選択
●Name ”に NewPalette” 等指定し
Create を選択

33.
Tile Asset の作成 (1/3) ~Texture 設定編 ~
●インポートした Texture を選択
●Sprite Mode を Multiple に変更
●Pixels Per Unit をタイルと同じ大きさに変更
( 例えば 1 タイル 32*32 の場合は PixelsPerUnit は 32)
●Filter Mode を Point に変更
●設定項目下の Apply を押す
!
!
!

34.
Tile Asset の作成 (2/3) ~Sprite 作成編 ~
●Sprite Editor を選択
●Slice を選択
●Cried By Cell Size を選択し、
Pixel Size はタイルの大きさを指定
●Slice を選択
●Apply で変更を確定

35.
Tile Asset の作成 (3/3) ~Tile Asset 登録編 ~
●Texture （ が付いている）を
Tile Palette にドラッグ＆ドロップ
●TileAsset を出力するパスを聞かれる
ので、 Assets フォルダ以下の適当
な
フォルダを指定
ドラッグ＆ドロップ
登録完了

36.
Tile Map の作成
● Hierarchy の
Create > 2D Object > Tilemap を選択
●複数の Tilemap を作りたい場合は、
Grid を選択して Tilemap を作成
●複数の Grid を作りたい場合は、
一旦 Grid や Tilemap からフォーカスを外し
Tilemap を作成

37.
Tile Map を埋める
●Tile Palette ” ”で ブラシ を選択
● Hierarchy で塗りたい Tilemap を選択
●SceneView の Tilemap をクリックする
→ Palette で選択中のタイルが塗られる
●TilePalette 選択中は SceneView のパネルから
外されるので注意

38.
38
選択
タイルを選択する
移動
選択したタイルを移動する
移動
Palette で選択したタイルで
TileMap を塗る
移動
Palette で選択したタイルで
Tilemap を矩形に塗りつぶす
スポイト
Tilemap からタイルを取得する
削除
クリックしたタイルを消す
塗りつぶし
パレットで選択したタイルで
クリックしたタイルと同じタイルを
塗りつぶす

39.
39
ショートカットキー
M
D/Shift
U
G
S
B
I

40.
40
タイルの回転
タイルを塗る直前で
「 { 」もしくは
「 } 」キーで回転

41.
当たり判定の設定 (1/3) 〜 Grid 〜
●Tilemap に Tilemap Collider 2D を追加
●Tile Asset の Collider Type を Grid に変更

42.
当たり判定の設定 (2/3) 〜 Sprite 〜
●Tile 毎に当たり判定の形を指定
●Tilemap に Tilemap Collider 2D を追加
●Tile Asset の Collider Type を Sprite に変更

43.
当たり判定の設定 (3/3) 〜 Composite Collider 〜
●Composite Collider2D で
当たり判定を結合する
●Tilemap に Composite Collider2D を追加
●Rigidbody2D の BodyType を static に
●Tilemap Collider2D の UseComposite に
チェックを入れる

44.
44
Demo

45.
Tile Palette の編集
●Tile Palette の Edit で
エディットモードに切り替え
●パレットの中を通常のエディットモードと
同じように編集する
●Alt + 左マウス（ or マウス中央ボタン）でパ
ン
●スクロールでズーム

46.
配置をグリッドに合わせる
●Grid コンポーネント以下に配置した
GameObject の位置は、 Grid に合わせて
配置される。

47.
複数の Tilemap の作成
●Tilemap の一つの Grid に塗れるのは
一つのタイルのみ
●Hierarchy の Grid を選択中に Tilemap を作成
●描画順は Tilemap の Soring Layer や
Order In Layer を使用
●Tile Painter が描画するのは、
選択中の Tilemap

48.
描画順の指定
●TileMapRenderer の
Order In Layer と Sorting Layer で
描画順を設定
●Sorting Group を使用すると、
描画順の制御が楽になる
●Sprite Mask で手前のスプライトに穴を
開けるといった事も出来る
SpriteMask で
キャラクター手前の
壁に穴をあける例

49.
Sprite のパッキング
●スプライトを一つのアセットにパッキングし
マテリアルの切替を最小限に抑える
●Asset > Create > Sprite Atlas を作成
●Object for Packing にパックする
・パックするスプライトが含まれるフォルダ
・パックするスプライトが含まれるテクスチャ
・パックするスプライト
のいずれかを登録
Preview ボタンで動作を確認出来る

50.
50
色々と試してみる

51.
• タイルの効率的な描画
• タイルの制御機能
• パレット
• オートタイル
• アニメーション
• タイル上にギミックを配置
• その他もろもろ
機能
ある
機能ない

52.
52
4. TileMap のカスタマイズ

53.
53
“Programmable Tile” “Custom Brush”
改造可能な項目

54.
Programmable Tile
●タイル描画時の挙動を改造
隣接するブロックの有無で
使用する Sprite を切り替え
アニメーション
Collider のタイプを変更タイルに Normal を使用
Tile の向きを設定

55.
Custom Brush
●Custom Brush はタイルを塗る際に
独自の動きを定義する
●塗る用途以外にも、
オブジェクトを配置する際にも
活用可能

56.
56
Demo RoboDash

57.
プロジェクトが
要求する機能
サンプルコード
多くのプロジェクトで
必要となるもの
（必ずしも必要とは限らない）
プロジェクトにより
必要となるもの
根幹となる基本機能
基本機能

58.
●ブラシとタイルの幾つかのサンプル
https://github.com/Unity-Technologies/2d-extras
●RoboDash のデモプロジェクト
https://github.com/Unity-Technologies/2d-gamedemo-robodash
In

59.
●今回はオートタイルとラインブラシを用意

60.
オートタイル（サンプル１）
●周辺のタイル配置状況に応じて
タイルを切り替える
●X 軸・ Y 軸反転、回転の設定
●アニメーションの設定
●ランダムタイル

61.
ラインブラシ（サンプル２）
●最初に選択したタイルから、
直線にタイルを塗る

62.
62
5. UFO ゲーム（仮）を
作ってみる

63.
2D UFO Tutorial
●Roll a Ball の 2D 版サンプル
● ” ”個人的には 最も簡単なチュートリアル
UFO がステージ内の石を
全て回収したら勝ち

64.
作業の流れ
スプライトの分割
オートタイルの設定
当たり判定の設定
ステージの作成
UFO ・アイテムを配置
制限時間を付ける
今回の主な作業

65.
オートタイルの作成 (1/3)
●Project > Create の Auto Tile を選択
ファイルが作られるので適当な名前を設定
●Default Sprite には
サムネイルとなるスプライトをセット
●Tiling Rules の「＋」をクリックして Rule を追加

66.
オートタイルの作成 (2/3)
●Tiling Rules の設定
●スプライト、及び移動可能な方向を設定
移動可能な方向は上から狭い順に設定する
●回転するなら Rule の項目は Rotated
●当たり判定を持つなら Collider の項目は Sprite か
Grid を設定

67.
オートタイルの作成 (3/3)
●Palette へ作成したタイルを
ドラッグ＆ドロップで登録
●Edit でパネルを編集して
矩形に広げておくと使いやすい

68.
ステージの作成
●オートタイルのタイルも、
通常のタイルと同じように Tilemap を塗る
●Tilemap Collider を Tile に追加して、
タイルマップに当たり判定を追加

69.
UFO の配置
●Assets/Prefab フォルダの
「 Main Camera 」と「 UFO 」をシーンに配置
●Hierarchy の MainCamera の
Camera Controller の「 Player 」に、
Hierarchy の UFO を指定
●MainCamera と Player の X/Y 座標は
同じ位置にしておく

70.
アイテムの配置
●Assets/Prefab の Pickup オブジェクトを
シーンに配置
●Grid オブジェクトの子に設定すると、
配置が楽になる

71.
スコアと制限時間の表示
●Assets/Prefab の Canvas をシーンに配置
●Hierarchy の UFO を選択し、
先程シーンに配置した Canvas の
TimeText と ItemCountText を
PlayerController の TimeText と
ItemCountText に追加

72.
72
Demo

73.
ブラシの切り替え
●Tile Palette のブラシの項目を選択し、
使用するブラシを切り替える
●Default Brush ： 標準のブラシ
●Coordinate Brush ： 座標をシーンに表示
●Line Brush ： 最初にクリックした位置から
直線を描画するブラシ

74.
TileMap のアニメーション
●Tilemap のアニメーション表現
●Output を Animation に設定
●Size にアニメーション用スプライトを登録
●Speed で速度を調整
1
3
2

75.
ランダムタイル
●登録したタイルの内のどれかを使用する
●Output を Random に設定
●Size を増やし、 Sprite を登録
1
2

76.
76
何か面白いもの
を作る時間