0から2Dアクションバトルゲームを作ろう!①ゲーム画面の作成

まだUnityを触り始めて間もない方、気になっているけど使い方が分からないという方々へ、
まずは1本簡単なゲームを作る所から始めてみませんか?
この講座では2Dアクションゲームの開発を通じてUnityの基本知識から少し発展的な内容までを解説いたします。

2Dアクションバトルゲームを作ってみよう!

皆さん、作りたいゲームのビジョンはお持ちですか?
本格的なRPG、激しいアクションを楽しめるTPS、頭を使うカードゲーム、あるいは課金要素のあるスマホゲームなど・・・
作りたいものがあるのはとても素敵ですが、最初は簡単なゲームを1本完成させる所から始めてみませんか?

Unityはとても便利なツールですが、プロのゲーム開発者も使用するものでもあり難解な部分は多くあります。
しかしざっと1本作ってしまえば、「この機能を使っていけば良いんだ」という方向性が分かるようになり、次以降の開発はスムーズになっていきます。
そして何より「完成させた」という自信が、今後のモチベーションにも繋がってゆく事でしょう。

この講座では「見下ろし型2Dアクション」というジャンルで、開発のスタートから完成までを解説していきます。
目標は「単純だけどちょっと楽しい」ゲームです。最初から優れたゲームを作る必要はありません。一緒に少しずつ学んでいきましょう。

この講座で作成するゲームのサンプル

これからこの講座で開発していくゲームの完成例がこちらになります。
ぜひ一度プレイしてみてイメージを掴んでください。

こちらからunityroomでプレイできます。(プレイにはマウスが必要です)

〇操作説明
・マウスカーソルを動かすとプレイヤーキャラがついてきます。
・左クリックを押すとショット攻撃を行います。
・右クリックを押している間はバリアを展開し、敵弾を防ぎます。

〇ゲームの仕様
・ショット攻撃でボスの体力を全て削れば勝利です。
・プレイヤーは敵の出す弾に3回触れると敗北です。
・ボスの難易度は3段階に分けられています。

学べる内容

このチュートリアルを通して学べる内容は次のようになっています。

 

  • シューティングゲームのオブジェクトをどうやって管理するか
  • UI(ユーザーインターフェースについて)
  • 画面遷移について
  • BGMやSEの設定方法
  • WebGLでのビルド方法
  • ゲームのアレンジについて

 

前提となる知識

この講座ではC#と呼ばれるプログラミング言語を用いてスクリプト(動作や処理など)を作成していきます。
C#あるいはプログラミング全般に対しての知識があるととてもスムーズですが、無くても心配要りません。

ただし簡単なプログラミングでも「変数」から始まって「クラス」「メソッド」「制御文」等々、初心者には覚える事が沢山存在しており、これらを短期間で学ぼうとするととても大変です。

このサイトではこれらの基礎知識を解説した記事をまとめてこちらで公開しておりますので、難しいなと感じたら是非目を通していただけると良いかもしれません。

 

開発環境

今回使用するUnityのバージョンは「2018.2.0f2」です。インストールの手順は割愛しますが、基本的に初期設定で問題ありません。

後の章で「WebGL Build Support」というものが必要になりますが、これは追加インストールが可能ですので今設定で行わなくても大丈夫です。

他に必要になる物はプログラミング環境(ツール)です。Unityのインストール時にMonoDevelopというツールが付いてくるはずなので、基本はそれを使用する事になりますが、他の開発環境に切り替える事も可能です。(VisualStudioなど)

 

Unityの基本を知ろう

ゲームの開発を始める際にやるべき作業や、覚えておくべき事柄がいくつかあります。

プロジェクトの作成

Unityでは開発するゲーム1つ1つをプロジェクトとして管理します。ですので、一番最初は新規プロジェクトを作成する所から始まります。

Unityを起動すると下のような画面が表示されるので、[New]のボタンをクリックし
プロジェクト名や保存フォルダ、開発するゲームの種類(2Dか3D)を指定しましょう。

今回は2Dアクションゲームですので、種類は2Dを選択します。

なおUnity Hubを起動している場合は画像と表示内容が少し異なります。ただし設定する項目は同じですので、[新規]ボタンから上記の設定を行っていただければOKです。

設定が完了したら[Create project]をクリックしてください。Unityの開発画面が立ち上がります。

エディタ画面の説明


