Downloaded 82 times
Uploaded byUnity Technologies Japan K.K.
【Unity道場】使って覚えるTileMap
こちらは「【Unity道場】使って覚えるUnityのタイルマップ 」で使用されたスライドです。 http://meetup.unity3d.jp/event/558 Unity 2017.2では、ついに念願のタイルマップが搭載されました。 しかし、まだベータ版という事もあり、興味があるが触った事がないという人が多いのではないでしょうか。そこで8月5日のUnity道場では、タイルマップについてのセミナーを行います。 Unity標準のタイルマップではどういった事が出来るのか…といった機能紹介から、実際にタイルマップをワークショップ形式で操作し、タイルマップの操作方法をマスターしてもらいます。
More Related Content
![[CEDEC2017] 最新モバイルゲームの実例からみるUE4のモバイル向け機能・Tipsを全部まるっとご紹介！](https://cdn.slidesharecdn.com/ss_thumbnails/cedec2017v0-170830231914-thumbnail.jpg?width=640&height=640&fit=bounds)
【Unity道場】使って覚えるTileMap
- 1.
- 2. 今日の流れ ●Unity と 2D ●TileMapの機能紹介 ●実際に使用してみる ●TileMap のカスタマイズの紹介 ●UFO ゲーム（仮）を作ってみる
- 3.
- 4. 4 “ 手軽に 3Dゲームを開発可能な Unity 、 一時 Unity 3D と名乗る事もありまし た .” ３ D
- 5. 5 “2013 年頃から 2Dにも力を入れ始めて ”やっとある程度の形になりました
- 6.
- 7. 7 “2D ”向けスプライトの表現 “2D ”向け物理演算 “以前よりまともな UI ”システム
- 8. 8 “ 最近では、いきなり機能を追加せず Experimental Build（実験ビルド）で 一旦フィードバックを集めてから ”エンジンに反映させる形を取っています Experimental Build Beta Release Patch Build
- 9. 9 “2D は 2DExperimental Preview で公開 ”幾つかの機能がエンジンに着地し始めた
- 10.
- 11.
- 12. 12 “Physics Shape Editor” 当たり判定の形状をSprite 単位で設定
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21. 21 “ 今回は Tilemap”について紹介
- 22.
- 23.
- 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 を作成し、 TilePalette に登録、 Tile Map に塗る ”という流れ 1 2 3
- 29. 29 “ 描画周りは SpriteRenderに近いので Sprite Render ”と組み合わせても使える Order In Layer や Sorting Layer による描画順制御 Sorting Group による描画順の グループ化 Sprite Atlas による パスの最小化 Sprite Mask による マスキング
- 30.
- 31. 作業の流れ ●Tile Palette を作成 ●TileAsset を作成 ●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 を埋める ●TilePalette ” ”で ブラシ を選択 ● Hierarchy で塗りたい Tilemap を選択 ●SceneView の Tilemap をクリックする → Palette で選択中のタイルが塗られる ●TilePalette 選択中は SceneView のパネルから 外されるので注意
- 38. 38 選択 タイルを選択する 移動 選択したタイルを移動する 移動 Palette で選択したタイルで TileMap を塗る 移動 Paletteで選択したタイルで Tilemap を矩形に塗りつぶす スポイト Tilemap からタイルを取得する 削除 クリックしたタイルを消す 塗りつぶし パレットで選択したタイルで クリックしたタイルと同じタイルを 塗りつぶす
- 39.
- 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.
- 45. Tile Palette の編集 ●TilePalette の 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 の OrderIn Layer と Sorting Layer で 描画順を設定 ●Sorting Group を使用すると、 描画順の制御が楽になる ●Sprite Mask で手前のスプライトに穴を 開けるといった事も出来る SpriteMask で キャラクター手前の 壁に穴をあける例
- 49. Sprite のパッキング ●スプライトを一つのアセットにパッキングし マテリアルの切替を最小限に抑える ●Asset >Create > Sprite Atlas を作成 ●Object for Packing にパックする ・パックするスプライトが含まれるフォルダ ・パックするスプライトが含まれるテクスチャ ・パックするスプライト のいずれかを登録 Preview ボタンで動作を確認出来る
- 50.
- 51. • タイルの効率的な描画 • タイルの制御機能 •パレット • オートタイル • アニメーション • タイル上にギミックを配置 • その他もろもろ 機能 ある 機能ない
- 52.
- 53. 53 “Programmable Tile” “CustomBrush” 改造可能な項目
- 54. Programmable Tile ●タイル描画時の挙動を改造 隣接するブロックの有無で 使用する Spriteを切り替え アニメーション Collider のタイプを変更タイルに Normal を使用 Tile の向きを設定
- 55. Custom Brush ●Custom Brushはタイルを塗る際に 独自の動きを定義する ●塗る用途以外にも、 オブジェクトを配置する際にも 活用可能
- 56.
- 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.
- 63. 2D UFO Tutorial ●Rolla Ball の 2D 版サンプル ● ” ”個人的には 最も簡単なチュートリアル UFO がステージ内の石を 全て回収したら勝ち
- 64.
- 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 を塗る ●TilemapCollider を 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.
- 73. ブラシの切り替え ●Tile Palette のブラシの項目を選択し、 使用するブラシを切り替える ●DefaultBrush ： 標準のブラシ ●Coordinate Brush ： 座標をシーンに表示 ●Line Brush ： 最初にクリックした位置から 直線を描画するブラシ
- 74. TileMap のアニメーション ●Tilemap のアニメーション表現 ●Outputを Animation に設定 ●Size にアニメーション用スプライトを登録 ●Speed で速度を調整 1 3 2
- 75. ランダムタイル ●登録したタイルの内のどれかを使用する ●Output を Randomに設定 ●Size を増やし、 Sprite を登録 1 2
- 76.
Editor's Notes
- #4 まずはUnity と 2Dについて紹介
- #5 Unityは一時はUnity 3Dと名乗っている事もありました。 ただ、特にアジア圏では実は2Dの方がよく使われていたりします。
- #6 以前は専用のアセットが必要でしたが、2013年頃から力を入れ始めました
- #20 そして遂に登場、タイルマップ
- #21 それ以外にも、ボーンベースでスケルタルアニメーションを実現するCharacterAnimationや 地形の形状からスプライトを選択するSmart Sprite等を、現在準備中
- #22 これをもう少し詳しく紹介したい所ですが、今回はタイルマップに焦点をあてて紹介していきます
- #24 タイルマップは、グリッドにタイルを塗る事でステージを表現するシステムです 人気ジャンルの一つで、アセットストア等でたくさん作られています。 今まではタイルマップを実現するにはコレらを購入する必要がありましたが、2017.2より標準機能化
- #25 タイルマップの機能は大きく分けて３つ
- #29 使用する流れとしては、 といった感じ
- #30 基本機能に統合された事もあり、Sprite Rendererの機能とよく統合されています。
- #31 では実際に使用してみましょう まずは操作説明、その後に実際にワークショップ形式で作業をしてもらいます。
- #42 当たり判定の設定
- #46 まずは基本的な操作を行ってもらいましたが、 それ以外にも「タイルパレットの編集」
- #51 さて、少し簡単なステージを作ってみて下さい。
- #52 さて、操作を色々としてもらった参加者の多くは、多分幾つかの項目に不満を盛ったと思います。 タイルを塗る事は出来るには出来るのですが、操作が色々と面倒な状況