cocos2d-x 不规则图形碰撞检测
原创文章，转载请注明出处！
在游戏中，有时会用到判断是否点击到一张图的有色部分，即非透明区域; 或者是判断不规则图片的碰撞的判断。
//判断有没有点到有材质的部分, p_point相对， CCSprite坐标
bool Tools::isClickTheRealSprite(cocos2d::CCSprite* p_sprite, const cocos2d::CCPoint p_point){
CCSize l_sizeInPixel = p_sprite->getContentSize();
//得到相对，Sprite左下的偏移
int l_iX = (int)(l_sizeInPixel.width/2.0f + p_point.x);
int l_iY = (int)(l_sizeInPixel.height/2.0f + (int)p_point.y);
CCPoint l_pointBL = ccp(l_iX, l_iY);
CCRect l_rect = CCRect(0, 0, l_sizeInPixel.width, l_sizeInPixel.height);
if(!(l_rect.containsPoint(l_pointBL))){
//开辟出空内存buffer
//unsigned char* l_buffer = (unsigned char*)malloc(l_sizeInPixel.width * l_sizeInPixel.height * 4);
//memset(l_buffer, 0, l_sizeInPixel.width * l_sizeInPixel.height * 4);
uint8_t l_buffer[4];
CCSize size = p_sprite->getParent()->getContentSize();
CCRenderTexture* l_renderTexture = CCRenderTexture::create(l_sizeInPixel.width, l_sizeInPixel.height, kCCTexture2DPixelFormat_RGBA8888);
//l_renderTexture->begin();
l_renderTexture->beginWithClear(0, 0, 0, 0);
p_sprite->draw();
glReadPixels(l_pointBL.x, l_pointBL.y, 1, 1, GL_RGBA, GL_UNSIGNED_BYTE, l_buffer);
l_renderTexture->end();
//int l_iValue_A = l_buffer[4*(int)(l_pointBL.y*l_sizeInPixel.width + l_pointBL.x)+3];
int l_iValue_A = l_buffer[3];
//free(l_buffer);
if(l_iValue_A < 5 ){
其中，p_point是相对 Sprite锚点的偏移。
记录以备忘！Cocos2dx学习路线_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
Cocos2dx学习路线
&&根据极客学院的路线规划做的一个表格,带有超链接
阅读已结束，下载文档到电脑
想免费下载更多文档？
定制HR最喜欢的简历
你可能喜欢用户名：shahdza
文章数：114
评论数：76
访问量：510750
注册日期：
阅读量：1297
阅读量：3317
阅读量：445586
阅读量：1131074
51CTO推荐博文
【唠叨】&&&&cocos2dx封装了大量OpenGL的函数，用于快速绘制基本图形，本节主要讲讲cocos2dx中的基本图形绘制的相关函数。包含：点、直线、矩形、多边形、椭圆、贝塞尔曲线。&&&&特别要感谢“孤狼”大牛，他写的“和潘恳黄鹧cocos2dx”正是我的启蒙教程。【致谢】&&&&&&&&&（贝塞尔曲线的原理）【小知识】&&&&分段数： & & & &即绘制曲线一般都是通过绘制“样条曲线”来实现，而分段数即样条段数。&&&&二次贝塞尔曲线：起点终点之间的一条抛物线，利用一个控制点来控制抛物线的形状。&&&&三次贝塞尔曲线：起点终点之间，利用两个控制点来控制曲线的形状。【Demo下载】&&&&&【3.x】&&&&（1）去掉前缀&"cc"& & （2）将&ccDraw***()&封装到了&DrawPrimitives&命名空间中。&&&&（3）重写绘图函数：&&&&&&&&draw(Renderer *renderer, const Mat4& transform, uint32_t flags);&&&&&&&&使用变化举例：ccDrawPoint() ==&&DrawPrimitives::drawPoint()。&&&&（4）去掉宏定义 ccc3、ccc4、ccc4f ，分别改为：Color3B、Color4B、Color4F。&&&&（5）线条宽度&的设置，依然为&glLineWidth()。【v3.3】&&&&DrawNode ：添加了和 DrawPrimitives 一样的功能，同时 DrawPrimitives 标识为弃用。&&&&DrawNode用法，参见： 【绘图draw】&&&&cocos2dx引擎提供了大量OpenGL的函数，你可以打开glew.h就知道有多可怕了。当然在这里我只讲讲基本简单图形的绘制。&&&&OpenGL的原语相关的绘图函数在CCDrawingPrimitives.h中定义了。主要分为六大类：点、直线、矩形、多边形、圆形、贝塞尔曲线。&&&&接下来就给大家讲讲类中图形的绘制方法。1、设置颜色、点大小、线条宽度&&&&玩过画图工具的同学应该都知道，要画一个图形的时候，首先就要定义图形绘制的颜色、点的大小、线条的粗细。//
&* 设置颜色、大小、宽度：
点大小&&&&&&-&ccPointSize()
线条粗细&&&&-&glLineWidth()
颜色透明度&&-&ccDrawColor4B(),&ccDrawColor4F()
//画一个点的大小，默认为1
//实际上画出来的是一个实心正方形
ccPointSize(float&size);
//线条宽度，默认为1
glLineWidth(float&width);
//红r、绿g、蓝b、透明度a，取值范围0~255
ccDrawColor4B(unsigned&char&r,&unsigned&char&g,&unsigned&char&b,&unsigned&char&a);
//红r、绿g、蓝b、透明度a，取值范围0~1
ccDrawColor4F(float&r,float&g,&float&b,float&a&);
//2、点& & 可以绘制一个点，也可以同时绘制多个点。实际上画出来的是一个实心正方形。&&&&使用方法：&&&&&&&&（1）设置点的大小：& &ccPointSize&&&&&&&&（2）设置颜色透明度：&ccDrawColor4B 或&ccDrawColor4F&&&&&&&&（3）画点：& & & & & &ccDrawPoint//
ccDrawPoint('点坐标CCPoint');&&&&&&&&&&&&&&&&//绘制一个点
ccDrawPoints('点集合CCPoint','点总个数int');&//绘制多个点
//3、直线&&&&可以绘制一条直线。&&&&使用方法：&&&&&&&&（1）设置线条宽度： & glLineWidth&&&&&&&&（2）设置颜色透明度： ccDrawColor4B 或&ccDrawColor4F&&&&&&&&（3）画直线： && & && ccDrawPoint//
ccDrawLine('起点坐标CCPoint','终点坐标CCPoint');
//4、矩形&&&&可以绘制一个矩形，矩形可以是空心的，也可以是实心的。& & 使用方法：&&&&&&&&（1）设置线条宽度： & glLineWidth&&&&&&&&（2）设置颜色透明度： ccDrawColor4B 或&ccDrawColor4F&&&&&&&&（3）画矩形： & & & & ccDrawRect 或&ccDrawSolidRect//
ccDrawRect('对角顶点1CCPoint','对角顶点2CCPoint');
ccDrawSolidRect('对角顶点1CCPoint','对角顶点2CCPoint','颜色透明度ccColor4F');
//5、多边形&&&&可以绘制一个多边形，多边形可以使空心的，也可以是实心的。& & 使用方法：&&&&&&&&（1）设置线条宽度： & glLineWidth&&&&&&&&（2）设置颜色透明度： ccDrawColor4B 或&ccDrawColor4F&&&&&&&&（3）画多边形： & & & ccDrawPoly&或&ccDrawSolidPoly//
ccDrawPoly('顶点数组CCPoint*','顶点个数int','是否自动封闭');
ccDrawSolidPoly('顶点数组CCPoint*','顶点个数int','是否自动封闭','颜色透明度ccColor4F');
//6、椭圆&&&&可以绘制圆形，也可以绘制椭圆。绘制椭圆时，需要设置X轴和Y轴的半径放缩比例。& & 使用方法：&&&&&&&&（1）设置线条宽度： & glLineWidth&&&&&&&&（2）设置颜色透明度： ccDrawColor4B 或&ccDrawColor4F&&&&&&&&（3）画多边形： & & & ccDrawCircle//
//参数说明：
//弧度：&&&&当显示半径true时，连线的点所在弧度。即连线后与X轴的夹角。
//分段数：&&即画圆时所使用的参数点数，点数越多话的圆越精确。但是参数点多了，效率就低下了。一般都设置360。
//显示半径：是否显示半径，即圆心和圆上某点连线。
ccDrawCircle('圆心坐标CCPoint','半径float','弧度float','分段数','是否显示半径bool');
ccDrawCircle('圆心坐标CCPoint','半径float','弧度float','分段数','是否显示半径bool','X轴放大倍数float','Y轴放大倍数float');
//7、贝塞尔曲线&&&&贝塞尔曲线这个概念我也还是第一次听到。可以绘制一个控制点的贝塞尔曲线，也可以绘制两个控制点的贝赛尔曲线。& & （1）二次贝塞尔曲线：起点终点之间，利用一个控制点来控制抛物线的形状。& & （2）三次贝塞尔曲线：起点终点之间，利用两个控制点来控制曲线的形状。&&&&具体的绘制原理请参照博客：& & 使用方法：&&&&&&&&（1）设置线条宽度： & glLineWidth&&&&&&&&（2）设置颜色透明度： ccDrawColor4B&或&ccDrawColor4F&&&&&&&&（3）画多边形： & & & ccDrawQuadBezier 或 ccDrawCubicBezier//
//二次贝塞尔曲线
ccDrawQuadBezier('起点CCPoint','控制点CCPoint','终点CCPoint','分段数int');
//三次贝塞尔曲线
ccDrawCubicBezier('起点CCPoint','控制点1CCPoint','控制点2CCPoint','终点CCPoint','分段数int');
//【代码实战】1、设置一个背景图片&&&&作为绘图的参照物，不然凸显不出透明度。//
CCSprite*&bg&=&CCSprite::create("HelloWorld.png");
bg-&setPosition(mysize/2);
this-&addChild(bg,-1);
//650) this.width=650;" src="/wyfs02/M01/47/97/wKioL1P80Wmzm3SxAAFHbk8yBjQ167.jpg" title="HelloWorld.png" style="text-align:white-space:" alt="wKioL1P80Wmzm3SxAAFHbk8yBjQ167.jpg" />2、重写CCNode继承下来的绘图draw()函数//
class&HelloWorld&:&public&cocos2d::CCLayer
virtual&bool&init();&&
static&cocos2d::CCScene*&scene();
CREATE_FUNC(HelloWorld);
//重写draw()函数
virtual&void&draw();
//3、编写draw()代码&&&&绘制点、直线、矩形、多边形、椭圆、贝赛尔曲线。//
void&HelloWorld::draw()
//屏幕尺寸大小
CCSize&mysize&=&CCDirector::sharedDirector()-&getVisibleSize();
ccPointSize(10);
ccDrawColor4B(255,&25,&200,&250);
ccDrawPoint(mysize/2);
ccPointSize(30);
ccDrawColor4B(255,&0,&0,&100);
CCPoint&Pointarray[]&=&{ccp(200,&150),&ccp(200,&200),&ccp(280,&150),&ccp(280,&200)};
ccDrawPoints(Pointarray,&4);
glLineWidth(3);
ccDrawColor4B(255,&255,&255,&130);
ccDrawLine(ccp(10,&300),&ccp(200,&300)&);
glLineWidth(3);
ccDrawColor4B(255,&255,&100,&190);
ccDrawCircle(ccp(50,&250),&40,&3.14/2,&360,&true,&1,&0.5);
glLineWidth(5);
ccDrawColor4B(24,&25,&200,&140);
ccDrawRect(ccp(10,&150),&ccp(110,&200));
ccDrawSolidRect(ccp(10,&90),&ccp(100,&140),&ccc4f(255,&255,&255,&0.5f));
glLineWidth(10);
ccDrawColor4B(240,&225,&100,&130);
CCPoint&Polyarray[]&=&{ccp(20,&20),&ccp(50,&0),&ccp(250,&100),&ccp(300,&100),&ccp(250,&50)};
ccDrawPoly(Polyarray,&5,&1);&
CCPoint&Polyarray2[]&=&{ccp(250,30),&ccp(280,300),&ccp(450,0),&ccp(410,130),&ccp(420,50)};
ccDrawSolidPoly(Polyarray2,&5,&ccc4f(142,&245,&70,&0.3f));&
//贝赛尔曲线
glLineWidth(5);
ccDrawColor4B(100,&100,&100,&255);
ccDrawQuadBezier(ccp(0,320),&ccp(160,100),&ccp(480,320),&100);&
glLineWidth(5);
ccDrawColor4B(200,&200,&200,&255);
ccDrawCubicBezier(ccp(0,0),&ccp(160,300),&ccp(320,20),&ccp(480,320),&100);
//4、运行结果650) this.width=650;" src="/wyfs02/M00/47/96/wKiom1P80V7hba05AAFwAiuHdPE640.jpg" title="1.jpg" alt="wKiom1P80V7hba05AAFwAiuHdPE640.jpg" />本文出自 “” 博客，请务必保留此出处
了这篇文章
类别：┆阅读(0)┆评论(0)Pages: 1/2
主题 : cocos2dx box2d 如何创建弯曲路面
级别: 新手上路
可可豆: 45 CB
威望: 45 点
在线时间: 16(时)
发自: Web Page
来源于&&分类
cocos2dx box2d 如何创建弯曲路面&&&
我看了一下其他的游戏里面的图，他们是有一个地表的图，然后好像是把这个图铺在地面上的，这个图会适应地面的弧度来调整。不知道他们是怎么做的。具体效果如下，不知道他们是怎么把草铺上去！有了解的人知道这是什么技术吗，想不明白啊
图片:stage-icon-countryside.png
图片:lowres-terrain-ground.png
图片:terrain-surface.png
级别: 新手上路
可可豆: 45 CB
威望: 45 点
在线时间: 16(时)
发自: Web Page
有人了解在box2d中 如何用下面2个图做出上面那个图的效果
级别: 新手上路
可可豆: 49 CB
威望: 49 点
在线时间: 34(时)
发自: Web Page
请问楼主最后解决了吗？
级别: 新手上路
UID: 352267
可可豆: 103 CB
威望: 95 点
在线时间: 78(时)
发自: Web Page
关注！！！
级别: 骑士
可可豆: 417 CB
威望: 417 点
在线时间: 551(时)
发自: Web Page
我也想请教这个问题，以前我用Starling做过，Starling中的Graphics扩展可以做这种地图，地址:。unity也有类似这种插件。但是cocos2d-x没有这种扩展
级别: 新手上路
可可豆: 13 CB
威望: 13 点
在线时间: 4(时)
发自: Web Page
大神们，跪求方案
级别: 侠客
可可豆: 672 CB
威望: 672 点
在线时间: 152(时)
发自: Web Page
我知道Box2D中有个链条物体，用来做草皮的话，的确是可以很柔软的铺在某个不规则物体上，但是如何绑定精灵就不太清楚了。
级别: 新手上路
可可豆: 5 CB
威望: 5 点
在线时间: 20(时)
发自: Web Page
标记一下。。。。。。。
级别: 骑士
可可豆: 499 CB
威望: 467 点
在线时间: 155(时)
发自: Web Page
这个确实很牛逼，BOX2D实现倒不难，就是不知道怎么贴图。估计是要直接操作OPENGL，进行网格变化了吧。类似的还有BOX2D，流体，软体的贴图。COCOS2DX引擎没有精灵网格变化。只能手动操作OPENGL。
EasyBox2D For Creator : http://jeason1997.github.io/EasyBox2D
级别: 侠客
UID: 233358
可可豆: 245 CB
威望: 232 点
在线时间: 493(时)
发自: Web Page
这个图片就是那个例子吧，那个例子有实现这样的功能啊
Pages: 1/2
关注本帖(如果有新回复会站内信通知您)
苹果公司现任CEO是谁？2字 正确答案:库克
发帖、回帖都会得到可观的积分奖励。
按"Ctrl+Enter"直接提交
关注CocoaChina
关注微信 每日推荐
扫一扫 浏览移动版3672人阅读
Cocos2d-x v3.0（7）
Cocos2d-x（12）
Cocos2d-x 3.0的新物理系统我就不必多说了，接触一段时间，感觉还是不错的。对于那些基本概念，网上的教程已经泛滥了，就不多说了，不过对于创建多边形物体的教程，还真不多，很多都是创建圆形和矩形，这两个很简单，传入图片的大小数据基本就可以搞定了。多边形的麻烦之处在于每个点的位置，Mac下有VertexHelper可以很轻松获取到多边形的每个点，然后创建出来，但Windows下，呃，确实我没找到什么好的工具，PhysicsEditor在以前使用Box2d原生的代码创建多边形还是挺好用的，现在就不太适合了，所以本篇的用法也是建立在它的之上做出来的，如果有好的办法，欢迎提出分享哈。
话不多说，看看如何利用PhysicsEditor来创建一个多边形。
打开PhysicsEditor，导入一张多边形，姑且咱们先拿个三角形开刀说，导入图片之后，选择上方的add polygon
将我们的三角形区域拉出来，像这样，
这样多边形的几个点位置就算完成了，下面的步骤很关键，
在右边Exporter选择“Chipmunk generic”，因为cocos封装的多边形顶点是按照顺时针的方向来的，和box2d不一样，box2d是反方向的。
当你选择之后，会看到图中多了一个点，那个是锚点的位置，所以接下来是设置锚点的位置，新版的物理系统在setPhysicsBody的时候是将Body绑定在图片的中心点位置，所以我们在PhysicsEditor中绘制的Body区域也需要将锚点设置在中心点，不然回过头在创建Body的时候还要设置偏移量offset。
如下图，将关键的地方设置成（0.5， 0.5）就可以了。
接下来，保存一下这个文件，是一个plist格式的，用个Notepad++打开下，找到下面有个点数组的位置，
我们就是需要这一组点数据，我想后面的事大家应该就很清楚了，打开VS，创建一个多边形咯。
auto triangle = Sprite::create(&CyanTriangle.png&);
triangle-&setPosition(Point(size.width/2, size.height*0.8));
Point points[3] = { Point(-50.00000, -43.50000), Point(0.000), Point(51.00000, -43.50000) };
auto polygonBody = PhysicsBody::createPolygon(points, 3);
triangle-&setPhysicsBody(polygonBody);
addChild(triangle);
PhysicsBody::createPolygon的参数第一个是点数组，第二个是数组的大小，也就是边的个数。
运行看一下效果，
由于打开了debug模式，所以红色的区域非常贴切，可以用啦。
当然咯，PhysicsEditor也可以做凹多边形的，不过这个步骤要麻烦不少，但过程基本一样，简单过一遍，
拿个logo图片做一下，可以右键添加点哦，然后简单拉出这样的效果。然后还是保存我们的plist文件。
对于凹多边形，我们的策略基本就是采用addShape的方式，将其分割成多个凸多边形，然后组合在一起，他们的碰撞区域是组合起来的，所以没问题。
这个时候打开plist文件，可以看到是这样的点数组，
它的策略也是这样的，所以符合我们的要求，只是这么多点，咱们要一个一个添加，确实略显麻烦，没办法，继续来吧。。。。
一个数组点创建一个多边形Shape，所以代码是这样的。
auto logo = Sprite::create(&powered.png&);
auto logoBody = PhysicsBody::create();
Point vert1[4] = { Point(1.0000), Point(24.0000), Point(-16.0000), Point(-22.0000) };
logoBody-&addShape(PhysicsShapePolygon::create(vert1, 4));
Point vert2[4] = { Point(-100.00000, -149.50000), Point(24.0000), Point(101.0000), Point(101.00000, -149.50000) };
logoBody-&addShape(PhysicsShapePolygon::create(vert2, 4));
Point vert3[4] = { Point(24.0000), Point(-100.00000, -149.50000), Point(-32.0000), Point(-16.0000) };
logoBody-&addShape(PhysicsShapePolygon::create(vert3, 4));
Point vert4[3] = { Point(-32.0000), Point(-100.00000, -149.50000), Point(-100.0000) };
logoBody-&addShape(PhysicsShapePolygon::create(vert4, 3));
logo-&setPhysicsBody(logoBody);
logo-&setPosition(Point(size.width*0.8, size.height*0.7));
addChild(logo);
logo-&setRotation(180);
好了，这样就可以了，我还旋转了一下，为了测试一下上面那一撮头发的碰撞区域，哈哈~
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：261571次
积分：3303
积分：3303
排名：第10141名
原创：58篇
评论：116条
文章：14篇
阅读：60069
文章：13篇
阅读：82923
(1)(4)(1)(1)(5)(15)(1)(4)(2)(2)(9)(4)(8)(1)(1)
