概要

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

ランタイムを取得する

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

含まれているスクリプト

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

<script src="http://www.babylonjs.com/babylon.js"></script>
<script src="http://www.babylonjs.com/hand.minified-1.2.js"></script>
<script src="https://raw.githubusercontent.com/toji/gl-matrix/master/dist/gl-matrix.js"></script>
<script src="CreatureMeshBone.js"></script>
<script src="CreatureRenderer.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");
		var new_animation_2 = new CreatureAnimation(actual_JSON, "second");
		
		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);

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

		// Now, call the createScene function that you just finished creating
		var data = createScene(canvas, engine);
		// Create creature renderer
		var new_creature_renderer = new CreatureRenderer("CreatureRenderer",
											 data.scene, new_manager, 
											 data.creature_texture);

createScene() 関数を呼び出したことに気付いたと思いますが、それは何でしょうか?:

var createScene = function (canvas, engine) {

    // Now create a basic Babylon Scene object 
    var scene = new BABYLON.Scene(engine);

    // This creates and positions a free camera
    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 0, -30), scene);

    // This targets the camera to scene origin
    camera.setTarget(new BABYLON.Vector3.Zero());

    // This attaches the camera to the canvas
    camera.attachControl(canvas, false);

    // This creates a light, aiming 0,1,0 - to the sky.
    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

    // Dim the light a small amount
    light.intensity = 0;

	// creature
	var creature_texture = new BABYLON.StandardMaterial("creatureTexture", scene);
	creature_texture.diffuseTexture = new BABYLON.Texture("character-dragon.png", scene);
	creature_texture.diffuseTexture.hasAlpha = true;
	creature_texture.emissiveTexture = new BABYLON.Texture("character-dragon.png", scene);
	creature_texture.backFaceCulling = false;
	// Leave this function
   return {"scene":scene, "creature_texture":creature_texture};
};  // End of createScene function

この関数を変更することで、画面上に表示されているものを変更することができます。

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

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

// Register a render loop to repeatedly render the scene
engine.runRenderLoop(function () {
	new_manager.Update(0.05); // Update the animation by a delta time of 0.05
	new_creature_renderer.UpdateData();				
	data.scene.render();
});

完全なコードサンプル

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

  <!DOCTYPE html>
    <html>
	
	<head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title>Babylon - Basic scene</title>
      
      <style>
  		html, body {
    		overflow: hidden;
    		width: 100%;
    		height: 100%;
    		margin: 0;
    		padding: 0;
  		}

  		#renderCanvas {
    		width: 100%;
    		height: 100%;
    		touch-action: none;
  		}
	  </style>

   </head>
   
<body>

<h1>My First Web Page</h1>

<p>My first paragraph.</p>

<canvas id="renderCanvas"></canvas>

<script src="http://www.babylonjs.com/babylon.js"></script>
<script src="http://www.babylonjs.com/hand.minified-1.2.js"></script>
<script src="https://raw.githubusercontent.com/toji/gl-matrix/master/dist/gl-matrix.js"></script>
<script src="CreatureMeshBone.js"></script>
<script src="CreatureRenderer.js"></script>

<script>

    var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
	xobj.open('GET', 'default.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);
			//document.write("Loaded JSON file: ");
			
			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);
			new_manager.SetActiveAnimationName("default", false);
			new_manager.SetShouldLoop(true);
			new_manager.SetIsPlaying(true);
			new_manager.RunAtTime(0);
			
  			// Get the canvas element from our HTML above
  			var canvas = document.getElementById("renderCanvas");

  			// Load the BABYLON 3D engine
  			var engine = new BABYLON.Engine(canvas, true);
  			
  			
  			// Now, call the createScene function that you just finished creating
  			var data = createScene(canvas, engine);
  			
  			// Create creature renderer
  			var new_creature_renderer = new CreatureRenderer("CreatureRenderer",
  															 data.scene, new_manager, 
  															 data.creature_texture);

			// Register a render loop to repeatedly render the scene
  			engine.runRenderLoop(function () {
			    new_manager.Update(0.05);
				new_creature_renderer.UpdateData();

				//new_creature_renderer.renderMesh.scaling = new BABYLON.Vector3(-1, 1, 1);
				
    			data.scene.render();
  			});
  			
  			// Watch for browser/canvas resize events
  			window.addEventListener("resize", function () {
    			engine.resize();
  			});
          }
    };
    xobj.send(null);  
 
 
  // This begins the creation of a function that we will 'call' just after it's built
  var createScene = function (canvas, engine) {

    // Now create a basic Babylon Scene object 
    var scene = new BABYLON.Scene(engine);

    // This creates and positions a free camera
    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 0, -30), scene);

    // This targets the camera to scene origin
    camera.setTarget(new BABYLON.Vector3.Zero());

    // This attaches the camera to the canvas
    camera.attachControl(canvas, false);

    // This creates a light, aiming 0,1,0 - to the sky.
    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

    // Dim the light a small amount
    light.intensity = 0;

	// creature
	var creature_texture = new BABYLON.StandardMaterial("creatureTexture", scene);
	creature_texture.diffuseTexture = new BABYLON.Texture("character-dragon.png", scene);
	creature_texture.diffuseTexture.hasAlpha = true;
	creature_texture.emissiveTexture = new BABYLON.Texture("character-dragon.png", scene);
	creature_texture.backFaceCulling = false;
	
    // Leave this function
    return {"scene":scene, "creature_texture":creature_texture};

  };  // End of createScene function
</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