HTML5ゲームエンジンPhaser3のコード補完をAtomに組み込む手順をご紹介します。
(バージョンの変更に伴い、以前の同様のドキュメントは削除しました。)
目次
前提
- Lubuntu16.04上での手順です。他のOSの場合は適宜読み替えてください
- Atom( https://atom.io/ ), node, npm(あるいはyarn), gitがインストールされていること
- Atom, gitが最低限使えること
- Phaser3のプロジェクトフォルダーが作られていること
- ない場合は、任意のフォルダーで、
git clone git@github.com:photonstorm/phaser3-projet-template.git
を実行して、公式のテンプレートをクローンするとよいでしょう
- ない場合は、任意のフォルダーで、
gitコマンドで警告が出る場合...
Git - 最初のGitの構成を参考に、gitの設定にユーザー名とメールアドレスを登録してください。
AtomをTernに対応させる
まずは、AtomにTernjsの機能をインストールします。この作業は一度Atom上で実行していれば、それ以降は不要です。
- AtomでPhaserのプロジェクトフォルダーを開きます(公式テンプレートなら
~/phaser3-projet-template
フォルダー) - AtomのEditメニューから、Preferencesを選択して、Settingsタブを開きます
- Installをクリックして、検索欄に
atom-ternjs
と入力して検索します atom-ternjs
の欄にInstallボタンがあれば押して、インストールの完了を待ちます- SettingsやUninstallボタンが表示されれば完了です(最初からこの状態になっていたら、インストール済みなので、作業不要です)
プロジェクトにPhaser用のternデータを読み込む
ターミナル(LXTerminalなど)で作業します。ここでは、Phaserのプロジェクトをphaser3-project-template
として説明するので、別のプロジェクトだった場合は読み替えてください。
- LXTerminalを起動します
- 以下で、フォルダーを移動します
cd ~/phaser3-project-template
npm install
(あるいやyarn install
)を実行していなかったら、以下で実行します
npm install
あるいは
yarn install
- Phaser用のternツールをクローンします。オリジナルであるGitHub - angelozerr/tern-phaser: A Tern plugin for Phaserのリポジトリーをフォークして、Phaser3のJSDocを処理するための変更をしたものです
git clone git@github.com:am1tanaka/tern-phaser.git node_modules/tern-phaser
ternの設定ファイルを作成
ternを有効にするために、設定ファイルを作成します。この作業はAtomで行います。TernはJavaScriptのファイルを開いている時のみ動作するので、まずはなんでもよいのでJavaScriptのファイルを開きます。
- Atomに切り替えたら、
src
フォルダーを開いて、index.js
を開きます(.js
ファイルなら何でも構いません)
Ternを設定します。
- Packagesメニューから、Atom Ternjs -> Configure projectを選択します
- 設定ファイルが開くので、libs欄のbrowserにチェックを入れます
- 他にも、jQueryやUnderscoreなどを利用する場合は、それぞれの欄にチェックを入れると、それらについても補完できるようになります。よく分からなければ次に進んで構いません
- 一番下のSave & Restart Serverボタンをクリックします
以上で、プロジェクトフォルダー内に.tern-project
というファイルが出来上がります。それを開きます。
- 以下のように、11行目付近に"plugins"の属性に"phaser"を加えます
{ "ecmaVersion": 6, "libs": [ "browser" ], "loadEagerly": [], "dontLoad": [ "node_module/**" ], "plugins": { "phaser": {}, "doc_comment": true } } }
- 上書き保存します
index.js
などのJavaScriptファイルを開きます- Packagesメニューから、Atom Ternjs -> Restart serverを選択します
これで設定完了です。試しに、Phaser.
と入力してみてください。以下のように、Phaser
オブジェクトのメンバーが表示されるようになりました。
表示されない場合は、Atomを起動し直してみてください。
以上で完了です。Visual Studioなどの高機能補完に比べると精度が低いですが、長いメンバー名を入力しなくて済むのは助かります。
まとめ
AtomでPhaserの補完機能が動くように設定しました。これで入力が随分楽になるはずです。ゲーム作りを楽しみましょう!
参考・関連URL
- Tern
- https://atom.io/packages/atom-ternjs
- JavaScriptの静的解析によりコード補完やクロスリファレンスを実現するatom-ternjsの紹介 - Qiita
- オリジナルのtern-phaser GitHub - angelozerr/tern-phaser: A Tern plugin for Phaser
- 改造版 GitHub - am1tanaka/tern-phaser: A Tern plugin for Phaser
- GitHub - am1tanaka/10k-gamedev: 1万円(+インターネット)ではじめるゲーム開発用リポジトリー
- Git - 最初のGitの構成