【IT勉強日記】【超絶初心者向け】UnityのRPGMapEditorで酒場作り その壱

こんにちは。kohei@lohasumaです。

今回は珍しくITの分野のお勉強ログです。

お勉強といっても社内の遊び開発イベントがあったので、それをいいことに、前から使ってみたかったUnityにちょこっと触れてみた程度ですが。

ちなみにタイトルにあるように今回のエントリーは「Unity超絶初心者向け」です。どれくらいかというと、Unityのチュートリアルの英語圏動画を確認しながらただただ日本語で実施していくお話となっています。

また対象のチュートリアルですが、Unityそのものではなくて、Unityのアセットストアで購入した「RPGMapEditor」を対象にしています。理由は後述していますが某2Dゲームを作りたかったからです。

そんなこんなで以下のような層を対象としていますので、「それでもイイヨ(^^)」という心の優しい方、よろしくどうぞ。

▼想定の対象者

・Unityで色々やってみたいのだが、サイト検索しても高レベルで手も足も出ない

・ Unityで昔ながらのドラクエやFFみたいな2DRPGを作ってみたい

・RPGMapEditorを購入しようか迷っている
・ ドット絵 >>>>>>>>>>>>>>>>超えられない壁 >>>>>>>>>>>>>>>>ポリゴン だと思っている

ルイーダの酒場を作りたい

先に、目標というか動機をお伝えします。

往年のドラクエ党にとっては神ゲーというよりゲーム人生のルーツにあたるのがドラクエ3だと勝手に思ってます(異論は許す)。その中でもルイーダの酒場の誕生意義は、時を経た現在に至ってもなお素晴らしい。

剣と魔法の冒険譚のなかで、直面する己のミッションに最適なパーティーをアドホックに寄せ集めるという、酒場を舞台とした ドライかつ ビジネス ライクな冒険者達のスタンスがドラクエワールドに組み込まれていることに、当時どれだけの子どもが分かっていたのか。(無論私はそんなもん分かってませんでしたよ( ^ ^ )。)

(まぁアドホックといいつつ、結局初期メンバのレベルの壁を追従メンバが超越することも少なく、デフォルトのパーティーメンバ以外を強化しておくメリットもさほどないことに気づいて、初期メンバでバラモス直行!となってましたが。)

今でこそ3Dの世界で美人な店主ルイーダがカウンタに妖艶に構えておりますが、ファミコンやスーファミの、えてして同じフロアの銀行と見分けがつかないような、なんだったらルイーダーもモブの見た目だったあの頃の世界観を己の手で再現したくなったのです。

Uniyに関する基礎学習とおすすめ書籍

Unityは存在こそは数年前から知ってましたが、2018年の12月にインストールするまでは触れたことがありませんでした。

Webの情報をベースに取り組むことも考えましたが、少しでも体系的に学びたい(単に形から入りたいという説も)私は以下書籍をぽちりました。

結論としては、かなりのオススメ書籍でした。(実は執筆時点でまだ全8章分の7章までしか進んでません。 (・ω<) てへぺろ )
むしろ私、良書見つけるのが得意な気がする。。。※Amaxonレビュー様のおかげですが。

これからUnityに触れる人で、何かしらのゲームアイデアを持っており、それを実現する手段や手順が知りたい!という方なら絶対に後悔しないのでは、と思います。

Amazonのレビューでも記載されていますが、この本は単にUnityの使い方だけを教えてくれる本ではなく、ゲーム開発で役立つ思考と作業の順番をフレームワークとして教えてくれます。
砕いて言うならば、考える順番、作っていく順番など筆者オススメの流儀を教えてくれます。

仮にUnityとは違う開発環境に乗り換えることがあっても、この流儀というのは応用がきくのです。こういう流儀はなかなかWEBには転がっておらず、書籍で学習する大きなメリットだと思います。

ゲーム開発というのはプレイヤーの操作はもちろん、敵キャラの動作、BGMや効果音の再生、マップやステージの作成においては壁や崖などの当たり判定(ドラクエでいう「ドゥムドゥム」鳴るやつとか)など実にたくさんの仕掛けについて考える必要があります。

