MENU
How to make games on Unity
  1. ホーム
  2. Unity
  3. Unityスタートガイド - UnityStartGuide
  4. 第4章 基本操作
  5. 2Dゲーム制作の基本操作【Unityスタートガイド4-4】

2Dゲーム制作の基本操作【Unityスタートガイド4-4】

第4章 基本操作
2D Sprite Unityスタートガイド
目次

この記事で学べること

  • 2Dモードへの切り替えと2Dシーンの設定
  • スプライト画像のインポートと設定方法
  • Sprite Rendererの使い方とプロパティ
  • 2D用Collider（Box Collider 2D/Circle Collider 2D）の設定
  • Sorting Layerを使った描画順序の管理

前提知識

2Dモードへの切り替え

2Dゲームを作るときは、1-2で紹介したUniversal 2Dのテンプレートでプロジェクトを作るのが基本です。そのうえで、シーンビューの表示も2D向けに切り替えて作業します。

2D/3Dモードの違い

Unityには2Dモードと3Dモードがあり、作業効率に大きな影響を与えます。

スライム

ただしここの2Dボタンは見た目が変わるだけなので注意

2Dモード（シーンビュー）の特徴

  • 正面から見た、奥行きのない表示になる
  • シーンビューのカメラが遠近感のない表示（Orthographic）になる
  • 右クリックドラッグで回転せず、平面の作業に集中出来る

3Dモード（シーンビュー）の特徴

  • 奥行きのある立体的な表示
  • シーンビューのカメラが遠近感のある表示（Perspective）
  • 自由な角度から見回せる

どちらのモードでも、使えるコンポーネントは同じです。2D用のSprite RendererやRigidbody 2Dは、3Dモードの表示でも使えます。

モードの切り替え方法

シーンビューの表示の切り替え：

  1. Sceneビュー上部のツールバーにある「2D」ボタンをクリック

プロジェクト全体の既定の動き：

  1. Edit>Project Settings>Editorを開く
  2. Default Behavior Modeを2Dまたは3Dに設定
    • 2Dにしておくと、画像を取り込んだときに自動でSpriteとして読み込まれるなど、2D向けの動きになります（Universal 2Dのテンプレートでは最初から2Dです）

スプライトの準備

2Dゲームの基本となるスプライト画像の扱い方を学びましょう。

スプライト画像のインポート

画像ファイルをUnityプロジェクトに取り込む方法です。

手順1: 画像ファイルの準備

2Dゲームで使用する画像ファイルは以下の形式が一般的です：

  • PNG: 透過処理可能な形式（キャラクターやUIに最適）
  • JPEG/JPG: 写真などの非透過画像に適する
  • PSD：Photoshopのファイル（そのままだと1枚の画像になる。レイヤーを分けて使うには2D PSD Importerパッケージを使う）

手順2: プロジェクトへのインポート

  1. 画像ファイルをProjectウィンドウのAssetsフォルダにドラッグ&ドロップ
  2. 自動的にインポートされ、Spriteタイプとして認識される
    • Spriteとして取り込まれるのは、2Dのプロジェクト（Default Behavior Modeが2D）の場合です。3Dのプロジェクトでは Default になるので、次の手順でTexture Typeを変えます

手順3: インポート設定の確認

重要な設定項目:

  • Texture Type: 「Sprite (2D and UI)」を選択
  • Sprite Mode：1枚の絵なら「Single」にする（最初から「Multiple」になっていることがあるので確認）
  • Pixels Per Unit: 1ユニットあたりのピクセル数（デフォルト: 100）
  • Compression：圧縮の設定（None / Low Quality / Normal Quality / High Quality）
  • 設定を変えたら、Inspector右下のApplyを押す

3Dのテンプレートから始めた場合、Sprite Modeの設定の下に「Install 2D Sprite Package」というボタンが表示されます。スプライトを切り分けるなどの機能を使うにはこのパッケージが必要なので、押してインストールしておきましょう（Universal 2Dのテンプレートなら最初から入っているので、ボタンは表示されません）。

Pixels Per Unitの設定

スプライトのサイズ感を決める重要な設定です。

設定の目安：

  • ドット絵：1マスのピクセル数（16×16のキャラクターなら16）
  • イラスト：100（初期値）から始めて、ゲームの中で大きすぎる・小さすぎる場合に調整
  • 大事なのは統一すること：キャラクターや背景で値がバラバラだと、大きさの感覚がそろわなくなります
スライム

目安は本当に目安です。素材の元の大きさによってPixels Per Unitの数値を調整する必要があります

フェアリー

雑な覚え方だとPixels Per Unitの数字を、大きくしたら画像が小さく、小さくしたら画像が大きくなります

Sprite Rendererの使い方

スプライトを表示するためのコンポーネントについて学びましょう。

Sprite Rendererの基本

スプライトを表示するための必須コンポーネントです。

主要なプロパティ:

  • Sprite: 表示するスプライト画像
  • Color: スプライトの色調変更（白 = オリジナル）
  • Material: 適用するマテリアル（デフォルトでOK）
  • Sorting Layer: 描画順序のレイヤー設定

スプライトの色変更

Colorプロパティでスプライトの色を変更できます。

実用的な使い方:

  • ダメージ表現: 赤く点滅させる
  • ステータス表示: 色でプレイヤーの状態を示す
  • チーム分け: 味方・敵で色分け

2D用の当たり判定

2Dゲーム専用のColliderコンポーネントについて学びましょう。

2D Colliderの種類

2Dゲームで使用する当たり判定の形状です。

Box Collider 2D

  • 長方形の当たり判定
  • 壁や床、シンプルな障害物に最適
  • 回転可能

Circle Collider 2D

  • 円形の当たり判定
  • ボールやキャラクターの円形判定に
  • 半径でサイズ調整

Capsule Collider 2D

  • カプセル形（長方形の両端が半円になった形）の当たり判定
  • キャラクターの体型に近い形状
  • 回転可能

Polygon Collider 2D

  • 複雑な多角形の当たり判定
  • 不規則な形状のオブジェクトに
  • 自動的に画像形状にフィット

Colliderの設定方法

手順1: Colliderの追加

  1. ゲームオブジェクトを選択
  2. Add Component > Physics 2D > [目的のCollider] を選択

手順2: プロパティの調整

主要な設定項目:

  • Size: 当たり判定のサイズ（Circle Collider 2DではRadius）
  • Offset: 当たり判定の位置オフセット
  • Is Trigger: 物理衝突せず、イベントのみ発生

Rigidbody 2Dの追加

物理演算を追加するためのコンポーネントです。

物理演算の設定：

  • Body Type：Dynamic（物理で動く）／Kinematic（スクリプトで動かす）／Static（動かない）
  • Mass：物体の重さ
  • Linear Damping：移動の抵抗（以前のバージョンではLinear Drag）
  • Gravity Scale：重力の影響度（0で無重力。見下ろし型のゲームでは0にします）
  • Constraints>Freeze Rotation Z：チェックを入れると、キャラクターが転がらなくなる（以前のバージョンのFixed Angleの代わり）

Sorting Layerによる描画順序

2Dゲームでは、オブジェクトの重ね順が重要です。

Sorting Layerの概念

描画順序を管理するためのレイヤーシステムです。

重ね順のルール：

  • Sorting Layersの一覧で、下にあるレイヤーほど手前に描かれる
  • 同じレイヤーの中では、Order in Layerの数字が大きいほど手前に描かれる

Sorting Layerの設定方法

手順1: Sorting Layerの作成

  1. Edit > Project Settings > Tags and Layers を開く
  2. Sorting Layersの「+」ボタンで新しいレイヤーを作成

手順2: オブジェクトへの適用

  1. スプライトオブジェクトを選択
  2. Sprite RendererのSorting Layerを設定
  3. Order in Layerで同じレイヤー内の順序を調整

