您的位置：首页 > 产品设计 > UI/UE

开源html3D/2D游戏引擎 Turbulenz USER GUIDE

2014-03-31 19:02 483 查看
Turbulenz开发团队宣布开源Turbulenz HTML5游戏引擎，该项目基于MIT许可证。目前项目托管在GitHub上，文档详细介绍了如何建立开发环境以及如何使用Turbulenz Engine API，欢迎查看。

近日，Turbulenz开发团队宣布开源Turbulenz HTML5游戏引擎，该项目基于MIT许可证。目前项目托管在GitHub，详细介绍了如何建立开发环境以及如何使用Turbulenz
Engine API（点击查看文档）。





Turbulenz允许所有构建基块的开发人员创建高质量和硬件加速的2D、3D游戏，该项目可适用于多个平台包括手机、平板及Web；提供给了易于安装的SDK，支持Windows、Mac OS X、GNU/Linux等系统。





未来的SDK版本基于MIT许可证下开源（早期的SDK版本使用的是半开放式的，如今已停用）。

Turbulenz包含所有可重用的游戏解决方案，包括，2D/3D图形，2D/3D效果、场景图形、用户输入、动画等等许多实用的应用。

Turbulenz在线文档：http://docs.turbulenz.com/

在他们的主页上试玩了几款游戏，感觉渲染的还不错值得一试。

首先安装SDK：http://docs.turbulenz.com/installing.html

这里要注意了因为sdk依赖python文件，因为一些路径设置的问题，所以最好把它和python都装在c盘。否则可能会有不能启动本地服务器的危险。

开始使用Turbulenz的 APIs

尝试Turbulenz API只需要一个文本编辑器和浏览器，如Mozilla Firefox谷歌浏览器。

开始通过创建一个新文件。该文件的HTML文件扩展名为.htm。

在开始之前我们要知道整个引擎其实是一个js库，所以我们要调用引擎就要在我们的目录下面附带库文件，也就是jslib这个文件夹。

在该文件中添加如下基本HTML标签：

<html>
<head>
<title>Turbulenz - Getting Started Guide - API Example</title>
<!-- Script includes go here -->
</head>
<body>
<canvas id="canvas" width="640px" height="480px"/>
<script>
/* Game code goes here */
</script>
</body>
</html>

代码中<canvas>标签，Turbulenz将认为这是游戏窗口，在这种情况下我们绘制了640x480像素的窗口。开始使用核心turbulenz engine和其图形库，改变画布元素的背景颜色：

<script src="jslib/debug.js"></script>
<script src="jslib/webgl/turbulenzengine.js"></script>
<script src="jslib/webgl/graphicsdevice.js"></script>

下一步我们初始化WebGL 引擎并且传递一个引用到<canvas>标签：

TurbulenzEngine = WebGLTurbulenzEngine.create({
canvas: document.getElementById("canvas")
});

TurbulenzEngine允许你创建各种低级模块的对象，比如图形设备，声音设备，网络设备。比如我们可以创建一个图形设备：

var graphicsDevice = TurbulenzEngine.createGraphicsDevice({});

有了它我们可以开始控制canvas内的颜色显示，我们先初始化一组颜色的列表：

var r = 1.0, g = 1.0, b = 0.0, a = 1.0;

var bgColor = [r, g, b, a];

在TurbulenzEngine里面颜色是有四个元素组成的，分别是RGB ALPHA，他们的值都在0-1之间。

接下来我们创建一个update()函数，作为我们整体游戏的循环。

function update() {
/* Update code goes here */
}

TurbulenzEngine.setInterval(update, 1000 / 60);

这样我们就建立了一个60帧的刷新函数。所有的刷新的效果都来自这里。

if (graphicsDevice.beginFrame())
{
graphicsDevice.clear(bgColor, 1.0);
/* Rendering code goes here */

graphicsDevice.endFrame();
}

在update里面再加入这段代码，每次进入update函数后会调用beginFrame函数，如果成功窗口就会被清除为黄色。

到目前为止你的代码看上去应该是这样的：

<html>
<head>
<title>Turbulenz - Getting Started Guide - API Example</title>
<!-- Script includes go here -->
<script src="jslib/debug.js"></script>
<script src="jslib/webgl/turbulenzengine.js"></script>
<script src="jslib/webgl/graphicsdevice.js"></script></head>
<body>
<canvas id="canvas" width="640px" height="480px"/>
<script>
/* Game code goes here */

