Unity入門講座|RPGマップをつくってみよう【2D】

Unity
うさタブ
うさタブ

今回はUnityの2Dゲームマップの作り方について勉強するッピ!

ユウキ
ユウキ

2Dゲームマップ?

アイカ
アイカ

まだ習ったことないわ!

うさタブ
うさタブ

2Dゲームマップは、
昔のRPGとかの街や村・ダンジョンのことッピ!

うさタブ
うさタブ

これからこの2Dマップの作り方を一緒に勉強して行くッピよ~

2Dゲームのマップづくりについて学ぼう

必要なもの

うさタブ
うさタブ

まずは必要なものを用意するッピ!

  • Unity
  • Windows または Mac のパソコン

が必要ッピよ~!

うさタブ
うさタブ

まだ Unity をダウンロードしてない人は

↓ の記事を参考に必要なものをインストールするといいッピ!

マップチップをダウンロードする

うさタブ
うさタブ

さっそく街や村をつくってみるっぴ!
・・・その前に、街や村の素材となる「マップチップ」を

用意するッピよ~

ユウキ
ユウキ

マップチップ??

うさタブ
うさタブ

今回は

ぴぽや倉庫様

からマップチップ画像お借りしたッピ!

ぴぽや倉庫様
うさタブ
うさタブ

とってもクオリティの高い素材ッピ!

みんなもここから借してもらうと良いッピ!

アイカ
アイカ

ここからダウンロードさせてもらえばいいのね!

マップチップをUnityへ組み込む

うさタブ
うさタブ

次は

マップチップをUnityに組み込む

ッピ!

うさタブ
うさタブ

ダウンロードした素材を

アセットに向かってドラッグ&ドロップするッピ!

ユウキ
ユウキ

オッケー!

マップチップのスプライトモードを設定する

うさタブ
うさタブ

次は

スプライトモードを「複数」に設定

ッピ!

うさタブ
うさタブ

こうすることで、あとからマップチップを分割することができるッピ!

うさタブ
うさタブ

次は

ユニット毎ピクセル数を「32」に設定

ッピ!

うさタブ
うさタブ

次はスプライトエディターマップチップを分割するッピよ~

マップチップの分割

うさタブ
うさタブ

まずは

Sprite Editor」を

クリックするッピ!

うさタブ
うさタブ

次に

スライス」→「タイプ」→「Grid By Cell Size

クリックするッピ!

アイカ
アイカ

わかったわ!

うさタブ
うさタブ

次は

ピクセルサイズ」→「32*32」→「スライス

クリックするッピ!

うさタブ
うさタブ

最後は「適用する」を選ぶッピよ~

ユウキ
ユウキ

これでいいのか?

うさタブ
うさタブ

オッケーッピ!

最後にマップチップ画像のヨコにある▶をクリックして

分割された画像がたくさんあったらバッチリッピ♪

ユウキ
ユウキ

おお、バラバラになってる!

アイカ
アイカ

すごいわっ

マップチップをタイルパレットに登録する

うさタブ
うさタブ

次はマップチップを

タイルパレットに登録

する必要があるッピ!

うさタブ
うさタブ

タイルパレットにチップを登録することで、
絵を描くみたいにイラストを配置して

街や村・ダンジョンが作られるッピよ~

タイルパレット
アイカ
アイカ

こんなものがつくれるのね!

うさタブ
うさタブ

それじゃあさっそくマップチップをタイルパレットに登録するッピ!

タイルパレットをインストールする

うさタブ
うさタブ

まずはタイルパレットのインストールッピ!

ウィンドウ→パッケージマネージャー

を選択するッピ!

うさタブ
うさタブ

次は

パッケージ:Unity レジストリ2D Tilemap Editor
インストール

をクリックするッピ!

タイルマップを起動する

うさタブ
うさタブ

インストールできたら

タイルマップを起動するッピ~!

うさタブ
うさタブ

タイルパレットの起動は

ウィンドウ→2D→タイルパレット

でできるッピよ~

うさタブ
うさタブ

新しいタイルパレットを作成→作成

をクリックするッピ!

うさタブ
うさタブ

できたら新しくウィンドウが出るッピ

右クリック→新規作成→フォルダーTilemap」と名付けて作成

最後に「フォルダー選択」をクリックするッピ!

ユウキ
ユウキ

ながいなーー

アイカ
アイカ

がんばろう、ユウキくんっ!

うさタブ
うさタブ

めげずに頑張るッピ!

タイルパレットにチップを登録

うさタブ
うさタブ

タイルパレットにチップを登録していくッピ!

うさタブ
うさタブ

登録したいマップチップをタイルパレットに

ドラッグ&ドロップするッピ!

うさタブ
うさタブ

新しくウィンドウが出てくるから

フォルダーの選択」をクリックするッピよ~

アイカ
アイカ

できたわ!

ユウキ
ユウキ

やったなアイカちゃん!

うさタブ
うさタブ

ブラボーッピ!

最後はこのパレットを使って

街をつくっていくッピよ~

タイルパレットを使って街づくり

うさタブ
うさタブ