実践的なレイヤー構成

一般的な2Dゲームのレイヤー構成例です。

レイヤー構成の例（Sorting Layersの一覧に、上から順に作る）：

  1. Background：背景画像（一番奥）
  2. Ground：地面・障害物
  3. Player：プレイヤーキャラクター
  4. Effects：爆発・パーティクル効果（一番手前）

ボタンや文字などのUIは、Sorting Layerではなく第9章で説明するCanvasで表示します。

実践：簡単な2Dキャラクターの配置

学んだ知識を活かして、簡単な2Dキャラクターを作成してみましょう。

作成手順

ステップ1: スプライトの準備

  1. PNG画像をProjectにインポート
  2. Pixels Per Unitを適切な値に設定（例: 100）

ステップ2: キャラクターオブジェクトの作成

  1. 空のGameObjectを作成
  2. Sprite Rendererを追加してスプライトを設定

ステップ3: 当たり判定の設定

  1. Box Collider 2Dを追加
  2. Sizeをスプライトに合わせて調整

ステップ4: 描画順序の設定

  1. Sorting Layerを「Player」に設定
  2. Order in Layerを「0」に設定

ステップ5: 物理演算の追加

  1. Rigidbody 2Dを追加
  2. 重力設定を調整（必要に応じて）

注意点やヒント

Pixels Per Unitは統一しよう！

同じプロジェクト内で複数のPixels Per Unitを使うと、キャラクターのサイズ感がバラバラになってしまいます。特にキャラクターやアイテムは同じ値に統一することをおすすめします。

Sorting Layerは計画的に

ゲーム制作の初期段階でSorting Layerの構成を決めておくと、後々の修正が少なくて済みます。レイヤー名も「Background」「Player」などの明確な名前をつけましょう。

2Dゲームのカメラ設定に注意

2DゲームではMain CameraのProjectionを「Orthographic」にします（Universal 2Dのテンプレートでは最初からOrthographic）。Perspectiveのままだと、3Dのような遠近感が出てしまいます。

よくあるエラーと対処法

エラー1: スプライトが表示されない

  • 原因: Sprite RendererのSpriteフィールドが未設定
  • 対処法: Projectウィンドウからスプライトをドラッグ&ドロップ

エラー2: 当たり判定がずれる

  • 原因: ColliderのSize/Offsetが適切でない
  • 対処法: シーンビューで緑の枠線を確認しながら調整

エラー3: 重ね順がおかしい

  • 原因: Sorting LayerまたはOrder in Layerの設定ミス
  • 対処法: Tags & Layersでレイヤー構成を確認、Order in Layerを調整

エラー4: 画像がぼやける

  • 原因：圧縮が強い（Low Quality）、Max Sizeが元の画像より小さい、またはドット絵なのにFilter ModeがBilinearになっている
  • 対処法：Import SettingsでCompressionをNone、Max Sizeを元の画像以上にする。ドット絵ならFilter ModeをPointにする。変えたらApplyを押す

まとめ

この記事では、2Dゲーム制作の基本操作について学びました：

  • 2Dモード: シーン表示とカメラ設定の切り替え
  • スプライト管理: インポート設定とPixels Per Unitの調整
  • Sprite Renderer: スプライト表示と色変更
  • 2D Collider: Box/Circle/Capsule/Polygonの使い分け
  • Sorting Layer: 描画順序の管理システム

2Dゲーム制作では、奥行きのない世界観を扱うため、重ね順の管理が特に重要です。Sorting Layerを活用して、背景・地面・キャラクター・エフェクトが適切な順序で表示されるようにしましょう。

次のステップ

2Dゲーム制作の基本を学んだら、次はアセットの作成と管理について学びましょう：

Unity用語に興味がある方は：

第4章 基本操作
2D Sprite Unityスタートガイド
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

コメント

コメント一覧 （2件）

コメントする

目次