これがUnityのメインウィンドウです。各部の名称や機能を簡単にまとめていきます。
今は覚えなくてもOKですが、この先ウィンドウの名前などが度々登場するので分からなくなったら確認してみてください。

ヒエラルキーウィンドウ シーン内に存在するゲームオブジェクトがリストアップされています。
各ゲームオブジェクトはクリックで選択可能です。
(最初は「Main Camera」オブジェクトしか存在しません。)
インスペクターウィンドウ 選択中のゲームオブジェクトのコンポーネント情報が表示されます。
各コンポーネント内の設定はここから変更する事も出来ます(座標など)。
プロジェクトウィンドウ プロジェクト内で使用するスクリプトや画像、音楽などのファイルが表示されます。
内容はプロジェクトフォルダ内の[Assets]フォルダ内と同一です。
シーンビュー 各ゲームオブジェクトの見え方や位置関係などを確認できます。
オブジェクトはマウスクリックで選択および移動が可能です。
ゲームビュー 実際のゲームの画面です。左上のタブから画面解像度を指定可能です。
テストプレイを開始すると自動的にゲームビューに切り替わります。
実行ボタン クリックするとテストプレイを開始できます。
もう一度クリックすると終了し、シーンビューに戻ります。

 

メインウィンドウについてはこちらの記事でも解説を行っているので、あわせて確認すると分かりやすいでしょう。

まずはここから!Unityの画面構成について学ぼう!

2018.09.05

完成までの道のり

Unityでゲームを作ろう…と決めても、何から手を付ければよいのか最初は戸惑うでしょう。
開発の規模に合わせたプロセスをとるのが大事ですが、最初から本格的に動くと疲れてしまいます。

ここでオススメするのが、まず「形から入ってみる」事です。難しそうな機能の実装は後回しにし、
最低限ゲームとして動くものの完成を第一目標としてみましょう。

よって、この解説でのチャートを簡単に書くと以下の通りになります。

ゲーム開発の基本的な手順
①大まかな画面構成を作成する。

②キャラクターの行動や攻撃を実装する。

③プレイしてみる。

④面白くする為に必要な機能を実装していく。

もしあなたが複数人でゲームを開発する場合もっと複雑なプロセスとなっていきますが、
「最初に基本要素を作成し後で細部を詰めていく」考え方は多くの場合で重要になっていきます。

戦闘画面から作ってみよう

それでは、さっそくゲームの開発に移っていきましょう。

ますは、このゲームのメインとなる戦闘画面を作っていきます。戦闘画面において必要不可欠なモノは、もちろんキャラクターです。
動作のプログラミングなどはこれから行っていくとして、まずは画面内にオブジェクトとして配置する所までやってみましょう。

素材の用意

まずは各キャラクターの画像を用意します。
以下にサンプルゲームで使用した画像を公開しますので、ご自由にお使いください。(右クリックで保存してお使いください)

勿論、自作の画像等を用意していただいても構いませんが、今後当たり判定を付ける兼ね合いからまずは円形のイラストを用意しましょう。
Unityでは、画像のファイル形式は幅広く対応されているので特に心配要りませんが、無難にpng形式で保存するのがベターでしょう。

テクスチャのインポート

先ほど2体分のキャラクターの画像を用意しました。
これをゲームに使用するには、まずプロジェクトにインポートしてあげる必要があります。

インポートの仕方は簡単で、プロジェクトウィンドウにファイルをドラッグ&ドロップするだけです。

ちなみに、(プロジェクトフォルダ)→Assetsフォルダ内にドラッグ&ドロップで直接ファイルを入れる事でもインポート可能です。

キャラクターを作成・配置しよう

これでプレイヤーキャラクター(以下、プレイヤー)とボスキャラクター(以下、ボス)の画像が使用できるようになりました。
ここからはキャラクターのオブジェクトを作成し、先ほどの画像を表示させ、位置を調整する所までをやります。

オブジェクトとは?

オブジェクトは平たく言ってしまえば、ゲームの構成要素1つ1つの事です。

アクションゲームの場合はプレイヤーや敵のキャラクター、キャラクターの発射する弾や画面上に表示される文字、ゲーム画面を映すカメラ、3Dゲームの場合は光源など、あらゆる物体がそれぞれ1つのオブジェクトとして存在されます。

オブジェクトは作っただけでは何の動作もせず、次章で解説いたしますが、「コンポーネント」という物を取り付けていく事で機能を獲得していきます。

プレイヤーオブジェクトの作成

それではオブジェクトを作ってみましょう。メニューから[GameObject]タブを選択すると作成するオブジェクトの種類が沢山表示されます。

今回は2Dキャラクターのオブジェクトなので、[2D Object]から[Sprite]を選択します。
すると、「New Sprite」という新たなオブジェクトが作成されたのがヒエラルキーウィンドウから確認できます。

これをクリックすると選択状態になり、インスペクターウィンドウにそのオブジェクトの情報が展開されます。
まだこれらの情報は理解するのが難しいですが、とりあえずオブジェクトの名前を変更してみましょう。

上の画像の水色で囲った部分がオブジェクト名の入力欄です。
プレイヤーオブジェクトですので、「Player」としておきましょう。

スプライトの設定

オブジェクトと作成し、名前も決めましたが何も表示されませんね。

次にやる事は、スプライトの見た目の設定です。
インスペクターウィンドウに[Sprite Renderer]という欄がありますが、これは数あるコンポーネントの1つであり、2Dオブジェクトの描画を担当する機能だと覚えておいてください。

表示する画像(テクスチャ)の設定は、このコンポーネントの中の[Sprite]というパラメータに画像をセットするだけで終わります。
厳密にはSpriteという種類のテクスチャしか設定できませんが、先ほど画像をインポートした段階で既にその形式に変換がなされているため、そのまま使用する事が可能です。

画像を参考にSpriteをセットしてみてください。今後、ドラッグアンドドロップでのパラメータの設定は頻繁に行う作業となります

これで画面にプレイヤーの画像が表示されるようになりました。
シーン・ゲームビューは上部のタブで自由に切り替え可能です。ゲームビューで確認してみましょう。

プレイヤーの位置を調節

現在、プレイヤーオブジェクトは画面の中央に佇んでいる状態です。
最終的にプレイヤーの位置はマウスカーソルで動かす事になるため、初期位置は重要ではないのですが、他のオブジェクト作成の邪魔になる事もあるので適当な位置に移動させておきます。

画面をシーンビューに戻し、[Player]オブジェクトを選択します。
そしてシーンビュー上のオブジェクトをドラッグし、少し左に移動させてみましょう。

ドラッグしても移動できない場合、選択しているツールが間違っている可能性があります。
基本的に移動に使用するツールは上の画像の黄色で囲った物になります。

また、誤って[Main Camera]オブジェクトを動かさないように注意してください。

ボスオブジェクトの作成

プレイヤーオブジェクトの作成がひとまず完了しました。次はボスオブジェクトの作成に移りましょう。とはいっても、プレイヤーの時とやる事は同じです。
メニューからオブジェクトを作成し、[Sprite]にボスの画像をドラッグアンドドロップするだけです。

オブジェクトの名前は「Boss」としておきます。

プレイヤーと同じく、位置も調整しておきます。
今回はシーンビューでのドラッグではなく、Transformコンポーネントに座標パラメータをセットする方法をとってみましょう。

インスペクターウィンドウの[Transform]欄に[Position]の項目がありますが、ここに位置情報が入ります。
これのX(X座標)をクリックして選択状態にし、キーボードで数値を入力すると位置を変更できます。

試しに3くらいを入力してみました。

ゲーム画面解像度の変更

画面の構成を組むにあたって、ゲームの解像度(画面の大きさ)を想定するのは必要不可欠です。
特に画面の縦横比が変わると後々作成するUIにも大きな影響が出てしまうため、今回はあらかじめ解像度を決めておきたいと思います。

ゲームビュー上部に解像度を選択できる欄がありますので、これをクリックし更に一番下の+ボタンをクリックしてください。
ここから新たな解像度の設定を追加できます。

横と縦の大きさがそれぞれ960×600となるように入力してください。

なお、ここで設定する解像度はあくまでUnity上でのテストプレイ時のみ有効です。
完成後ゲームを外部に公開するようになった時、そこで改めて解像度の設定が必要になります。

ここまでのおさらい

Unityでのゲーム開発のスタートは、まずプロジェクトを作成する所から始まります。今回は、

  1. オブジェクトを作成し、配置する方法
  2. 画像ファイルをインポートし画像を表示する方法

 

現時点ではまだ何の動きもない画面になっていますが、大きな一歩です!

次章で学ぶこと

次回は、この章でも少し出てきた「コンポーネント」という概念を覚えてみましょう。

そしていよいよプログラミングでキャラクターを動かす事に挑戦していきます!

 

<次回> =>    「②プレイヤーキャラを動かそう