Comments
Description
Transcript
タワーディフェンスのつくりかた（Unity版）サンプル
Chapter2 タワーディフェンスの作成 ではさっそくタワーディフェンスの作成を開始します。「はじめに」のところにも記載しましたが、次のルールで作成し ます。 ・砲台を好きな位置に配置できる ・ただし、敵の移動経路には配置できない ・Wave 単位で敵が出現する ・敵は決まった経路で移動する ・敵が拠点にたどりついたらダメージを受ける ・3 回ダメージを受けたらゲームオーバー ・配置した砲台をアップグレードできる 手順どおり進めていけば 2 ∼ 3 日程度で作れる規模ですので、頑張って作っていきましょう。 2.1 使用する素材のダウンロード 今回作成するミニゲームで使用する素材は「GitHub」にアップしています。以下のページヘ進み、 右下にある「Download ZIP」からダウンロードできます。 ・https://github.com/syun77/Unity2D_TD 今回使用するデータの構成は次のようになっています。 Materials は素材フォルダです。素材となる画像ファイルがこのフォルダに含まれています。 Projects は完成プロジェクトです。完成したものがどのように動くかを知りたい場合はこのプロジェクトを開き、実行 してみてください。 2.2 プロジェクトを作成する Unity を起動して、プロジェクト作成ダイアログを開きます。設定項目は次のようにします。 ・Project name: TD ・Location: 任意のフォルダ ・作成モード : 2D 設定できたら「Create project」をクリックしてプロジェクトを作成します。 プロジェクトを作成したら、レイアウトを変更します。Layout は「2 by 3」とします。 本書はこのレイアウトで解説をしていきます。このレイアウトの各ビューを次図のように呼びます。 ・ゲームオブジェクトの配置ビュー : Scene ビュー ・ゲーム動作確認ビュー : Game ビュー ・ゲームオブジェクト一覧ビュー : Hierarchy ビュー ・プロジェクトのアセットツリービュー : Project ビュー ・選択オブジェクトの詳細情報ビュー : Inspector ビュー もし Project ビューが縦 2 つに分かれていない場合は、左上のカギマークの隣にあるアイコンを選んでドロップダウン から「Two Colums Layout」にチェックを入れます。 そして、Project ビューの一番下にあるスライダーを左端まで移動します。 2.3 シーンを保存する まずは現在のシーンを保存します。 Proect ビューの「Assets」フォルダを右クリックして、 「Create > Folder」で保存するフォルダを作成します。 フォルダの名前は「Scenes」とします。 UnityVS というフォルダがありますが、これは VisualStudio と連携するためのもので今回の内容とは関係ないので、こ のフォルダの存在は無視しても問題ありません。 次に、メインメニューから「File > Save Scene」を選びます。 保存ダイアログが表示されるので、現在のシーンを「Scenes」フォルダに「Main」という名前で保存します。 2.4 スクリプト素材の追加 今回のゲームを作るにあたって、コードの記述量を減らすためにスクリプト素材を追加します。まずは次の手順でスク リプトを配置するフォルダを作成しましょう。 1. 2. 3. 4. Project ビューから「Assets」フォルダを右クリックして「Create > Folder」を選び、フォルダを作成します フォルダの名前は「Scripts」とします さらに「Scripts」フォルダを右クリックして「Create > Folder」を選び、フォルダを作ります フォルダの名前を「Utility」とします 上記手順で、次のような階層でフォルダが作られました。 次に、ダウンロードした素材のフォルダ「Materials/Scripts」にあるスクリプトすべてを、Unity エディタ上の「Assets/ Scripts/Utility」フォルダにドラッグ＆ドロップします。 これらのスクリプトは、ゲームを作りやすくするものとなります。 ・ButtonObj: uGUI の Button のラッパークラス ・Layer2D: 2 次元配列クラス ・MyAssetsPostProcess: *.tmx を *.xml にコピーする ・MyCanvas: Canvas(uGUI) 以下の階層にあるオブジェクトを管理するクラス ・TextObj: uGUI の Text のラッパークラス ・TMXLoader: *.tmx の読み込みクラス ・Token: GameObject(MonoBehaviour) のラッパークラス ・TokenMgr: Token クラスを管理するクラス ・Util: 雑多なユーティリティ ・Vec2D: 2 次元ベクトルクラス 使い方については、関連する機能を実装する際に説明します。また詳細な説明は、ゲームを作り終えた後、次の章でまと めて行います。 2.5 マップデータの作成 背景の画像や敵の経路を定義したマップデータを作成します。ただ、標準では 2D のマップ作成ツールはありません。そ のため、今回は高機能なフリーソフトのレベルエディタ ( マップエディタ ) である「Tiled Map Editor」を使用してマップ データを作成します。 余談ですが、Unity の公式ブログを見ると、現在、2D レベルエディタを開発中のようです。もし正式に実装されれば、こ のような外部ツールを使う必要はなくなるかもしれませんね。 Tiled Map Editorのインストール レベルエディタである「Tiled Map Editor」をインストールします。Internet Explorer などのブラウザから以 下の URL にアクセスします。 ・http://www.mapeditor.org 次図のようなページが表示されるので、 「Download」をクリックします。 プラットフォームごとのダウンロード先が表示されます。 Windows をクリックしてインストーラーをダウンロードします。ダウンロードした実行ファイルをダブルクリックし てインストールを開始します。最初に言語選択が表示されますので、 「Japanese」を選んで「OK」をクリックします。 セットアップウィザードが表示されます。「次へ」をクリックします。 ライセンス同意文が表示されます。「同意する」をクリックします。 インストール先が選べます。特に変更せずそのまま「インストール」を選びます。 インストールが開始し、しばらくすると完了します。「次へ」をクリックします。 セットアップ完了のダイアログが表示されます。「Launch Tiled」にチェックをつけて「完了」ボタンをクリックします。 すると、Tiled Map Editor が起動します。「Launch Tiled」にチェックをつけ忘れた場合は、Windows メニューをクリッ クして「すべてのプログラム > Tiled」から起動することができます。 Tiled Map Editorの基本概念 Tiled Map Editor の仕組みを簡単に説明します。Tiled Map Editor は大きく次の 3 つの要素を持ちます。 ・タイルセット : 画像の集まり ・レイヤー : 配置情報の集まり ・オブジェクトグループ : 自由な配置情報の集まり タイルセットとは配置するタイルの種類をまとめたもので、例えば道や木などの画像の集まりです。レイヤーとは、実 際に配置したタイルの情報の集まりです。例えば (X, Y)=(2, 0) に「木」がある、(X, Y)=(1, 5) に「道」がある、という情 報となります。なお、レイヤーに配置されるタイルの座標はグリッドサイズに準じた等間隔で配置されます。そしてオ ブジェクトグループとは、自由な位置とサイズで配置できるオブジェクトの集まりとなります。 今回は自由配置できるオブジェクトは使用せず、タイルセットとレイヤーのみ使います。 マップデータの新規作成 それでは、 Tiled Map Editor でマップを新規作成します。メインメニューから「ファイル > 新しいファイル」を選びます。 新しいマップダイアログが表示されます。それぞれの項目は次のように設定します。 ・マップ > 種類：□型タイル ・マップ > タイルの出力形式：CSV ・マップ > タイルの描画順序：左から右、上から下 ・マップの大きさ > 幅：20 タイル ・マップの大きさ > 高さ：15 タイル ・タイルの大きさ > 幅：32px ・タイルの大きさ > 高さ：32px 種類の「□型タイル」というのは正方形のグリッドでマップデータを扱う、という設定となります。出力形式に「CSV」 を選んだのは解析を簡単にできるようにするためです。マップの大きさは、並べるタイルの数を指定します。この設定 では「横に 20、縦に 15」のタイルを並べることなります。タイルというのはマップの最小単位となります。そしてタイ ルの大きさは、タイルに適用する画像のサイズとなります。 設定できたら「OK」ボタンをクリックしてマップを作成します。おそらく初期状態では何も表示されていませんので、 まずはグリッド表示を有効にします。メインメニューから「表示 > グリッドの表示」を選ぶと、薄くグリッドが表示され るようになります。 マップは空の状態ですが、マップデータを保存します。メインメニューから「ファイル > 保存」を選択します（[Ctrl ＋ S] でも保存できます） 。 保存先はデスクトップなど、わかりやすいところにしましょう。保存ファイル名は「map.tmx」とします。保存したら、 Tiled Map Editor はいったん終了しておきます。 Unity エディタに戻り、次の手順でマップデータを配置するフォルダを作成します。 1. Project ビューの Assets フォルダを右クリックし、 「Create > Folder」でフォルダを作成します 2. フォルダ名は「Resources」とします 3.「Resources」フォルダをクリックし、 「Create > Folder」でフォルダを作成します 4. フォルダ名は「Levels」とします この手順で、フォルダ階層は次のようになります。 マップデータ「map.tmx」を Unity エディタの「Assets/Resources/Levels」フォルダにドラッグ＆ドロップしてコピー します。 Unity エディタをアクティブにした瞬間、map ファイルが 2 つになりますが、これはバグではありません。 追加した素材スクリプトの「MyAssetPostProcessor」が自動でコピーを行っているためです。このコピーの理由につ いてはあとで説明します。 タイルセットの追加 次に、マップに配置するタイルの集まりである「タイルセット」を追加します。素材フォルダ「Materials/Levels」にあ る tileset.png を Unity エディタの Project ビュー > Assets/Resources/Levels にドラッグ＆ドロップします。 このタイルセット画像を Tiled Map Editor から読み込みます。Project ビュー > Assets/Resources/Levels フォルダ にある「map.tmx」をダブルクリックして開きます。 上にある「map」を開きます。下の「map」は XML ファイルなので開けません。 もしダブルクリックで開けない場合は、Windows メニューから「すべてのプログラム > Tiled」で Tiled Map Editor を 起動し、メインメニューから「ファイル > 開く」で map.tmx を選択して開きます。 マップデータを開くことできたら、タイルセットを追加します。タイルセットを追加するには、Tiled Map Editor のメ インメニューから「マップ > 新しいタイルセット」を選びます。 タイルセット追加のダイアログが表示されるので、次のように設定します。 ・タイルセット > 名前 : tileset ・タイルセット > 種類 : 均等にタイルが並んだ画像を使用 ・タイルセット > 画像 : Assets/Resources/Levels/tileset.png ・タイルセット > 透過色を設定する : チェックをしない ・タイル > タイルの幅 : 32px ・タイル > タイルの高さ : 32px ・タイル > 上左の余白 : 0px ・タイル > タイル間の余白 : 0px タイル画像は、Unity のプロジェクト側に追加した tileset.png を設定します。これらの設定を入力して「OK」ボタンを クリックすると、タイルセットが追加されます。 このタイル画像の並びについて簡単に説明をすると、 ・一番上の行が「地面」 ・2 ∼ 3 行目が「飾りもの」 ・4 行目が「経路情報」 となります。 そして、レイヤーという仕組みを使ってそれぞれのタイルを配置します。一番下の「filed」レイヤーには地面を、真ん中 の「field2」レイヤーに飾りものを配置し、一番上の「path」レイヤーには経路情報を設定します。 なお、素材フォルダの「Materials/Levels」には完成品のマップデータが含まれています。タイル配置の作業は少し根気 のいる作業なので、その作業をスキップしたい方はこちらを使います。 ・map1/map.tmx: 地面とその上の飾りものだけ配置したマップ ・map2/map.tmx: map1/map.tmx に加え、敵の経路まで設定したマップ ・map3/map.tmx: map2/map.tmx に加え、タワーの配置ができないコリジョンを設定したマップ map3/map.tmx には今回のゲームで使うマップ情報がすべて含まれているので、これを使えばマップ関連の作業は不 要となります。 「マップ作成はいいからゲームを作りたい！」という方はこちらを使います。なお、map3/map.tmx を 使う場合は次の手順でマップを登録します。 1. Unity エディタ上のプロジェクトビューにある「Assets/Levels/map」を削除します 2. 素材フォルダの「Materials/Levels/map3/map.tmx」を「Assets/Levels/map」にドラッグ＆ドロップします 3.「背景画像の作成」に進み、背景画像を追加します タイルを配置する タイルを配置していきます。タイルセットビューから「草原」のタイルを選びます。 ツールメニューからバケツ（塗りつぶし）ツールを選びます。 バケツツールは、同じタイルで塗りつぶすためのツールとなります。バケツツールを選んだ状態でグリッドの部分をク リックすると、草原ですべてが塗りつぶされます。 タイルビューから「道」のタイルを選びます。 ツールメニューからスタンプのアイコンをクリックして選択します。 敵が通る一本の道を作ります。 道の配置を間違えてしまったら、草原のタイルで上書きします。右クリックでタイルをスポイトできるので、これを使 うとタイルの変更がやりやすいです。 なお、必ずしも図のように道を作る必要はありません。例えば上から下に進むような道でも大丈夫です。ただ、 「一本道 であること（分岐しない）」というルールだけは守るようにしてください。 それと余裕があれば、上下左右のつながりを考慮した道のタイルに置き換えます。 地面が完成したら、レイヤー名を適切な名前に変更します。レイヤービューから「タイル・レイヤー 1」をダブルクリッ クして名前を「field」に変更します。 飾り付け用のレイヤーを作成します。メインメニューから「レイヤー > タイル・レイヤーの追加」を選び、レイヤーを追 加します。 作成したレイヤー「タイル・レイヤー 2」の名前を「field2」に変更します。 飾り付けを配置します。ゲーム的に配置が必須なのは、拠点となる「お城」タイルの配置です。 レイヤービューの「field2」が選択されていることを確認して（「field」が選択されていると草原や道を消してしまいま す） 、お城タイルを配置します。 ちなみにタイルセットを [Shift ＋左ドラッグ ] すると複数のタイルを選択し、それをまとめて配置することができます。 あとは好みで木や山を配置してもよいでしょう。 なお、地面と飾りものを配置したマップデータは、素材フォルダの「Materials/Levels/map1/map.tmx」にあります。 配置が面倒であればこれを使ってもよいです。 背景画像の作成 作成した地面と飾りものの情報を、画像として保存します。 その前に、 Unity側でスプライトを配置するフォルダを作成します。ProjectビューのAssetsフォルダを右クリックして、 「Create > Folder」でフォルダを作成し、名前を「Sprites」とします。 Tiled Map Editor 側に戻ります。メインメニューから「ファイル > 画像として保存 ...」を選びます。 「画像で保存」ダイアログが表示されるので、次のように設定します。 ・場所 ・設定 ・設定 ・設定 ・設定 > > > > > 名前 : Assets/Sprites/back.png 表示レイヤーのみ : チェックを入れる 現在表示している拡大率 : チェックを外す タイルのグリッドを描画 : チェックしない 背景色を含む : チェックしない 場所（保存先）は、Unity プロジェクトの「Assets/Sprites」フォルダとなります。あと、保存するファイル名を「map. png」から「back.png」に変更しておきます。 設定できたら「Save」ボタンをクリックして保存します。Unity 側のプロジェクトに「back」スプライトのリソースが追 加されました。 なお、この背景画像は素材フォルダ「Materials/Levels」に back.png として用意しているので、マップを作るのが面倒 ならばこちらを使ってください。 では、追加した back スプライトを Hierarchy ビューにドラッグ＆ドロップします。 背景画像が表示されます。ただ画像が小さいですね。これを直すにはカメラの設定を調整します。Hierarchy ビューか ら Main Camera を選択し、Inspector ビューの Camera コンポーネントの Size を「5」から「2.4」に変更します。 すると、背景画像がピッタリ収まります。ただ、今回のゲームでは右に UI 表示用の領域を確保したいので、背景画像を 左にずらします。 Hierarchy ビューか ら「back」オ ブ ジェク ト を 選 択 し て、Inspector ビューか ら Transform > Position の 値 を (X, Y, Z)=(-1.07, 0, 0) にして、少し左へずらします。 さらに、Game ビューのアスペクト比を「16:9」にします。 これで背景画像が左側にピッタリ合うようになりました。今回のゲームの解像度としては横幅「853」 、縦の高さ「480」 を想定しています。 さ ら に 背 景 色 を 変 更 し ま す。Hierarchy ビューか ら メ イ ン カ メ ラ「Main Camera」を 選 択 し、Inspector ビューの Camera コンポーネント > Background を黒色 (0, 0, 0) にします。 背景の描画順を後ろに移動させます。Hierarchy ビューから back オブジェクトを選択し、Inspector ビュー > Sprite Renderer コンポーネント > Order in Layer の値を「-1」に変更します。 敵の経路を作成する 再び Tiled Map Editor に戻って、敵の経路を作成します。 メインメニューから「レイヤー > タイル・レイヤーの追加」を選んでレイヤーを追加します。レイヤーの名前は「path」 に変更しておきます。 レイヤービューの「path」が選択されていることを確認して、タイルセットから丸で囲まれた「S」の文字を選択して配置 します。