さっそくタイルパレットを使って街を作っていくッピ!

できあがりのイメージ
うさタブ
うさタブ

この小屋を目指して作っていくッピよ~!

うさタブ
うさタブ

まずヒエラルキーの中で右クリックをして、

2Dオブジェクト→タイルマップ→短形

を選ぶッピ!

うさタブ
うさタブ

わかりやすいように

名前を下地に変更するッピ!

ユウキ
ユウキ

オッケー

アイカ
アイカ

この範囲ツールっていうのは何かしら??

うさタブ
うさタブ

これはタイルパレットでマップチップを置くときに、

一度にたくさん同じチップを配置するときに使えるツールッピ!

うさタブ
うさタブ

こんな風にタイルパレットのペイントツールは

役割が違うッピよ~

うさタブ
うさタブ

普通に使うときは筆ペンのペイントツールをつかうッピ!

アイカ
アイカ

そうなのね!

ユウキ
ユウキ

ずいぶんいろんなのがあるんだなー

建物をつくる

うさタブ
うさタブ

今度は建物をつくるッピ!
ヒエラルキーの中で右クリックをして、

2Dオブジェクト→タイルマップ→短形

を選ぶッピ!

うさタブ
うさタブ

わかりやすいように

名前を建物に変更するッピ!

うさタブ
うさタブ

アクティブタイルマップが

建物

になっているか確認するっピ!

うさタブ
うさタブ

次に

レイヤー順序:1に変更するッピ!

アイカ
アイカ

このレイヤー順序って何かしら?

うさタブ
うさタブ

ゲーム画像は

レイヤーという透明な板を重ねて管理しているッピ!

レイヤーの順序によって絵を前に出したり後ろに出したりするッピ!

うさタブ
うさタブ

数字が大きいほど絵が前面にでるんだッピ~~~!

アイカ
アイカ

そうなのね!

ユウキ
ユウキ

へ~

レイヤー順序は数字がデカイほど前に出てくるのか!

うさタブ
うさタブ

次は筆ペイントツールを使って、
建物チップを置いていくッピよ~

アイカ
アイカ

こんな感じかしら!

うさタブ
うさタブ

バッチリッピ♪

建物の当たり判定
当たり判定をつける
うさタブ
うさタブ

最後に建物の当たり判定をつけるッピ!

ヒエラルキー→「コンポーネントを追加」→
Tilemap Tilemap Collider 2D

を選択するっピ!

ユウキ
ユウキ

できた~!

当たり判定をなめらかにする
うさタブ
うさタブ

このままの当たり判定だとキャラがつっかかって

壁のなかにハマってしまうことがあるッピ!

うさタブ
うさタブ

これを直すために
カベ1つ1つの当たり判定を合体して

判定場所をなめらかにするッピ!

うさタブ
うさタブ

インスペクターから

コンポーネントを追加」→「Physics 2D」→「Composite Collider 2D

を選択するッピ!

うさタブ
うさタブ

次にインスペクターの

Tilemap Collider 2D」→「コンポジットで使用

チェックマークを入れるッピ!

アイカ
アイカ

チェックマークを入れるのね!

うさタブ
うさタブ

それから同じくインスペクターにある

Rigidbody 2D」→「ボティタイプ」→「キネマティック

に設定するッピよ~!

ユウキ
ユウキ

りょーかい!

ボティタイプとは?

ユウキ
ユウキ

てかこの「静的」とか
「ドラマティック」とかって何なんだ?

うさタブ
うさタブ

これは、
外部からの「ちから」が働くかどうか?

を決める項目ッピ!

状態重力質量速度
Dramatic
(ドラマティック)
外部から力を受ける
モノを動かす
Cinematic
(キネマティック)
外部から力を受けない
モノを動かす
Static
(静的)
外部から力を受けない
モノを動かせない
ユウキ
ユウキ

へー

こうなってるのか

アイカ
アイカ

勉強になったわ!

うさタブ
うさタブ

最後に小物を配置して完成ッピよ~

完成イメージ
アイカ
アイカ

できたわ!

ユウキ
ユウキ

サイコーだぜ!

うさタブ
うさタブ

おつかれさまッピ!

みんなどんどん上手くなっていくッピね~!

学習のまとめ
  • マップチップを用意する
  • マップチップを適切なピクセルに設定
  • スライスエディタで画像を分割
  • パレットにマップチップを設定する
  • ヒエラルキー→2Dオブジェクト→タイルマップを選択
  • 小物のレイヤー順序を0→1へ
  • タイルマップのアクティブを確認する
  • タイルマップに当たり判定を追加
  • キャラクターを追加
  • キャラクターに質量と当たり判定を追加
  • スプリクトの追加
  • テストプレイ

うさタブ
うさタブ

上手くできたッピか?

これからも色んなゲーム作りやプログラムの解説をしていくッピ!

次回も楽しみにしているッピよ~~!

うさタブ
うさタブ

UnityはC#を元に作られているッピ!
まだまだ Unity や C#について勉強したい人は↓の記事を参考にするッピ♪

タイトルとURLをコピーしました