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」→「キネマティック

に設定するッピよ~!

ユウキ
ユウキ

りょーかい!

うさタブ
うさタブ

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

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

できたわ!

ユウキ
ユウキ

サイコーだぜ!

うさタブ
うさタブ

おつかれさまッピ!

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

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

うさタブ
うさタブ

上手くできたッピか?

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

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

うさタブ
うさタブ

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

スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

実際の教室で自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えておサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんな、キュレオプログラミング教室を受けて
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

Unity動画付き
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました