ツクールMV:FF1風メニュー画面を作る1

では、早速作る前に要素の洗い出しをしていきましょう。最初に作るのはFF1のメニュー画面(ファミコン版)をそのまま再現するというものです。
FF1のメニュー画面がわからない方は実際にFF1をVC等で買って実際に触っていただくか、動画でもみてください。
ゲーム画面のSSを載せることはしませんが、出来る限り手書きで解説はしていきたいと思います。

メニュー画面トップ

マップ画面からメニューボタンを押してメニュー画面が開いた所のシーンです。
動きとしては[マップシーン]→[ボタンを押す]→[メニューシーンを呼び出す]。という仕組みです。

メニュー項目

FF1 メニュー画面 作り方

  1. クリスタル取得状況ウィンドウ
  2. 所持ギルウィンドウ
  3. メニューリストウィンドウ
  4. PTメンバー簡易ステータスウィンドウ

ざっと見るとこんな感じです。まずはこの画面を作ってみましょう。ご存知の方も多いと思いますがFF1の魔法はMP数制ではなく使用回数制です。
GBA版になるとMP数制になっていたりしますが、最近ではMP数制が普通ですしツクールもMPとTPを採用しています。ですので、この使用回数制の部分をMP数制に置き換えます。

ウィンドウ画面を作る前にしなければならないことがあります。それは新たなシーンの作成です。
RPGは基本的にシーンで管理しています。マップ画面に居る時はマップシーン。メニュー画面の時はメニューシーン。
バトル画面の時はバトルシーンが稼動しています。そんなイメージを頭に置いててください。

まず空のシーン作りから始めていきましょう。既存のメニュー画面を改造したほうが手っ取り早いかもしれませんが
既存の機能が邪魔したりしないといけないので、混乱する可能性があります。私は確実に混乱するのでまっさらな状態で始めます。

それでは、いきなり飛ばしすぎても意味不明になりますので匍匐前進のように進んでいきましょう。

空のシーンを作る

マップ画面からメニューボタン(ツクールではキャンセルボタン)を押すとメニュー画面に移動しますよね。
実はMap_SceneからMenu_Sceneを呼び出しているためそういった動きになっています。
ですので、既存のMenu_Sceneを呼ばずに自作したSceneを呼び出してみましょう。まずは空のシーンファイルを作ります。

ツクールMVのプラグインはプロジェクトフォルダのjsフォルダにある「plugins」フォルダ格納していきます。そうでなければツクールMV側が認識しません。
フォルダの場所は環境によって様々ですので、解らない方はツクールMVのメニューにある「Game」をクリックすると、「テストプレイ」と「フォルダを開く」の項目があると思います。
私の環境はRPG Maker MVなので表記が違いますがたぶんこうなっていると思います。「フォルダを開く」を選択するとプロジェクトがあるフォルダを開いてくれます。

その中に様々なフォルダがありますが、そのなかにある「js」フォルダの中に「plugins」というフォルダがあるのでそこがプラグインを格納するフォルダです。
その中に.jsファイルを作っていきます。ファイルを保存する際は文字コード「UTF-8」にしておいてください。「s_jis」等では日本語を書き込むと文字化けする可能性があります。

私は高機能エディタ「Sublime Text 2」というエディタを使っています。Windowsデフォルトのメモ帳でもいけますが
色分けがされないので、お好きな高機能エディタをダウンロードしてきてそちらで作業する事をオススメします。

では、まず始めに「FF1_Menu_Scene.js」というファイルを作ってください。
一番最初にすることは、既存の「Scene_Map」の処理の1つを上書きします。
そう、メニューボタンを押したときに呼ばれる処理の書き換えです。本来デフォルトメニューシーンを呼び出す処理になっていますが、書き換えましょう。

FF1_Menu_Scene.js

//============================
// FF1風メニューシーン
//============================

