PixiJSランタイム

概要

このドキュメントでは、PixiJSランタイムの使用方法について説明します。ランタイムの言語はJavaScriptです。書き出したJSONファイルを読み込んでシーンで再生する方法の例を説明します。

ランタイムを取得する

ランタイムをCreatureのGame Runtimesウィンドウから直接ダウンロードするか、リポジトリ(こちら)から取得することができます。

ファイルフォーマットとランタイムタイプの選択

選択できるランタイムには2種類あります: JSON/Creature FlatDataまたはCreaturePack Web Format.

  • JSON/Creature FlatData : 完全なボーン構造を提供し、機能はいっそう充実していますが、サイズが大きく、ポイントキャッシングを使用していない場合には評価するのが高価です。

  • CreaturePack Web Format. : 変形された点、UVs、色のみを与えます。キャラクターのスケルトンを取得しません。しかし、サイズは小さくなり、評価するのが非常に安く、再生が非常に速くなります。

JSON/Creature FlatData

含まれるスクリプト

含まれる必要があるスクリプトは次のとおりです:

<script src="pixi.js"></script>
<script src="https://raw.githubusercontent.com/toji/gl-matrix/master/dist/gl-matrix.js"></script>
<script src="CreatureMeshBone.js"></script>
<script src="CreaturePixiJSRefRenderer.js"></script>

読み込みと初期化

default.jsonと呼ばれる、エクスポートされたドラゴンのアニメーションファイルがあるとしましょう。character-dragon.pngと呼ばれる対応するテクスチャアトラスもあると仮定します。 最初にファイルアセットを読み込むことから始めます:

var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
xobj.open('GET', 'default.json', true); // Load the JSON file
    xobj.onreadystatechange = function () {
      if (xobj.readyState == 4 && xobj.status == "200") {
       // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
       var response = xobj.responseText;
      // Parse JSON string into object
        var actual_JSON = JSON.parse(response);

        ...

上のコードはJSONデータをディスクからメモリに読み込みます。次に、これらの読み込まれたアセットを利用できる実際のオブジェクトを作成しましょう:

        var new_creature = new Creature(actual_JSON, false);

        var new_animation_1 = new CreatureAnimation(actual_JSON, "default", false);
        var new_animation_2 = new CreatureAnimation(actual_JSON, "second", false);

        var new_manager = new CreatureManager(new_creature);
        new_manager.AddAnimation(new_animation_1);
        new_manager.AddAnimation(new_animation_2);

上記の例では、JSONファイルに2つのアニメーションクリップがあります: defaultsecondです。このため、creature_managerオブジェクトから2つのアニメーションを作成して再生できるようにする必要があります。

読み込みが完了したので、アクティブなアニメーションをdefaultに設定し、いくつかの再生プロパティを設定することができます:

        new_manager.SetActiveAnimationName("default", false);
        new_manager.SetShouldLoop(true);
        new_manager.SetIsPlaying(true);
        new_manager.RunAtTime(0);

キャラクターアニメーションのレンダリングに必要なオブジェクトを作成します:

        // create a texture from an image path
        var texture = PIXI.Texture.fromImage("character-dragon.png");

        var creatureContainer = new PIXI.DisplayObjectContainer();
        creatureContainer.position.x = window.innerWidth/2;
        creatureContainer.position.y = window.innerHeight/2;

        creatureContainer.scale.set(35.0);
        stage.addChild(creatureContainer);

        var new_creature_renderer = new CreatureRenderer(new_manager, texture);
        creatureContainer.addChild(new_creature_renderer);

キャラクターのアニメーションとレンダリングアップデート

キャラクターを読み込んだら、対応するアップデートコールを呼び出して、アニメーションを更新し、キャラクターをレンダリングする必要があります。これは、 animate() コールバックで行われます:

        function animate() {

            requestAnimationFrame( animate );

            new_manager.Update(0.05);
            new_creature_renderer.refresh();

            // render the stage   
            renderer.render(stage);
        }

完全なコードサンプル

以下は完全なコードレイアウトです。ほとんどのコードは、デフォルトのPixiJSプロジェクトのスターターテンプレートから生成されます:

<!DOCTYPE html>
    <html>

    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title>PixiJs - Basic scene</title>

      <style>

        canvas {
           border: 1px dashed gray;
        }

        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

      </style>

   </head>

<body>

<h1>My First Web Page</h1>

<p>My first paragraph.</p>

<script src="pixi.dev.js"></script>
<script src="https://raw.githubusercontent.com/toji/gl-matrix/master/dist/gl-matrix.js"></script>
<script src="CreatureMeshBone.js"></script>
<script src="CreaturePixiJSRefRenderer.js"></script>

<script>

    var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
    xobj.open('GET', 'dragonTest.json', true); // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = function () {
          if (xobj.readyState == 4 && xobj.status == "200") {
            var response = xobj.responseText;
            // Parse JSON string into object
            var actual_JSON = JSON.parse(response);

            new_creature = new Creature(actual_JSON, false);

            new_animation_1 = new CreatureAnimation(actual_JSON, "default", false);
            new_animation_2 = new CreatureAnimation(actual_JSON, "pose2", false);

            var new_manager = new CreatureManager(new_creature);
            new_manager.AddAnimation(new_animation_1);
            new_manager.AddAnimation(new_animation_2);
            new_manager.SetActiveAnimationName("pose2", false);
            new_manager.SetShouldLoop(true);
            new_manager.SetIsPlaying(true);
            new_manager.RunAtTime(0);

            // create an new instance of a pixi stage
            var stage = new PIXI.Stage(0x000000);

            // create a renderer instance.          
            var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);

            if (renderer.type == PIXI.WEBGL_RENDERER) {
                console.log('Using WebGL');
            } else {
                console.log('Using Canvas');
            };

            // add the renderer view element to the DOM
            document.body.appendChild(renderer.view);

            // create a texture from an image path
            var texture = PIXI.Texture.fromImage("character-dragon.png");

            var creatureContainer = new PIXI.DisplayObjectContainer();
            creatureContainer.position.x = window.innerWidth/2;
            creatureContainer.position.y = window.innerHeight/2;

            creatureContainer.scale.set(35.0);
            stage.addChild(creatureContainer);

            var new_creature_renderer = new CreatureRenderer(new_manager, texture);
            creatureContainer.addChild(new_creature_renderer);
            creatureContainer.scale.x = -creatureContainer.scale.x;

        function animate() {

            requestAnimationFrame( animate );

            new_manager.Update(0.05);
            new_creature_renderer.refresh();

            // render the stage   
            renderer.render(stage);
        }

        animate();
      }
    };
    xobj.send(null);