私などはIT系企業に勤める端くれではありますが、多くの企業システムと比べても、実にゲーム開発のほうが多くの仕掛けが複合的に作用しあっていて、作るのも解読するのも難しいと思います。

そしてそのようなゲーム作りだから1番難しいのは、ゼロの状態(Unityでいう新規プロジェクト作成直後)からのアクションだと思います。

例えばボードゲームでも難しいのは実行パターンが多い序盤の2~3手であるように、多すぎる選択肢は最初にどこから手をつけていいか分からなくて難しいのです。そして初手を誤ると泥沼化するのは言わずもがなです。

その点でこの本は、用意された章別のサンプル作成を経て、筆者の流儀を刷り込んでくれます。

そしてある程度Unityの機能や言語について理解が進んだときに、自分の作りたい構想・イメージさえあれば、そこからは自分で作れるように自立させてくれるコンテンツになっていると思います。
(ただしドラクエ風RPG作成は正直難しいです。昔ながらのRPGは本当考えこまれて作られているんだな、と作ろうとして正直まじで感動しています。)

ちなみに Unityの機能についての説明も少しくどく感じるほどに至極丁寧です。しかし、なんども反復させてくれることで知識が刷り込まれる仕掛けになっていることは間違いありません。

また、この本はプログラム(ほぼ)未経験者の方にもオススメできます。
私自身も、業務でJava開発は行ってきましたが、MicrosoftベンダのC#というプログラム言語は未経験でした。
今回、Unityをインストールしてみて初めてプログラム言語がC#であることも知ったのですが、この書籍であればサンプルコードの説明もかなり丁寧なのでほとんどギャップはありませんでした。

※とはいえ同じオブジェクト指向言語であるJavaの知識はかなり役立ってます。Java経験ある人は躊躇なく積極的に挑んでほしいです。まったくのプログラム経験皆無だった場合、詰まる箇所がでてくるかもしれません。

…と、全部読めてるわけでもないくせにべた褒めしてみました。

自分の温めているゲームのアイデアを具体化しようとUnityインストールしてみたが、

