七巧板平台html5游戏开发之初识物理引擎

七巧板平台是用于Web App、中轻度HTML5游戏及富媒体类应用开发，集开发、运营于一体的平台。它基于HTML5技术开发，具有进入门槛极低、开发极简单、跨平台的优势，适合广大希望从事上述应用开发的初学者及中、高级开发人员使用。

在本系列文章中我们主要介绍使用七巧板平台开发游戏，至于Web App及其它类型应用开发另有文章介绍。由于本人也刚开始接触游戏开发，文章中难免会有错误之处，还望各位不吝指教。

说到游戏，相信在浏览这篇文章的朋友都玩过。对于没有接触过游戏开发的朋友来说，有时候感觉玩游戏都好复杂，开发游戏那更是好高大上，不懂！没错，在七巧板平台横空出世之前，游戏开发是很复杂，都是专业人士做的事情。现在有了七巧板平台，通过丰富的组件、可视化的编辑、引导式编程及事件化处理机制，可以这样说凡是初中毕业的朋友，只需了解很少一部分专业知识就可以开发一些简单的游戏自娱自乐了，再通过自身努力，就能实现一些更好玩甚至挣钱的游戏了！妈妈再也不用担心你玩游戏了，你现在开始写游戏了！

游戏的种类繁多，但是从游戏中的基本元素分析来说，不外乎几个方面：

1.呈现，即游戏中的人物、道具、动画特效、音效、音乐、震动等带给玩家的视觉、听觉甚至是触觉表现的元素，人物、道具在游戏中也是通过图片和动画来表现的。

2.交互，即玩家与游戏中元素、游戏中元素之间的互动。

3.逻辑，即游戏按照什么样的逻辑发展。

如果上述三部分工作，都要由开发者来从头开始编码的话，那做一个游戏就太复杂了。实际上一个成熟的游戏开发团队，在开发游戏的过程中都会有一些处理以上工作的公共库，来处理一些游戏开发中一些共同的特性，比如，如何把一幅图画到屏幕上去，格斗中如何进行碰撞检测，这些特性几乎在所有游戏开发过程中都会用到。以上三部分工作中第一部分工作主要图形引擎来完成，开发者不需要再了解具体的细节，例如，要在屏幕上显示一幅动画，直接调用图形引擎的接口就行了，第二部分工作主要由物理引擎来完成，例如在一个格斗游戏中一个角色发射了一颗子弹并射中了另外一个角色，这其中的碰撞检测交由物理引擎的接口来处理就可以了，第三部分逻辑，由于每个游戏的逻辑都不一样，所以，逻辑这部分编码，就需要开发人员来编码了。

在七巧板平台中集成了图形引擎和物理引擎，更进一步，七巧板平台提供了丰富的物理引擎组件、图形引擎组件及可视化编辑工具，开发者要做的大部分场景编辑工作，都可以通过拖动和设置属性来完成，剩下的工作只需要关心游戏的逻辑就行了。

下面我们就来介绍七巧板平台的物理引擎，先通过一些例子来了解物理引擎的作用和用法！

打开支持HTML5的浏览器（推荐google的chrome浏览器），把浏览器窗口最大化，在地址栏输入七巧板平台的网址，即可打开七巧板开发平台。没错，七巧板平台本身也是基于HTML5技术开发的，打开即用，不用再安装集成开发环境和各类插件，简单吧！

在浏览器页面的上方是菜单栏和工具栏（不要把浏览器的菜单栏和工具栏和七巧板平台的混淆J），左侧是组件栏，中间是场景编辑和预览区，右侧是属性和树形视图栏，最下方是预览栏。如下图：

在中间场景编辑区中，有一个篮球和一块儿草坪，点击一下下方预览栏中的“预览”按钮，可以看到篮球从场景上方掉了下来，并砸在草坪上弹了几次不动了。此场景是模拟现实（物理）世界中，静止篮球从空中掉到地面的过程。根据初中学习过的牛顿运动定律来分析此过程：

