物理引擎的赛车撞人游戏（一）画地图 -- graphics

有接近三个月的时间没有写过博客了。

最近用cocoscreator做了一个开车撞人的游戏，本来想着地图用一块块的小碰撞体拼起来，拼了之后发现好卡，而且也不平滑。就想到了之前做的一个珍珠奶茶的游戏，用手画线变为刚体，就想着用公式+graphics去画这个地图。然后背景图用一张小图，渲染方式选择平铺Tiled，加上mask组件，同样用graphics去画这个遮罩曲线。

首先做了一个简陋的小车，车身加上两个轮子，用wheelJoint组件，勾好分组先让它跑起来。关节组件creator的文档真的感人，太少了，下一遍文章我再写我自己的心得。这里先略过。

车跑起来了，就画个地图吧。

一：画线。代码如下：

let self = this;

self.gra = new cc.Node(); //创建一个新节点

self.gra.name = "mapGround"; //子弹碰撞使用

self.gra.group = "ground"; //设置分组

self.gra.addComponent(cc.Graphics); //添加组件

self.groundParent.addChild(self.gra); // 添加到场景节点下

self.path = self.gra.getComponent(cc.Graphics);

self.path.lineJoin = 0; //设置连接部分属性（线段，圆弧，曲线） 0 1 2

self.path.lineWidth = 5; //设置画线宽度

self.path.strokeColor = cc.Color.WHITE; //设置填充线段的颜色

self.path.fillColor = cc.Color.BLACK; // 设置填充区域颜色，这个属性只在路径点是闭环的时候有用。

设置了graphics的基本属性后，首先调用moveTo方法，这个方法相当于定义了划线的起点，相对于锚点的一个坐标。

gra.moveTo(100,100);

下一步划线，有这些方法:

lineTo 绘制直线路径
bezierCurveTo 绘制三次贝赛尔曲线路径
quadraticCurveTo 绘制二次贝赛尔曲线路径
arc 绘制圆弧路径。
ellipse 绘制椭圆路径。
circle 绘制圆形路径。
rect 绘制矩形路径。
roundRect 绘制圆角矩形路径。
fillRect 绘制填充矩形。

我使用的是lineTo方法，当要绘制曲线的时候，用三角函数曲线，每50个像素取一个点，然后lineTo过去。定义不同的波峰，周期以及初相，得到一个三角函数，给定一个曲线起始点和曲线结束点的X坐标，取点可以根据自己的需求改变，越小越接近曲线，相应的也会增加循环次数，50个像素取点连接的就很平滑了。

gra.lineTo(200,100);

for(let j = 200;j<=1000;j+=50){

var x = j - 200; //相对于曲线开始时的X坐标。

/*定义一个波峰500，周期1600，初相PI/2，y偏移量为400 的三角函数 y = 500sin(2PI/T * x + PI/2) - 400;

偏移量基于之前的划线决定，刚才划线到了200,100，这个函数的初相为PI/2，也就是不加偏移量的时候x=0的时候siny= 500，而连续上一段，应当为100，故偏移量 = -波峰 + y = -500 + 100 = -400;*/

var sinY = 500*Math.sin(2*Math.PI/1600*x + Math.PI/2) - 400;

this.path.lineTo(j,sinY); //划线

self._posArrar.push(cc.v2(j,sinY)); //划线点存取。

}

this.path.stroke(); //填充线段

现在就画好了一个线段，后续的划线也就是多做点数据。注意的一点是在线段连接的时候尽量是直线连接曲线的地方尽量为 PI/2或者PI/2 *3，不然会显得很突兀。曲线如果不用三角函数也可以用贝塞尔曲线去画。

画好线段后，也要加上地面上的石头才显得真实，我使用mask+graphics渲染图片纹理。新建一个带有mask的节点，子节点加入背景图片，图片渲染模式选择tiled，这个模式会将图片像瓦片一样铺开。

上边绘制地图的时候保存的节点这时候就可以用来画mask的遮罩。mask组件有一个隐藏的属性，_graphics，定义于cc.Mask下的构造函数，api下没有，可以在源码下全局搜索看到。跟graphics组件是一个东西。也可以用lineTo,moveTo 这些方法。作用就是画线，可以自由的遮挡我们想要的形状。需要注意的就是要moveTo,lineTo的这些点要搞一个闭环，起点等于终点，然后调用一下fill，就可以得到我们想要的遮罩了。一开始mask的size设置为 0,0。

