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

最新推荐文章于 2024-08-13 08:15:25 发布

damon-lin

最新推荐文章于 2024-08-13 08:15:25 发布

阅读量2.6k

点赞数 1

分类专栏：游戏引擎文章标签： turbulenz 游戏引擎 html 游戏图形

游戏引擎专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

入门翻译到这里为止，看起来还蛮简单的，不是么。接下来会翻译一些实战教程和工具的使用教程，到底这个坑会有多深呢？让我先来一探究竟！