tanaka's Programming Memo

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

AtomでPhaser3のコード補完をする

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フォルダー)
  • AtomEditメニューから、Preferencesを選択して、Settingsタブを開きます
  • Installをクリックして、検索欄にatom-ternjsと入力して検索します
  • atom-ternjsの欄にInstallボタンがあれば押して、インストールの完了を待ちます
  • SettingsやUninstallボタンが表示されれば完了です(最初からこの状態になっていたら、インストール済みなので、作業不要です)

f:id:am1tanaka:20180410134023p:plain

プロジェクトにPhaser用のternデータを読み込む

ターミナル(LXTerminalなど)で作業します。ここでは、Phaserのプロジェクトをphaser3-project-templateとして説明するので、別のプロジェクトだった場合は読み替えてください。

  • LXTerminalを起動します
  • 以下で、フォルダーを移動します
cd ~/phaser3-project-template
  • npm install(あるいやyarn install)を実行していなかったら、以下で実行します
npm install

あるいは

yarn install
git clone git@github.com:am1tanaka/tern-phaser.git node_modules/tern-phaser

ternの設定ファイルを作成

ternを有効にするために、設定ファイルを作成します。この作業はAtomで行います。TernはJavaScriptのファイルを開いている時のみ動作するので、まずはなんでもよいのでJavaScriptのファイルを開きます。

  • Atomに切り替えたら、srcフォルダーを開いて、index.jsを開きます(.jsファイルなら何でも構いません)

f:id:am1tanaka:20180410152643p:plain

Ternを設定します。

  • Packagesメニューから、Atom Ternjs -> Configure projectを選択します

f:id:am1tanaka:20180410151749p:plain

  • 設定ファイルが開くので、libs欄のbrowserにチェックを入れます

f:id:am1tanaka:20180410154528p:plain

  • 他にも、jQueryやUnderscoreなどを利用する場合は、それぞれの欄にチェックを入れると、それらについても補完できるようになります。よく分からなければ次に進んで構いません
  • 一番下のSave & Restart Serverボタンをクリックします

f:id:am1tanaka:20180410152845p:plain

以上で、プロジェクトフォルダー内に.tern-projectというファイルが出来上がります。それを開きます。

f:id:am1tanaka:20180410153332p:plain

  • 以下のように、11行目付近に"plugins"の属性に"phaser"を加えます
{
  "ecmaVersion": 6,
  "libs": [
    "browser"
  ],
  "loadEagerly": [],
  "dontLoad": [
    "node_module/**"
  ],
  "plugins": {
    "phaser": {},
    "doc_comment": true
    }
  }
}
  • 上書き保存します
  • index.jsなどのJavaScriptファイルを開きます
  • Packagesメニューから、Atom Ternjs -> Restart serverを選択します

f:id:am1tanaka:20180410153706p:plain

これで設定完了です。試しに、Phaser.と入力してみてください。以下のように、Phaserオブジェクトのメンバーが表示されるようになりました。

f:id:am1tanaka:20180410155007p:plain

表示されない場合は、Atomを起動し直してみてください。

以上で完了です。Visual Studioなどの高機能補完に比べると精度が低いですが、長いメンバー名を入力しなくて済むのは助かります。

まとめ

AtomでPhaserの補完機能が動くように設定しました。これで入力が随分楽になるはずです。ゲーム作りを楽しみましょう!

参考・関連URL