2015年12月15日火曜日

NW.jsのAPIを使ってRPGツクールMVの開発環境を改善する

この記事は、RPGツクールMV(なんでもあり) Advent Calendar 2015の16日目の記事です。前日の記事はこちら


はじめに

 はじめまして、トリアコンタンといいます。就職以後ツクールシリーズとは無縁の生活を送ってきましたが、このたびのRPGツクールMVの発売を知って舞い戻った次第です。普段このブログは自作のプラグインを淡々と紹介していく場なのですが、本日は「RPGツクールMV(なんでもあり) Advent Calendar 2015」の記事と言うことで特別編成でお送りします。

 さて、いよいよ発売が明日に迫った我らがRPGツクールMVですが、ご存じの通りマルチデバイス対応を一番の新要素として掲げています。そのうちWindowsとMacOSでのローカル実行(テストプレー含む)を担っているのがNW.jsという技術です

NW.js

 NW.jsというのはHTML5とNode.jsを用いてローカルで動作するデスクトップGUIアプリケーションが簡単に作成できる技術で、Chromium(GoogleChromeのベースとなったオープンソースのウェブブラウザ開発プロジェクト)を内蔵して動いています。開発は今もGitHub上でオープンソースで進められています。簡単に言うとスゴい技術です!(最近ではElectronとかいうもっとスゴいものの陰に隠れがちですがその話はおいときましょう)

 そんなスゴいNW.jsですが、そのAPIは現状のRPGツクールMVのコアスクリプト中では全くと言っていいほど使用されていません。それもそのはず。前述の通り、RPGツクールMVはマルチデバイス対応が大きなウリです。しかし、NW.jsのAPIが動作するのはPC上に限られていてWeb上あるいはAndroidやiOSでは動作しません。つまりNW.jsのAPIに依存するようなコードは、マルチデバイス対応を謳う上では足かせでしかないのです。

マルチデバイス対応を誇らしげにアピールするRPGツクールMV氏

 しかーし! せっかくのスゴい技術、スルーするのは勿体ないと思いませんか? そこで本稿では、NW.jsのAPIを使って「具体的」に何ができるのか、それを検証していきたいと思います。もちろんNW.jsやJavaScript、あるいはプログラミングが理解できなくても大丈夫です。巻末の付録で本稿の解説に使ったプラグインを紹介しますのでぜひ見ていってください。

NW.jsが動作する前提条件

 すでに述べたとおり、NW.jsのAPIはPC上(Windows、MacOS、Linux)で実行する場合のみ動作します。それ以外の環境で動かそうとするとエラーになるので既存のスクリプト上では「Utils.isNwjs();」という判定処理を使ってエラーを回避しています。それを考慮するとNW.jsの豊富なAPIを有効活用できるのは、大きく分けて以下の2パターンになります。

  1. 開発中(テストプレー時)のみ使われることを想定した処理
  2. マルチデバイスを捨てて、従来通りPC上でのみ動作するゲーム

 本領を発揮できるのはむしろ2.の方かもしれませんが、本稿ではとりあえず1.のみを取り扱うこととします。では、次項で早速何ができるのか見ていきましょう!

NW.jsに何ができるのか?

 ひと言で表現すれば、何でもできます。例えば、RPGツクールVX Ace以前のRGSSでは触れられなかったゲーム画面のウィンドウそのものに干渉し自在に制御できるのです! 例えばこれです。

デベロッパツールを起動する

  • require('nw.gui').Window.get().showDevTools();

