AtomでPhaserのコード補完をする設定をこちらに書きました。Phaser3はまだリリースされたばかりで、ドキュメントが全部揃っていなかったり、機能が抜けていたり、仕様が変化しています。
ドキュメントもすぐに新しいものが出てくる状況なので、更新をセルフサービスでできるように手順をまとめておきます。
目次
前提
- Lubuntu16.04での操作を前提としています。他のOSの場合は、適宜読み替えてください
- 事前にこちら( AtomでPhaser3のコード補完をする - tanaka's Programming Memo )を完了させておいてください
必要なリポジトリーをクローンする
ドキュメントの作成に必要な以下の2つのリポジトリーの最新版を入手します。
- 最新のPhaser3のプロジェクト https://github.com/photonstorm/phaser
- Phaser3のドキュメント生成プロジェクト https://github.com/photonstorm/phaser3-docs
はじめの一回
はじめて作業する時は、リポジトリーのクローンをします。すでに一度クローンしていたらこちらに進んでください。
- 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
- ファイルのパース(解析)が始まるので、終わるまで待ってください。以下のような画面になれば完了です。
仮想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
ファイルを右クリック -> コピーなどでコピーします
- ホームフォルダーをクリックしたら、Phaserのプロジェクトを開きます
- node_modules -> tern-phaser -> generator -> dataフォルダーをダブルクリックで開いていきます
- [Ctrl]+[V]キーなどで、先ほどコピーしておいた
phaser.json
をデータフォルダー内に貼り付けます
jsdoc-ast.json
を選択して、[Delete]キーなどで削除します
phaser.json
を右クリック -> ファイル名の変更を選んで、jsdoc-ast.json
にファイル名を変更したら[Enter]キーを押して確定します
ここからはターミナルでの作業です。予め、こちらの記事に従ってPhaserのプロジェクトに対して、AtomでPhaserのコード補完が動くようにしておいてください。
- LXTerminalなどのターミナルを起動して、Phaserのプロジェクトフォルダーへ移動します
- 以下で、
node_modules/tern-phaser/generator/node
フォルダーへ移動します
cd node_modules/tern-phaser/generator/node
- 以下を実行すると、Tern用のファイルが生成されます。
node ./make_plugin.js
これで完了です。PhaserのプロジェクトをAtomで開いて、Packagesメニューから、Atom Ternjs -> Restart serverを実行すれば、最新版の情報でコード補完ができるようになります。
まとめ
Phaserは活発に開発されるため、頻繁に仕様変更やドキュメントの追加が行われます。こちらの情報が古いな、と思ったら、自分で更新してみてください。
関連URL
- AtomでPhaser3のコード補完をする - tanaka's Programming Memo
- GitHub - angelozerr/tern-phaser: A Tern plugin for Phaser
- tern-phaserのリポジトリー
- Phaser CE Index
- Phaser-CEのAPI
- atom-ternjs
- javascript - Getting JSDoc output in JSON format - Stack Overflow
- jsdocをjson形式にする方法
備忘録
以下、調査や以前の情報についての自分用のメモです。
エラーの調査方法
Phaser3.3.0では以下のようなエラーが発生しました。
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行目を以下のように修正して{
を削除してください。