CX's Hatena Blog

はてなブログを使ってみるテスト

PlayCanvas のホスティングサービスを使ってみるテスト

昨日、紹介した MozillaPlayCanvas ですが、GitHub のようなホスティングサービスも提供しているとのことだったので試してみました。

f:id:cx20:20140610013700p:plain

1. サービスにログインする

サービスを使用するにあたってログインが必要です。 ログインは、Google+ または E-mail のどちらかを紐づけることでログイン可能となっています。

2. プロジェクトを作成する

「hello」プロジェクトを作ってみます。

f:id:cx20:20140610014857p:plain

f:id:cx20:20140610014858p:plain

3. コード部品を用意する

「hello.js」を作成してみます。

f:id:cx20:20140610013703p:plain

f:id:cx20:20140610013702p:plain

このコードは、オブジェクトを回転する為のものです。後で使います。

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 を作成すると、統合開発環境がブラウザ内に表示されます。

f:id:cx20:20140610013649p:plain

f:id:cx20:20140610013650p:plain

5. Asset を追加する

「Asset Library」より「Box」を追加してみます。

f:id:cx20:20140610013651p:plain

「Box」の既定の Position が原点になっている為、多少後ろにずらしておきます。

f:id:cx20:20140610013652p:plain

なお、追加した Asset は Asset 画面にも表示されるようになります。

f:id:cx20:20140610013656p:plain

5. Asset にスクリプトを関連づける

「Box」に事前に作っておいたオブジェクトを回転させる為のコード「hello.js」を関連付けてみます。

f:id:cx20:20140610013653p:plain

f:id:cx20:20140610013654p:plain

6. Pack を Export する

f:id:cx20:20140610013655p:plain

7. アプリケーションを発行する

f:id:cx20:20140610013657p:plain

アプリケーション名を入力します。

とりあえず「box」としておきます。

f:id:cx20:20140610024106p:plain

「Apps」の所に「box」が表示されれば発行完了です。

f:id:cx20:20140610013659p:plain

ちなみに、発行されたアプリケーションの URL は以下のようなルールになっているようです。

http://apps.playcanvas.com/<USERNAME>/<PROJECTNAME>/<GAMENAME>. 

8. アプリケーションを動かしてみる

http://apps.playcanvas.com/cx20/hello/box

f:id:cx20:20140610013700p:plain

「box」が回転していれば、成功です。

なんだか眠くなってきたので、今日はこの辺にしておきます。