概述

阅读本文档,您可以了Haxe Flash的Creature动画工具插件。

下载插件

点击 这里下载该插件。

现场演示

点击 这里观看使用FlashHaxeFlixel插件的奔跑的犹他龙的现场网页演示。该演示展示了如何使用Creature导出的变形网格制作恐龙动画。

犹他龙作品: Emily Willoughby (http://emilywilloughby.com)

冰系恶魔作品: Katarzyna Zalecka [http://kasia88.deviantart.com]

Alt text

使用Haxe插件

Haxe插件核心代码存储于CreatureHaxe文件夹。在该文件夹中,您可以找到CreaturePackModule.hx文件。该文件中包含在Haxe播放Creature动画的核心类。

动画文件格式+播放

Haxe插件使用更紧凑的creature_pack格式。除骨骼信息外,该文件格式具有原始Creature JSON/FlatData格式的大部分功能。使用该格式,您可以进行播放、变形、混合等多种功能。但如需将对象附加到您的角色上,您最好通过顶点操作。

因为creature_pack没有骨骼,所以变形评估要快得多——所有的变形都已加入文件中。除此之外,使用Creature动画工具,您可以指定多个选项,以大幅缩减该格式的导出文件大小。缩减文件大小的关键在于导出时的间隙步长参数。增加该参数值将缩减文件大小,但也将降低动画质量。建议范围:2到6

核心类方法

为加载数据,您可以使用输入字节数组创建CreaturePackLoader对象。

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

动画播放功能使用CreatureHaxeBase渲染器类完成。该类可以驱动动画,并提供播放、混合、启动/停止动画功能。根据渲染器(Stage3D, HaxeFlixel等),通常您可以使用CreatureHaxeBase渲染器(或其继承版本)播放您的动画。

方法:

  • **setActiveAnimation(nameIn : String)**:该函数设置活动动画名称;

  • **function blendToAnimation(nameIn : String, blendDelta : Float)**:平滑混合到目标动画,混合增量在0到1之间;

  • **function getRunTime():**Float:返回动画的当前时间;

  • **function stepTime(deltaTime : Float)**:动画每次前进一个时间增量;

  • function syncRenderData():在渲染前调用此函数来更新渲染数据;注意:只有在使用较低级别渲染器(如Stage3D渲染器)时,才需要此功能。

使用Stage3D获取Flash目标对象

想要一个pure Flash目标对象,您可以使用CreatureStage3D渲染器来完成。

加载数据

以下是示例代码:

 @: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);
	
	// 加载Creature数据
	var readData = new MyData();
	creatureData = new CreaturePackLoader(readData);

	// 创建纹理
	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渲染器
	creatureDraw = new CreatureStage3DRenderer(creatureData, creatureTexture, ctx);
	creatureDraw.setActiveAnimation("default");
}

渲染

使用以下代码进行渲染:

function update(_) {
	if (ctx == null) return;
	
	// 摄像机和屏幕缓冲区
	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 动画
	creatureDraw.transformMat.identity();
	creatureDraw.transformMat.appendScale(0.035, 0.035, 0.035);
	
	curCamera.copyRawDataFrom(rawCamArray);
	
	creatureDraw.stepTime(2);
	creatureDraw.syncRenderData();
	creatureDraw.render(curCamera);
	
	// 将结果显示在屏幕上
	ctx.present();
}

请查看FlashDev文件夹中的完整示例源代码。

HaxeFlixel目标对象

HaxeFlixel(http://haxeflixel.com/)框架中有一个CreatureHaxeFlixel渲染器。请注意,为使该渲染器运行,您的目标对象必须支持绘制三角形渲染方法。

要设置和播放动画,请查看下面的示例代码:

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);
}

您可以通过更改CreatureHaxeFlixel渲染器对象上的速度变量来调整播放速度。您可以通过Creature渲染变量从CreatureHaxeFlixel渲染器访问CreatureHaxeBase渲染器对象。在该对象中,您可以进行混合、切换、停止等动画操作。

Starling目标对象

Starling(https://github.com/openfl/starling)中有一个CreatureStarling渲染器

要设置和播放角色动画,请使用以下示例代码:

	var curTexture = sAssets.getTexture("texture");
	var curData = sAssets.getByteArray("data");
	var creatureData = new CreaturePackLoader(curData);
	
	var texWidth = 512;
	var texHeight = 512;
	
	// 加载Creature Starling渲染器
	creature_render = new CreatureStarlingRenderer(creatureData, curTexture, 15, 15);
	
	addChild(creature_render);
	
	// 现在设置位置和播放速度
	creature_render.x = 380;
	creature_render.y = 250;
	creature_render.speed = 100;
	
	// 设置动画剪辑进行播放
	creature_render.creatureRender.setActiveAnimation("default");
	
	// 通过定时器更新动画,可以使用自己的更新方法 
	// 为您自己的游戏
	var timer = new Timer(16);
	timer.run = function()
	{
		creature_render.update(1.0 / 60.0);
	}