Game development

Building up a basic demo with Babylon.js

この翻訳は不完全です。英語から この記事を翻訳 してください。

Babylon.jsは開発者に使われている最も有名な3Dゲームエンジンです。他のどんな3Dと同様に、より迅速に共通の3D機能を実装するのを助けるプラグイン機能を提供します。この記事ではBabylon.jsを使った基礎を通じて開発環境の構築、必要なHTML構造、JavaScriptの書き方を提供します。

はじめに、簡単なデモを作ることに挑戦します。 — 立方体をレンダリングさせます。もしThree.js、PlayCanvas、A-Frame(もしくは同様の他の3Dライブラリー)と一緒に基本的なデモシリーズをすでに動かしていたら、カメラ、光源、オブジェクトとといった同様のコンセプトが動くことをBabylon.jsで気づくかも知れません。

環境構築

Babylon.jsの開発を始めるにあたって、そんなに多くのものを必要としません。以下によってすぐに始めるべきです。:

  • 最新のFirefoxやChromeと言った十分なWebGLのサポートのあるモダンブラウザを使っていることを確かめて下さい。
  • 作業用のディレクトリを作成して下さい。
  • ディレクトリに最新のBabylon.jsエンジンをコピーして保存して下さい。
  • Babylon.jsドキュメントを別のタブに開いて下さい。 — 参照するのに役に立ちます。

HTML構造

ここに使うHTMLの構造を示します: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>MDN Games: Babylon.js demo</title>
    <style>
        html,body,canvas { margin: 0; padding: 0; width: 100%; height: 100%; font-size: 0; }
    </style>
</head>
<body>
<script src="babylon.js"></script>
<canvas id="render-canvas"></canvas>
<script>
    var canvas = document.getElementById("render-canvas");
    /* all our JavaScript code goes here */
</script>
</body>
</html>

ここには文書の <title> (タイトル) や、Babylon.js がその内容を描画するための<canvas> 要素の幅や高さが利用可能なビューポート領域全体を占めるようにする CSS など、文書の基本的な情報が含まれています。 初めの<script>要素はBabylon.jsに含みます。; サンプルコードを次に書いていきます。 これらはすでに含まれていて可変な一つの助けになります。そしてそれは、<canvas>要素の参照を保存していくものになります。.

読み続ける前にindex.html.として、作業ディレクトリに新しいテキストファイルとしてこのコードをコピーして下さい。

Babylon.jsエンジンの初期化

はじめに、ゲームの開発を始める前にBabylon.jsエンジンのインスタンスを作らなければなりません。(レンダーするための<canvas>要素を省きます )  次の<script>要素のボタンのコードを次に付け加えます:

var engine = new BABYLON.Engine(canvas);

BABYLONグローバルオブジェクトはエンジンにおいてすべてのBabylon.js機能を可能にするものを含みます。

sceneの作成

sceneはゲームのコンテンツを表示する場所です。デモの新しいオブジェクトを作成する一方でscreenでそれらが見えるようにするためにそこにすべてをsceneに付け加えます。ちょうど以下のようなコードに従って次の行を加えることでsceneを作ってみましょう。:

var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0.8, 0.8, 0.8);

 

このようにsceneは作られて、2番目の行を書いてバックグラウンドカラーをグレーにします。

レンダリングのループを作る

sceneが見えるようにするためにレンダーをしなければなりません。<script>要素で終わるこれらの要素を加えてちょうど</script>の前で閉じます。

var renderLoop = function () {
    scene.render();
};
engine.runRenderLoop(renderLoop);

エンジンのrunRenderLoop()メソッドが使われるとrenderLoop()関数がフレームの中で繰り返し実行されます。ループは止めろという命令があるまで永久に繰り返しレンダーが行われます。

cameraの作成

セットアップコードは標準的なsceneの構成要素であるcameraやlightやオブジェクトを実行するためのものが必要な場所です。cameraをはじめましょう。— 以下の行をあなたのコードに加えましょうこの行はsceneを作成したり、clearColor.を定義するための行です。

var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 0, -10), scene);

 

Babylon.jsにはたくさんのcameraを可能にするものがあります。FreeCameraは最も基本的で普遍的なものの1つです。初期化するために3つのパラメータを通す必要があります。:どんな名前で使いたいか、3Dで示したい座標、加えたいシーン。

Note: You probably noticed the BABYLON.Vector3() method in use here — this defines a 3D position on the scene. Babylon.js is bundled with a complete math library for handling vectors, colors, matrices etc.

光あれ

Babylon.jsには様々なlightソースがあります。最も基本的なものの1つにPointLightがあり、それはフラッシュライトのような働きをします。 — 与えられた方向からスポットライトを照らします。カメラの定義の下に次の行を加えましょう。

var light = new BABYLON.PointLight("light", new BABYLON.Vector3(10, 10, 0), scene);

パラメーターはカメラの定義に非常によく似ています。:光の名前、3D空間の位置、ライトを与えたいscene。

幾何構造

今、sceneが適当で3Dを形作ることができて、レンダリングします。Babylon.jsのさらなる開発のスピードアップのために単一文のコードで即座に形作ることのできる前定義の原始的なまとまりを提供する必要があります。