「( ´ー`)フゥー...どーすればいいかわかんね」

という方、ほんとオススメですよ!

・・・

・・・ で、なにかいいたかったかというと、「私はこの本の内容をある程度実施した前提でこれから文章書きますよ」、ってことです。

例えばUnityエディタの左の枠をヒエラルキー、下の枠はプロジェクト、右の枠はインスペクターだと知ってますし、スプライトをプロジェクトに追加してスクリプトをアタッチメントできるよー。ということです。 (知らない人にはわけわからんだろうなぁと思いつつ敢えて書いています。)

【超絶初心者向け】と謳っているので、本エントリーでは画面でのマウス操作、キーボード操作(GUI操作といいます)さえ出来ればゲームの形となることを目指しますが、GUI操作のやっている意味合いが気になる方は何かしらの入門書籍読んでみるのをオススメしておきます。

そして分かりにくい表現・箇所などあれば遠慮なくコメントなどで教えてくださいね。

RPGMapEditor

https://assetstore.unity.com/packages/templates/systems/rpg-map-editor-25657

【超絶初心者向け】と謳いながらも、いきなり有料コンテンツの紹介という。。。(笑)

趣味でのゲーム作りはアイデアやイメージを形にしていくことが楽しく、それを楽しめないととても出来る作業ではないと思います。
私の場合、ゲームを組み立てていく作業は楽しいのですが、アセット(あらゆる画像や音楽ファイルの準備)を準備する作業が苦痛でした。

だって面倒臭いじゃんwww

なのでUnityアセットストアでお金の力でポチ
ちなみに会社の経費落ちたので、痛くも痒くもなかったです(笑)
そんな経緯で2Dゲームのドット絵アセット(画像系アセットはスプライトと呼ばれます)をGETできた次第です。

ちなみに購入時点で単価45ドル。
税込で5300円なのでお安くはない感じです。がっつり飲みに行けちゃいます。
どーしても2D-RPGゲームをがっつり作りたい!」という勢いがないと考えちゃうお値段ではあります。

また話逸れますが、Unityのアセットストアは無料コンテンツもあります。
またお財布に優しいコンテンツもたくさん。見ているだけでも楽しいので、アセット準備に悩んだら、眺めてみるといいですよ。

で、このRPGMapEditorですが名前のとおり、単なる画像や音楽ファイルのパッケージではなく、Unityエディタへの追加機能とし機能してくれます。
所謂プラグインというものです。

使い方は英語ドキュメントや日本語での紹介サイトもあるのですが、1番わかりやすいと感じたのは提供元の「Creative Spore」がYouTubeにアップしているこちらの動画。
この通りやってれば仕組みが分かってなくても動くゲームがとりあえずできます。

この動画が一番最初に行うチュートリアルで分かりやすいけどなんせ早い。。。

ただこの動画、動画の操作がなんせ早い
しかも編集でカットされている箇所もある。
しかもしかもバージョン差異でメニュー表示がかわっていたり。
しかもしかもしかも英語

Unity超絶初心者にはこれもハードルだったりするのかなぁと思ったり。(私も初心者なので)

じゃあ私が動画内容を事細かにトレースした内容を日本語化して公開してやろうという画策です。
どこかの誰かに需要があればと切に思ってます。

私のPC環境

私の開発PCでの諸々。
OSが違うとUnityの各種ファイルの置かれるフォルダが変わったりします。
バージョンが変わるとメニューの位置関係が変わったり、古いやり方が廃れ、新しいオススメメのやり方しか使えないようなことがあります。

  • OS:Windows10
  • Unity:Unity 2018.2.18f1
  • RPGMapEditor:ver1.5.5

もし、この記事読んで試してみたけど記事の内容どおりにならない!っていう方はこのあたり確認してみてください。
UnityやRPGMapEditorのバージョンアップでこの記事が古くなってしまっている場合、コメントで教えて頂ければできる限り私の端末を最新化して試そうと思ってます。

OSの違いはすみませんが対処難しいのでご容赦くださいね。(「儂がMac買ってやるでよ」っていう足長おじさんはご連絡ください(^^))

ではさっそくやってみよう

YouTubeにあげられている動画をトレースするだけのエントリーに随分前置き長くなりました。

これからはサクサクいきますよ。
ちなみにUnity上で真ん中画面の操作(拡大/縮小や表示箇所をずらす、など)は以下の公式の記事が詳しいです。

https://docs.unity3d.com/jp/current/Manual/SceneViewNavigation.html

ただ後述するUnityMapEditorによるペイント操作中は表示箇所の移動は出来ません。
移動手段は後述のペイントするタイミングでお伝えしますね。

またRPGMapEditorは購入済み、かつ、インストール・インポート済みの前提ですすめます。
そこの部分もやり方分からんから教えてくれ!!という方いらっしゃったらコメントでもください。

①シーンの保存

まずUnityでゲームを作る場合、シーン単位に作っていきます。

このシーンはドラクエでいうなら、アリアハン城1F、アリアハン城2F、アリアハン城下町、城の外のマップ、ダンジョン、などなどカメラ画面が一度ずばっと切り替わる単位と考えるのが良いです。
無論後々作ろうとしているルイーダの酒場も、アリアハン城下町からルイーダの酒場の建物に入ることで、カメラが切り替わるので、一つのシーンとして作成します。
(ドラクエ分からない場合、ポケモンに置き換えてください。マサラタウンと博士の研究室みたいなもの、、、って古いか(赤・緑世代))

まずはプロジェクトを開いた状態です。

画面左真ん中に「SampleScene」とUnityマークと一緒にあるのがシーン。SampleSceneは新規作成時のデフォルトの名前のため、後々のことも考慮して、作成するシーンに名前を付けます。今回は将来的にルイーダの店にすることが目標なので、「Luidas_Bar」とします。

新規でプロジェクトを作成・開いた状態。
すべてはここから始まります。。。

左上メニューバーより「FILE > Save Scene As …」の選択肢をクリック

保存のダイアログが出現するので、ファイル名に「Luidas_Bar」を入力して「保存」を選択します。

「Luidas_Bar」で保存。
まぁ、名前はなんでもいいですよ。重要なのは後々自分が見たときにどこの場面だっけ?ってのが名前で分かることなので。

保存ができると、次の画面のように、左枠のUnityマークで「SampleScene」となっていた箇所が、保存時に決めたシーンの名前に切り替わっています。

また、画面中央下にも保存したシーン名のUnityマークが登場していると思います。

ちょろっと説明はさむと、左枠のUnityマークは今作成中のシーンを指しています。
一方で、中央下のUnityマークは作ろうとしているゲーム全体の中のシーンの一つとして表示しています。
まぁこの辺は今回は不要ですよ。複数シーン作る場合に(2Fとか)また説明できればと。。。

保存ができたら、左枠のUnityマークの箇所の名前が保存したシーンの名前に変わっていますね。
あと中央下にもLuidas_Barの名前でUnityマークが登場します。


②RPGMapEditorを作成

シーンの保存ができたら、次はこのシーンでRPGMapEditorを使うための手続きを行います。

現段階で、「このゲーム(プロジェクト)でRPGMapEditorを使うことはimportされてっから知ってるけど、どのシーンで使われるのかまではこっちは聞いちゃいねぇよ」というのがUnityサイドの言い分です。
そんなUnityに「このシーンはRPGMapEditor使うやで(^^)」というのがこの手続き。

左枠のUnityマークのシーンの上に「Create▼」みたいな箇所がありますが、そこを選択するとメニューが展開されます。
展開されているメニュー内に「RpgMapEditor」が存在しているので、そこからさらに「AutoTileMap」を選択します。

そうすることで、左枠の中に、「AutoTileMap」も作成されます。

Create > RpgMapEditor > AutoTileMap の順に選択していくだけ。
createすることで左枠にAutoTileMap登場します。

この時点で、「ちょっっっ!!!「Create▼」を展開しても「RpgMapEditor」なんてありませんけど!!」という方。

トランキーロ!あっせんなよ!

おそらくRPGMapEditorが正しくインポートされていないのだと思います。
購入 > ダウンロード > インストール > インポート の順に実施が必要なので、再確認お願いします。

またインポートは確実にしたんだけど。。。という方、念のためUnityを再起動させてみましょう。

それでもダメなんすけどぉお、という方、コメントください。(お力にはなれませんが、相談にはのります)

③RPGMapEditorDataを作成

はい、AutoTileMap作れましたね。

じゃぁ「今からガシガシマップ作っていきますわ!ほな!!」というお方はちょっとトランキーロ。

実は作ったAutoTileMap。これ自体はMapデータではなく、地図を描く際の筆や絵の具、パレット的な役割の機能だと考えてください。
つまり地図を作っていくためには、Mapデータが必要となるのです。

なので、Mapデータを作ります。

左の枠(Hierarchyと書かれた枠)の「AutoTileMap」をクリックして選択すると、右側に「Inspector」という枠が登場します。その枠を一番上から「Transform」「Auto Tile Map Editor Behavour (Script) 」「Auto Tile Map Gui (Script) 」「Auto Tile Map (Script)」とありますが、一番下の「Auto Tile Map (Script)」 に注目してください。

InspectorでAutoTileMapを選択した状態で、右側に表示される「Auto Tile Map(Script)の設定を行います。

枠の中に「Tileset」と「Map Data」があるので、まず「Tile Set」の設定をします。「Tile Set」とはゲームの地面、床、壁、などの色々な画像の集まりです。この画像の集まりをTile Setとして設定しておくことでRPGMapEditorで自由に利用できるようになります。

TileSetの「None」と表示されている枠の右側に小さな丸いポチがTilesetの設定ボタンなので、この設定ボタンをクリックします。クリックすると設定用のウィンドウが、画像のように表示されますので、「AutoTileset」を選択して右上の×ボタンでウィンドウを閉じてください。

AutoTilesetを選択したら、そのまま右上の×ボタンで閉じてOK
AutoTilesetの設定ウィンドウを閉じたら、Inspectorに設定が反映されています。

次にMap Dataを作ります。


MapDataはオリジナルで作っていくため、既存データの選択ではなく、新規作成となります。そのため「Create…」ボタンを選択します。「Create…」ボタンをクリックすると、保存ダイアログが登場します。MapDataはファイルとして保存されるので、そのファイル名を決めることができます。名前はなんでもいいので、分かりやすいようにつけてください。

今回の例ではルイーダの酒場1Fとわかるように名前をつけています。まぁぶっちゃけ他と重ならなければなんでもOKです。デフォルトでもいいですよ。

無事に保存ができたなら、左側のHierarchy枠に「AutoTileMap Data」が登場します。また作成・編集対象のファイルができたことで、AutoTileMapのInpsector枠も色々な設定や処理が行えるようになります。

AutoTleMap Dataが作成されることで、AutoTileMapは色々なことができるようになります。


④RPGMapEditorによるマップのペイント

Mapデータの作成ができたなら、さっそく自分の世界を描いて作ってみましょう。

左のHierarchy枠でAutoTileMapを選択している状態で、右側のInspector枠から「Auto Tile Map(Script)」の中にある「Paint」ボタンをクリックします。選択することで、「Edit」ボタンが登場するので、「Edit」ボタンをクリックしてください。

Paintボタンをクリックすると、Editボタンが登場します。

Editボタンを押下すると、床やら壁に使えそうなドット絵が・・・!
ドット絵の種類は結構多く縦にスクロールして選びます。
また、Tilesetを「A」~「F」など色々切り替えることで別の画像集に切り替わるため、大体の画像が揃うかも!

ちなみにこのたくさんのドット絵こそが、Tilesetで設定したAutoTilesetなのです。

これだけでも便利なのですが、さらにこの状態で「Shift」キーを押すとAutoTilesetに色々なアイコンが表示されます。
これがRPGMapEditorの特に便利な部分で、地面・床などキャラクターが移動可能な部分、壁など移動不可な部分、天井など後ろにすり抜け可能な部分などを簡単に設定・確認できるのです。

Shiftキーで画像毎の設定を確認できます。この状態でクリックすると設定変更可能。
なにもない画像が地面、□、■、#は壁(アイコンによって衝突判定される箇所が微妙に違う)、★は天井などキャラクタが画像後ろをすり抜け可能となっています。

Youtube動画にしたがって、適当に芝生っぽい画像をクリックして選択します。
そしてUnity画面真ん中(Sceneといいます)を左クリックすることで、ペイントで絵を描くようにMapを描けます。

やっと自分の世界を作り出せました!ここからは楽しい作業ですね!
あそーれグールグル、グールグル。おまわり毎日グールグルってか。
ちなみに右クリックでScene枠の好みの範囲をドラック選択すると、、、

選択した範囲を左クリックでコピーのように描けるようになります。グールグル、グールグ・・・(略
細かい地図作りではあまり使いませんが、ざっくり大きいマップを作るときや、失敗したところを消す作業に役立ちます。(なにもない箇所を右ドラック選択することで、消しゴムのように使えます。)

⑤広大なマップデータの自動作成

建物の中や、街の中、ダンジョンの中など作る際に思いや考えを詰めたいマップはペイントでじっくり作るのがいいですが、街の外のエリアなど、全部ペイントで作っていられないですよね。

そんなときUnityの機能でそれっぽい大きなマップを作ることができます。

Inspector枠の「Paint」の右に「Data」ボタンがあるので、それをクリックします。「Reload Map」「Import Map」「Export Map」「Clear Map」「Generate Map」などのボタンが登場するので、「Generate Map」をクリックします。

ちなみにペイントなどで作ったマップデータは保存していないと消し飛んでしまうので、要注意です。

「Generate Map」をクリックすると、確認ダイアログが登場するので、「Yes」を選択すると、あっというまに大きなマップが作成されます。

Generate Mapすると作っていたマップが吹き飛んでなくなります。
作るときは、要注意!消したくないマップはExport Mapしとけば大丈夫(だと思う)
ばーん!と自動生成されたマップ。遠目に見たらゴルフ場のようですが、実は崖あり、山ありの自然豊かなフィールドに仕上がっています。

無論、自動作成したマップをもとにペイント機能で微修正することなども可能です。

また自動生成されたマップが気にくわない場合、もう一度「Generate Map」をクリックすると、再作成して違うマップが作られるので気に入るまでボタン押すのもアリ。

⑥カメラ、プレイヤー、敵の配置

ここまできたら、とりあえずキャラクタ配置させて動かしてみたいですよね。

というわけでRPGMapEditorのデフォルト提供されているキャラ、敵を使って動くゲームを作りましょう。

マップ上のどこか気に入った場所を決めたら拡大表示してください。
拡大の仕方はマウス使っている人はマウスホイールで可能ですし、ノートPCのトラックポイントの人もブラウザの拡大などと同じようにすればできます。

拡大表示できたら、画面左下の枠に「★Favorites」 > 「All Prefabs」をクリック。。.
※「Prefabs」とは「特定のモノを製造する機能」のような意味合いです。(ってUnityの教科書に書いてた。)
このあたりの意味を最低限分かっているとUnityで自由に遊べるようになっていくと思うので、用語理解は頑張ったほうがいいです。

で、All Prefabsを選択したなら、画面中央下の枠の中から、「Player Camera」を選びます。(キャラクターやら青いキューブ状とは異なりPlayer Cameraは無地のアイコン表示です。

正常にマップ上に配置設定ができた場合、下の図のように、PlayerCameraが左のHierarchy枠に追加され、マップ上には白枠線と右下のカメラプレビューイメージが表示されます。

文字通り、Playerに追従してくれるカメラで、配置しておくプレイヤーの動きによるスピンアウトがありません。
Player Cameraを見つけたなら、そのアイコンをドラッグ&ドロップでScene枠の任意の箇所にもっていきます。

ちなみに画像準備に忘れていましたが、Player Cameraを配置したら、もともとデフォルトであったMain Cameraはいりません。
あってもPlayer Cameraが優先され特別は悪さはしなかった気もしますが、気持ち悪ければ消してしまっても構いません。
消したい人は、左のHierarchy枠からMain Cameraをクリックして、「Delete」キーでOKです。

Player Cameraが配置できたら次はPlayerを配置します。Player Camera同様に★Favorite > All Prefabsの中にあります。
見つけたら、先ほどのPlayer Cameraの範囲を指している白枠の中にポイっとドラグ&ドロップです。

無事に配置できれば、PlayeキャラがScene上に登場し、Hierarchy枠にもPlayerが登場します(図ではPlayer(1)となってました)。

Player配置できたら最後は敵キャラです。
Playerはマップ上に1体ですが、敵キャラはやっつけてもやっつけてもどこからともなく登場するようにします。

やりかたは超簡単。

★Favorite > All Prefabs  の中にある「Enemy Gen」という落とし穴?のようなアイコンをSceneにドラッグ&ドロップするだけです。
そうすることでゲーム中、この穴?からわさわさドバミミズのような敵キャラが量産される寸法です。(←友近の西尾かずお風)

プレイヤーも敵キャラ製造穴も配置したで候。

⑦ゲームを動かしてみる

やっとここまできました。マップもキャラも敵キャラも登場させたので、もういいでしょう。
ゲームプレイやりましょう。

やるときはScene枠の上にある再生ボタンをポチするだけです。

それだけでゲームが始まりますよ。

即席なのでストーリーも設定もないのですが、十字キーでプレイヤーの上下移動の他、「y」「u」「i」「j」あたりのキーで四方八方銃弾を撃ち込めます。敵キャラに銃弾が一定数あたると、敵キャラは爆破して消滅する仕組みが備わっています。

他にも操作はあるかもしれませんが、Playerの操作スクリプトを確認してないので特にこれ以上言及できることはないです。

でも、ちゃんと動いて敵キャラに銃弾撃ち込めたんでは?

もし撃ち込めてたらおめでとうございます!!!まだだったら頑張ってください、応援します!

振り返り & 次の予定

ふーーー。やっと書き終わりです。
内容的にはスカスカですが、IT系の記事は必要な労力が釣行記録の5倍以上です。
適当なことを描きにくいですからね。

この記事も作成開始から1カ月以上はかかっています。

まぁ今回は【超絶初心者向け】なので、色々説明を共通の言葉で行って積み重ねる点も大変でした。
次からはもう少しUnity側ワードで説明できれば、いいなと思てます。

そして次はいよいよルイーダの酒場を作ります。
作り方は我流ですが、マップの作製とコマンド・会話レベルはできています。

後は記事を作り、画像を用意するだけ。
が、この画像準備が一番大変なんです。。。

もし早く見てみたい人いればコメントなどください。

場合によっては他の記事(釣り)を差し置いて続演準備にとりかかる(かも)しれません。
よろしくお願いします。

以上koheiでした。




コメントを残す