第5週：画像を取り込んで落とそう
前回はC#スクリプトを書いて、オブジェクトを動かすことができました。
transform.positionやtransform.Rotateで、自分の書いたコードが
画面の中で動くのを確認しましたね。
今日からいよいよゲーム制作を始めます。 今日は自分でスクリプトを書かなくても、 Unityが用意している「物理エンジン」で画像が落ちるようにします。
- これから作るゲームの全体像をつかむ
- 画像をUnityに取り込む方法を覚える
- Rigidbody 2Dで重力を働かせる
- Collider 2Dで床に乗せる
どんなゲームを作るのか
Section titled “どんなゲームを作るのか”完成イメージ
Section titled “完成イメージ”これから作るのは、同じもの同士がぶつかると合体して大きくなるパズルゲームです。 スマホゲームで遊んだことがある人もいるかもしれません。
遊び方はこうです。
- 画面の上をクリックすると、そこから玉が落ちてくる
- 玉は箱の中に溜まっていく
- 同じ玉同士がぶつかると、1つ大きい玉に合体する
- 合体するとスコアが増える
- 箱からあふれるとゲームオーバー
ここからの道のり
Section titled “ここからの道のり”| 週 | その週にできるようになること |
|---|---|
| 5 | 画像が落ちて、床に乗る |
| 6 | クリックした場所から玉が出てくる |
| 7 | 箱の中に玉が積み上がる |
| 8 | 同じ玉同士が合体する（いちばんの山場） |
| 9 | 合体のバグを直して仕上げる |
| 10 | スコアが画面に表示される |
| 11 | ゲームオーバーとリトライができる |
| 12 | 音がついて完成 |
今日作る部分
Section titled “今日作る部分”今日はこの2つだけです。
- 玉が1つ、重力で落ちてくる
- 落ちた玉が床の上で止まる
プロジェクトを開こう
Section titled “プロジェクトを開こう”- Unity Hubを起動
- プロジェクト一覧から「MergePuzzle」をクリック
- Unityエディタが開くのを待つ
ゲーム用のシーンを作ろう
Section titled “ゲーム用のシーンを作ろう”前回作ったScriptPracticeは練習用のシーンです。
これから作っていくゲームは、専用のシーンに作りましょう。
- File → New Scene（または Ctrl + N）
- Lit 2D (URP)を選択（前回と同じもの）
- 「Create」をクリック
- Ctrl + Sで保存し、名前を
MainGameにする- 保存先は
Assets/Scenesフォルダ
- 保存先は
フォルダを整えよう
Section titled “フォルダを整えよう”これから画像やスクリプトが増えていきます。 先に置き場所を作っておきましょう。
- Projectウィンドウの
Assetsフォルダを右クリック - Create → Folder を選択
- 名前を
Spritesにする（画像を入れる場所） - 同じ手順で
Scriptsフォルダも作る（スクリプトを入れる場所）
画像を取り込もう
Section titled “画像を取り込もう”この教科書では、あらかじめ用意された6種類の玉の画像を使います。 番号が大きいほど大きい玉です。
| ファイル名 | 色 | 大きさ |
|---|---|---|
level1.png |
赤 | いちばん小さい |
level2.png |
オレンジ | |
level3.png |
黄 | |
level4.png |
緑 | |
level5.png |
青 | |
level6.png |
紫 | いちばん大きい |
画像をダウンロードしよう
Section titled “画像をダウンロードしよう”6枚まとめてダウンロードできます。
玉の画像6枚（ZIP・85KB）
ダウンロードしたZIPファイルは、右クリック → すべて展開で開いてください。
spritesフォルダの中にlevel1.png〜level6.pngが入っています。
取り込む手順
Section titled “取り込む手順”- 展開した画像ファイルをデスクトップなどに置く
- Unityの
Assets/Spritesフォルダを開く - 画像ファイルをProjectウィンドウにドラッグ&ドロップ
- 画像がProjectウィンドウに並ぶ
取り込めたか確認しよう
Section titled “取り込めたか確認しよう”取り込んだ画像を1つクリックして、Inspectorを見てください。
| 設定項目 | 確認すること |
|---|---|
| Texture Type | Sprite (2D and UI)になっている |
| Pixels Per Unit | 100（初期値のまま） |
画面に置いてみよう
Section titled “画面に置いてみよう”- Projectウィンドウで
level1をクリック - そのままSceneビューにドラッグ&ドロップ
- Hierarchyに「level1」が追加される
- Sceneビューに赤い玉が表示される
名前と位置を整える
Section titled “名前と位置を整える”- Hierarchyで「level1」を選択
- F2キーで名前を
Ballに変更 - InspectorのTransformでPositionを
(0, 3, 0)にする
（少し上の方に置きます。ここから落とします）
再生してみる
Section titled “再生してみる”上の再生ボタン（▶）を押してみてください。
……何も起きませんね。玉は空中に浮かんだままです。
Unityは、何も指示していないものは動かしません。 落とすには「これは物理法則にしたがう物体です」と教える必要があります。
重力で落とそう
Section titled “重力で落とそう”Rigidbody 2Dを追加する
Section titled “Rigidbody 2Dを追加する”- Hierarchyで
Ballを選択 - Inspectorの一番下のAdd Componentボタンをクリック
- 検索欄に
rigidbodyと入力 - Rigidbody 2Dを選択
もう一度再生してみる
Section titled “もう一度再生してみる”再生ボタン（▶）を押してください。
玉が落ちました！ 画面の下に消えていったはずです。
スクリプトを1行も書いていないのに落ちました。 これがUnityの物理エンジンの力です。
Rigidbody 2Dの主な設定
Section titled “Rigidbody 2Dの主な設定”Inspectorに表示されている項目のうち、よく使うものだけ紹介します。
| 項目 | 意味 |
|---|---|
| Mass | 重さ。大きいほど重い（初期値1） |
Gravity Scale |
重力の強さ。0にすると落ちなくなる（初期値1） |
Linear Damping |
空気抵抗。大きいほどゆっくり落ちる（初期値0） |
Angular Damping |
回転のしにくさ |
床を作って受け止めよう
Section titled “床を作って受け止めよう”このままでは玉が落ちて消えてしまいます。床を作りましょう。
床のGameObjectを作る
Section titled “床のGameObjectを作る”- Hierarchyで右クリック
- 2D Object → Sprites → Squareを選択
- 名前を
Floorに変更（F2キー） - Transformを次のように設定：
- Position：
(0, -4, 0) - Scale：
(8, 0.5, 1)（横長にする）
- Position：
- Sprite RendererのColorを茶色や灰色にする
当たり判定をつける
Section titled “当たり判定をつける”ここで再生しても、玉は床をすり抜けます。 Rigidbody 2Dは「動き」を担当するだけで、 「形」は別に教える必要があるからです。
玉に Circle Collider 2D をつける
Section titled “玉に Circle Collider 2D をつける”Ballを選択- Add Component → 検索欄に
circle - Circle Collider 2Dを選択
床に Box Collider 2D をつける
Section titled “床に Box Collider 2D をつける”Floorを選択- Add Component → 検索欄に
box - Box Collider 2Dを選択
完成！再生してみる
Section titled “完成！再生してみる”再生ボタン（▶）を押してください。
玉が落ちて、床の上で止まりました！
これが物理エンジンを使ったゲームの第一歩です。
RigidbodyとColliderの関係
Section titled “RigidbodyとColliderの関係”今日出てきた2つの部品は、役割が分かれています。
| 部品 | 役割 | 付けないとどうなる |
|---|---|---|
Rigidbody 2D |
動かす（重力・速度・力） | 動かない・落ちない |
Collider 2D |
形を教える（当たり判定） | すり抜ける |
重なり順と透明度
Section titled “重なり順と透明度”玉と床のように、オブジェクトは重なることがあります。 どちらを前に出すか、どれくらい透けさせるかも、Sprite Rendererで決められます。
重なり順（Order in Layer）
Section titled “重なり順（Order in Layer）”Sprite RendererにあるOrder in Layerは、数字が大きいほど手前に表示されます。
| オブジェクト | Order in Layer |
|---|---|
| 背景 | -1 |
| 床・壁 | 0 |
| 玉 | 1 |
玉が床の裏に隠れてしまうときは、ここを見直します。
半透明にする
Section titled “半透明にする”第2週で出てきたRGBAのA（Alpha）を下げると、後ろが透けて見えます。
- Sprite RendererのColorをクリック
- カラーピッカーの
Aのスライダーを左に動かす
影やガラスのような表現に使えます。第11週のゲームオーバー画面でも使います。
自分の画像に差し替える
Section titled “自分の画像に差し替える”用意された玉の代わりに、自分の画像を使うこともできます。
- 画像を用意する（自分で描く、スマホで撮る、など）
Assets/Spritesにドラッグ&ドロップBallを選択し、Sprite RendererのSprite欄に 新しい画像をドラッグ
よくある問題と解決方法
Section titled “よくある問題と解決方法”| 症状 | 原因と対処法 |
|---|---|
| 玉が落ちない | Rigidbody 2Dではなく3D用の Rigidbodyを付けている → 削除して付け直す |
| 玉が床をすり抜ける | Colliderを付け忘れている（玉と床の両方に必要） |
| 玉が落ちずに浮いたまま | Gravity Scaleが0になっていないか確認 |
| 玉が巨大／極小になる | 画像のPixels Per Unitを確認（100が目安） |
| 玉が真っ黒で見えない | シーンに2Dライトが無い。Lit 2D (URP) テンプレートでシーンを作り直すか、Hierarchyで右クリック → Light → Global Light 2D を追加 |
| 玉が真っ白になる | Sprite RendererのColorが白になっているか確認 |
| 画像をSceneに置けない | Texture Typeが Sprite (2D and UI)か確認 |
| 玉が床の上で震えている | 床のScaleが小さすぎないか確認。Yを0.5以上にする |
基礎課題全員必須
玉が落ちて床に乗るところまで作る：
level1.pngを取り込んでBallを作る- Rigidbody 2DとCircle Collider 2Dを付ける
Floorを作ってBox Collider 2Dを付ける- 再生して、玉が床で止まることを確認する
- 最後にCtrl + Sで保存する
標準課題時間があれば
玉を増やして落とし方を変える：
- 6種類すべての画像を取り込む
- 大きさの違う玉を3つ以上、高さを変えて置く
- 再生して、大きい玉と小さい玉の落ち方を比べる
MassやGravity Scaleを変えて違いを観察する
発展課題チャレンジ
壁を作って囲む：
- 左右に壁（Square）を作り、Box Collider 2Dを付ける
- 玉が箱の中から出られないようにする
- 玉をたくさん置いて、積み上がる様子を確認する
- ヒント：壁も
Floorと同じ作り方です。 Scaleを縦長にしましょう
今日は玉を手で置きましたが、次回はクリックした場所から玉が出てくる ようにします。
そのために「Prefab（プレハブ）」という、 オブジェクトの設計図を作る仕組みを学びます。 これができると、玉を何個でも増やせるようになります。