Now the scene is properly rendering we can start adding 3D shapes to it. To speed up development Babylon.js provides a bunch of predefined primitives that you can use to create shapes instantly in a single line of code. There are cubes, spheres, cylinders and more complicated shapes available. Let's start by defining the geometry for a box shape — add the following new code below your previous additions:

var box = BABYLON.Mesh.CreateBox("box", 2, scene);

A mesh is a way the engine creates geometric shapes, so material can be easily applied to them later on. In this case we're creating a box using the Mesh.CreateBox method with it's own name, a size of 2, and a declaration of which scene we want it added to.

Note: The size or position values (e.g. for the box size) are unitless, and can basically be anything you deem suitable for your scene — milimeters, meters, feet, or miles — it's up to you.

If you save and refresh now, your object will look like a square, because it's facing the camera. The good thing about objects is that we can move them on the scene however we want, for example rotating and scaling. Let's apply a little bit of rotation to the box, so we can see more than one face — again, add these lines below the previous one:

box.rotation.x = -0.2;
box.rotation.y = -0.4;

The box looks black at the moment, because we haven't defined any material to apply to its faces. Let's deal with that next.

Material

Material is that thing covering the object — the colors or texture on its surface. In our case we will use a simple blue color to paint our box. There are many types of materials that can be used, but for now the standard one should be enough for us. Add these lines below the previous ones:

var boxMaterial = new BABYLON.StandardMaterial("material", scene);
boxMaterial.emissiveColor = new BABYLON.Color3(0, 0.58, 0.86);
box.material = boxMaterial;

The StandardMaterial takes two parameters: a name, and the scene you want to add it to. The second line defines an emissiveColor — the one that will be visible for us. We can use the built-in Color3 function to define it. The third line assigns the newly created material to our box.

Congratulations, you've created your first object in a 3D environment using Babylon.js! It was easier than you thought, right? Here's how it should look:

Blue Babylon.js 3D box on the gray background.

And here's the code we have created so far:

You can also check it out on GitHub.

More shapes

We have a box on the scene already; now let's try adding more shapes.

Torus

Let's try adding a torus — add the following lines below the previous code:

var torus = BABYLON.Mesh.CreateTorus("torus", 2, 0.5, 15, scene);
torus.position.x = -5;
torus.rotation.x = 1.5;

This will create a torus and add it to the scene; the parameters are: name, diameter, thickness, tessellation (number of segments) and the scene to add it to. We also position it a bit to the left and rotate it on the x axis so it can be seen better. Now let's add a material:

var torusMaterial = new BABYLON.StandardMaterial("material", scene);
torusMaterial.emissiveColor = new BABYLON.Color3(0.4, 0.4, 0.4);
torus.material = torusMaterial;

It looks similar to the box element — we're creating the standard material, giving it a grayish color and assigning it to the torus.

Cylinder

Creating a cylinder and its material is done in almost exacly the same way as we did for the torus. Add the following code, again at the bottom of your script:

var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 2, 2, 2, 12, 1, scene);
cylinder.position.x = 5;
cylinder.rotation.x = -0.2;
var cylinderMaterial = new BABYLON.StandardMaterial("material", scene);
cylinderMaterial.emissiveColor = new BABYLON.Color3(1, 0.58, 0);
cylinder.material = cylinderMaterial;

The cylinder parameters are: name, height, diameter at the top, diameter at the bottom, tessellation, height subdivisions and the scene to add it to. It is then positioned to the right of the cube, rotated a bit so its 3D shape can be seen, and given a yellow material.

Here's how the scene should look right now:

Light gray torus, blue box and yellow cylinder created with Babylon.js on the gray background.

This works, but it is a bit boring. In a game something is usually happening — we can see animations and such — so let's try to breathe a little life into those shapes by animating them.

Animation

We already used position and rotation to adjust the position of the shapes; we could also scale them. To show actual animation, we need to make changes to these values inside the rendering loop at the end of our code, so they are updated on every frame. Define a helper variable — t — that we will use for animations, just before the renderLoop, and decrement it on every frame inside the loop, like this:

var t = 0;
var renderLoop = function () {
    scene.render();
    t -= 0.01;
    // animation code goes here
};
engine.runRenderLoop(renderLoop);

The t variable will be incremented on every rendered frame.

Rotation

Applying rotation is as easy as adding this line at the end of the renderLoop function:

box.rotation.y = t*2;

It will rotate the box along the y axis.

Scaling

Add this line below the previous one to scale the torus:

torus.scaling.z = Math.abs(Math.sin(t*2))+0.5;

There's a little bit of adjustment made to make the animation look and feel nice. You can experiment with the values and see how it affects the animation.

Moving

By changing the position of the cylinder directly we can move it on the scene — add this line below the previous one:

cylinder.position.y = Math.sin(t*3);

The cylinder will float up and down on the y axis thanks to the Math.sin() function.

Conclusion

Here's the final code listing, along with a viewable live example:

You can also see it on GitHub and fork the repository if you want to play with it yourself locally. Now you know the basics of Babylon.js engine; happy experimentation!

See also

ドキュメントのタグと貢献者

このページの貢献者: xianheiba
最終更新者: xianheiba,