Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1 使って覚える TileMap #Unity 道場
今日の流れ ●Unity と 2D ●TileMap の機能紹介 ●実際に使用してみる ●TileMap のカスタマイズの紹介 ●UFO ゲーム（仮）を作ってみる
3 1. Unity と 2D
4 “ 手軽に 3D ゲームを開発可能な Unity 、 　一時 Unity 3D と名乗る事もありまし た .” ３ D
5 “2013 年頃から 2D にも力を入れ始めて ”やっとある程度の形になりました
6
7 “2D ”向けスプライトの表現 “2D ”向け物理演算 “ 以前よりまともな UI ”システム
8 “ 最近では、いきなり機能を追加せず Experimental Build （実験ビルド）で 一旦フィードバックを集めてから ”エンジンに反映させる形を取っています Experimental Build Beta Release Patch...
9 “2D は 2D Experimental Preview で公開 ”幾つかの機能がエンジンに着地し始めた
10
11 “9-Slice”
12 “Physics Shape Editor” 当たり判定の形状を Sprite 単位で設定
13 “Composite Collider” Collider を結合
14 “Sorting Group” 描画順を一纏めにして制御
15 “Axis Distance Sort” 描画順のルールを変更 （例えば下が手前等）
16 “Sprite Atlas” スプライトをまとめる
17 “Sprite Mask” スプライトのマスク制御
18 Demo
19 “TileMap”
20 “Character Animation” “Smart Sprite”
21 “ 今回は Tilemap ”について紹介
22 2. TileMap の機能の紹 介
TileMap ●グリッドにタイルを設定して 　ステージを構築するシステム ●AssetStore の人気ジャンルの一つ ●プログラマなら誰でも一度は作る Unity 2017.2 より 標準機能として搭載
24 Unity 2017.2 の タイルマップの機能 Grid （ Tilemap ） タイルをセットするグリッド Tile タイルのアセット Palette タイルを塗る際に使用するパレット
Grid (& TileMap) ●タイルの間隔や、タイルの向き 　を制御する項目 ●TilemapRenderer は 　登録したタイルを最小限の 　描画回数で描画する ●描画順制御は SpriteRenderer と同様
Tile Asset ●TileMap にタイルを塗り込む際に 　利用するアセット情報 ●Sprite にタイルマップ用の 　情報（当たり判定や色）を 　追加したもの
Tile Palette ●TileMap に塗る TileAsset を 　選択する際に使用する。 ●タイルの登録や、パレットの編集、 　 TileMap の選択等が出来る。 ●ブラシ（選択・区系・塗りつぶし） 　等を選択出来るが、これは標準...
28 “Tile Asset を作成し、 Tile Palette に登録、 Tile Map に塗る ”という流れ 1 2 3
29 “ 描画周りは SpriteRender に近いので Sprite Render ”と組み合わせても使える Order In Layer や Sorting Layer による描画順制御 Sorting Group による描画順の グルー...
30 3. 実際に使用してみる
作業の流れ ●Tile Palette を作成 ●Tile Asset を作成 ●TileMap を作成 ●塗る • Tile Palette ウィンドウを開く • Tile Palette の設定をプロジェクトに保存 • Texture をイ...
Tile Palette の作成 ●メニューアイテムの 　 Window > Tile Palette を開く ●Create New Palette を選択 ●Name ”に NewPalette” 等指定し 　 Create を選択
Tile Asset の作成 (1/3) ~Texture 設定編 ~ ●インポートした Texture を選択 ●Sprite Mode を Multiple に変更 ●Pixels Per Unit をタイルと同じ大きさに変更 　 ( 例え...
Tile Asset の作成 (2/3) ~Sprite 作成編 ~ ●Sprite Editor を選択 ●Slice を選択 ●Cried By Cell Size を選択し、 　 Pixel Size はタイルの大きさを指定 ●Slice...
Tile Asset の作成 (3/3) ~Tile Asset 登録編 ~ ●Texture （ 　が付いている）を 　 Tile Palette にドラッグ＆ドロップ ●TileAsset を出力するパスを聞かれる 　ので、 Assets ...
Tile Map の作成 ● Hierarchy の 　 Create > 2D Object > Tilemap を選択 ●複数の Tilemap を作りたい場合は、 　 Grid を選択して Tilemap を作成 ●複数の Grid を作...
Tile Map を埋める ●Tile Palette ” ”で ブラシ を選択 ● Hierarchy で塗りたい Tilemap を選択 ●SceneView の Tilemap をクリックする 　→ Palette で選択中のタイルが塗ら...
38 選択 タイルを選択する 移動 選択したタイルを移動する 移動 Palette で選択したタイルで TileMap を塗る 移動 Palette で選択したタイルで Tilemap を矩形に塗りつぶす スポイト Tilemap からタイルを...
39 ショートカットキー M D/Shift U G S B I
40 タイルの回転 タイルを塗る直前で 「 { 」もしくは 「 } 」キーで回転
当たり判定の設定 (1/3) 　〜 Grid 〜 ●Tilemap に Tilemap Collider 2D を追加 ●Tile Asset の Collider Type を Grid に変更
当たり判定の設定 (2/3) 　〜 Sprite 〜 ●Tile 毎に当たり判定の形を指定 ●Tilemap に Tilemap Collider 2D を追加 ●Tile Asset の Collider Type を Sprite に変更
当たり判定の設定 (3/3) 　〜 Composite Collider 〜 ●Composite Collider2D で 　当たり判定を結合する ●Tilemap に Composite Collider2D を追加 ●Rigidbody2...
44 Demo
Tile Palette の編集 ●Tile Palette の Edit で 　エディットモードに切り替え ●パレットの中を通常のエディットモードと 　同じように編集する ●Alt + 左マウス（ or マウス中央ボタン）でパ ン ●スクロー...
配置をグリッドに合わせる ●Grid コンポーネント以下に配置した 　 GameObject の位置は、 Grid に合わせて 　配置される。
複数の Tilemap の作成 ●Tilemap の一つの Grid に塗れるのは 　一つのタイルのみ ●Hierarchy の Grid を選択中に Tilemap を作成 ●描画順は Tilemap の Soring Layer や 　 O...
描画順の指定 ●TileMapRenderer の 　 Order In Layer と Sorting Layer で 　描画順を設定 ●Sorting Group を使用すると、 　描画順の制御が楽になる ●Sprite Mask で手前の...
Sprite のパッキング ●スプライトを一つのアセットにパッキングし 　マテリアルの切替を最小限に抑える ●Asset > Create > Sprite Atlas を作成 ●Object for Packing にパックする 　・パックす...
50 色々と試してみる
• タイルの効率的な描画 • タイルの制御機能 • パレット • オートタイル • アニメーション • タイル上にギミックを配置 • その他もろもろ 機能 ある 機能ない
52 4. TileMap のカスタマイズ
53 “Programmable Tile” “Custom Brush” 改造可能な項目
Programmable Tile ●タイル描画時の挙動を改造 隣接するブロックの有無で 使用する Sprite を切り替え アニメーション Collider のタイプを変更タイルに Normal を使用 Tile の向きを設定
Custom Brush ●Custom Brush はタイルを塗る際に 　独自の動きを定義する ●塗る用途以外にも、 　オブジェクトを配置する際にも 　活用可能
56 Demo RoboDash
プロジェクトが 要求する機能 サンプルコード 多くのプロジェクトで 必要となるもの （必ずしも必要とは限らない） プロジェクトにより 必要となるもの 根幹となる基本機能 基本機能
●ブラシとタイルの幾つかのサンプル 　 https://github.com/Unity-Technologies/2d-extras ●RoboDash のデモプロジェクト 　 https://github.com/Unity-Technol...
●今回はオートタイルとラインブラシを用意
オートタイル（サンプル１） ●周辺のタイル配置状況に応じて 　タイルを切り替える ●X 軸・ Y 軸反転、回転の設定 ●アニメーションの設定 ●ランダムタイル
ラインブラシ（サンプル２） ●最初に選択したタイルから、 　直線にタイルを塗る
62 5. UFO ゲーム（仮）を 作ってみる
2D UFO Tutorial ●Roll a Ball の 2D 版サンプル ● ” ”個人的には 最も簡単なチュートリアル UFO がステージ内の石を 全て回収したら勝ち
作業の流れ スプライトの分割 オートタイルの設定 当たり判定の設定 ステージの作成 UFO ・アイテムを配置 制限時間を付ける 今回の主な作業
オートタイルの作成 (1/3) ●Project > Create の Auto Tile を選択 　ファイルが作られるので適当な名前を設定 ●Default Sprite には 　サムネイルとなるスプライトをセット ●Tiling Rules...
オートタイルの作成 (2/3) ●Tiling Rules の設定 ●スプライト、及び移動可能な方向を設定 　移動可能な方向は上から狭い順に設定する ●回転するなら Rule の項目は Rotated ●当たり判定を持つなら Collider ...
オートタイルの作成 (3/3) ●Palette へ作成したタイルを 　ドラッグ＆ドロップで登録 ●Edit でパネルを編集して 　矩形に広げておくと使いやすい
ステージの作成 ●オートタイルのタイルも、 　通常のタイルと同じように Tilemap を塗る ●Tilemap Collider を Tile に追加して、 　タイルマップに当たり判定を追加
UFO の配置 ●Assets/Prefab フォルダの 　　「 Main Camera 」と「 UFO 」をシーンに配置 ●Hierarchy の MainCamera の 　 Camera Controller の「 Player 」に、 ...
アイテムの配置 ●Assets/Prefab の Pickup オブジェクトを 　シーンに配置 ●Grid オブジェクトの子に設定すると、 　配置が楽になる
スコアと制限時間の表示 ●Assets/Prefab の Canvas をシーンに配置 ●Hierarchy の UFO を選択し、 　先程シーンに配置した Canvas の 　 TimeText と ItemCountText を 　 Pla...
72 Demo
ブラシの切り替え ●Tile Palette のブラシの項目を選択し、 　使用するブラシを切り替える ●Default Brush 　：　標準のブラシ ●Coordinate Brush 　：　座標をシーンに表示 ●Line Brush ：　最...
TileMap のアニメーション ●Tilemap のアニメーション表現 ●Output を Animation に設定 ●Size にアニメーション用スプライトを登録 ●Speed で速度を調整 1 3 2
ランダムタイル ●登録したタイルの内のどれかを使用する ●Output を Random に設定 ●Size を増やし、 Sprite を登録 1 2
76 何か面白いもの を作る時間
【Unity道場】使って覚えるTileMap
Upcoming SlideShare
Loading in …5
×

【Unity道場】使って覚えるTileMap

80,246 views

Published on

こちらは「【Unity道場】使って覚えるUnityのタイルマップ 」で使用されたスライドです。
http://meetup.unity3d.jp/event/558

Unity 2017.2では、ついに念願のタイルマップが搭載されました。
しかし、まだベータ版という事もあり、興味があるが触った事がないという人が多いのではないでしょうか。そこで8月5日のUnity道場では、タイルマップについてのセミナーを行います。
Unity標準のタイルマップではどういった事が出来るのか…といった機能紹介から、実際にタイルマップをワークショップ形式で操作し、タイルマップの操作方法をマスターしてもらいます。

Published in: Technology
no profile picture user

  • Login to see the comments

Show More

【Unity道場】使って覚えるTileMap

  1. 1. 1 使って覚える TileMap #Unity 道場
  2. 2. 今日の流れ ●Unity と 2D ●TileMap の機能紹介 ●実際に使用してみる ●TileMap のカスタマイズの紹介 ●UFO ゲーム（仮）を作ってみる
  3. 3. 3 1. Unity と 2D
  4. 4. 4 “ 手軽に 3D ゲームを開発可能な Unity 、 　一時 Unity 3D と名乗る事もありまし た .” ３ D
  5. 5. 5 “2013 年頃から 2D にも力を入れ始めて ”やっとある程度の形になりました
  6. 6. 6
  7. 7. 7 “2D ”向けスプライトの表現 “2D ”向け物理演算 “ 以前よりまともな UI ”システム
  8. 8. 8 “ 最近では、いきなり機能を追加せず Experimental Build （実験ビルド）で 一旦フィードバックを集めてから ”エンジンに反映させる形を取っています Experimental Build Beta Release Patch Build
  9. 9. 9 “2D は 2D Experimental Preview で公開 ”幾つかの機能がエンジンに着地し始めた
  10. 10. 10
  11. 11. 11 “9-Slice”
  12. 12. 12 “Physics Shape Editor” 当たり判定の形状を Sprite 単位で設定
  13. 13. 13 “Composite Collider” Collider を結合
  14. 14. 14 “Sorting Group” 描画順を一纏めにして制御
  15. 15. 15 “Axis Distance Sort” 描画順のルールを変更 （例えば下が手前等）
  16. 16. 16 “Sprite Atlas” スプライトをまとめる
  17. 17. 17 “Sprite Mask” スプライトのマスク制御
  18. 18. 18 Demo
  19. 19. 19 “TileMap”
  20. 20. 20 “Character Animation” “Smart Sprite”
  21. 21. 21 “ 今回は Tilemap ”について紹介
  22. 22. 22 2. TileMap の機能の紹 介
  23. 23. TileMap ●グリッドにタイルを設定して 　ステージを構築するシステム ●AssetStore の人気ジャンルの一つ ●プログラマなら誰でも一度は作る Unity 2017.2 より 標準機能として搭載
  24. 24. 24 Unity 2017.2 の タイルマップの機能 Grid （ Tilemap ） タイルをセットするグリッド Tile タイルのアセット Palette タイルを塗る際に使用するパレット
  25. 25. Grid (& TileMap) ●タイルの間隔や、タイルの向き 　を制御する項目 ●TilemapRenderer は 　登録したタイルを最小限の 　描画回数で描画する ●描画順制御は SpriteRenderer と同様
  26. 26. Tile Asset ●TileMap にタイルを塗り込む際に 　利用するアセット情報 ●Sprite にタイルマップ用の 　情報（当たり判定や色）を 　追加したもの
  27. 27. Tile Palette ●TileMap に塗る TileAsset を 　選択する際に使用する。 ●タイルの登録や、パレットの編集、 　 TileMap の選択等が出来る。 ●ブラシ（選択・区系・塗りつぶし） 　等を選択出来るが、これは標準の 　動作を上書きする点に注意 ●実体は Prefab
  28. 28. 28 “Tile Asset を作成し、 Tile Palette に登録、 Tile Map に塗る ”という流れ 1 2 3
  29. 29. 29 “ 描画周りは SpriteRender に近いので Sprite Render ”と組み合わせても使える Order In Layer や Sorting Layer による描画順制御 Sorting Group による描画順の グループ化 Sprite Atlas による パスの最小化 Sprite Mask による マスキング
  30. 30. 30 3. 実際に使用してみる
  31. 31. 作業の流れ ●Tile Palette を作成 ●Tile Asset を作成 ●TileMap を作成 ●塗る • Tile Palette ウィンドウを開く • Tile Palette の設定をプロジェクトに保存 • Texture をインポートして Sprite を指定サイズに分割 • Sprite を TilePalette に登録（ Tile Asset を生成） • Tile Palatte から塗りたいタイルを選択 • Hierarchy の TileMap を選択 • Tile の Draw を選択し、 SceneView をなぞる
  32. 32. Tile Palette の作成 ●メニューアイテムの 　 Window > Tile Palette を開く ●Create New Palette を選択 ●Name ”に NewPalette” 等指定し 　 Create を選択
  33. 33. Tile Asset の作成 (1/3) ~Texture 設定編 ~ ●インポートした Texture を選択 ●Sprite Mode を Multiple に変更 ●Pixels Per Unit をタイルと同じ大きさに変更 　 ( 例えば 1 タイル 32*32 の場合は PixelsPerUnit は 32) ●Filter Mode を Point に変更 ●設定項目下の Apply を押す ! ! !
  34. 34. Tile Asset の作成 (2/3) ~Sprite 作成編 ~ ●Sprite Editor を選択 ●Slice を選択 ●Cried By Cell Size を選択し、 　 Pixel Size はタイルの大きさを指定 ●Slice を選択 ●Apply で変更を確定
  35. 35. Tile Asset の作成 (3/3) ~Tile Asset 登録編 ~ ●Texture （ 　が付いている）を 　 Tile Palette にドラッグ＆ドロップ ●TileAsset を出力するパスを聞かれる 　ので、 Assets フォルダ以下の適当 な 　フォルダを指定 ドラッグ＆ドロップ 登録完了
  36. 36. Tile Map の作成 ● Hierarchy の 　 Create > 2D Object > Tilemap を選択 ●複数の Tilemap を作りたい場合は、 　 Grid を選択して Tilemap を作成 ●複数の Grid を作りたい場合は、 　一旦 Grid や Tilemap からフォーカスを外し 　 Tilemap を作成
  37. 37. Tile Map を埋める ●Tile Palette ” ”で ブラシ を選択 ● Hierarchy で塗りたい Tilemap を選択 ●SceneView の Tilemap をクリックする 　→ Palette で選択中のタイルが塗られる ●TilePalette 選択中は SceneView のパネルから 　外されるので注意
  38. 38. 38 選択 タイルを選択する 移動 選択したタイルを移動する 移動 Palette で選択したタイルで TileMap を塗る 移動 Palette で選択したタイルで Tilemap を矩形に塗りつぶす スポイト Tilemap からタイルを取得する 削除 クリックしたタイルを消す 塗りつぶし パレットで選択したタイルで クリックしたタイルと同じタイルを 塗りつぶす
  39. 39. 39 ショートカットキー M D/Shift U G S B I
  40. 40. 40 タイルの回転 タイルを塗る直前で 「 { 」もしくは 「 } 」キーで回転
  41. 41. 当たり判定の設定 (1/3) 　〜 Grid 〜 ●Tilemap に Tilemap Collider 2D を追加 ●Tile Asset の Collider Type を Grid に変更
  42. 42. 当たり判定の設定 (2/3) 　〜 Sprite 〜 ●Tile 毎に当たり判定の形を指定 ●Tilemap に Tilemap Collider 2D を追加 ●Tile Asset の Collider Type を Sprite に変更
  43. 43. 当たり判定の設定 (3/3) 　〜 Composite Collider 〜 ●Composite Collider2D で 　当たり判定を結合する ●Tilemap に Composite Collider2D を追加 ●Rigidbody2D の BodyType を static に ●Tilemap Collider2D の UseComposite に 　チェックを入れる
  44. 44. 44 Demo
  45. 45. Tile Palette の編集 ●Tile Palette の Edit で 　エディットモードに切り替え ●パレットの中を通常のエディットモードと 　同じように編集する ●Alt + 左マウス（ or マウス中央ボタン）でパ ン ●スクロールでズーム
  46. 46. 配置をグリッドに合わせる ●Grid コンポーネント以下に配置した 　 GameObject の位置は、 Grid に合わせて 　配置される。
  47. 47. 複数の Tilemap の作成 ●Tilemap の一つの Grid に塗れるのは 　一つのタイルのみ ●Hierarchy の Grid を選択中に Tilemap を作成 ●描画順は Tilemap の Soring Layer や 　 Order In Layer を使用 ●Tile Painter が描画するのは、 　選択中の Tilemap
  48. 48. 描画順の指定 ●TileMapRenderer の 　 Order In Layer と Sorting Layer で 　描画順を設定 ●Sorting Group を使用すると、 　描画順の制御が楽になる ●Sprite Mask で手前のスプライトに穴を 　開けるといった事も出来る SpriteMask で キャラクター手前の 壁に穴をあける例
  49. 49. Sprite のパッキング ●スプライトを一つのアセットにパッキングし 　マテリアルの切替を最小限に抑える ●Asset > Create > Sprite Atlas を作成 ●Object for Packing にパックする 　・パックするスプライトが含まれるフォルダ 　・パックするスプライトが含まれるテクスチャ 　・パックするスプライト 　のいずれかを登録 　 Preview ボタンで動作を確認出来る
  50. 50. 50 色々と試してみる
  51. 51. • タイルの効率的な描画 • タイルの制御機能 • パレット • オートタイル • アニメーション • タイル上にギミックを配置 • その他もろもろ 機能 ある 機能ない
  52. 52. 52 4. TileMap のカスタマイズ
  53. 53. 53 “Programmable Tile” “Custom Brush” 改造可能な項目
  54. 54. Programmable Tile ●タイル描画時の挙動を改造 隣接するブロックの有無で 使用する Sprite を切り替え アニメーション Collider のタイプを変更タイルに Normal を使用 Tile の向きを設定
  55. 55. Custom Brush ●Custom Brush はタイルを塗る際に 　独自の動きを定義する ●塗る用途以外にも、 　オブジェクトを配置する際にも 　活用可能
  56. 56. 56 Demo RoboDash
  57. 57. プロジェクトが 要求する機能 サンプルコード 多くのプロジェクトで 必要となるもの （必ずしも必要とは限らない） プロジェクトにより 必要となるもの 根幹となる基本機能 基本機能
  58. 58. ●ブラシとタイルの幾つかのサンプル 　 https://github.com/Unity-Technologies/2d-extras ●RoboDash のデモプロジェクト 　 https://github.com/Unity-Technologies/2d-gamedemo-robodash In
  59. 59. ●今回はオートタイルとラインブラシを用意
  60. 60. オートタイル（サンプル１） ●周辺のタイル配置状況に応じて 　タイルを切り替える ●X 軸・ Y 軸反転、回転の設定 ●アニメーションの設定 ●ランダムタイル
  61. 61. ラインブラシ（サンプル２） ●最初に選択したタイルから、 　直線にタイルを塗る
  62. 62. 62 5. UFO ゲーム（仮）を 作ってみる
  63. 63. 2D UFO Tutorial ●Roll a Ball の 2D 版サンプル ● ” ”個人的には 最も簡単なチュートリアル UFO がステージ内の石を 全て回収したら勝ち
  64. 64. 作業の流れ スプライトの分割 オートタイルの設定 当たり判定の設定 ステージの作成 UFO ・アイテムを配置 制限時間を付ける 今回の主な作業
  65. 65. オートタイルの作成 (1/3) ●Project > Create の Auto Tile を選択 　ファイルが作られるので適当な名前を設定 ●Default Sprite には 　サムネイルとなるスプライトをセット ●Tiling Rules の「＋」をクリックして Rule を追加 　
  66. 66. オートタイルの作成 (2/3) ●Tiling Rules の設定 ●スプライト、及び移動可能な方向を設定 　移動可能な方向は上から狭い順に設定する ●回転するなら Rule の項目は Rotated ●当たり判定を持つなら Collider の項目は Sprite か 　 Grid を設定
  67. 67. オートタイルの作成 (3/3) ●Palette へ作成したタイルを 　ドラッグ＆ドロップで登録 ●Edit でパネルを編集して 　矩形に広げておくと使いやすい
  68. 68. ステージの作成 ●オートタイルのタイルも、 　通常のタイルと同じように Tilemap を塗る ●Tilemap Collider を Tile に追加して、 　タイルマップに当たり判定を追加
  69. 69. UFO の配置 ●Assets/Prefab フォルダの 　　「 Main Camera 」と「 UFO 」をシーンに配置 ●Hierarchy の MainCamera の 　 Camera Controller の「 Player 」に、 　 Hierarchy の UFO を指定 ●MainCamera と Player の X/Y 座標は 　同じ位置にしておく
  70. 70. アイテムの配置 ●Assets/Prefab の Pickup オブジェクトを 　シーンに配置 ●Grid オブジェクトの子に設定すると、 　配置が楽になる
  71. 71. スコアと制限時間の表示 ●Assets/Prefab の Canvas をシーンに配置 ●Hierarchy の UFO を選択し、 　先程シーンに配置した Canvas の 　 TimeText と ItemCountText を 　 PlayerController の TimeText と 　 ItemCountText に追加
  72. 72. 72 Demo
  73. 73. ブラシの切り替え ●Tile Palette のブラシの項目を選択し、 　使用するブラシを切り替える ●Default Brush 　：　標準のブラシ ●Coordinate Brush 　：　座標をシーンに表示 ●Line Brush ：　最初にクリックした位置から 　　　　　　　　直線を描画するブラシ
  74. 74. TileMap のアニメーション ●Tilemap のアニメーション表現 ●Output を Animation に設定 ●Size にアニメーション用スプライトを登録 ●Speed で速度を調整 1 3 2
  75. 75. ランダムタイル ●登録したタイルの内のどれかを使用する ●Output を Random に設定 ●Size を増やし、 Sprite を登録 1 2
  76. 76. 76 何か面白いもの を作る時間

×