概述

阅读本文档,您可以了解如何使用PixiJS运行库。该运行库使用JavaScript语言。我们将通过一个示例来说明如何加载导出的JSON文件并在场景中进行播放。

获取运行库

您可以直接从Creature游戏运行库窗口下载运行库,或点击 这里从版本库获取运行库。

选择文件格式和运行库类型

有两种运行库类型可供选择:JSON/Creature平面数据CreaturePack Web格式

  • JSON/Creature平面数据:为您提供完整的骨骼结构,功能更丰富,但尺寸更大:如果不使用点缓存,评估成本将更高。

  • CreaturePack Web格式:只提供变形的点、贴图坐标和颜色。不提供角色的骨架结构。但该运行库更小,评估成本更低,因此播放非常快。

JSON/Creature平面数据

应含脚本

以下是需要包含的脚本:

<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") {
       // 需要使用匿名回调函数,因为.open不会返回值,而只是在异步模式下返回未定义
       var response = xobj.responseText;
      // 将JSON字符串解析成对象
		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个动画剪辑:默认剪辑和第二剪辑。因此,您需要从Creature管理器对象创建2个动画,使它们可以播放。

已完成加载,可以将活动动画设置为默认,并设置一些播放属性,以用于播放:

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

现在继续创建对象来渲染角色动画:

		// 从图像路径创建纹理
		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();
    		
    		// 渲染舞台   
    		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); // 将'my_data'替换为文件的路径
	xobj.onreadystatechange = function () {
          if (xobj.readyState == 4 && xobj.status == "200") {
            var response = xobj.responseText;
            // 将JSON字符串解析成对象
			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);
			
			// 创建一个pixi舞台的新实例 stage
    		var stage = new PIXI.Stage(0x000000);
 
    		// 创建一个渲染器实例。			
    		var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
    		
    		if (renderer.type == PIXI.WEBGL_RENDERER) {
  				console.log('Using WebGL');
			} else {
  				console.log('Using Canvas');
			};
 
    		// 将渲染器视图元素添加到文档对象模型(DOM)
    		document.body.appendChild(renderer.view);
    		    		
    		// 从图像路径创建纹理
    		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();
    		
    		// 渲染舞台   
    		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到1

使用Creature平面二进制数据缩减加载时间及内存用量

您可以通过将Creature JSON文件转换为Creature平面二进制数格式,这样能缩减大角色资源的加载时间及内存占用。设备上的堆内存不足时,我们建议您使用平面二进制数据格式加载Creature角色资源。

首先,进入 Creature Tools Github Page:

  1. 进入平面数据目录;

2)您可以编译Creature平面数据转换器程序,或者从Bin目录中获取系统(Mac或Windows)的二进制数据。

运行Creature平面数据转换器

Creature平面数据转换器是一个命令行程序,可以使用置入的导出Creature角色的JSON文件并将其转换为二进制Creature平面数据文件。建议为最终转换输出的二进制文件使用**.bytes**扩展名,以便Unity可以将其识别为二进制资源。

要运行Creature平面数据转换器,请加载以下终端或命令提示符:

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

使用Creature平面二进制文件

首先,在当前框架中检索二进制文件。

然后,执行以下操作:

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

通过上述操作可以看出,您需要做的只是获取对平面数据对象的引用。然后将CreatureCreature动画创建中的最后一个参数设置为true,即可触发二进制平面数据加载。

CreaturePack Web格式

调整CreaturePack Web格式

在Creature的游戏引擎导出窗口中,您可以看到以下选项:

  • 间隙步长:该选项确定在导出时执行多少近似化。该数字越大,文件大小越小,但质量越差。值为1时表示无近似。建议范围:1到6;

  • UV交换:打开或关闭该选项,以确定是否导出UV交换。如需使用图像交换,您应将该选项选择为ON;

  • 颜色更改:打开或关闭该选项,以确定是否导出任何不透明度更改。如需使用淡出区域,您应将该选项选择为ON。

通过增加间隙步长可以缩减相当多的文件大小,但会造成一些质量损失。

应含脚本

以下是需要包含的脚本:

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

加载和初始化

获取您的文件的二进制缓冲区并将其传递到CreaturePack加载器:

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

渲染

请查看文件:CreaturePixiJSRenderer.js,并查看相位文档以获取更多信息:二者的概念非常相似。