tanaka's Programming Memo

プログラミングについてのメモ。

AtomでPhaserのコード補完をする(メモ)

HTML5ゲームエンジンPhaserのコード補完がAtomでできるので、そのやり方の概要です。詳しくは後日まとめます。

  • Atomをインストール
  • Atomatom-ternjsパッケージをインストール
  • Phaserのプロジェクトで、npm i --save-dev tern-phaserを実行して、ternjs向けのPhaserパッケージをインストール
  • プロジェクトフォルダー内に.tern-projectを作成
    • ecmaVertionは6
    • libsはbrowserを加える
    • pluginsに"phaser": {}を加える
  • atom-ternjsThird party plugins localの修正をコードに加える
  • Atomを再起動

以上です。

ドキュメントを最新のものに対応させる

tern-phaserには、ドキュメントを生成するツールが含まれています。これを使えば、補完内容を最新のものに対応させられます。

  • nodeをインストールして、npmを使えるようにしておく
  • コマンドラインから、npm i -g jsdocで、jsdocをインストール
  • phaser-ce/build at master · photonstorm/phaser-ce · GitHub から、最新版のphaser.jsをダウンロード
  • phaser.jsをダウンロードしたフォルダーに移動
  • jsdoc -X phaser.js > jsdoc-ast.jsonを実行すると、jsonファイルの作成完了
  • 以下を実行して、jsファイルを作成
echo var jsDoc= > jsdoc-ast.json.js & type jsdoc-ast.json >> jsdoc-ast.json.js
  • 作成したjsdoc-ast.json.jsを、tern-phaserプロジェクトのdataフォルダー内に上書きコピーする
  • tern-phaserプロジェクトのgeneratorフォルダーでhttp-serverなどを起動して、HTTPサーバーを起動して、generator/html/jsdoc2tern.htmlを表示

tern用のphaser.jsを作成

  • tern-phaserプロジェクトのgenerator/node/template.jsをエディターで開いて、冒頭の箇所を、atom-ternjsThird party plugins localの指示に従って変更

変更前

(function(mod) {
    if (typeof exports == "object" && typeof module == "object") // CommonJS
        return mod(require("tern/lib/infer"), require("tern/lib/tern"));
    if (typeof define == "function" && define.amd) // AMD
        return define([ "tern/lib/infer", "tern/lib/tern" ], mod);
    mod(tern, tern);
  mod(process.__infer, proces.__tern);
})(function(infer, tern) {
  "use strict";

変更後

(function(mod) {
  mod(process.__infer, process.__tern);
})(function(infer, tern) {
  "use strict";
  • コマンドラインgenerator/nodeフォルダーを開く
  • node ./make_plugin.jsを実行して、phaser.jsを更新する

誤記の修正

2017/8/13現在、Graphics.drawTrianglesの引数indicesの表記が{indicesとなっていて、余分な{のためにエラーが発生するようになっています。上記で作成したphaser.jsAtomなどで読み込んで、9899行目を以下のように修正して{を削除してください。

f:id:am1tanaka:20170813054602p:plain

以上で、最新版のデータが完成です。tern-project/phaser.jsを、Phaserのプロジェクトフォルダーのnode_modules/tern-phaserフォルダーのphaser.jsに上書きして、Atomを再起動すればOKです。

動作確認

  • Phaser-CE2.8.3以降にしたら、Phaser.Gameの引数が、widthheightを個別に指示する形式から、configオブジェクトでまとめて指定する方法に変化します。

古いやつ

f:id:am1tanaka:20170813055410p:plain

更新成功したやつ

f:id:am1tanaka:20170813055413p:plain

リンク