ステージを作ろう の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• ステージを作ろう へ行く。

#contents
*はじめに [#l669dae2]
[[ひつじを動かそう]]の続きです。
前回の講座で作ったボックスは邪魔になるので削除しておいてください。
この項では
 1.タイルマップの説明
 2.マップ制作の準備
 3.実際にマップを作っていこう
ということを行います。
#br
*画像のインポート [#aa377041]
まずは今回使う画像のインポートをしてもらいます。下の画像を保存して、Unity の Assets にドラッグ＆ドロップしてください。
#br
#download(tiles.png)
#ref(tiles画像を追加.png,,768x432)
#br
*ステージ制作 [#f339a9bc]
Unity には ''Tilemap'' というものが標準的に備わっています。
画面が格子状に区切られるので、そこに画像を一マス一マス配置することで簡単にマップを制作することが出来るものです。
ヒエラルキーを右クリックして、2D object > Tilemap > Rectangular を押してください。
#br
#ref(スクリーンショット (1145).png,,768x432)
#br
画面が格子線が出てきましたね。
一マスに先ほどの画像を配置していきたいところですが、このままでは一枚の画像としか認識されません。
Unity では、画像を
そこで、Unity 内で画像をスライスしていきたいと思います。
#br
**画像のスライス [#h79d839e]
#br
画像の tiles を選択して、Inspector の spritemode を Multiple に変更してください。
#br
#ref(スクリーンショット (1147).png,,768x432)
#br
これで画像を切り分けられるようになりました。
Inspector の Sprite Editor を押してください。
この時、警告が出るので Apply を押してください。
#br
#ref(スクリーンショット (1148).png,,768x432)
#br
左上の Slice から自動的に画像を分けることができます。
今回はグリッドごとに分けたいので、Grid by cell size を選んでください。
この時、PixcelSize の x と y を 32 にしてから、Sulice を押してください。
#br
#ref(スクリーンショット (1149).png,,768x432)
#br
そして、Tilemap に合わせるため、Inspector から Pixels Per Unit の数値を 100 から 32 に変更してください。
#br
#ref(スクリーンショット (1150).png,,768x432)
#br
これで画像を切り分けることができました。
画像の右の三角をおすと、切り分けた画像を選択できるようになっています。
#br
#ref(切り分けた画像を選択.png,,768x432)
#br
**タイルパレット [#s604691d]
#br
まだマップを作る準備は終わっていません。次は''タイルパレット''を作っていきます。
画面上部から Windows > 2d > Tilepalette を選択してください。
#br
#ref(tilepalette起動！.png,,768x432)
#br
また、タイルパレットの画像を保存するフォルダを作ります。
Assets で右クリックして、 Create > folder を押してください。今回は名前を「Tilepalette」にします。
#br
#ref(Tilepaletteフォルダを作成.png,,768x432)
#br
その後、タイルパレットの画面から、Create New Palette を押して、新しいパレットを作成してください。
この時、フォルダは先ほど作ったフォルダを選択してください。
#br
**マップチップ [#x71e163f]
それでは、パレットに''マップチップ''を追加しましょう。
スライスした画像をパレットにドラッグ＆ドロップしてください。
#br
#ref(マップチップを追加だ.png,,768x432)
#br
これでマップを作る準備ができました。
ここで、タレットの操作を説明しておきます。
#br
#ref(tilepaletteの操作.png,,768x432)
#br
左から
 ・マップチップを選択します。
 ・選択中のマップチップを移動します。
 ・選択したマップチップでグリッドを塗ります。Shift押しながらで削除できます。
 ・マップチップを範囲選択できます。
 ・スポイトです。このツールを選択した状態でシーンビューのマップチップをクリックすると、そのマップチップで塗れるようになります。
 ・消しゴムです。
 ・選択したマップチップでグリッドを塗りつぶします。
となっています。マップチップを選択して、3番目を選択して Seane 上をなぞると画像を配置することができます。
地面の画像はいろいろ用意されているので、自由に配置してみましょう。
#br
#ref(map制作です.png,,768x432)
#br
とりあえず適当にマップを作ってみました。
見た目はできてきますが、今の状態だと当たり判定がありません。この画像に当たり判定を付けてみましょう。
tilemap のインスペクターの AddComponent で Tilemap Collider 2d を検索して出てきたものをクリックしてください。
#br
#ref(tilemapcollider2dを追加daa.png,,768x432)
#br
これで、それぞれのグリッドの画像それぞれに当たり判定がつきました。
この当たり判定を一つにまとめることができます。
タイルパレットに、さらに Composize Collider 2D を追加してください。
タイルマップに、さらに Composize Collider 2D を追加してください。
この時、勝手に Rigidbody2D がついてきますが、ステージには重力の影響を付けたくないので、rigidbody2D の type を static にしてください。
その後、Tilemap Collider 2D の sed by composize にチェックを入れると当たり判定がまとまります。
#br
#ref(composizeを追加.png,,768x432)
#br