1.根据牛顿运动第一定律，如果没有外力作用于篮球，篮球应该静止在场景中。

2.根据万有引力定律，地球对篮球产生引力，也就是重力，根据牛顿运动第二定律，重力作用于篮球，使篮球产生加速度，加速度方向与重力方向相同，向下运动，并掉落到地面。空气浮力在此场景中被理想化掉了J.

3. 根据胡克定律，篮球撞击地面产生形变并对地面产生弹力，同时根据牛顿运动第三定律，地面对篮球产生同样大小的反作用力，此反作用力克服重力，使篮球向上运动，重复2、3步，由于弹力越来越小，最后篮球会静止下来。

这个原理都搞不懂的同学请自觉翻出初中物理书补习，其实我也不懂，现搜现卖的!

下面我们来复现此场景，并研究在七巧板开发平台中“物理引擎”如何模拟现实（物理）世界的物理定律，以便在以后更好的理解和使用“物理引擎”。点击“退出预览”，进入编辑状态，选中篮球按右键菜单把它从场景中删除，再删除草坪，注意不要把场景删除了！在左侧组件栏中选择“物理引擎”页，滚动到物理引擎组件的最下方，可以看到有两个组件“球”和“地面”，先把“地面”拖动到场景的下方，再把篮球拖到场景的上方，并调整“篮球”的外框到符合篮球的大小，如下图：

按“预览”按钮，就可以看到跟开始同样的效果。按“退出预览”按钮，进入编辑状态，在场景编辑器中的空白处单击，选中“场景”组件，右侧属性栏的标题显示为“当前选中场景”，在“属性页”的最下方选中“场景控件的特有属性”，如下图：

可以看到第一项“启用物理引擎”被勾选了，点击此项，把勾选去掉，预览，可以看到篮球静止在屏幕上没有掉落，再勾选此项后预览，篮球又可以掉落，这说明在“场景”组件中“启用物理引擎”就可以对篮球施以重力，使篮球掉落！在此属性页中还可以看到两个编辑框“X方向重力”和“Y方向重力”，X方向重力为0，Y方向重力为10。试着按照下表修改X方向重力和Y方向重力组合，并分别预览效果：

X方向重力	Y方向重力
0	0
0	1
0	-1
1	0
1	1
1	-1
-1	0
-1	1
-1	-1

根据所选的参数不同，预览的效果不同，可以得出结论：

1.力有方向性，也就是说力是个矢量，物体运动方向与物体所受合力的方向一致。

在真实（物理）世界的三维坐标系中，矢量可以分解为X方向、Y方向和Z方向三个分量。但是七巧板开发平台只能提供二维空间，因此在七巧板开发平台，力就简化为X和Y方向两个分量，由预览结果可以得出场景力坐标系如下图所示：

2.外力等于零时，物体运动状态不会产生变化，也就是牛顿第一定律所描述的。外力越大，作用于同一物体，产生的加速度越大，也就是牛顿第二定律描述的。

了解完场景的“物理引擎”的重力系统后，我们再研究一下“篮球”组件的属性。退出预览状态，把场景的X、Y方向重力分别还原为0，10。选中“篮球”组件，在“属性页”的最下方选中“物理引擎刚体属性”，如下图：

可以看到第一项“密度”输入框，把密度按照0、1、10、100设置，并分别预览。

在现实（物理）世界中，质量＝密度X体积，在七巧板开发平台的二维世界中，质量＝密度x面积。当“篮球”的“密度”设为0时，可以看到“篮球”静止在屏幕中间，没有任何反应，但是“等等”这个世界上只有光子没有质量啊！？呵呵，我们只是对于现实世界的模拟，而不是精确复现！当密度设为1、10、100时，篮球以同样的速度落下，这个伽利略的“比萨斜塔实验”已经早就证实了，请同学们自行证明J。从篮球的例子可以得到以下结论，有了物理引擎的“重力”加上篮球的质量也就是密度，使得篮球从上方掉了下来。

