PlayCanvas のホスティングサービスを使ってみるテスト
昨日、紹介した Mozilla の PlayCanvas ですが、GitHub のようなホスティングサービスも提供しているとのことだったので試してみました。
1. サービスにログインする
サービスを使用するにあたってログインが必要です。 ログインは、Google+ または E-mail のどちらかを紐づけることでログイン可能となっています。
2. プロジェクトを作成する
「hello」プロジェクトを作ってみます。
3. コード部品を用意する
「hello.js」を作成してみます。
このコードは、オブジェクトを回転する為のものです。後で使います。
pc.script.create('hello', function (context) { // Creates a new Hello instance var Hello = function (entity) { this.entity = entity; this.angle = 0; }; Hello.prototype = { // Called once after all resources are loaded and before the first update initialize: function () { }, // Called every frame, dt is time in seconds since last update update: function (dt) { this.angle += dt * 5.0; if (this.angle > 360) { this.angle = 0; } // Rotate the box this.entity.setEulerAngles(this.angle*2, this.angle*4, this.angle*8); } }; return Hello; });
4. Pack を作成する
PlayCanvas では複数の Entity を管理する為の単位のことを Pack と呼ぶようです。 Pack を作成すると、統合開発環境がブラウザ内に表示されます。
5. Asset を追加する
「Asset Library」より「Box」を追加してみます。
「Box」の既定の Position が原点になっている為、多少後ろにずらしておきます。
なお、追加した Asset は Asset 画面にも表示されるようになります。
5. Asset にスクリプトを関連づける
「Box」に事前に作っておいたオブジェクトを回転させる為のコード「hello.js」を関連付けてみます。
6. Pack を Export する
7. アプリケーションを発行する
アプリケーション名を入力します。
とりあえず「box」としておきます。
「Apps」の所に「box」が表示されれば発行完了です。
ちなみに、発行されたアプリケーションの URL は以下のようなルールになっているようです。
http://apps.playcanvas.com/<USERNAME>/<PROJECTNAME>/<GAMENAME>.
8. アプリケーションを動かしてみる
http://apps.playcanvas.com/cx20/hello/box
「box」が回転していれば、成功です。
なんだか眠くなってきたので、今日はこの辺にしておきます。