NW.jsのデベロッパツール(Chromeのデベロッパツールとほぼ一緒)

 いや、そんなのもともとゲーム中にF8を押せば起動するし…… 確かにそうですね! これは既存のスクリプトに記述されている数少ないNW.jsのAPIを使った処理です。ですが起動タイミングはF8を押下した場合のみ。しかも起動位置がゲーム画面と重なっているのでとても邪魔です。VX Aceのコンソールのように、ゲーム開始時にゲーム画面と同時起動し、コンソールを閉じると連動してゲーム画面も閉じる……なんて芸当はしていません。劣化していますね。

 それはともかく、単にゲーム起動時にデベロッパツールを起動するだけなら他の方がすでに試しているので、本稿ではVX Aceを模してデベロッパツールがゲーム画面の左上に立ち上がり、かつコンソールを閉じると連動してゲーム画面も終了するようにしてみました。ついでにalertの出力先もコンソールに変えましょう。さらに仮にデベロッパツールを最小化していてもエラー発生時やアラート表示時には自動で復帰するようにしてみました。これでVX Aceと比べて遜色のないテストプレー環境になりましたね!

VX Aceのコンソールの挙動をマネてみる

 どうでしょう? え? 大したことない? かもしれません。では、これならどうでしょうか?

ゲーム画面を常に前面に表示する

  • require('nw.gui').Window.get().setAlwaysOnTop(true);

 ウィンドウからフォーカスが外れた場合も画面を常に最前面に表示しておく。おそらくそういう機能を持つアプリケーションを一度くらいは使ったことがあるでしょう。それがたったこれだけのコードで実現できます。今回からテストプレー中もエディタを編集できるようになりましたが、この機能があればゲーム画面を見ながらイベントやマップの編集をして、終わったらすぐに元のゲーム画面に戻ることが出来ます。

 以下は拙作プラグイン「ピクチャのグラフィカルな位置調整プラグイン」と組み合わせたものです。ゲーム画面でピクチャをドラッグ&ドロップで動かして座標を確認しつつ、イベントエディタでピクチャの表示座標を入力しています。本来であれば、エディタに戻った時点でゲーム画面は背後に隠れてしまいますが、ゲーム画面を常に前面に表示しておければ、両方の画面を見比べながら作業することが可能になるのです!

ピクチャのグラフィカルな位置調整プラグイン

 ゲーム制作は基本的に長丁場です。ストレスなく制作を続けるには、こういった細かい点にも配慮して本当に自分にピッタリ合った環境を用意するのがエターナらない第一歩なのです! どうですか? えっ? まだダメ? なら、これはどうでしょうか?

オンフォーカスのイベントを取得する

  • require('nw.gui').Window.get().on('focus', function() {...}.bind(this));

 ゲーム画面にフォーカスが入ったときに実行されるイベントを定義できます。 ……この説明ではアプリケーション制作経験のない方には何を言っているのか分かりませんね。では、その有用性を具体的に示すためにプラグインを作りましたのでご覧ください。

フォーカス時にエディタが編集されていればマップリロード

 ゲームウィンドウにフォーカスが入ったときに、エディタでマップやイベントが編集され、かつプロジェクトが保存(Ctrl+S)されていればマップをリロードします。つまりゲーム画面を表示したままイベントを編集し、ゲーム画面に戻れば編集した内容が意識せずとも即反映されるという画期的な仕組みをNW.jsのAPIで実現できるのです! まるでRPGツクールアドバンスのように。マイナーなので知らない方も多いかもしれませんが……

まとめ

 今回は、開発環境を改善するという目的に絞って何が出来るのかをお見せしましたが、もともとNW.jsはデスクトップアプリケーションを制作するためのAPIですので、最初に言ったとおり何でもできます。これはRGSSという枠の中でしかスクリプトを組めなかった従来のツクールと比べてまさに新境地と言っていいほど画期的なことだと思います。マルチプラットフォームは確かに大きな魅力ですが、現状課題の多いWeb経由での実行やモバイルアプリ化は一旦保留にして、従来通りPC上でのみの動作と割り切って、NW.jsの機能をフル活用するのも一つのやり方じゃないでしょうか? 試しに興味のある方は以下のAPIマニュアルをご覧ください。例えば、Clipboardの項目などがありますね。これを利用すればクリップボードの中身を「文章の表示」の中に埋め込んだり色々と出来そうです。

 ここまでNW.jsについて紹介してきましたが、実を言うと私自身、RPGツクールMVに触れるまでNW.jsについて全く知らなかったので、これからゆっくりと探りつつ具体的に何が出来るのかを確かめていきたいと思います。何か面白そうな機能を見付けたらプラグインを作ったり、現在拡充中のプラグインコマンド集に含めるかたちで積極的に公開していくつもりなのでよろしくお願いします。

 お読みいただきありがとうございました! 明日(2015/12/17)はいよいよRPGツクールMVの発売ですね! 明日のアドベントカレンダーではodenさんが開封の儀を執り行います。ブツがちゃんと届くことを祈りましょう!

