ぷらこあ

雑記/ゲームアイデア帳/成果物ぺろり

【Unity道場】使って覚えるTileMap に参加しました

概要

イベント

kenjin.unity3d.jp

Unity 2017.2bでUnityEditorに組み込まれたTileMap機能について講義/ハンズオン形式で学ぶイベント。 @tsubaki_t1 さん(テラシュールブログ) が講師を務めてくださり、更にハンズオンということでUnityスタッフが分からない部分を教えてくださる、至れり尽くせりな会でした。

会場

www.bellesalle.co.jp

会場の「ベルサール六本木コンファレンスセンター」は「住友不動産六本木グランドタワー」の9階にあります。これまで渋谷のTECH PLAY SHIBUYA (旧dots.) で開催されることが多かったが、六本木の会場になってからは初参加。

迷いました。

資料

www.slideshare.net

内容

2D Experimental Preview

Unityにおける新機能は、クオリティ向上やバグを防ぐ目的で、いきなりリリースするのではなく、Experimental Buildという形式でユーザに試してもらうケースが多くなっている。最近 2D Experimental Preview で検証されている内容は以下を参照。

https://forum.unity3d.com/forums/2d-experimental-preview.104/ www.youtube.com

Experimental Buildの段階を経て、次はベータリリースされるが「TileMap」の機能は、先日リリースされた unity2017.2b に含まれている。

TileMapの使い方

上記でやっているのは以下の一連の流れ。

  • TilePaletteの作成
    • Window > TimePalette
    • CreateNewPaletteを選択
  • TileAssetの作成 (ワークショップでは対応済みだった)
    • Textureの設定
      • タイルマップに使用したい画像アセットを選択
      • TextureTypeをSpriteに変更
      • SpriteModeをMultipleに変更
      • PixelPerUnitをタイル1枚における一片の長さを指定
      • (FilterModeをPointにすると補間が無くなり、ドット感が増す)
    • Spriteの設定
      • SpriteEditorを開く
      • Sliceでタイル毎に画像を分割 (GridByCellSizeを使うと楽)
  • TilePaletteへの登録
    • 先ほど設定したSpriteをTilePaletteウィンドウにドラッグ/ドロップ
    • TileAssetをどこに保存するか聞かれるので適当に指定
  • TileMapを埋める
    • Hierarchy上で 2DObject > TileMapを選択
    • 塗りたいTileMapオブジェクトをHierarchy上で選択
      • (TileMapオブジェクト自体を複数生成できるため)
    • TilePaletteから “ブラシ” (筆のアイコン) を選択
      • 塗りたいタイルを選択
      • Sceneビュー上のグリッドを選択して塗る

また、塗りたいタイルを回転させる手段は、マシン/バージョンによって微妙に異なるっぽい。正式リリース時のドキュメント化に期待。

上記のフローにも記載したが、TileMapオブジェクトを複数用い、Order in Layerを変更することで、レイヤーを扱うことも出来る。

TileMap上にアイテムなどのオブジェクトを設置する際には、Grid以下に置くとGridに沿って移動させることが出来るのでオススメとのこと。

TileAssetと当たり判定について

SpriteMaskと組み合わせると楽しい

tsubakit1.hateblo.jp

SpriteMaskに関してはテラシュールブログ上の記事を参考に。 uGUIのMask機能がMaskコンポーネントを持つGameObjectの子要素に対してMaskが適応されるのに対し、こっちはSpriteRendererにおいてMaskの影響を受けるか/受けないかを設定する感じになった。 これをTileMapと組み合わせて、以下のようなものが作れた。

ProgrammableTile / CustomBrush

タイル描画時の挙動を改造することが出来る。今回は用意されたサンプルプロジェクトに付随された、AutoTileを使用した。これは、配置されたタイルの左右/上下のつながりの関係に応じて、どのタイルを利用するかを決めるというもの。 また ProgrammableTile を使えば、ランダムにタイルを配置することも、SpriteAnimationを適応することも可能。 また、CustomBrushを用意することで、TileMapの塗り方にパターンを持たせることが出来る (ランダムに配置したり、直線上に配置したり)。

以下がUnity公式が発表しているProgrammableTileのサンプルおよびサンプルプロジェクト。

github.com github.com

今回の会について

mrstar-logs.hatenablog.com

上記の @RyotaMurohoshi さんの記事でも触れられている通り、1度説明後に講師の方を真似して一緒に作業するフロー/質問しやすい環境で、とても理解が進む会でした (MakerFaire/デザフェスと日程が被ったこともあり、あまり人数は多くなかった感じでしたが、ワークショップ形式であることを考えたらちょうど良い人数だったかも)

タイルマップ使って何か作ってみたいところではあるのですが、タイルマップの弱点は素材が整わないと何も出来ないというところ… 何かフリーの素材漁ってみようと思います。

参加者のみなさん、講師の椿さん、ユニティスタッフのみなさん、ありがとうございましたー! (あと個人的にですが、椿さんに1週間ゲームジャムの実況ありがとうございました!ってお伝えすることができて良かった….)