HaxeFlashランタイム

概要

このドキュメントでは、Haxe/Flash用のCreature Animation Toolのプラグインについて説明します。

プラグインをダウンロードする

プラグインはこちらからダウンロードします。

ライブデモ

FlashHaxeFlixelのプラグインを使用して実行中のユタラプトルのライブウェブデモンストレーションはこちらにあります。このデモは、Creatureからエクスポートされた変形メッシュでアニメーション化された恐竜を示しています。

UtahRaptor Artwork: Emily Willoughby (http://emilywilloughby.com)

Ice Demon Artwork: Katarzyna Zalecka [http://kasia88.deviantart.com]

Alt text

Haxeプラグインの使用

Haxeプラグインのコアコードは、CreatureHaxeフォルダにあります。ここには、HaxeでCreature Animationsを再生するために必要なコアクラスを含むCreaturePackModule.hxファイルがあります。

アニメーションファイルフォーマット + 再生

Haxeプラグインはよりコンパクトなcreature_pack形式を使用します。このファイル形式は、Bone Informationを除き、元のCreature JSON/FlatDataの機能のほとんどを持っています。このフォーマットでメッシュ再生、変形、ブレンドなどを行いますが、あなたのキャラクターにオブジェクトをアタッチする必要がある場合は、by vertexで行うのが好ましい方法です。

creature_packにはボーンがないので、すべての変形がすでにファイルに焼き付けられているため、変形評価は非常に高速です。それに加えて、Creature Animation Toolでは、このフォーマットの書き出しファイルサイズを劇的に減らすためのいくつかのオプションを指定することができます。ファイルサイズを小さくするポイントは、エクスポート中のGap Stepパラメータです。この値を大きくするとファイルサイズは小さくなりますが、アニメーションの品質は低下します。2から6の間の値を試してください。

コアクラス/メソッド

データを読み込むために、ByteArrayインプットを使ってCreaturePackLoaderオブジェクトを作成します。

    var readData = new MyData();
    creatureData = new CreaturePackLoader(readData);

アニメーション再生機能は、CreatureHaxeBaseRendererクラスで実行されます。このクラスはアニメーションを駆動し、アニメーションの再生、ブレンド、開始/停止のための機能を提供します。 レンダラー(Stage3D、HaxeFlixelなど)によっては、通常、CreatureHaxeBaseRenderer(またはその継承バージョン)へのアクセスを取得してアニメーションを再生します

メソッド: - setActiveAnimation(nameIn : String) - アクティブなアニメーション名を設定します

  • function blendToAnimation(nameIn : String, blendDelta : Float) - 0〜1のブレンドデルタを使用してターゲットアニメーションにスムーズにブレンドします

  • function getRunTime() : Float - アニメーションの現在の時間を返します

  • function stepTime(deltaTime : Float) - アニメーションをデルタタイムによって進めるステップ

  • function syncRenderData() - レンダーの前にこれを呼び出し、レンダーデータを更新します。注: この機能は、Stage3Dレンダラーのような低レベルのレンダーを使用している場合にのみ必要です。

Stage3Dと一緒にFlashを使用する

Flashをターゲットにしたい場合は、それだけを行うCreatureStage3DRendererが利用可能です。

データを読み込む

以下のサンプルコードを見てみてください:

 @:file("raptorTest_character_data.creature_pack")
class MyData extends flash.utils.ByteArray
{   
}

@:bitmap("raptorTest_character_img.png")
class MyBitmap extends BitmapData
{
}

function onReady( _ ) {
    var stage = Lib.current.stage;
    ctx = s3d.context3D;
    ctx.enableErrorChecking = true;
    ctx.configureBackBuffer( stage.stageWidth, stage.stageHeight, 0, true );
    ctx.setBlendFactors(Context3DBlendFactor.SOURCE_ALPHA, Context3DBlendFactor.ONE_MINUS_SOURCE_ALPHA);

    // Load Creature Data
    var readData = new MyData();
    creatureData = new CreaturePackLoader(readData);

    // Create texture
    var curBitmap : MyBitmap = new MyBitmap(2048, 871);
    creatureTexture = ctx.createRectangleTexture(2048, 871, Context3DTextureFormat.BGRA, false);

    //var curBitmap : MyBitmap2 = new MyBitmap2(1600, 1600);

    creatureTexture.uploadFromBitmapData(curBitmap);

    // creature renderer
    creatureDraw = new CreatureStage3DRenderer(creatureData, creatureTexture, ctx);
    creatureDraw.setActiveAnimation("default");
}

レンダリング

レンダリングは次のコードで行われます:

function update(_) {
    if (ctx == null) return;

    // Camera and screen buffer
    ctx.clear(0, 0, 0, 1);
    ctx.setDepthTest( true, flash.display3D.Context3DCompareMode.LESS_EQUAL );
    ctx.setCulling(flash.display3D.Context3DTriangleFace.NONE);

    var stage = Lib.current.stage;
    var ratio = stage.stageHeight / stage.stageWidth;

    var curCamera = new Matrix3D();
    var camMat:Mat4 = Projection.ortho( -1, 1, -1 * ratio, 1 * ratio, -1, 1);
    var readCamArray:Array<Float> = camMat.toArrayColMajor();
    var rawCamArray : Vector<Float> = new Vector<Float>(16);
    for (i in 0...16)
    {
        rawCamArray[i] = readCamArray[i];
    }

    // Creature Animation
    creatureDraw.transformMat.identity();
    creatureDraw.transformMat.appendScale(0.035, 0.035, 0.035);

    curCamera.copyRawDataFrom(rawCamArray);

    creatureDraw.stepTime(2);
    creatureDraw.syncRenderData();
    creatureDraw.render(curCamera);

    // Show results onto screen
    ctx.present();
}

フルサンプルソースについては、 FlashDev フォルダをご覧ください。

HaxeFlixelターゲット

HaxeFlixel(http://haxeflixel.com/)フレームワークで動作するCreatureHaxeFlixelRendererがあります。このレンダラーを実行するには、ターゲットがdrawTrianglesレンダリングメソッドをサポートしている必要があります。

アニメーションを設定して再生するには、以下のサンプルコードをご覧ください:

override public function create():Void
{
    super.create();

    var load_data = Assets.getBytes(AssetPaths.raptorData__creature_pack);
    var load_img = Assets.getBitmapData(AssetPaths.raptorImg__png);
    creatureData = new CreaturePackLoader(load_data);

    var flixelCreatureRenderer = new CreatureHaxeFlixelRenderer(creatureData, 350, 350);
    flixelCreatureRenderer.loadGraphic(AssetPaths.raptorImg__png);
    flixelCreatureRenderer.creatureRender.setActiveAnimation("default");

    flixelCreatureRenderer.setSize(16, 16);

    add(flixelCreatureRenderer);
}

CreatureHaxeFlixelRendererオブジェクトのspeed変数を変更することで、再生速度を調整できます。creatureRender変数を介してCreatureHaxeFlixelRendererからCreatureHaxeBaseRendererオブジェクトにアクセスできます。これにより、アニメーションのブレンド、切り替え、停止などが可能になります。

Starlingを使用

Starling(https://github.com/openfl/starling)で動作するCreatureStarlingRendererがあります。

キャラクターアニメーションを設定して再生するには、以下のサンプルコードを使用します:

    var curTexture = sAssets.getTexture("texture");
    var curData = sAssets.getByteArray("data");
    var creatureData = new CreaturePackLoader(curData);

    var texWidth = 512;
    var texHeight = 512;

    // Load the Creature Starling Renderer
    creature_render = new CreatureStarlingRenderer(creatureData, curTexture, 15, 15);

    addChild(creature_render);

    // Now set the position and playback speed
    creature_render.x = 380;
    creature_render.y = 250;
    creature_render.speed = 100;

    // Set animation clip to cplay
    creature_render.creatureRender.setActiveAnimation("default");

    // Do animation updates via timer, you can use your own update methods 
    // for your own game
    var timer = new Timer(16);
    timer.run = function()
    {
        creature_render.update(1.0 / 60.0);
    }