TurbulenzEngine = WebGLTurbulenzEngine.create({
canvas: document.getElementById("canvas")
});
var graphicsDevice = TurbulenzEngine.createGraphicsDevice({});
var r = 1.0, g = 1.0, b = 0.0, a = 1.0;
var bgColor = [r, g, b, a];

function update() {
/* Update code goes here */

if (graphicsDevice.beginFrame())
{
graphicsDevice.clear(bgColor, 1.0);
/* Rendering code goes here */

graphicsDevice.endFrame();
}}

TurbulenzEngine.setInterval(update, 1000 / 60);
</script>
</body>
</html>


整个窗口是黄色的，看不到动画。让我么来做点变化：

b += 0.01;
bgColor[2] = b % 1; // Clamp color between 0-1

刷新后你会发现颜色循环改变。下面我们要开始绘制一些2D图形，首先我们要包含图形包。

<script src="jslib/draw2d.js"></script>

之前我们已经创建了图形对象GraphicsDevice，所以我们可以初始化2D模型：

var draw2D = Draw2D.create({
graphicsDevice: graphicsDevice
});

建立一些点的坐标，颜色列表我们可以绘制一个正方行：

var x1 = 50;
var y1 = 50;
var x2 = graphicsDevice.width - 50;
var y2 = graphicsDevice.height - 50;

var rectangle = [x1, y1, x2, y2];

var drawObject = {
color: [1.0, 0.0, 0.0, 1.0],
destinationRectangle: rectangle
};

这里注意：在我们的窗口里面左上角是原点坐标（0，0）

把下面这段代码加到beginFrame和endFrame之间。

draw2D.begin();
draw2D.draw(drawObject);
draw2D.end();

draw2D.draw函数是一个绘制2D图形的有效手段。但是还不够灵活可控，在我们的引擎里面用Draw2DSprite 函数绘制一个精灵会是更好的选择。

绘制精灵

var sprite = Draw2DSprite.create({
width: 100,
height: 100,
x: graphicsDevice.width / 2,
y: graphicsDevice.height / 2,
color: [1.0, 1.0, 1.0, 1.0],
rotation: Math.PI / 4
});

上面就是一个精灵的初始化操作，比较简单。下面调用方法将他绘制出来；

draw2D.drawSprite(sprite);

刷新后你会发现一个白色的棱形在屏幕的中央，精灵的属性可以通过属性或函数改变。
到目前位置你的代码看起来应该是这样的：
<html>
<head>
<title>Turbulenz - Getting Started Guide - API Example</title>
<!-- Script includes go here -->
<script src="jslib/debug.js"></script>
<script src="jslib/webgl/turbulenzengine.js"></script>
<script src="jslib/webgl/graphicsdevice.js"></script><script src="jslib/draw2d.js"></script></head>
<body>
<canvas id="canvas" width="640px" height="480px"/>
<script>
/* Game code goes here */

TurbulenzEngine = WebGLTurbulenzEngine.create({
canvas: document.getElementById("canvas")
});
var graphicsDevice = TurbulenzEngine.createGraphicsDevice({});
var draw2D = Draw2D.create({
graphicsDevice: graphicsDevice
});
var r = 1.0, g = 1.0, b = 0.0, a = 1.0;
var bgColor = [r, g, b, a];

var x1 = 50;
var y1 = 50;
var x2 = graphicsDevice.width - 50;
var y2 = graphicsDevice.height - 50;

var rectangle = [x1, y1, x2, y2];

var drawObject = {
color: [1.0, 0.0, 0.0, 1.0],
destinationRectangle: rectangle
};
var sprite = Draw2DSprite.create({
width: 100,
height: 100,
x: graphicsDevice.width / 2,
y: graphicsDevice.height / 2,
color: [1.0, 1.0, 1.0, 1.0],
rotation: Math.PI / 4
});
var PI2 = Math.PI * 2;
var rotateAngle = Math.PI / 32;

function update() {
/* Update code goes here */
b += 0.01;
bgColor[2] = b % 1; // Clamp color between 0-1
sprite.rotation += rotateAngle;
sprite.rotation %= PI2; //Wrap rotation at PI * 2

if (graphicsDevice.beginFrame())
{
graphicsDevice.clear(bgColor, 1.0);
/* Rendering code goes here */

draw2D.begin();
draw2D.draw(drawObject);
draw2D.drawSprite(sprite);
draw2D.end();

graphicsDevice.endFrame();
}
}

TurbulenzEngine.setInterval(update, 1000 / 60);
</script>
</body>
</html>


导入纹理

