【サイトについて】
* RPGツクールMVを使った、ゲームを一層楽しくするためのアイディアや、豆知識、プラグインなどを紹介していきます。あくまで個人の考えに基づく記事ですので、参考程度にお読みいただければ幸いです。
<< 私は絵が描けません、そんな人々のために。 | main | 私はサイドビューが好き。 >>
スポンサーサイト
0

    一定期間更新がないため広告を表示しています

    | - | |- |
    マップ上に常に情報ウィンドウを表示する
    0
      キャラクターのHPやレベルなどのステータス情報、ダンジョンで獲得した宝箱の数など、
      ちょっとした情報を常にマップ画面に表示させておきたいとします。
      実はこれが出来るプラグインは既に存在していますし、高機能ではありますが、
      簡易なウィンドウを表示させるやり方を解説していきたいと思います。
      (ただ、今回はちょっと自信無いので、やや消極的にいきます)

      とりあえずは下の画像の左上にある様な感じですね。



      この状態で宝箱を2個取ると、



      情報ウィンドウの表示もリアルタイムで更新されます。

      まず実際にウィンドウを表示する前に「この宝箱の数はどこから来ているのか?」について、あらかじめ説明しておきます。宝箱を取るイベントの中に「宝箱を開けた数」という変数を作り、1個取るたびにその変数に1を加算する、という処理を入れます。



      つまり情報ウィンドウと言いましても、単に画面上にこの変数の値をそのまんま表示させているだけです。

      これをふまえて、実際に情報ウィンドウをどの様に表示させるのか、解説します。
      Javascriptさんは1から100までを言わないと怒り出すタイプの言語さんでして(1から100までを言っても怒り出すタイプの言語さんもいらっしゃいますが)、「この変数を左上に表示してくれよ〜」って命令するだけだと、「は?」と怒られてしまうんです。

      Javascriptさんに「情報ウィンドウを表示させたい」をお願いしたら、こんなお返事が来るわけです。

      (1) ふんふん、どの場所に?
      (2) で、どのタイミングで?
      (3) っていうか「情報ウィンドウ」ってそもそも何なの?
      (4) なるほどね、それじゃそれ表示する位置を、x座標とy座標で細かく教えてよ。
      (5) あ、その情報ウィンドウとやらの幅と高さも頼むよ。
      (6) 待って、情報ウィンドウの色は? 透明度は?
      (7) え? 情報ウィンドウに文字載せるの? 何を載せればいいの?
      (8) 情報ウィンドウ内のどこにテキストを載せるの? 端っこでいいの?
      (9) その載せるテキストの文字サイズは? 色は?
      (10) よーし分かった。じゃあこれで表示していくよ。え? 宝箱の数が1個から2個になったら、1って文字を消せって? 先に言ってよ。1の上に2を書き足しちゃったよ。

      とまあ、こんな感じなのですよ(~_~;;
      なので今回は一つ一つの手順を解説していくと、とんでもないボリュームになってしまうので、先にスクリプトをこちらからダウンロードしてください。それについて補足説明を入れていく、という形で対応したいと思います。

      プラグインをダウンロードする
      (「InfoWindow.js」というタイトルです。各プロジェクトフォルダのjs/plugin内に入れ、プラグイン管理よりInfoWindow.jsをONにしてください)

      ■補足説明

      13〜33行目
       
          // マップ上に表示する宣言
          var Scene_map_start = Scene_Map.prototype.start;
          Scene_Map.prototype.start = function() {
              Scene_map_start.call(this);
              this._InfoWindow = new Window_Info();
              this.addWindow(this._InfoWindow);
          };

          // ウィンドウ内の情報を更新するタイミングを宣言
          var _Scene_Map_update = Scene_Map.prototype.update;
          Scene_Map.prototype.update = function() {
              _Scene_Map_update.call(this);
              this._InfoWindow.setText();
          };

          // ウィンドウを定義
          function Window_Info() {
              this.initialize.apply(this, arguments);
          }
          Window_Info.prototype = Object.create(Window_Base.prototype);
          Window_Info.prototype.constructor = Window_Info;

      この部分は全く変更する必要はありません。
      上のJavascriptさんの返事でいうと(1)〜(3)の部分にあたります。
      たとえば「addWindow」という語がありますよね。addは追加、Windowはそのままウィンドウ、なので「Scene_Map」「start」「addWindow」という三つの語を拾い出せば、「マップが開始されたらウィンドウを画面上に追加する」という様な意味合いになる事は分かると思います。
      ちなみに赤字の_Infoは全て共通にすれば変更しても問題無いです。Window_Otakaraとかでも構いません。

      36〜42行目
       
          Window_Info.prototype.initialize = function() {
              var x = 20;
              var y = 20;
              var width = 180;
              var height = 108;
              Window_Base.prototype.initialize.call(this, x, y, width, height);
          };

      ここで、情報ウィンドウの位置調整と、大きさ調整です。
      var x = 20、var y = 20は、「画面上のx座標20、y座標20の位置にウィンドウを表示するよ」という意味です。単位はピクセルです。つまり、こういう事ですね。



      その下、var widthはウィンドウの幅、var heightはウィンドウの高さです。
      こちらも単位はピクセル。



      これはゲーム画面をスクリーンショットで撮影して、お絵描きソフトに貼り付けて、作りたいウィンドウを実際に描くと、自分の思う位置・幅・高さの数値を算出しやすいです。

      続いて少し飛んで49〜56行目。
      いよいよ情報ウィンドウの中身の作り方に迫っていきます。
       
          Window_Info.prototype.refresh = function() {
              this.contents.clear();
              this.changeTextColor(this.textColor(16));
              this.drawIcon(210, 1, 1);
              this.drawText("拾った宝箱",40, 1);
              this.resetTextColor();
              this.drawText($gameVariables.value(2) + " 個",0,this.lineHeight());
          };


      まず、
      this.contents.clear();
      最初にこれ書かないと、更新前の文字が残ったままになります。カウントアップさせる場合だと「1」の字の上に「2」が重なったりして、ものすごい事になります。

      this.changeTextColor(this.textColor(16));
      次からのテキストを16番の色(薄いブルー)に変更せよという意味です。
      色がデフォルトのままで良い場合は、この行は丸ごと不要です。
      ちなみに色の数値は、プロジェクトフォルダのimg/system/Window.pngの右下の色群です。
      例えばオレンジにしたいなら、this.textColor(2)です。

      this.drawIcon(210, 1, 1);
      アイコンを表示させます。210番のアイコンをx座標1、y座標1の位置に表示させよという意味です。
      上の例では宝箱のアイコンを表示させていますが、宝箱アイコンはアイコン群のID210番です。
      イベント「文章の表示」で、入力ウィンドウ内を右クリックするとアイコンビューアが出せますが、そこでアイコンを選択した時にIDが下に表示されると思います。その数値です。

      this.drawText("拾った宝箱",40, 1);
      「拾った宝箱」というテキストをx座標40、y座標1の位置に表示させよという意味です。
      なぜ40かと言うと、すぐ手前で表示させたアイコン分の幅と少しの余白分を入れたものです。
      これを1にすると宝箱アイコンと位置がかぶってしまいますからね。
      アイコンの幅を変数で自動取得するという事も可能ですが、手動で数値を入れて色々いじってもらった方が感覚がつかみやすいと思いましたので、カットします。

      this.resetTextColor();
      16番の色で表示させていた配色を、デフォルトの色に戻す時に使います。これを入れればウィンドウの途中で変えていた色を元に戻せます。たとえば3行のテキストで、1行ごとに色が変わる場合は、this.resetTextColor()を2回書かなくてはいけません。

      this.drawText($gameVariables.value(2) + " 個",0,this.lineHeight());
      再び、drawTextが出て来ましたね。
      これが今回の情報ウィンドウの肝です。
      最初のdrawTextが1行目であれば、次のdrawTextは2行目。
      2行目に $gameVariables.value(2)+「個」という文字列を、x座標0、y座標は1行分空けた位置に表示させよという意味です。

      $gameVariables.value(2)は変数ID2番の値を取得するためのものです。
      変数ID2には最初で説明しました、「宝箱の取得数」が格納されています。
      宝箱の数値が入り、そのあとに「個」という文字が入る。
      こうする事で1個とった時は「1個」と画面上に表示されるわけですね。

      ちなみにこの$gameVariables.value(ID)の部分、
      たとえば画面上に総プレイ時間を表示させたい場合は
      $gameSystem.playtimeText()
      と書きます。



      まあ画面上に常に「こんなん書かれても」って感じではありますが、プレイ時間1時間経過ごとにイベントが発生するなど、何かには活用は出来るかも知れませんからね。

      ちなみにダメージ計算式の回の時の式もそのまんま流用できます。
      プレイ時間を秒数で出したい時は $gameSystem.playtime()
      所持金を出したい時は $gameParty.gold()
      戦闘回数を出したい時は $gameSystem.battleCount() 
      です。

      あとは59行目以降です。
      解説しなくても大体感覚で分かるとは思うのですが、一番最後だけ。
       
          // ウィンドウの色調
          Window_Info.prototype.updateTone = function() {
              this.setTone(64, 0, 128);
          };

      this.setTone(64,0,128);
      これは「ウィンドウの背景色調を赤64、緑0、蒼128の割合にせよ」という意味です。
      この割合で塗ると上の様な紫色になるわけです。
      「こんな派手な色にしなくても、普通のシステムの色でいい」という場合は、この4行分丸ごと不要です。がっつり消してください。



      といったところで、かなり今回は駆け足気味での解説でしたが、如何だったでしょうか。
      自信が無いと最初に書きましたのは、もっと他にやり方があるかも知れず、もっと手数を減らせるかも知れないからです。まだまだ勉強しないといけませんね。。

      今回はマップ上に情報ウィンドウを表示させるという目的で書きましたが、もちろん応用すれば、



      こんな風に、メニューの空いた部分に表示させることも出来ます。
      Mapに表示する処理の部分を、Menu上に表示させる処理に移動させるだけです。
       
          var _Scene_Menu_create = Scene_Menu.prototype.create;
          Scene_Menu.prototype.create = function() {
              _Scene_Menu_create.call(this);
              this.createInfoWindow();
              this._InfoWindow.y = this._commandWindow.height;
          }

          Scene_Menu.prototype.createInfoWindow = function() {
              this._InfoWindow = new Window_Info();
              this.addWindow(this._InfoWindow);
          };
          
          var _Scene_Menu_update = Scene_Menu.prototype.update;
          Scene_Menu.prototype.update = function() {
              _Scene_Menu_update.call(this);
              this._InfoWindow.setText();
          };

          function Window_Info() {
       (以下略〜あとは上述と同じです)

      大体似たような事をやっていますが、
      this._InfoWindow.y = this._commandWindow.height;
      ここで、コマンドウィンドウ分の高さの位置に、メニュー内情報ウィンドウのy座標を入れる事により、たとえコマンドウィンドウの項目がいくつに変更されたとしても対応出来る様にしています。

       
      | RPGツクールMVプラグイン | 18:11 |- |
      スポンサーサイト
      0
        | - | 18:11 |- |
        PR