</script>

</body>
</html>

カスタム時間/フレーム範囲

現在アクティブなアニメーションのカスタム時間/フレーム範囲を設定できます。再生範囲を10〜20のフレーム範囲に制限したい場合、次の操作を行います:

new_creature_manager.SetUseCustomTimeRane(true);
new_creature_manager.SetCustomTimeRange(10, 20);

アニメーションブレンディング

2つのアニメーションクリップをブレンドするには、次の手順を実行します:

curManager.SetBlending(true);   
curManager.SetBlendingAnimations("default", "pose2");
curManager.SetBlendingFactor(0.5);   // 0 to 1 blends between the 2 clips

読み込み時間の高速化 + Creature Flat Binary Dataによるメモリ使用量の削減

Creature JSONファイルをCreature Flat Binary Dataフォーマットに変換することで、読み込み時間を短縮し、大規模なキャラクタアセットのメモリ使用量を減らすことができます。デバイス上でヒープメモリが不足している場合は、Flat Binary Dat形式を使用して、Creatureキャラクタアセットを読み込むことをお勧めします。

まず、Creature Tools Github Pageに行きます:

1)FlatDataディレクトリに移動します。

2)CreatureFlatDataコンバータプログラムをコンパイルするか、Binディレクトリからあなたのシステム(MacまたはWindows)のバイナリを取得するだけです。

CreatureFlatDataコンバーターを実行する

これは、入力したCreature Character JSONファイルを取り込んで、それをバイナリのCreature Flat Dataファイルに変換するコマンドラインプログラムです。Unityがバイナリアセットとして認識できるように、変換された最終出力バイナリファイルの拡張子を .bytes にすることをお勧めします。

CreatureFlatData Converterを実行するには、ターミナル/コマンドプロンプトをロードします:

CreatureFlatData <Input JSON File> <Output .bytes File>

Creature Flat Binaryを使う

まず、現在のフレームワークと同じようにバイナリファイルを取得します。 次に、以下のような操作を行います:

        var actual_data = CreatureModuleUtils.LoadCreatureFlatData(game.cache.getBinary('myFlatDataBinary.bin'));

        new_creature = new Creature(actual_data, true);         
        new_animation_1 = new CreatureAnimation(actual_data, "idle", true);

ご覧のとおり、フラットデータオブジェクトへの参照を取得するだけです。その後、CreatureCreatureAnimationの最後のパラメータをtrueに設定します。これにより、バイナリフラットデータロードがトリガーされます。

CreaturePack Webフォーマット

CreaturePack Webフォーマットのチューニング

CreatureのGame Engine Exportウィンドウには、以下のオプションがあります:

  • Gap Step : これは、エクスポートにどれくらい近似が行われるかを決定します。数値が大きいほど、ファイルサイズは小さくなりますが、品質は低下します。値1は近似がないことを意味します。1から6までの間で試してみてください。

  • UV Swaps : UVスワップをエクスポートするかどうかを決定するには、これをオンまたはオフにします。イメージスワップを使用している場合は、このオプションをオンにする必要があります。

  • Color Changes : 不透明度の変更をエクスポートするかどうかを決定するには、これをオンまたはオフにします。フェーディング領域の場合は、このオプションをオンにしてください。

Gap Step を増やすことでファイルのサイズをかなり小さくすることができますが、品質の低下に繋がります。

含まれるスクリプト

次のものが必要になります:

    <script src="msgpack.js"></script>
    <script src="CreaturePackModule.js"></script>
    <script src="CreaturePixiPackJSRenderer.js"></script>

読み込みと初期化

ファイルのバイナリバッファを取得し、CreaturePackLoaderに渡します:

        creature_pack = new CreaturePackLoader(game.cache.getBinary('raptorPack').buffer);

レンダリング

ファイルを見てください: CreaturePixiJSRenderer.js 概念が非常に似ているので、詳細についてはPhaserのドキュメントをチェックしてみてください。