RPGツクールMV(なんでもあり) Advent Calendar 2015」は当然、発売以降もまだまだ続きますのでご期待ください。

付録:プラグイン「デベロッパツール管理プラグイン」の紹介

 では本稿のために作成した「デベロッパツール管理プラグイン」の紹介です。当プラグインでは、起動時にデベロッパツールの起動を「ON/OFF/最小化でON」の中から選択できるほか、常にゲーム画面を前面に表示できるようになります。また、エディタが編集されプロジェクトが再保存された状態でゲーム画面にフォーカスが入ると自動で現在地のマップをリロードします。このプラグインの全ての機能はテストプレー時のみ有効です。

なお、本稿中で別途紹介した「ピクチャのグラフィカルな位置調整プラグイン」は含まれません。ご入り用の方はすでに公開しているものをダウンロードしてください。

パラメータ

プラグインマネージャーから指定するパラメータの説明です。

RPGツクールMV

  • 開始時に起動 : ゲーム開始時に同時にデベロッパツールを起動します。(ON/OFF/MINIMIZE)
  • 常に前面表示 : ゲーム画面を常に前面に表示します。(ON/OFF)
  • デベロッパツール表示位置 : デベロッパツールの表示座標です。X座標、Y座標、横幅、高さをカンマ区切りで指定します。

RPGMakerMV

  • StartupDevTool : It will start the developer tools at the start of the game.(ON/OFF/MINIMIZE)
  • AlwaysOnTop : Game screen always on top.(ON/OFF)
  • DevToolsPosition : Developer tool's position(X, Y, Width, Height) Separated comma

ダウンロード

プラグインファイルはGithubで公開しています。

ダウンロード(Download)

利用規約

当プラグインはMITライセンスのもとで公開されています。作者に無断で改変、再配布が可能で、利用形態(商用、18禁利用等)についても制限はありません。ただし、ヘッダのライセンス表示は残してください。

http://opensource.org/licenses/mit-license.php

更新履歴

  • 2016/02/27 色々機能追加
  • 2015/12/15 初版

5 件のコメント:

  1. デベロッパツール管理プラグインを利用させていただいているのですが、気になった点があったので報告します。
    ・タイトルカットをONにしていると データベース-敵グループ での戦闘テストが動作しない。
    ・開始時に起動をOFFにしているとゲーム画面が常に前面に表示されてしまう。
    ・ONにしている場合もF5キーでゲーム画面を更新すると前面に表示される。

    返信削除
    返信
    1. こんにちは。ご利用ありがとうございます。
      現象を確認、修正しました。
      ver1.2.1

      削除
    2. こちらでも修正を確認しました。
      迅速な対応ありがとうございます。

      削除
  2. 匿名失礼します。
    RPGツクールMV プラグインコマンド集 リファレンス
    において、

    「スクリプト」の制御文字を「文章の表示」で利用できます。プラグインマネージャーから設定を有効にしてください。

    とありますが、
    1.「プラグインマネージャー」は「プラグイン管理」という名前になりました。
    2.該当するプラグインが見つかりませんでした。

    返信削除
    返信
    1. こんにちは!
      リファレンスの記述が古かったので修正しました。
      以下のプラグインを適用してパラメータ「制御文字の拡張」を有効にすると「\NW[1]」が武器の名前などに変換されます。

      https://raw.githubusercontent.com/AlecYawata/TkoolMV_PluginCommandBook/master/SampleProject/js/plugins/TkoolMV_PluginCommandBook.js

      削除