2DRPGゲームの作り方1　キャラクター素材の準備とスプライトエディターの使い方

→ Unity入門の森オリジナル本格ゲーム制作講座はこちら
11種類の本格ゲームの全ソースコード公開・画像＆動画による解説付き

今回から複数の記事に渡ってドラクエ1のような2DRPGを作成していきます。

まずはゲームに使用する素材の作り方を解説してからプログラミングする流れにしていきます。

Unity入門の森の数ある講座の中で最難関かつ大作のプロジェクトになりますが、この講座を終えたころにはこれまでのあなたとは一味違うUnityエンジニアになっていることでしょう。

では、始めていきましょう。

【Line登録者限定のプレゼントもあるよ！】

プロジェクトの作成

まずプロジェクトを作成します。

この講座を執筆する際に使ったUnityのバージョンは2019.4LTSです。

画面操作部分など2019、2020、2021バージョンで若干見た目や開発メニューの位置や名称に差が出ます。講座と同じ画面で作っていきたい方はまずは2019LTSで作ってみてください。

動作確認は2019LTSでも2020LTSでも2021LTSでも確認しています。2019で作ったものを後でバージョンアップする方法で確認しました。

バージョン依存した機能などを使ってるわけではないので動作環境としては大きな問題はないかと思います。

では、テンプレートを2Dに選択してプロジェクト名を「2DRPG」にして作成してください。

また、デフォルトで作成されているシーンの名前は「RPGScene」に変更してください。

キャラクターの作成

まずはゲームに登場するキャラクター素材の作り方から始めていきます。

今回の記事ではあらかじめいくつかのドット絵画像を用意しています。

次に使用する画像を表示するので、読者の方もそちらを使用するといいでしょう。32ピクセルのドット絵になります。

(※読者の方で用意するのもいいですが、以後この講座で用意した画像と同じような形式として解説していきますので注意してください。)

※今回利用する画像はぴぽや倉庫様（https://pipoya.net/）の素材となります。

Unityでキャラクターの画像を使用したい時はUnityエディター上に使用したい画像をドラック&ドロップするだけOKになります。

この講座では使用するアセットの数が多くなりますので、インポートする際は用途に合わせたフォルダーで分割するのがいいでしょう。

この講座ではキャラクター関係はAssets > Images > Charactersというフォルダーを作成し、そこへインポートしています。

キャラクター用のプレハブの作成

次にキャラクター用のプレハブを作成していきます。次の手順を行ってください。

• メニューから空のGameObjectを作成し、名前を「CharacterPrefab」にしてください。
• メニューのGameObject > 2DObject > Spriteをクリックし、GameObjectを作成してください。名前は「Image」にしてください。
• 作成した「Image」は「CharacterPrefab」の子GameObjectにしてください。
• デフォルトの表示用に「Image」の「Sprite Renderer」コンポーネントの「Sprite」フィールドに先程のキャラクターの画像を設定してください。
• また、「Order In Layer」を50に設定してください。

「Image」の位置とサイズはお好みでいいですが、後々使用する画像に合わせて調節するようにしてください。

また「Image」は直接画像をシーンにドラック&ドロップすることでも作成できますので、お好みの操作の方で作成してください。

ここまでできましたら、シーンの上の「CharacterPrefab」をプレハブ化してください。プレハブ化した後はシーンにある「CharacterPrefab」は削除してください。

この講座ではゲームに登場するキャラクターはこの「CharacterPrefab」をベースに作っていきます。

補足として「CharacterPrefab」の親子階層は次のようになっています。

• 「CharacterPrefab」: 空のGameObject
• — 「Image」：2D Object > Sprite

画像の設定について

基本的に画像をシーンに表示する際は上のプレハブの「Image」GameObjectのような感じでいいのですが、今回使用しているスプライトの場合、複数の画像を一つのファイルにまとめた形式になっています。

そのため、何もしないで使用するとそれらが一つの画像として扱われ、そのまま画面に表示されてしまいます。

Unityではこのような場合に対応するために画像専用のInspectorがありますので、そちらから画像内にあるコマ割りされた画像を一つの画像として使用するように設定していきましょう！

それではインポートした画像を選択しInspectorの方を確認してください。

アセットを選択した時はアセットの種類に合わせた設定項目がInspectorに表示されます。

今回は一つの画像を複数の画像に分割したいので、初めに次のように設定を変更してください。

変更できましたら、必ずApplyボタンを押し変更を適応してください。

Sprite Editorの使い方

次にInspectorから「Sprite Editor」をクリックし、スプライトエディターを開いてください。

スプライトエディターで画像を分割することができます。

早速スプライトエディターの上側にあるメニューの中から「Slice」をクリックしてください。

クリックできない場合は画像の設定に戻りModeを「Mulitple」にしてください。

「Slice」をクリックするといくつかの分割する際の方法とその設定用の項目が表示されます。

分割方法には次のものがあります。

• Automatic：自動分割
• Grid By Cell Size：セルサイズによる分割
• Grid By Cell Count：行と列の数を指定して分割

この中の「Grid By Cell Count」が簡単なのでそちらを使用します。設定内容は次のものにしてください。

設定ができましたら、「Slice」をクリックしてください。そうすると画像が設定した通りに分割されます。

分割されたのを確認したらスプライトエディターの上側のメニューにある「Apply」ボタンをクリックし、編集内容をアセットに適応してください。

そうすると、選択した画像の子アセットとして分割した画像が追加されます。

今回は画像を分割するだけでしたが、スプライトエディターでは画像のポリゴン形状や中心位置(ピボット、Pivot)などを編集することができるので覚えておくと便利でしょう。

注意点として分割後は元々あったスプライト画像が削除される場合があるので、その時は再度スプライトをプレハブなどに設定し直してください。

まとめ

今回の記事では画像の取り込みとその設定について解説していきました。

「Sprite Editor」は多機能なのでまだここで解説していない機能がありますが、基本的な操作についてはここで解説したもので十分でしょう。

まとめると以下のようになります。

• Unityでは画像アセットには専用の設定項目がある
• 画像アセットの設定はInspectorから行う
• Unityでは画像アセットは基本的に「Sprite」として扱う
• 一つの画像アセットを分割して複数の「Sprite」を作成することもできる
• 分割方法にはいくつか種類がある
• 画像アセットの設定内容を変更した時は必ず「Apply」ボタンをクリックし反映するようにすること。

以上になります。それでは次の記事に行ってみましょう！

次の記事：

2DRPGゲームの作り方2　タイルマップシステムの使い方とマップチップの作成

前回の記事では2DRPG開発のためのプロジェクトを作成し、スプライトエディターを用いて2Dゲームに使う画像の分割法を習得しました。 前回の記事： 今回の記事ではUnityのTilemapという機能を使用しマップを作成していきます。 RPGに...

feynman.co.jp

2021.11.19

Unity C# 2Dドラクエ風RPGゲームの作り方講座に戻る >>

→ Unity入門の森オリジナル本格ゲーム制作講座はこちら
11種類の本格ゲームの全ソースコード公開・画像＆動画による解説付き