【サイトについて】
* RPGツクールMVを使った、ゲームを一層楽しくするためのアイディアや、豆知識、プラグインなどを紹介していきます。あくまで個人の考えに基づく記事ですので、参考程度にお読みいただければ幸いです。
<< Mac版ツクールMVでのアニメーションの設定の不具合? | main | 【紹介記事】サイドビュー戦闘でキャラクター同士を戦わせるプラグイン >>
スポンサーサイト
0

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

    | - | |- |
    Javascriptが苦手な私によるプラグイン作成講座
    0

      私はJavascriptが苦手です。
      というのは、他の言語に比べて動作とかエラーの出方が冷たくないですか。
      HTMLだと「あ〜、ここはこう書いても通るんだ?」って優しさがありますし、PHPだと「あ〜、なるほどこれが原因か。じゃあこう書き直せば動くね」って親切さが感じられるんですが、Javascriptは少しでも隙があると突然「バンッ!」といきなり扉を閉められて放り出される様なあの感覚がするんですよね。分かる人いません?

      閑話休題、今回はプラグイン作りをやりますね。
      私はRPGツクールMVどころかツクール自体ほぼ初めてなので、いわば素人です。
      そんな私の手順です。

      ■必要なものは何か?
      ◎パソコン
      (WindowsでもMacでもOKです)
      ◎テキストファイルを読み書き出来るソフト
      (メモ帳でもEMEditorでもTeraPadでも構いません。プラグインを編集出来るエディタをご用意ください)
      ◎RPGツクールMVで作成したプロジェクト

      ■プラグインで「何を作りたいのか?」
      プラグインとはRPGツクールMVエンジンのゲームの動作を変更したり、追加したり、削除したりするためのものです。何を変更したいのか、何を追加したいのかetcが自分自身で分かっていないと作り様がありません。
      そうですね、私自身も出来ることには限界がありますし、あまり記事が長くなり過ぎるのもあれなので、簡単な例で「戦闘のクリティカルヒット時の演出を派手にする」なんてどうでしょうか。
      デフォルトの戦闘でクリティカルヒットが発生した時、通常ヒットの「バン!」が「バンッ!」ってなるだけでかなり地味で、もっと「ズバシィィズドドドーン!」みたいな感じにしたいって作者さんも多いはず。
      というわけで今回は「クリティカルヒット時に任意のアニメーションを流す」プラグインを作りたいと思います。

      ■どのファイルを参照するのか?
      上にも書いた通り、プラグインとはツクールの本体の動作を変更するためのものです。
      変更ということは当然「今の動作プログラムを書き換えなければいけない」ということです。
      RPGツクールMVの動作プログラム(正確には書き換えが許されている部分)は、各プロジェクトフォルダの js というフォルダに入っている、次の6つのJavascriptで成り立っています。

      rpg_core.js
      rpg_managers.js
      rpg_scenes.js
      rpg_sprites.js
      rpg_windows.js
      rpg_object.js
      (libsフォルダとmain.jsとplugins.jsはひとまず無視して下さい)

      どうして6つもあるかと言うと、それぞれのファイルで役割が分けられているからです。
      RPGツクールMVという名の会社に部署が5つあると思ってください。
      それぞれざっくりと説明しますと、

      rpg_core.js すべてを取り決める社長率いる総務部
      rpg_manager.js 音楽や画像などの配置、各社員の役割を管理する人事部
      rpg_scenes.js 「こういう時はこうする」「そういう時はこうする」と考え指示する脚本担当
      rpg_sprites.js キャラクターやモンスターの形・色・位置・動き・エフェクトなどを決める演出担当
      rpg_windows.js メニューやウィンドウ画面などの位置・大きさ・載せる内容などを決める書記担当
      rpg_object.js 全ての部署が共通で使えるお道具箱

      こんな感じです。どうも例えが下手ですね。
      厳密に言えばかなり違うと思いますが、あくまで私の中のイメージをざっくりと書くとこうなります。

      ここで本来の目的に戻りまして、
      「クリティカルヒット時にアニメーションを流す」という事は、上のどのファイルが一番関連していそうか、アタリをつけます。社長は関係無いですし、人事部の出番も無し。メニューやウィンドウ画面にも関係無し。もしメニュー関係を変更したいならrpg_windows.jsを開けばいいわけです。

      ・・そうですね、エフェクト絡みということで、rpg_sprites.jsが一番関係ありそうです

      というわけでjsフォルダから rpg_sprites.js を、用意したエディタで開いてみてください。



      無数の英単語が並んでいて、一瞬パニックになりますよね。
      が、RPG慣れしている人は「バトル」とか「ダメージ」とか「アイテム」とか、結構英語に触れる機会が多いですよね。だからよく見ると恐れる事はありません。そもそも今回作る予定の「クリティカル」だって英語じゃないですか。

      「クリティカル 英語」でgoogle検索すると、スペルは「critical」であることが分かります。

      ではテキストエディタの「検索」機能を開いてください。
      検索機能は、そのrpg_sprites.jsから、入力したキーワードを探し出して、その場所まで連れて行ってくれる便利なものです。
      メモ帳ならメニューの「編集」>「検索」>検索する文字列に「critical」と入力してください。



      検索に critical と入力し終わったら
      「下を検索(もしくは次を検索)」をクリックします。

      すると一気に1500行目まで飛びました。
      1500行目までは criticalという単語が一切登場しないということです。
      さて結果は・・



      この部分だけ落ち着いてよ〜く見てください。

      if
      result.critical
      setupCriticalEffect();

      ifは「もしも」
      resultは「結果」
      setup Critical Effectは「クリティカルヒットの演出を出す」

      「もしもクリティカルだったら、クリティカルヒットの演出を出す」

      いきなりビンゴですね。
      どうやらこの1500〜1502行目こそが、
      クリティカルヒットのあの地味な「バンッ!」っていう演出を出すためのものに間違い無い!

      そしてよーく見ると、そのすぐ下の行に
      「そのクリティカルヒットの地味な演出はこれだよ」って、まさに書いてあるじゃないですか。

      _flashColor = [255,0,0,160]
      フラッシュの色がRed=255,Green=0,Blue=0,Gray=160

      _flashDuration = 60
      フラッシュの時間が60

      Durationだけは少し難しいですが、flashはフラッシュ(光らせる)、Colorは色。簡単な英単語なので予測がつきます。つまりクリティカルの色を青くしたいなら[0,0,255,160]とか数字だけいじくればいいわけですし、長く光らせたいならフラッシュの時間をこれもまた数字だけ大きくすればいいと分かります。

      しかし、違いますよね。この記事の目的は。
      クリティカルのフラッシュ色や時間を変更することではありません。
      アニメーションを流すプラグインを、作ることです。

      ■プラグインファイルを作成しよう

      さあ、これでどこを書き換えればいいか、その場所は分かりました。
      このままこの部分に「アニメーションを流せ」という命令を挟んでももちろん動作はしますが、プラグインを作る企画なので独自ファイルを作ってそれを実現しましょう。rpg_sprites.jsウィンドウを開いたまま、エディタの「ファイル」メニューから「新規」作成を選んで、何も書かれていない真っ白な画面を出してください。



      一番最初に書きました通り、プラグインを作るにはJavascriptという言語を使います。

      ひとまずは、このプラグインの名前を決めましょう。
      Javascriptを始め色んな言語のルールとして、

      //

      この半角スラッシュ2個はコメントアウト、
      分かりやすく言えば「最初に // が書かれている行には、何でも好き勝手に書けるメモを作れるよ」という意味です。
      「//」この続きは何書いても構いませんが、
       

      // CriticalAnimation


      ひとまずこういう感じでこれから作るプラグインのタイトルを振っておきましょうか。

      この後にいきなり構文を書いてもいいのですが、RPGツクールMV本体の「プラグイン管理」を開いてプラグインを追加する時、プラグイン名と概要と作者名が出てきてON・OFFしますよね。
      「概要」「作者名」を、その下に書きましょうか。
       

      // CriticalAnimation
      /*:
      @plugindesc クリティカルヒット時にアニメーションを流すプラグイン
      @author わたし
      */


      こんな感じです。
      これはツクールMVのルールなのですが、
      /*: のあとに、
      @plugindesc 概要と、
      @author 作者名それぞれ記載し、
      */ で閉じなければなりません。
      別に空欄でも動きますがプラグインを追加する際に分かりにくいので、第三者に配布するなら必ず入れる様にしてください。

      ちなみに長い解説を入れたい場合は
      @help のあとに解説を入力することでこのプラグインの「ヘルプ」ボタンをクリックした時に表示されます。

      続いて、次は必ず入れる必要がある構文です。
      「今まではご挨拶。ここから先はプログラムですよ〜」と宣言するためのものです。
      この宣言を入れないと、プログラムが始まってくれません。
      それからここからはすべて半角英数字モードで入力してください。全角でスペースが入力されていたりすると、エラーを起こして動作してくれません。
       

      (function() {


      })();


      「ん・・!? もう分からんぞ!?」
      と思う方も少なからず居ると思います。これは覚えるというよりは、丸写しでいいと思います。私も自分で新しいプラグイン作る時はコピペしてますから。

      (function() {
      })();

      開きカッコの数と、閉じカッコの数は同一です。
      どちらかが一個でも多かったり少なかったりすると、動かなくなります。

      この2つの行 (function() { と })(); の間に、
      開かれているrpg_sprites.jsから、さっきの行をコピー&ペーストしてください。
      場所は、最初のcriticalが書き込まれている前後の一連の箇所、1493行目〜1504行目までです。

      大体こういった場合では、一段左端にくっついている部分から左端にくっついてる行までをまとめてコピペすればいいです。



      ちょっと長いですが、よいしょっ!!
       

      (function() {

      Sprite_Damage.prototype.setup = function(target) {
          var result = target.result();
          if (result.missed || result.evaded) {
              this.createMiss();
          } else if (result.hpAffected) {
              this.createDigits(0, result.hpDamage);
          } else if (target.isAlive() && result.mpDamage !== 0) {
              this.createDigits(2, result.mpDamage);
          }
          if (result.critical) {
              this.setupCriticalEffect();
          }
      };


      })();


      こんな感じになりましたか? なっていますか?
      それでは一旦ここでファイルを保存してください。
      あ、rpg_sprites.jsのウィンドウは閉じていただいて構いません。

      保存場所は、作ろうとしているゲームのプロジェクトフォルダのjs/pluginフォルダ内を指定します。
      ここで気をつける必要があるのは、



      日本語を含むファイルの場合、エンコードは必ず「UTF-8」を選択する必要があるということです。他の文字コードだと文字化けします。「待って、エンコードって何?」と思う方はgoogleで検索してみて下さい(投げます)。
      UTF-8には2種類ありますが、BOM有りだと余計なものがくっつくので、BOM無しを選択し、保存します。

      この時点でツクールMVのプラグイン管理を確認してみると、



      ばっちり、出ましたね。
      プラグインの基本はここまでです。
      いよいよアニメーションを再生する処理を入れていきます。

      先ほどのこのCriticalAnimationのファイル、
       

      (function() {

      Sprite_Damage.prototype.setup = function(target) {
          var result = target.result();
          if (result.missed || result.evaded) {
              this.createMiss();
          } else if (result.hpAffected) {
              this.createDigits(0, result.hpDamage);
          } else if (target.isAlive() && result.mpDamage !== 0) {
              this.createDigits(2, result.mpDamage);
          }
          if (result.critical) {
              this.setupCriticalEffect();
          }
      };


      })();


      さて、どこに「アニメーションを再生する処理」入力すればいいでしょうか?
      if (result.critical) { から 最初の } で終わる行までが
      「クリティカルが出た時の処理だよ」って意味なので、
      その間に挟み込むのが正解ですね。
       

      (function() {

      Sprite_Damage.prototype.setup = function(target) {
          var result = target.result();
          if (result.missed || result.evaded) {
              this.createMiss();
          } else if (result.hpAffected) {
              this.createDigits(0, result.hpDamage);
          } else if (target.isAlive() && result.mpDamage !== 0) {
              this.createDigits(2, result.mpDamage);
          }
          if (result.critical) {
              <正解はここです
              this.setupCriticalEffect();
          }
      };

      })();


      if (result.critical) もしも攻撃の結果がクリティカルだったら〜、という仮定式の中に入れないと、意味がありませんね。ちなみにミスをした時の処理を派手にしたい場合は、ちょっと上にある if (result.missed) の中に入れればいいのは分かりますよね。

      ではここに次の行を入れましょう。
       

          if (result.critical) {
              target.startAnimation(37, false, 0);
              this.setupCriticalEffect();
          }


      ターゲットに対してアニメーション37番目を再生してください、って意味です。
      この1行はどこから引っ張り出して来たかというと、
      まあこれは色々頑張って検索した結果です(説明すると長くなるので…)。

      さあこれを保存して、戦闘テストです。
      どうなるかと言うと、



      デフォルトで37番はアニメーション「咆哮」なので、非常に画面がうるさくなりましたね

      これで終わってしまうとただ「クリティカルヒットをうるさくするためのプラグイン」でしかありません。それにプラグインを使う人にJavascriptの中身を開いて出したいアニメーションIDに書き換えろというのも乱暴の話ですから、このCriticalAnimation.jsにもう数行だけ追加します。

      プラグインを使う人が、本体>プラグイン管理のパラメータ欄からアニメーションIDを任意で設定するための変数の用意です。



      よく見るこういうやつですね。



      最初の作者情報欄のすぐ下に

      @param 変数名(半角英数字)
      @desc 概要(説明)
      @default 初期値(半角数字)

      という容量で入力します。変数名は何でも構いませんが、分かりやすくこうしましょう。
       

      /*:
      @plugindesc クリティカルヒット時にアニメーションを流すプラグイン
      @author わたし
      @param AnimationID
      @desc クリティカルヒット時に流すアニメーションのIDです。
      @default 0

      */


      (function() { 以下にも数行加えます。
       

      (function() {
          
          var parameters = PluginManager.parameters('CriticalAnimation');
          var AnimationID = Number(parameters['AnimationID']);

       


      これは
      「parametersという部屋の中にこのプラグインのパラメータが入りますよ」という定義と、
      「そのparametersの部屋にはAnimationIDという箱があり、数値が入りますよ」という定義です。
      面倒ですが、Javascriptには必要です。
      (PHPだと一応警告は出ますが無くても動くことは動くんですよねこれ)
      数字以外の文字も入る場合はNumberをStringに変えます。

      後半駆け足で来ましたが、次でラストです。
       

              if (result.critical) {
                  if (AnimationID != 0) {
                      target.startAnimation(AnimationID, false, 0);
                  }
                  this.setupCriticalEffect();
              }


      AnimationIDが0の場合、つまりアニメーションIDをプラグイン側で設定しない場合は、アニメーションを流しませんという意味の条件式を加えます。
      そして先ほど37番「咆哮」のアニメーションが流れていたのは、target.startAnimationに37が指定されていたためなので、37の場所をAnimationIDに変えます。
      これでプラグインのAnimationIDパラメータに入れた数値が、そのままこの場所に置き換えられます。

      やってみましょう。
      76番のアニメーション「雷/単体1」を設定してみましょうか。



      戦闘開始。


      その時 牛に電流走るっ・・!!!

      某麻雀マンガの様になりましたが、うまく行きました。
      簡単なプラグインの作り方でしたが、いかがだったでしょうか。
      今回の記事作成したプラグインについては、少しだけいじってこちらに置いておきます。
      これを書き換えたりして色々自由に試していただいても構いません。
      是非プラグイン作りの参考にしてみてください。

      CriticalAnimation.jsのダウンロード


       

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