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

最新推荐文章于 2024-04-20 19:34:06 发布
最新推荐文章于 2024-04-20 19:34:06 发布
阅读量2.6k 收藏 1
点赞数 1
分类专栏： 游戏引擎 文章标签： turbulenz 游戏引擎 html 游戏 图形

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

 

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



 

damon-lin
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
10个免费的游戏开发引擎
cherrychen0327的博客
09-11 4万+
游戏开发现在是很火的职业。在开发游戏时，你需要使用一些免费的游戏引擎。它可以简化开发过程，使你可以专注于核心游戏的执行，而不需要做一些无用的工作。以下和大家分享10个免费的游戏开发引擎，它们是目前最流行的，也是被国外的游戏开发者普遍使用的。也许我们国内的程序员不一定对它们都很熟悉，或是有机会用到它们，但尽管如此，希望这些资料仍然会对大家学习游戏开发有帮助。1. Unity Unity 被认为是业...
HTML5游戏引擎深度测评
优雅的程序员
04-15 2403
最近看到网上一篇文章，标题叫做《2016年 最火的 15 款 HTML5 游戏引擎》。目前针对HTML5游戏的解决方案已经非常多，但谁好谁差却没有对比性资料。特意花了几天时间，针对文章中出现的12款免费开源引擎做了一次相对完整的对比分析，希望能对大家有所帮助。针对技术类产品对比，通常有多个维度进行对比，不仅仅是技术层面，还有许多非技术层面的内容会影响我们的使用结果。本文从如下几个维度进行多重对比。...
Turbulenz:HTML5 2D和3D游戏引擎开源
weixin_34007886的博客
05-03 130
近日，Turbulenz开发团队宣布开源Turbulenz HTML5游戏引擎，该项目基于MIT许可证。目前项目托管在GitHub，详细介绍了如何建立开发环境以及如何使用Turbulenz Engine API（点击查看文档）。 Turbulenz允许所有构建基块的开发人员创建高质量和硬件加速的2D、3D游戏，该项目可适用于多个平台包括手机、平板及Web；提供给了...
【HTML——3d粒子特效（效果+代码）】
最新发布
peixiancccc的博客
04-20 858
资料过多，篇幅有限，需要文中全部资料可以点击这里免费获取前端面试资料PDF完整版！自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。这些内容对你有帮助，可以扫码获取！！（备注：前端）**[外链图片转存中…(img-TgMaPxPN-1713612770020)][外链图片转存中…(img-C0mhGkck-1713612770020)][外链图片转存中…(img-M2DJ7tTY-1713612770020)]资料过多，篇幅有限，需要文中全部资料可以点击这里免费获取。
❤️创意网页：使用CSS和HTML创建令人惊叹的3D立方体
VLOKL的博客
07-17 673
❤️创意网页：使用CSS和HTML创建令人惊叹的3D立方体
25 个超棒的 HTML5 & JavaScript 游戏引擎开发库
weixin_33858249的博客
03-11 588
　　就像在汽车中，引擎完成主要的工作，使汽车看起来不可思议。游戏引擎同理，游戏开发者完成细节的工作，使游戏看起来真实、吸引人眼球。游戏引擎负责其余的事情。早期，游戏开发者通常从草图做起，花费高昂，且不容易获利。为了让游戏开发更加简单容易，主要的开发者开始授权他们的基本游戏引擎，如 Unreal。而且，随着手机和平板游戏的出现，所需预算比以前更少，对 JAVASCRIPT 和HTML5 游戏引擎的需...
Java 3D物理引擎和库
01-27
ODE4J ode4j is a Java port of . ODE is an open source, high performance library for simulating rigid body dynamics. It is fully featured, stable, mature and platform independent with an easy to use C/...
turbulenz_local:使用Turbulenz Engine开发游戏的本地开发服务器
05-13
Web服务器允许开发人员脱机工作或快速迭代他们的游戏开发，同时仍在和网络托管的开发上提供Turbulenz服务的所有API和功能。 除了提供Turbulenz Services API之外，服务器还提供一些功能，例如游戏http请求指标，...
turbulenz_tools:使用Turbulenz引擎进行开发的Python工具
05-13
这些工具主要与基于HTML5的游戏的资产和代码生成以及优化有关。历史最新版本是1.0.7，可以在这里找到 完整的更改历史记录可以在找到安装/设置建议使用Turbulenz Python工具的路径是从Turbulenz Hub安装Turbulenz ...
test-game:使用Turbulenz的简单测试游戏
05-18
样本Turbulenz游戏设置Turbulenz环境请按照说明进行操作并确保启动本地服务器。 当本地服务器启动时，导航到http://localhost:8070/并创建一个新的游戏目录。 创建游戏时可以在哪里指定路径都没关系。 创建一个示例...
HTML5——美好却不现实的开发之梦？
01-31
GamesIndustryInternational最近与一些手机游戏开发者就此问题展开了详细的讨论，Turbulenz的James Austi也参加了此次讨论。作为欧洲主要的社交/休闲游戏开发者，我们认为有必要在此分享GameDuell在开发一些HTML5...
创建一个HTML5的3D引擎
03-22
NULL 博文链接：https://wjlgryx.iteye.com/blog/972458
html中图片旋转_HTML之3D旋转图片
weixin_39531604的博客
12-01 3271
你还在愁女朋友的生日礼物吗，来啦，3D旋转图：运用图片：111.jpg，222.jpg 111.jpg：222.jpg：HTML代码：<html> <head> <meta charset="utf-8" /> <title&gt...
java图片跟随鼠标旋转_JS实现跟随鼠标立体翻转图片的方法
weixin_33158453的博客
03-02 299
/p>"http://www.w3.org/TR/html4/strict.dtd">Wanna tell her - interactive DHTMLhtml {overflow: hidden;}body {position: absolute;margin: 0px;padding: 0px;background: #fff;width: 100%;height: 100%;}...
html5 3d原理,使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
weixin_36399948的博客
06-02 556
今天读了篇关于如何使用css3创建3d四面体的文章，觉的相当不错，所以拿出来和大家分享一下。首先要和大家分享的是，如何使用div+css创建三角形。在这里我先把相关代码粘贴出来，然后再为大家讲解原理。html：复制代码代码如下:css：复制代码代码如下:#pyramid {position: relative;margin: 100px auto;height: 500px;width: 100p...
基于浏览器的3D网页游戏JavaScript 3D游戏引擎介绍
欧特GO
03-21 2557
  创建基于浏览器的3D游戏一般用JavaScript+HTML5+WebGL技术，所有JavaScript 3D游戏引擎是一个话题。基于浏览器的游戏最棒的地方是不依赖于系统，它们能在iOS、Android、Windows或其他任何平台上运行。 　　有很多的JavaScript能够用于创建基于浏览器、使用HTML5和WebGL的3D游戏。然而选择一个合适的游戏引擎是有时能帮你完成项目或突破项目瓶颈...
html如何实现立体效果,CSS3实现3D立体效果
weixin_30224231的博客
06-03 2494
CSS3实现3D效果 1. 涉及到的几个CSS3属性 首先大家需要了解transform属性，主要有平移(translate),缩放(scale),拉伸(skew),旋转(rotate)。 这里涉及到3d转换的主要介绍旋转。 下面通过一组rotate效果直观理解rotateX,rotateY,rotateZ区别。 代码： .box{ width: 200px;height: 200px; back...
主流HTML5游戏框架的分析和对比（Construct2、ImpactJS、CreateJS、Cocos2d-html5……）
热门推荐
心砚THU的专栏
09-27 2万+
本文主要选取了Construct2、ImactJS、LimeJS、GameMaker、CreateJS、lycheeJS、Crafty、three.js、melonJS、Turbulenz、Quintus、Cocos2d-html5等进行了简要介绍和对比，主要是根据网上的资料整理而成。
十个3D 游戏引擎，html h5 js
你的才华撑不起野心时，静下心学习；你的能力驾驭不了目标时，沉下心努力
01-13 1万+
由于很多人都在用JavaScript、HTML5和WebGL技术创建基于浏览器的3D游戏，所有JavaScript 3D游戏引擎是一个人们主题。基于浏览器的游戏最棒的地方是平台独立，它们能在iOS、Android、Windows或其他任何平台上运行。 　　有很多的JavaScript能够用于创建基于浏览器、使用HTML5和WebGL的3D游戏。然后，选择一个合适的游戏引擎是一个不小的挑战，它有...
html游戏开发pixi.js,Pixi.js 超快 HTML5 的 2D webGL Canvas 游戏动画渲染引擎 - 文章教程...
weixin_36281932的博客
05-31 421
Pixi.js 是一款超快的开源 HTML5 2D 渲染引擎，使用带有 Canvas 回调功能的 WebGL。作为 JavaScript 的 2D 渲染器，Pixi 的目标是，可以提供一个快速且轻量级的 2D 库，并能兼容所有设备。此外让开发者无需了解 WebGL，就可以感受到硬件加速的力量。Pixi.js作为一款开源的HTML5 2D渲染引擎，旨在为开发者提供一个快速且轻量级的2D库，并能兼容所...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值