//①Scene_Map.callMenu処理をオーバーライド
Scene_Map.prototype.callMenu = function() {

    //②データベース側で設定されているOK処理の時のサウンドを鳴らす
    SoundManager.playOk();

    //③pushメソッドの引数に指定したシーンを呼び出す
    SceneManager.push(FF1_Menu_Scene);

    //④コンソール画面への出力(これはこの命令が呼ばれた際の確認用なのであってもなくても)
    console.log("FF1風メニューシーンを呼び出します。");
};


//-----------------------------------------------------------------------------
// ⑤  FF1_Menu_Sceneクラスの定義
//-----------------------------------------------------------------------------

function FF1_Menu_Scene() {
    console.log("メニュー画面ガ呼び出されました。");
    this.initialize.apply(this, arguments);
}

//⑥オブジェクトの作成
FF1_Menu_Scene.prototype = Object.create(Scene_MenuBase.prototype);

//⑦オブジェクトが生成された時のコンストラクタ
FF1_Menu_Scene.prototype.constructor = FF1_Menu_Scene;

//⑧初期化
FF1_Menu_Scene.prototype.initialize = function() {
    Scene_MenuBase.prototype.initialize.call(this);
};

//⑨生成メソッド
FF1_Menu_Scene.prototype.create = function() {
    Scene_MenuBase.prototype.create.call(this);
};

いきなり長すぎぃ!と思った方は正常です。しかし、やっている事は本当に単純なものなので1つずつ解説していきましょう。
一応判る範囲でコメントをつけていますので、理解は難しくないはずです。最初のうちはコピペで構いませんが、実際に自分で打ち込んだほうが身につきます。

元々のスクリプトを利用したりJS自身の決まり文句的にこう書いておけばOK!っていうのが多かったりしますのでまずはコピペで保存して一度ゲームプレイしてメニューボタンを押してみてください。
すると、画面がぼやけて何も表示されない状態になり、操作もきかなくなるはずです。

ツクールMVスクリプト ①~⑨の解説

① Scene_Map.callMenu処理をオーバーライド

マップ画面からメニューボタンを押すと、「Scene_Map.callMenu」というメソッドが呼び出されます。なので、そのメソッドをオーバーライド(上書き)してしまいましょう。

② データベース側で設定されているOK処理の時のサウンドを鳴らす

これはあってもなくても構いませんが、音が出たほうが判りやすいので入れています。実際、元の「Scene_Map.callMenu」でもこの処理は呼び出されていますので、流用しています。

③ pushメソッドの引数に指定したシーンを呼び出す

シーンを呼び出すメソッドは2種類あります。「SceneManager」モジュールに登録されている「push」と「goto」があります。違いは、「push」はシーンの上にシーンを乗せるイメージです。「push」で呼び出した後は、「pop」メソッドを使うと前のシーンに戻ることが可能です。つまり、マップ画面からメニューを呼び出す等、閉じた時に前の画面に戻りたいときは「push」を使います。「goto」はその名の通りシーンを変更します。「pop」メソッドを呼び出しても前のシーンに戻る事は出来ません。イメージ的にはニューゲームを押して次のシーンに移る等、キャンセルを押しても前のシーンに戻さない時に使います。厳密に言うと違うかもしれませんが、こういう感じで覚えておいてください。

④ コンソール画面への出力

RPGツクールMVはGoogleChromeと同じ仕組みを採用しているのでJavaScriptのログを表示できます。変数に何が入っているとか確認できるので、開発中は結構多様します。

⑤ FF1_Menu_Sceneクラスの定義

ここで初めて新しいクラスを作成します。「function FF1_Menu_Scene()」と定義しているのがクラスだと思っていてください。(厳密にはJavaScriptにクラスの概念はないのですがわかりやすいように。)

⑥・⑦・⑧・⑨

この4項目については、こういう決まりなんだと思っていてください。最初に表示したいものなどは⑨に表記していく感じになります。

結構駆け足になってしまっていますが、やっとスタートラインに立った感じです。次回はウィンドウを表示して何か文字を表示してみようと思います。