下一步我们的工作是个精灵插入图片，让他看上去更有趣的一些。这里我们要用到web服务器，因为我们要存一些文件到上面。我们可以利用python来开启一个简单的httpserver：
# For Python 2.7 use

python -m SimpleHTTPServer

这时候我们打开127.0.0.1:8000 or localhost:8000的地址的时候我们发现会定位到当前目录，打开之前写的html代码，发现运行正常，现在我们可以加载图片作为精灵的皮肤纹理了。创建纹理：

var texture = graphicsDevice.createTexture({
src: "assets/textures/particle_spark.png",
mipmaps: true,
onload: function (texture)
{
if (texture)
{
sprite.setTexture(texture);
sprite.setTextureRectangle([0, 0, texture.width, texture.height]);
}
}
});


这种方法可以创建png, jpg, dds or tga图片格式的纹理。

除了直接设置精灵的大小，我们还可以使用比例函数来整体缩放他的形状：

scale[0] = scale[1] = Math.cos(sprite.rotation) + 2;
sprite.setScale(scale);

现在你的代码应该是这样的：

<html>
<head>
<title>Turbulenz - Getting Started Guide - API Example</title>
<!-- Script includes go here -->
<script src="jslib/debug.js"></script>
<script src="jslib/webgl/turbulenzengine.js"></script>
<script src="jslib/webgl/graphicsdevice.js"></script><script src="jslib/draw2d.js"></script></head>
<body>
<canvas id="canvas" width="640px" height="480px"/>
<script>
/* Game code goes here */

TurbulenzEngine = WebGLTurbulenzEngine.create({
canvas: document.getElementById("canvas")
});
var graphicsDevice = TurbulenzEngine.createGraphicsDevice({});
var draw2D = Draw2D.create({
graphicsDevice: graphicsDevice
});
var r = 1.0, g = 1.0, b = 0.0, a = 1.0;
var bgColor = [r, g, b, a];

var x1 = 50;
var y1 = 50;
var x2 = graphicsDevice.width - 50;
var y2 = graphicsDevice.height - 50;

var rectangle = [x1, y1, x2, y2];

var drawObject = {
color: [1.0, 0.0, 0.0, 1.0],
destinationRectangle: rectangle
};
var sprite = Draw2DSprite.create({
width: 100,
height: 100,
x: graphicsDevice.width / 2,
y: graphicsDevice.height / 2,
color: [1.0, 1.0, 1.0, 1.0],
rotation: Math.PI / 4
});
var texture = graphicsDevice.createTexture({
src: "assets/textures/particle_spark.png",
mipmaps: true,
onload: function (texture)
{
if (texture)
{
sprite.setTexture(texture);
sprite.setTextureRectangle([0, 0, texture.width, texture.height]);
}
}
});
var PI2 = Math.PI * 2;
var rotateAngle = Math.PI / 32;

var scale = [1, 1];

function update() {
/* Update code goes here */
b += 0.01;
bgColor[2] = b % 1; // Clamp color between 0-1
sprite.rotation += rotateAngle;
sprite.rotation %= PI2; //Wrap rotation at PI * 2

scale[0] = scale[1] = Math.cos(sprite.rotation) + 2;
sprite.setScale(scale);
if (graphicsDevice.beginFrame())
{
graphicsDevice.clear(bgColor, 1.0);
/* Rendering code goes here */

draw2D.begin(); // Opaque
draw2D.draw(drawObject);
draw2D.end();

draw2D.begin('additive'); // Additive
draw2D.drawSprite(sprite);
draw2D.end();

graphicsDevice.endFrame();
}
}

TurbulenzEngine.setInterval(update, 1000 / 60);
</script>
</body>
</html>

到目前位置你应该掌握了使用低级APIs来绘制元素的方法。要想了解更多可以参考下面的资料：

http://docs.turbulenz.com/jslibrary_api/low_level_api.html#low-level-api

http://docs.turbulenz.com/jslibrary_api/physics2d_api.html#physics2d-api

http://docs.turbulenz.com/jslibrary_api/physics3d_api.html#phys3d-api

http://docs.turbulenz.com/jslibrary_api/high_level_api.html#high-level-api

http://docs.turbulenz.com/turbulenz_services/index.html#turbulenz-services-api

http://docs.turbulenz.com/protolib/index.html#protolib-api

入门翻译到这里为止，看起来还蛮简单的，不是么。接下来会翻译一些实战教程和工具的使用教程，到底这个坑会有多深呢？让我先来一探究竟！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航