tanaka's Programming Memo

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

Phaser3の最新版のTern設定ファイルを作成する

Phaser

AtomでPhaserのコード補完をする設定をこちらに書きました。Phaser3はまだリリースされたばかりで、ドキュメントが全部揃っていなかったり、機能が抜けていたり、仕様が変化しています。

ドキュメントもすぐに新しいものが出てくる状況なので、更新をセルフサービスでできるように手順をまとめておきます。

目次

前提

必要なリポジトリーをクローンする

ドキュメントの作成に必要な以下の２つのリポジトリーの最新版を入手します。

はじめの一回

はじめて作業する時は、リポジトリーのクローンをします。すでに一度クローンしていたらこちらに進んでください。

  • LXTerminalなどのターミナルを起動します
  • 作業フォルダーに移動します。例えば、ユーザーフォルダーのphaser3-projectsというフォルダーなら以下の通り
cd ~/phaser3-projects
  • 以下で、phaser3とphaser3-docsのリポジトリーをクローンします
git clone git@github.com:photonstorm/phaser.git
git clone git@github.com:photonstorm/phaser3-docs.git

以上で完了です。JSONのファイルを作成に進んでください。

上記の作業をすでにやっていたら

新しくリリースされたバージョンに対応させたい場合は、以下の手順になります。

  • はじめの時と同様、LXterminalなどを開いて、作業用フォルダーへ移動します
  • 以下を実行します
cd phaser
git pull origin master
cd ..
cd phaser3-docs
git pull origin master

以上で、phaserとphaser3-docsが最新の状態になります。

これらのプロジェクトはこちらでは変更しないので、ここでは問答無用でプルをしてます。もし開発しているプロジェクトだった場合は、手順を踏んで更新してください。

最新のJSONファイルを作成

最新版のPhaser3のJSDocから、Ternの設定ファイルの元となるJSONファイルを作成します。

  • LXTerminalなどのターミナルで、phaser3-docsフォルダーに移動します
  • 以下を実行します
npm run json
  • ファイルのパース(解析)が始まるので、終わるまで待ってください。以下のような画面になれば完了です。

f:id:am1tanaka:20180410170520p:plain

仮想PCのLubuntuで20秒ちょっとでした。PCの性能次第ですが、1分程度待つつもりでいれば完了するでしょう。

Tern用のデータを作成する

作成されたファイルは、json/phaser.jsonとして保存されます。これを、Phaserのプロジェクトのnode_modules/tern-phaser/generator/data/jsdoc-ast.jsonにコピーします。

  • phaser3-docsフォルダーで以下のコマンドで、jsonフォルダーをファイルマネージャーで開くことができます
pcmanfm json
  • phaser.jsonファイルを右クリック -> コピーなどでコピーします

f:id:am1tanaka:20180410171425p:plain

f:id:am1tanaka:20180410171611p:plain

  • node_modules -> tern-phaser -> generator -> dataフォルダーをダブルクリックで開いていきます
  • [Ctrl]+[V]キーなどで、先ほどコピーしておいたphaser.jsonをデータフォルダー内に貼り付けます

f:id:am1tanaka:20180410171816p:plain

  • jsdoc-ast.jsonを選択して、[Delete]キーなどで削除します

f:id:am1tanaka:20180410171913p:plain

  • phaser.jsonを右クリック -> ファイル名の変更を選んで、jsdoc-ast.jsonにファイル名を変更したら[Enter]キーを押して確定します

f:id:am1tanaka:20180410172100p:plain

ここからはターミナルでの作業です。予め、こちらの記事に従ってPhaserのプロジェクトに対して、AtomでPhaserのコード補完が動くようにしておいてください。

  • LXTerminalなどのターミナルを起動して、Phaserのプロジェクトフォルダーへ移動します
  • 以下で、node_modules/tern-phaser/generator/nodeフォルダーへ移動します
cd node_modules/tern-phaser/generator/node
  • 以下を実行すると、Tern用のファイルが生成されます。
node ./make_plugin.js

f:id:am1tanaka:20180410175503p:plain

これで完了です。PhaserのプロジェクトをAtomで開いて、Packagesメニューから、Atom Ternjs -> Restart serverを実行すれば、最新版の情報でコード補完ができるようになります。

まとめ

Phaserは活発に開発されるため、頻繁に仕様変更やドキュメントの追加が行われます。こちらの情報が古いな、と思ったら、自分で更新してみてください。

関連URL

備忘録

以下、調査や以前の情報についての自分用のメモです。

エラーの調査方法

Phaser3.3.0では以下のようなエラーが発生しました。

f:id:am1tanaka:20180406111852p:plain

tern-phaser用のphaser.jsのどこかが悪いのですが、どこを調べたらよいかが分からなかったので、Phaserのsrcフォルダー内から、各コンポーネントごとにJSDocを生成して、それぞれ動作するかを確認していきます。以下、手順です。

  • 最新のPhaserをクローン(git clone git@github.com:photonstorm/phaser.git)
  • クローンしたフォルダーのsrcフォルダーにターミナルで移動
  • 以下を実行
jsdoc -X -r <フォルダー名> > jsdoc-ast.json
  • 以上で生成したjsdoc-ast.jsonを、tern-phaserを動かしているプロジェクトフォルダーのnode_modules/tern-phaser/generator/dataフォルダーに上書きコピー
  • tern-phaserを動かしているプロジェクトフォルダーのnode_modules/tern-phaser/generator/nodeフォルダーをターミナルで開く
  • 以下を実行
node ./make_plugin.js

以上で、JSDocを生成したコンポーネントだけのtern-phaser用のphaser.jsが生成されます。

  • AtomでPackagesメニューからAtom Ternjs->Restart server`を選択
  • jsファイルを開いて、エラーが発生しないか確認

作業時のコツ

  • 対象ファイルが多いので、tempなどの作業用フォルダーを作成しておいて、そこにチェックしたいファイルやフォルダーを入れてコンバートすると、毎回フォルダー名を変更したりせずに楽です
  • Atomは、行番号のすぐ右に{}などを最小化する三角アイコンが表示されます。これを閉じたり開いたりしながら、チェックする箇所を管理するとよいです。

誤記の修正(Phaser-CE)

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

f:id:am1tanaka:20170813054602p:plain