第四项可以看到“弹力系数”输入框，把弹力系数按照0、0.5、1设置，并分别预览。可以看到，当弹力系数设为0时，篮球直接落到地面就不动了，设为0.5时，篮球落到地面弹跳几次就静止了，而设为1时，篮球停不下来了，一直在反复的弹跳!

我们再研究一下“地面”的属性，选中“地面”组件，在“属性页”的最下方选中“物理引擎刚体属性”，等等为什么又是“物理引擎刚体属性”呢？这个问题我们先放一放，到后面再深究。可以看到地面的除了“密度”项为0外，其他项的数值与“篮球”的一样，所以地面在预览时不会掉落！

到此，这个场景分析告一段落，我们可以得出以下结论：

1.物理引擎是模拟现实（物理）世界物体物理运动规律的程序，所以叫做物理引擎。

2.物理引擎要起作用，必须在场景属性中使“启用物理引擎”勾选。

3.物体的密度设为0时，物体保持静止状态。

4.物体的弹力系数设为1时，物体发生碰撞时不损失能量。

在下篇文章中我们接着介绍物理引擎！

七巧板平台html5游戏开发之初识物理引擎相关推荐

CutJS – 用于 HTML5 游戏开发的 2D 渲染引擎
CutJS 是轻量级的,快速的,基于 Canvas 开发的 HTML5 2D 渲染引擎,可以用于游戏开发.它是开源的,跨平台的,与现代的浏览器和移动设备兼容.CutJS 提供了一个类似 DOM 树的 ...
unity3D游戏开发十一之物理引擎
Unity内置了NVIDIA的Physx物理引擎,Physx是目前使用最为广泛的物理引擎,被很多游戏大作所采用,开发者可以通过物理引擎高效.逼真地模拟刚体碰撞.车辆驾驶.布料.重力等物理效果,使游戏画 ...
【Canvas】HTML5游戏开发的基本流程+P2.js物理引擎实战开发
<HTML5游戏开发的基本流程> * 1. HTML5的简述 * 2. HTML5游戏开发所需的环境与工具 * 2.1. 开发环境 * 2.1.1. 浏览器 * 2.1.2. 开发语言 * ...
HTML5 游戏开发快速提升
小册介绍 HTML5 是构建 Web 内容的一种语言描述方式,是最新的 HTML 标准,是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一.HTML5 是跨平台的,被设计为在不同类型 ...
HTML5游戏开发高级教程 | Lynda教程中文字幕
HTML5游戏开发高级教程 | Lynda教程中文字幕 Advanced HTML5 Game Development 课程ID: 597988 时长: 2.3小时所属类别:Html 全部游戏开发 ...
HTML5游戏开发进阶指南（亚马逊5星畅销书，教你用HTML5和JavaScript构建游戏！）
HTML5游戏开发进阶指南(亚马逊5星畅销书,教你用HTML5和JavaScript构建游戏!) [印]香卡(Shankar,A.R.) 著谢光磊译 ISBN 978-7-121-21226-0 ...
业界技术大牛答：html5游戏开发前景如何？
编者按:作为2014年游戏业界现象级事件之一,<围住神经猫>的蹿红也为Egret(白鹭)这款游戏引擎博来了关注.Egret(白鹭)是一款可以一次开发,分别部署在Android.IOS和WP ...
html5游戏开发--动静结合(二)-用地图块拼成大地图初探lufylegend
一.前言本次教程将向大家讲解如何用html5将小地图块拼成大地图,以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏. 首先让我们来了解了解如何用html5实现动画,毕竟& ...
HTML5游戏开发实战
<HTML5游戏开发实战> 基本信息原书名:HTML5 Games Development by Example: Beginner's Guide 作者: (美)Makzan 译者: ...

七巧板平台html5游戏开发之初识物理引擎

七巧板平台html5游戏开发之初识物理引擎相关推荐

最新文章

热门文章