TypeScriptでのツクールMVプラグイン制作+α (RPGツクールMV Advent Calendar 4日目)

どうも、ツクールMVでゲーム制作中なワナビプログラマです。

最近やってるTypeScriptでMVプラグイン作る作業が心地よいので共有しようかと思います。

（これは RPGツクールMV Advent Calendar 2017 の記事です）

さて、ツクールMVの内部はJavaScriptで書かれています。

これは動的型付言語のためコード補完が効きにくく、MVにロクなドキュメントがないことも相まって、プラグイン作るときに色々見て回るのが面倒という問題を抱えています。

そこでTypeScriptです。

TypeScriptはMicrosoftが出している「JavaScriptに便利な機能を載せたJavaScriptに変換可能な言語」（AltJS）です。

同じくMicrosoftが出しているVisual Studio Code(VSCode)というエディタによってかなり素晴らしいコード補完と型チェックが効く便利な開発環境を誇っています。

このTypeScriptを導入し、コード補完の効くよりよい開発環境を作ることにします。

TypeScript導入

まずTypeScriptはJavaScriptで書かれているコンパイラーを使うので、node.js（Windows PC上のコマンドラインでJavaScriptを動作させることが出来るコマンド）をインストールします。

windowsにNode.jsをインストールする - Qiita あたりを見てインストールして下さい。

まあ普通にインストーラーぽちぽちするだけです。

次にコマンドラインで

npm install -g typescript

を実行して下さい。これでnode.js環境にTypeScriptがインストールされます。

同じくコマンドラインで

tsc --version

と出たらインストール成功です。

npmはnode.jsに付属しているパッケージマネージャーで、TypeScript等の便利なパッケージを管理するものです。

レジストリとかは特に触らず、node.jsをアンインストールすると一緒に後腐れ無く消えるので心配は要りません。

Visual Studio Code導入

TypeScriptにVisual Studio Code、鬼に金棒とはこのこと。

こちらはVisual Studio Codeのページにいって、普通にインストーラーをダウンロードしてインストールまでするだけです。

コマンドラインとかは出てきません。

インストールを普通にして適当なフォルダで右クリックすると、こういうメニューが出てくるはずです。

 

TypeScriptでプラグインを書く

では書いていきましょう。

ツクールのゲームでデバッグするのが多分楽なのでツクールのフォルダのわきでプラグインを作ることとします。

ツクールのゲームのフォルダで上のOpen with CodeからVSCodeを立ち上げます。

次に「表示」→「統合ターミナル」をクリックすると、こういう感じでコマンドラインが立ち上がると思います。

 

さて、ツクールMVの本体はJavaScriptで書かれていますが、外部からTypeScript式の型付を行うことで、型の恩恵を受けることが出来ます。

その外部型付を導入するため以下のコマンドを実行して下さい。

npm install rpgmakermv_typescript_dts

なにやらnode_modulesというフォルダとpackage-lock.jsonというファイルが出来ると思います（後者は出来ないときもあります）。

さらにフォルダ内にa.ts（.tsの前は何でも良い）とかファイルを作ってこう書きましょう。

/// <reference types="rpgmakermv_typescript_dts"/>

多分こんな感じになっているのではないかと思います。（左バー、下バー等、自分はエディタプラグイン入れてるので多少違うと思います）

 

ではこの状態で、ファイルに$を打ち込むと……？

おめでとうございます。補完が効くようになりました！

というわけで楽にプラグインが記述できます。

静的型付言語始めての方とかは若干型関係で詰まるかも知れませんが、調べれば割と出てくるのでかけるのではないかと思います。

で、書きました。

 

さあここからJavaScriptに変換する作業が必要です。

上記コードはほぼJavaScriptのままで型が付いている状態（便利ですね！）なのでこのまま拡張子を変えるだけでもいいですが、時々TypeScriptの型記述をつけなければならないときが出てきます。

まずtsconfig.jsonという名前で以下のような記述をします。

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "outDir": "dist",
        "lib": [

            "es5",

            "es2015.promise"
        ]
    }
}

そしてエディタの下にあるコマンドラインで

tsc

とだけ書いて実行しましょう

すると、dist/a.jsに変換されたJavaScriptができます。

これをプラグインフォルダに入れるなり、あるいは"dist"のところを"js/plugins"にするなどすると、便利にプラグイン開発が出来ます。

というわけでTypeScriptプラグイン導入編、お疲れ様でした！

TypeScriptを使うと補完以外にもまだまだnullチェックだとか非同期の記述方法だとかクラスの記述だとか、様々な先進的な機能を使えます。

色々調べていってみて下さい。

補足:

上記ではnpmで簡単にインストールできるものを紹介しましたが、類似の型定義でRPGMakerMV Intellisenseというのも存在する模様です。

こちらは英文でコメントが付いているようなのでこれを導入するのも良いかも知れません。

これを同じように利用するには、PIXI Includedと書いてあるものをダウンロードした後適当なところに配置して、

/// <reference path="./rmmv-pixi.d.ts"/>

としてください。（"./rmmv-pixi.d.ts"は.tsファイルからダウンロードしたファイルを参照するパス）

また上記型定義ファイルはhttps://github.com/Narazaka/rpgmakermv_typescript_dtsでコードを公開しているので、日本語コメントなどつけたい場合はプルリク下さい。ちゃちゃっとマージします。

複数ファイルの時の対処

とまあここまで出来るだけ広く布教したい気持ちで初心者向け？な記事を慣れないながらも書きましたが、ここからは分かってる人向けです。

TypeScriptで書く量が多くなってくるとファイル分けたいとかになってくると思います。

この場合いくつか選択肢があります。

自分がとっているのは最も単純に、コンパイル後にファイルを文字列結合してしまうやり方です。

findとかxargsとかをunxutilsというツールで導入しているので楽にやってますが、まあ他のやり方でもできるはず。

その他、そもそも動いているのがnw.js上なので、たぶんrequireが使えます。

この場合普通にモジュールとして書けば良い気がします。

webpackを使うという方法もあります。

配布用にデカいものを書く場合は多分コレが一番良いのではないかと。

targetにnode-webkitというのがあるのでそれを使えばいいんじゃないかと思われます。

あとファイルをsrcとかサブフォルダに入れた方が管理はしやすいと思います。

gitとか導入しても便利ですね。

なんか時間が無くて雑な記述ですがご容赦下さい。

他質問あればコメントにどうぞ。

+α RPGツクールMVデータベースエディタを作りたい

一昨日ふと思い立って作りはじめました。

RPGツクールMVデータベースエディタ

RPGツクールMV、プラグインで拡張できるけど、エディタが拡張できないの片手落ちじゃない？

と思って作りました。

HP, MP, TPではない戦闘パラメーターや、「逃げる」以外の特殊効果、攻撃前タイミングで起こすアクションなど、プラグインで拡張したけどエディタでも編集できたら便利なものって結構あると思います。

electron/react/mobx製のデスクトップアプリケーションです。もし同じ思いを持つ人がいたらfork me on github!

その他

上記で導入しているrpgmakermv_typescript_dtsは自分が昨日あたりリリースしたモジュールです。

ただ元々コミットログにあるように別の方が開発していたものがgithub消えてしまったので、手元にあったやつを復活させたという経緯があります（MIT的には問題ないはず）。

Twitterで問い合わせても特に返答無かったのでそのまんま管理してますが、何か問題あれば言って下さい。