Visual Studio CodeでBabylon.jsを楽しむための環境を作ってみた

webglを少しさわってみたくなり色々とwebglフレームワークを調べていたところ、Babylon.jsのHPやドキュメントが解りやすくまとまっていたので使ってみることにしました。

Babylon.js editorというブラウザで動くUnityっぽいエディターもあったのですが、まだできることが限られているようだったので自分のPCに開発環境を作ります。

Babylon.jsのドキュメントで紹介されているVSCodeを利用すると、専用のプラグインがあったりして開発しやすそうなのでVSCodeを使って環境を構築しました。


Visual Studio Code をインストールする 

  1. VSCodeをMicrosoftのHPからインストールします。
  2. Babylon.jsの「Using VSCode with Babylon.js」というページで指定されている以下の3つのVSCodeのプラグインをインストールします。

    ・ Debugger for Chrome
    ・ Shader language support for VS Code
    ・ Babylon.js file viewer

TypeScriptのコンパイラをインストールする

Babyln.jsはjavascriptかTypeScriptのどちらでも扱えるようなので、私の場合はTypeScriptで書くことにしました。

VSCodeにはTypeScriptのコンパイラは入ってないので別途インストールします。

  1. node.jsとnpmをインストールします。私の環境には最新のバージョンが始めから入っていたので確認のみ。


  2. VSCodeのTypeScriptのチュートリアルを参照しながら、Typescriptをインストールします。

    ※ VS Codeの画面の右下にあるTypeScriptのバージョン表記はVS Codeが扱っているTypeScriptのバージョンだということに注意する。今インストールしたものとは別。

Babylon.jsのサンプルを動かす

  1. Babylon.jsのドキュメントの「Getting Started」参照し、手順どおりにファイルを作成します。

    プロジェクトフォルダを作成して、その中にダウンロードしたbabylon.d.tsとindex.htmlとgame.tsの2つのファイルを作ることになります。

    ※ game.tsを作成する前に、babylon.d.tsをダウンロードして同じフォルダに置き、game.tsの行頭で///<reference path="babylon.d.ts" />と書いて参照すると、コード補完できるようになります。



  2. メニューからTerminal>New Terminalを選択してターミナルを開き、game.tsをコンパイルします。


  3. index.htmlをchromeで開くとサンプルが動きます。


サンプルをデバッグモードで動かす

デバッグモードで動かします。このとき、自動的にchromeも立ち上がるようにします。

Debugger for Chromeのプラグインが必要です。

  1. tsconfig.jsonという名前のファイルを作成します。中に書く内容はVS Codeのドキュメントの「Client-side debugging」のものを参考にします。




  2. game.tsを選択した状態で、メニューからTerminal>Run Build Taskと選択し、ビルドします。

    このとき、プルダウンメニューが表示されるので、"tsc build"の方を選択します。


    outフォルダが作成され、ビルドして生成されたファイルがoutフォルダに入ります。

     
  3. VS Code の左にあるデバッグのアイコンをクリックしてデバッグビューに切替え、歯車ボタンを押します。






  4. プルダウンメニューが表示されるのでchromeを選択します。






  5. launch.jsonのテンプレートが作成されるので、urlのところをindex.htmlのファイルのパスに書き換えます。

    パスはVS Code上に表示されているindex.htmlを右クリックするとCopy Pathというのが出てくるので、それで取得できます。

  6. 左上にある緑色の再生ボタンの横のプルダウンメニューが「Launch Chrome against localhost」になっているのを確認して、再生ボタンを押します。