バビロニ
BabylonJSは、HTML5とWebGLを使用してゲームを開発するためのJavaScriptベースの3Dフレームワークです。
ここで示す例では、通常、3次元ゲームの開発環境に精通していることから始まります。 キューブを作成し、回転させます。 このマテリアルを理解した後、メッシュ（メッシュ）、テクスチャ（テクスチャ）、照明（照明）、カメラ（カメラ）、アニメーション（アニメーション）などのツールを使用して、膨大なゲームオブジェクトを作成およびアニメーション化する方法を学びます。 これらはすべて、さまざまな3Dゲーム開発環境に共通する概念です。 それらはBabylonJSに反映されます。
プロジェクト構造について
この例を正しく機能させるには、プロジェクトに次のファイルが存在する必要があることに注意してください。
- babylon.2.3.jsはメインフレームワークファイルです。 ここからダウンロードして 、プロジェクトのwwwフォルダーにあるlibフォルダーに配置する必要があります。
- babylonjs.png-これは、3次元立方体のテクスチャとして機能する任意の画像です。 これは、wwwフォルダにもあるassetフォルダにある必要があります。
プロジェクトは、標準HTML5テンプレートを使用して作成されました。
プロジェクト構造
ライブラリ接続
BabylonJSはGitHubからダウンロードできます 。 Babylon.2.3.jsを使用します。 このファイルをダウンロードして、HTML5 Canvas要素を含むIndex.htmlファイルに接続する必要があります。HTML5Canvas要素は、JavaScriptを使用してビットマップイメージを作成するように設計されたデジタルキャンバスです。 次のようになります。
<!DOCTYPE html> <html> <head> <title>BabylonJS</title> <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no"> <script src="lib/babylon.2.3.js"></script> <style> html, body { overflow: hidden; width : 100%; height : 100%; margin : 0; padding : 0; } #gameCanvas { width : 100%; height : 100%; touch-action: none; } </style> </head> <body> <canvas id="gameCanvas"></canvas> </body> </html>
BabylonJSには、ゲームシーン（シーン）の作成、3Dオブジェクト、カメラ、照明、ゲームへのテクスチャなどの追加を可能にするエンジンオブジェクトがあります。
エンジンオブジェクト
ゲームロジックの構築は、エンジンオブジェクトの作成から始まります。 同時に、HTML5ドキュメントのcanvas要素が渡されます。
var canvas = document.getElementById('gameCanvas'); var engine = new BABYLON.Engine(canvas, true);
このオブジェクトを初期化した後、Sceneオブジェクトを作成し、その後カメラ、照明、メッシュ、テクスチャオブジェクトをゲームに追加できます。
シーンオブジェクト
シーンは、ゲームが構築されるプラットフォームであり、他のオブジェクトはそれに関連付けられています。 作成する場合、クラスEngineのオブジェクトをコンストラクターに渡す必要があります。
var scene = new BABYLON.Scene(engine);
カメラオブジェクト
カメラは、それが向けられている3次元空間の一部を表示するために使用されます。 対応するオブジェクトを作成すると、以前に作成されたSceneオブジェクトがそのオブジェクトに転送され、画面に表示されるものに影響するパラメーターが設定されます。
var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene); camera.setTarget(BABYLON.Vector3.Zero());
照明オブジェクト
Lightingオブジェクトは、3次元シーンの光源です。 作成すると、パラメータと既におなじみのSceneオブジェクトが示されます。
var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);
メッシュオブジェクト
Meshクラスのオブジェクトを使用すると、3次元オブジェクトの形状を指定できます。 この場合、事前定義オブジェクト-キューブが作成されます。
var box = new BABYLON.Mesh.CreateBox('box1', 2.0, scene);
テクスチャオブジェクト
Textureオブジェクトは、3次元オブジェクトに重ねられた画像です。
var texture = new BABYLON.StandardMaterial("texture1", scene); texture.bumpTexture = new BABYLON.Texture("asset/babylonjs.png", scene); box.material = texture;
アニメーションオブジェクト
Animationオブジェクトを使用すると、他のオブジェクト（この場合はテクスチャが適用されるキューブ）のアニメーションをカスタマイズできます。
var animationX = new BABYLON.Animation.CreateAndStartAnimation('boxrotate', box, 'rotation.x', 60, 360, 1, 10); var animationY = new BABYLON.Animation.CreateAndStartAnimation('boxrotate', box, 'rotation.y', 60, 360, 1, 10);
シーンのレンダリング
上記のコマンドにより、シーンを作成できました。 次に、発生したすべてを画面に表示する必要があります。
engine.runRenderLoop(function(){ scene.render(); });
Intel XDKエミュレーターで例を実行します。
Intel XDKエミュレーターのプロジェクト
完全なサンプルコード
以下は、この例の完全なコードで、Index.htmlファイルにコピーして貼り付けることができます。
<!DOCTYPE html> <html> <head> <title>BabylonJS</title> <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no"> <script src="lib/babylon.2.3.js"></script> <style> html, body { overflow: hidden; width : 100%; height : 100%; margin : 0; padding : 0; } #gameCanvas { width : 100%; height : 100%; touch-action: none; } </style> </head> <body> <canvas id="gameCanvas"></canvas> <script> window.addEventListener('DOMContentLoaded', function(){ // DOM- canvas var canvas = document.getElementById('gameCanvas'); // 3D- var engine = new BABYLON.Engine(canvas, true); // createScene – , var createScene = function(){ // Scene var scene = new BABYLON.Scene(engine); // FreeCamera, (x:0, y:5, z:-10) var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene); // camera.setTarget(BABYLON.Vector3.Zero()); // , 0,1,0 – – , «» var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene); // — var box = new BABYLON.Mesh.CreateBox('box1', 2.0, scene); // , var texture = new BABYLON.StandardMaterial("texture1", scene); texture.bumpTexture = new BABYLON.Texture("asset/babylonjs.png", scene); box.material = texture; // . . var animationX = new BABYLON.Animation.CreateAndStartAnimation('boxrotate', box, 'rotation.x', 60, 360, 1, 10); var animationY = new BABYLON.Animation.CreateAndStartAnimation('boxrotate', box, 'rotation.y', 60, 360, 1, 10); // return scene; } // createScene var scene = createScene(); // engine.runRenderLoop(function(){ scene.render(); }); // canvas window.addEventListener('resize', function(){ engine.resize(); }); }); </script> </body> </html>
結論
BabylonJSを初めて知りました。 この3次元エンジンの機能を評価するには、 公式Webサイトをご覧ください 。 そこには多くのデモと追加資料があります。 そして、 ドキュメントを忘れないでください。 BabylonJSで独自の3次元ゲームを作成することに決めた場合、それが実現することを願っていますが、ドキュメントは間違いなく役立ちます。
Intel XDKでのHTML5ゲームの開発についても7つのパートで読んでください。
パート1 » パート2 » パート3 » パート4 » パート5 » パート6 » パート7