Unity

マップチップの種類ごとに当たり判定を実装する

ページ更新日 :
ページ作成日 :

検証環境

Windows
  • Windows 11
Unity エディター
  • 2021.3.3f1
入力システムパッケージ
  • 1.3.0

この Tips の前提設定

この Tips の説明の前提として以下の設定を事前に行っています。

この Tips の前提知識

マップ素材の借用について

以下のサイトからお借りしたものを加工しています。

はじめに

今回は一つの Tilemap にマップチップを配置し、配置したマップチップの種類によって当たり判定を行うかどうかを決定します。

この Tips は別 Tips「タイルマップとの当たり判定を実装する」と内容の大部分は同じであるため、 詳しい説明はそちらを参照してください。 ここでは同じ内容については手順のみ説明し、差異がある分だけ追加して説明しています。

歩行キャラクターの実装

まずは当たり判定操作を行うためにプレイヤーが操作するスプライト画像を用意してプロジェクトに追加してください。 今回マップチップのサイズは３２ピクセルなので同じサイズの画像にします。

歩行アニメーションについては実装すると手順が長くなってしまうので今回は省きます。実装したい場合は以下の Tips を参考にしてください。

プロジェクトに追加した画像を選択します。マップチップと単位を合わせたいので「ユニット毎のピクセル数」を「32」にします。

設定したら下にある「適用する」ボタンをクリックします。

画像の設定が終わったらビューに画像をドロップしてオブジェクトを追加します。

キャラクターの移動処理を設定します。スクリプトを追加し、名前は Player としておきます。

スクリプトを以下のようにします。キーボードでスプライトを動かす簡単な移動処理です。

using UnityEngine;
using UnityEngine.InputSystem;

public class Player : MonoBehaviour
{
  // 一定時間ごとに呼ばれます
  void FixedUpdate()
  {
    // キーボードの情報を取得
    var keyboard = Keyboard.current;

    // スプライトの移動処理
    if (keyboard.leftArrowKey.isPressed)
    {
      transform.Translate(-0.1f, 0, 0, Space.World);
    }
    if (keyboard.rightArrowKey.isPressed)
    {
      transform.Translate(0.1f, 0, 0, Space.World);
    }
    if (keyboard.upArrowKey.isPressed)
    {
      transform.Translate(0, 0.1f, 0, Space.World);
    }
    if (keyboard.downArrowKey.isPressed)
    {
      transform.Translate(0, -0.1f, 0, Space.World);
    }
  }
}

作成したスクリプトはキャラクターオブジェクトにアタッチします。

ゲームを実行しキーボードでキャラクターが動くか確認してください。

マップチップの準備

マップチップ画像を用意してプロジェクトに追加します。 マップチップの数が多くなると設定が面倒になるので今回は歩けるマスと歩けないマスの２マス分だけ用意しています。

プロジェクトに追加した画像を選択してマップチップ用の設定をそれぞれ行います。詳しくは以下の Tips を参照してください。

設定したら「適用する」ボタンをクリックし「Sprite Editor」ボタンをクリックします。

32ピクセルで分割します。

タイルパレットタブを選択してパレットを作成します。タブがない場合はメニューから「ウィンドウ -> 2D -> タイルパレット」で表示できます。 パレット名はなんでもいいですがここでは「MapChipPalette」としています。

フォルダに保存するので、Scene フォルダの中に新たに「MapChipPalette」フォルダを作成しそこを指定します。

プロジェクトに「MapChipPalette」フォルダが追加されました。

次にパレットにマップチップを追加します。分割したマップチップ画像をパレットにドラッグ＆ドロップしてください。

パレットにマップチップが追加されました。

マップの作成

当たり判定の設定はいったんおいておいて先にマップを作成します。当たり判定の設定は後からでもできます。 まずはヒエラルキーにタイルマップを追加してください。

追加したら Tilemap を選択します。するとビューにグリッドが表示されます。

まずは壁にならないマップチップをビューに設定していきます。

とりあえず一面に敷き詰めておきました。

次に壁となる石のマップチップをそれっぽく配置します。

今回は特に問題ありませんでしたが、キャラクターがマップの裏に隠れる場合は「レイヤーの順序」を Tilemap よりも大きな数字に設定してください。

当たり前ですが、この時点でゲームを動かしても壁はすり抜けて歩いてしまいます。

マップチップの当たり判定設定

ここからマップチップの種類ごとに当たり判定をいれるかどうかの設定を行っていきます。 まずパレットを作成したときに作った「MapChipPalette」フォルダの中を開きます。

中にはパレットに設定しているマップチップがあるので、まずは歩けるマップチップを選択します。

インスペクターから「コライダータイプ」の値を「なし」にします。 後で Tilemap に衝突判定の設定を追加するのですが、これを「なし」に設定することによってこのマップチップは衝突判定が行われなくなります。

もう一つの石のマップチップの方は「グリッド」に設定しておきます。 今回透過のマップチップではないので「スプライト」でも問題ないのですが、「スプライト」にすると画像の透過部分に当たり判定がなくなります。

マップチップの設定はこれだけです。今回２枚しかないので簡単ですが、マップチップの数が多い場合はそれだけ設定する必要があります。

衝突判定設定

ここからは「タイルマップとの当たり判定を実装する」の内容とほぼ同じです。

まずはキャラクターの衝突判定に必要な設定を行います。 コンポーネントとして「Physics 2D -> Circle Collider 2D」を追加してください。 今回スプライトが丸形状なので Circle にしていますが、形に合わせて Box や Capsule を選択してください。

「Physics 2D -> Rigidbody 2D」も追加します。

重力で下に落下しないように重力スケールを 0 にします。またスプライトが回転しないように「回転を固定」の Z にチェックを入れます。

Tilemap の方には「Tilemap -> Tilemap Collider 2D」コンポーネントを追加します。

するとビューの方で石のマップチップの周りに緑色の線が追加されたことを確認出来ると思います。 これは石の方にだけ当たり判定が設定されていることを意味します。 先ほどのパレットのマップチップのコライダータイプ設定が反映されていることが分かります。

ゲームを実行して壁に向かって歩いてみてください。きちんと壁の前でキャラクターが止まることを確認できると思います。 当たり判定に関連するプログラムは一つも書いておらず手軽に実装できる事が分かります。

マップチップの当たり判定の結合

以下の Tips でもあったように実際に動かしてみると壁の当たり判定の挙動が少しおかしなところがあります。 原因と対処法は下記の Tips で説明しているのでそちらを参照してください。

ただ、マップチップの当たり判定の部分は結合することによっておかしな挙動が直ると同時に処理負荷が下がるので最低限やっておきましょう。

まず Tilemap Collider 2D の「コンポジットで使用」にチェックを入れます。

コンポーネントの追加で「Physics 2D -> Composite Collider 2D」を選択します。

「Rigidbody 2D」も追加されるので「ボディタイプ」を「静的」にします。

すると石の当たり判定がマップチップごとではなくなり結合されることを確認できると思います。

後はゲームを実行して正しく動いているか確認してください。

タイルマップとの当たり判定を実装する
オブジェクト同士が衝突しているかどうかを判定する (2D)