概要

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

ランタイムを取得する

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

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

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

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

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

JSON/Creature FlatData

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

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

読み込みと初期化

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

    function preload () {
        game.load.text('dragonJSON', 'dragonTest.json');
         
        // create a texture from an image path
		texture = PIXI.Texture.fromImage("character-dragon.png");
		
    }
		
		...

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

		var actual_JSON = JSON.parse(game.cache.getText('dragonJSON'));
		
		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);
		
		new_manager = new CreatureManager(new_creature);
		new_manager.AddAnimation(new_animation_1);
		new_manager.AddAnimation(new_animation_2);

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

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

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

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

		creaturePhaserObject = new Phaser.CreatureDraw(game.world, 
											game.world.centerX, 
											game.world.centerY,
											new_manager,
											texture);
											
		creaturePhaserObject.scale.set(35.0);
		game.world.add(creaturePhaserObject);

キャラクターアニメーション再生速度

再生速度を変えるのは簡単です。Phaser Creature ObjectのtimeDeltaに新しい値を設定するだけです:

		creaturePhaserObject.timeDelta = 0.01; // or some other value

完全なコードサンプル

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

	<!doctype html>
	<html>
	  <head>
    <meta charset="UTF-8" />
    <title>hello phaser!</title>
    <script src="phaser.js"></script>
    <script src="https://raw.githubusercontent.com/toji/gl-matrix/master/dist/gl-matrix.js"></script>
	<script src="CreatureMeshBone.js"></script>
	<script src="CreaturePixiJSRenderer.js"></script>
	<script src="CreaturePhasePhaserrRenderer.js"></script>
</head>
<body>

<script type="text/javascript">

window.onload = function() {

    var game = new Phaser.Game(800, 600, Phaser.WEBGL, '', { preload: preload, create: create });
    var texture = null;
    var new_creature = null;
    var new_animation_1 = null;
    var new_animation_2 = null;
    var new_manager = null;
    var creaturePhaserObject = null;

    function preload () {
        game.load.text('dragonJSON', 'dragonTest.json');
         
        // create a texture from an image path
		texture = PIXI.Texture.fromImage("character-dragon.png");
		
    }

    function create () {
        // Core Creature Objects
		var actual_JSON = JSON.parse(game.cache.getText('dragonJSON'));
		
		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);
		
		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);
		
		console.log('Loaded and created Core Creature Objects.');
		
		// Phaser Creature Object
		creaturePhaserObject = new Phaser.CreatureDraw(game.world, 
												game.world.centerX, 
												game.world.centerY,
												new_manager,
												texture);
		creaturePhaserObject.scale.set(35.0);
		game.world.add(creaturePhaserObject);
		
					
    }

};

</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フォーマットに変換することで、読み込み時間を短縮し、大規模なキャラクタアセットのメモリ使用量を減らすことができます。デバイス上でヒープメモリが不足している場合、フラットバイナリデータ形式を使用して、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>
	<script src="CreaturePhaserPackRenderer.js"></script>
	

読み込みと初期化

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

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

レンダリング

CreaturePackDrawオブジェクトを作成し、シーンに追加します:

		creature_pack = new CreaturePackLoader(game.cache.getBinary('raptorPack').buffer);
		console.log('Loaded and created Core Creature Objects.');				

		var creature_renderer = new Phaser.CreaturePackDraw(game.world, 
												game.world.centerX, 
												game.world.centerY,
												creature_pack,
												texture);
											
		creature_renderer.pack_renderer.setActiveAnimation("default");													
		creature_renderer.scale.set(15.0);
		creature_renderer.timeDelta = 1;
		game.world.add(creature_renderer);