【Unity2D】背景・アイテム画像を作る方法|3D素材のスクショからUI配置まで解説!

ゲーム「ゆーちゃんの脱出」背景画像をシーンビューに入れた画像 ゲームの作り方
「ゆーちゃんの脱出」背景画像の一部

Unity3Dで作った背景おもちゃ素材を使って、Unity2Dのゲーム画像として取り込む方法を紹介するよ♪
この記事では、スクリーンショットの撮り方、透明化の方法、UIでの配置方法など、Unity初心者さんでもできる手順をまとめたよ!

ゆーちゃん
ゆーちゃん

ゆーちゃんの脱出」で使用した方法だよ!

👉Unity3Dで背景やおもちゃを作成するには:
【Unity 3D】ProBuilderと無料素材で部屋・おもちゃを作る方法|初心者向けチュートリアル

背景やアイテムの撮影方法(Unity3D)

ゲーム内で使う素材ができたら、スクリーンショット(スクショ)を撮影しよう!

ゲーム「ゆーちゃんの脱出」に使用している”おもちゃ棚”状のスクリーンショット

● 撮影準備

  • ゲームのアスペクト比16:9 に設定(「ゆーちゃんの脱出」の場合)
  • カメラの位置は固定
  • 撮影は ゲームビュー で行うと仕上がりがわかりやすい!

● アイテムの撮り分け方

ゲーム「ゆーちゃんの脱出」に使用している”パズル台座からピースを抜いた”状態のスクリーンショット
  • 取得できるアイテムは、取り除いた状態でも撮影しておくと便利!
  • ドアは、開いている状態と閉まっている状態の両方を撮影
  • オブジェクトの表示・非表示は、インスペクターの「アクティブ状態」で切り替えるとラク!
ゲーム「ゆーちゃんの脱出」に使用している”ドアが閉まってる”状態のスクリーンショット
ゲーム「ゆーちゃんの脱出」に使用している”ドアが開いているる”状態のスクリーンショット

● アイテム詳細画像(正面)

  • 正面からの画像は、プレハブ化して撮ると、配置しやすいし調整も楽ちん!
ゲーム「ゆーちゃんの脱出」に使用している”くまのぬいぐるみ”のプレハブ化のスクリーンショット

Excelで画像の背景を透明にする方法

  • Excelに画像を貼り付けて選択
  • 図の形式」→「背景の削除」をクリック
ゲーム「ゆーちゃんの脱出」に使用している”くまのぬいぐるみ”をExcelで背景を透明化に設定する説明画像
  • ピンク色になる部分を調整する
    • 保持する領域をマーク」で、必要な部分(クマの耳など)を復活
    • 削除する領域をマーク」で、不要な背景をさらに消す
  • 完了したら右クリック → 「図として保存」
ゲーム「ゆーちゃんの脱出」に使用している”くまのぬいぐるみ”をExcelで背景を透明化に設定して保存する説明画像

正面画像も同じ手順で背景を透明化できるよ!

※たまに耳や手が切れちゃうこともあるから、保存前にしっかりチェック!


Unity2Dで背景画像を貼り付ける手順

● アスペクト比の確認

ゲームビューのアスペクト比を 撮影したスクショと同じ比率(例:16:9) に設定しておこう!
※画像が伸びるのを防ぐためだよ。

● UIで画像を配置する

  1. ヒエラルキーで右クリック → UI > 画像(Image) を作成
  2. 自動的に「Canvas」と「EventSystem」が作成される(消さないでね!)
  3. Canvasの設定:「Canvas Scaler」→「UIスケールモード」を「画面サイズに拡大」に変更
Canvasの設定:「Canvas Scaler」→「UIスケールモード」を「画面サイズに拡大」する説明画像

● 背景画像をアタッチ

  1. プロジェクトウィンドウで新しいフォルダを作成して、スクショ画像を入れる
  2. フォルダからCanvas内のImageに、ソース画像としてアタッチ
  3. 画像のサイズをCanvasに合わせて調整!
Canvas内に挿入したImage画像をCanvasのサイズに合わせる説明画像

● 複数背景の切り替え方法

  • Imageを複製して、画像を入れ替える
  • オブジェクト名をわかりやすく変更
  • 画面上ではXやYの位置を±900、±500などにずらして等間隔に配置しておくと整理しやすいよ!
ゲーム「ゆーちゃんの脱出」で利用した背景画像の一部をシーンビューでずらして配置してる画像

アイテム画像の配置方法(UI)

背景画像の中に「UI > 画像(Image)」を追加して、アイテム画像をアタッチしよう!

1・「元来のサイズに設定」で比率を保ったままリサイズ

Imageコンポーネントの「ソース画像」アタッチ場所と、「元来のサイズに設定」の場所を示す画像

2・左側の「スケールツール」で中央の白い四角をドラッグ → 比率そのままで大きさ調整できる!

ゲーム「ゆーちゃんの脱出」の”くまのぬいぐるみ”を背景に合わせて配置している画像

● ドアや窓などの重ね画像

  • ドアが開いた状態の画像は、閉まっている画像の上に重ねるように貼る
  • 位置ズレがないように、スクショ時点で画像をきっちり切り出しておくとベスト!
ゲーム「ゆーちゃんの脱出」背景の「とおせんぼ」が閉じている画像
ゲーム「ゆーちゃんの脱出」背景の「とおせんぼ」が開いている画像

まとめ|Unity3Dの素材をUnity2Dに活かそう!

Unity3Dで作った背景やアイテムをスクショして、
ExcelやUI機能を活用すれば、Unity2Dでもオリジナルの世界が作れるよ✨

カメラ位置やUI切り替えだけでいろんな画面が作れるから、工夫次第でとっても軽くて管理しやすいよ~!


👇ちなみに、ぼくのゲームでは シーンは1つだけ で、
タイトル画面もEND画面も全部1画面に配置してるんだ!

ゲーム「ゆーちゃんの脱出」で使用した背景一覧画像が入っているシーンビューをスクリーンショット

👇おすすめリンク:

コメント

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