let maskPath = self.groundFrameMask.getComponent(cc.Mask)._graphics;

maskPath.lineJoin = 0;

maskPath.lineWidth = 1;

maskPath.strokeColor = cc.Color.BLACK;

maskPath.fillColor = cc.Color.BLACK;

maskPath.clear();

maskPath.moveTo(0,0);

maskPath.lineTo(data[data.length - 1][0],0); //lineTo 数据点省略，可多次lineTo。

maskPath.lineTo(0,0);

maskPath.lineTo(data[1][0],data[1][1] + graMaskDistance);

maskPath.stroke(); //划线

maskPath.fill(); //填充

导入你想要的数据，就可以了。

物理引擎的赛车撞人游戏（一）画地图 -- graphics相关推荐

【Unity3d学习】使用物理引擎——打飞碟游戏的物理引擎改进与射箭游戏设计
文章目录写在前面 HitUFO的物理引擎改进版本物理引擎的改进版本思路与实现 PhysicsAction PhysicsManager 新接口类IActionManager 动作管理器基类的变化 ...
基于JBox2d物理引擎和canvas的游戏开发实例
本文基于JBox2d+canvas,后续提供NDK+openglEs版本:本文的主要目的是给大家介绍如何使用创建一个物理世界. 一.主函数: 主函数包括了Box2D的基本流程简单来说,一个Box2D ...
unity3D游戏开发十一之物理引擎
Unity内置了NVIDIA的Physx物理引擎,Physx是目前使用最为广泛的物理引擎,被很多游戏大作所采用,开发者可以通过物理引擎高效.逼真地模拟刚体碰撞.车辆驾驶.布料.重力等物理效果,使游戏画 ...
如何制作一款像超级玛丽兄弟一样基于平台的游戏-第一部分（xcode，物理引擎，TMXTiledMap相关应用）
这篇文章还可以在这里找到英语 Learn how to make a game like Super Mario! 这是一篇IOS教程组的成员 Jacob Gundersen发布的教程, 他是一位独 ...
Ophone平台2D游戏引擎实现——物理引擎（一）（二）
http://dev.10086.cn/cmdn/wiki/index.php?doc-view-4271.html http://dev.10086.cn/cmdn/wiki/index.php?d ...
Unity 3D 物理引擎简介 || Unity 3D 物理材质|| Unity 3D 力（AddForce）
Unity 3D 物理引擎简介早期的游戏并没有强调物理引擎的应用,当时无论是哪一种游戏,都是用极为简单的计算方式做出相应的运算就算完成物理表现,如超级玛丽和音速小子等游戏. 较为常见的物理处理是在跳 ...
关于2d物理引擎box2d与ape的评论
APE不行,做点简单的撞球,台球之类游戏还行.我最开始用他实验性做了个简单的基于物理引擎的泡泡龙类游戏,发现稍微多一点的几何体堆叠在一起就会产生渗透现象,没办法只好更改最初的设计.要专注做物理游戏,还 ...
Unity3D学习（7）之物理引擎的应用与代码复用
Unity3D的物理引擎做得很不错,让物体的运动更加贴近现实了.没有人喜欢高深的数学,去计算复杂的运动曲线和力学.使用物理引擎,而你仅需要高中的物理(牛顿!三定律, F = m * a). 物理引擎( ...
野菜部落物理引擎实现
概述这回我们主要讲一下物理引擎在我们的游戏中的使用,主要是实现游戏的主要逻辑 cocos物理引擎的自我见解 cocos游戏引擎结合了Box2d物理引擎,所以它本身也支持物理引擎,,我们没必要单独引入 ...

物理引擎的赛车撞人游戏（一）画地图 -- graphics

物理引擎的赛车撞人游戏（一）画地图 -- graphics相关推荐

最新文章

热门文章

物理引擎的赛车撞人游戏（一） 画地图 -- graphics

物理引擎的赛车撞人游戏（一） 画地图 -- graphics相关推荐

最新文章

热门文章

物理引擎的赛车撞人游戏（一）画地图 -- graphics

物理引擎的赛车撞人游戏（一）画地图 -- graphics相关推荐