Cocos2d-x 3.2学习笔记(三)学习绘图API

时间:2023-02-06 19:30:50

  关于cocos2d-x 3.2 版本的绘图方法有两种

  1、使用DrawNode类绘制自定义图形。

  2、继承Layer类重写draw()方法。

  以上两种方法都可以绘制自定义图形,根据自己的需要选择合适的方法。

一、使用DrawNode类绘制自定义图形

  使用DrawNode 类绘制图形是最简单的方法,create一个DrawNode类,然后添加进场景。然后就可以愉快的绘图了。

  

 1     auto s = Director::getInstance()->getWinSize();
2    //创建
3 auto draw = DrawNode::create();
4 this->addChild(draw, 10);
5
6 // 画圆
7 for( int i=0; i < 10; i++)
8 {
9 draw->drawDot(Vec2(s.width/2, s.height/2), 10*(10-i), Color4F(CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), 1));
10 }
11
12 // 画多边形
13 Vec2 points[] = { Vec2(s.height/4,0), Vec2(s.width,s.height/5), Vec2(s.width/3*2,s.height) };
14 draw->drawPolygon(points, sizeof(points)/sizeof(points[0]), Color4F(1,0,0,0.5), 4, Color4F(0,0,1,1));
15
16 // 画线
17 draw->drawSegment(Vec2(20,s.height), Vec2(20,s.height/2), 10, Color4F(0, 1, 0, 1));
18
19 draw->drawSegment(Vec2(10,s.height/2), Vec2(s.width/2, s.height/2), 40, Color4F(1, 0, 1, 0.5));
20
21 // 画三角形
22 draw->drawTriangle(Vec2(10, 10), Vec2(70, 30), Vec2(100, 140), Color4F(CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), 0.5));
23
24 // 画贝赛尔曲线
25 draw->drawQuadraticBezier(Vec2(s.width - 150, s.height - 150), Vec2(s.width - 70, s.height - 10), Vec2(s.width - 10, s.height - 10), 10, Color4F(CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), 0.5));
26
27 draw->drawCubicBezier(Vec2(s.width - 250, 40), Vec2(s.width - 70, 100), Vec2(s.width - 30, 250), Vec2(s.width - 10, s.height - 50), 10, Color4F(CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), 0.5));

 

  根据需要可以用这些api创造出自己需要的图像。

二、继承Layer类重写draw()方法

  这种方式可以自定义一个绘图类,用于创作自己需要的图形。

  

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__
#include
"cocos2d.h"
USING_NS_CC;

class HelloWorld : public cocos2d::Layer
{
public:
virtual void draw(Renderer *renderer, const Mat4 &transform, bool transformUpdated) override;
protected:
void onDraw(const kmMat4 &transform, bool transformUpdated);
CustomCommand _customCommand;
};
#endif
#include "HelloWorldScene.h"
#include
"VisibleRect.h"

void HelloWorld::draw(cocos2d::Renderer *renderer, const kmMat4 &transform, bool transformUpdated)
{

_customCommand.init(
1);
_customCommand.func
= CC_CALLBACK_0(HelloWorld::onDraw, this,transform,transformUpdated);
renderer
->addCommand(&_customCommand);
}

void HelloWorld::onDraw(const kmMat4 &transform, bool transformUpdated)
{
kmGLPushMatrix();
kmGLLoadMatrix(
&transform);


/*直线*/
CHECK_GL_ERROR_DEBUG();
DrawPrimitives::drawLine(VisibleRect::leftBottom(), VisibleRect::rightTop());


CHECK_GL_ERROR_DEBUG();

glLineWidth(
5.0f );
DrawPrimitives::setDrawColor4B(
255,0,0,255);
DrawPrimitives::drawLine( Point(
0, 0), Point(100, 100) );

// draw big point in the center
DrawPrimitives::setPointSize(64);
DrawPrimitives::setDrawColor4B(
100, 0, 255, 128);
DrawPrimitives::drawPoint(VisibleRect::center());
CHECK_GL_ERROR_DEBUG();


// draw 4 small points
Point points[] = { Point(60,60), Point(70,70), Point(160,70), Point(170,60) };
DrawPrimitives::setPointSize(
10);
DrawPrimitives::setDrawColor4B(
0,10,255,255);
DrawPrimitives::drawPoints( points,
4);

CHECK_GL_ERROR_DEBUG();


// draw a green circle with 10 segments
glLineWidth(16);
DrawPrimitives::setDrawColor4B(
0, 255, 0, 255);
DrawPrimitives::drawCircle( VisibleRect::center(),
100, 0, 10, false);

CHECK_GL_ERROR_DEBUG();

// draw a green circle with 50 segments with line to center
glLineWidth(2);
DrawPrimitives::setDrawColor4B(
0, 255, 255, 255);
DrawPrimitives::drawCircle( VisibleRect::center(),
150, CC_DEGREES_TO_RADIANS(90), 50, false);

CHECK_GL_ERROR_DEBUG();

// draw a pink solid circle with 50 segments
glLineWidth(2);
DrawPrimitives::setDrawColor4B(
255, 0, 255, 255);
DrawPrimitives::drawSolidCircle( VisibleRect::center()
+ Point(140,0), 40, CC_DEGREES_TO_RADIANS(90), 50, 1.0f, 1.0f);

CHECK_GL_ERROR_DEBUG();

// open yellow poly
DrawPrimitives::setDrawColor4B(255, 255, 0, 255);
glLineWidth(
5);
Point vertices[]
= { Point(10,10), Point(50,50), Point(100,50), Point(150,100), Point(200,150) };
DrawPrimitives::drawPoly( vertices,
5, false);

CHECK_GL_ERROR_DEBUG();

// filled poly
glLineWidth(1);
Point filledVertices[]
= { Point(0,120), Point(50,120), Point(50,170), Point(25,200), Point(0,170) };
DrawPrimitives::drawSolidPoly(filledVertices,
5, Color4F(0.5f, 0.5f, 1, 1 ) );


// closed purble poly
DrawPrimitives::setDrawColor4B(255, 0, 255, 255);
glLineWidth(
2);
Point vertices2[]
= { Point(30,130), Point(30,230), Point(50,200) };
DrawPrimitives::drawPoly( vertices2,
3, true);

CHECK_GL_ERROR_DEBUG();

// draw quad bezier path
DrawPrimitives::drawQuadBezier(VisibleRect::leftTop(), VisibleRect::center(), VisibleRect::rightTop(), 50);

CHECK_GL_ERROR_DEBUG();


// draw cubic bezier path
DrawPrimitives::drawCubicBezier(VisibleRect::center(), Point(VisibleRect::center().x+30,VisibleRect::center().y+150), Point(VisibleRect::center().x+60,VisibleRect::center().y-300),Point(VisibleRect::center().x+90,VisibleRect::center().y+150),100);


CHECK_GL_ERROR_DEBUG();


//draw a solid polygon
Point vertices3[] = {Point(60,160), Point(70,190), Point(100,190), Point(90,160)};
DrawPrimitives::drawSolidPoly( vertices3,
4, Color4F(1,1,0,1) );

CHECK_GL_ERROR_DEBUG();

//end draw
kmGLPopMatrix();
}

  其中涉及到辅助类VisibleRect类得到获取视口。

Cocos2d-x 3.2学习笔记(三)学习绘图APICocos2d-x 3.2学习笔记(三)学习绘图API
 1 #ifndef __VISIBLERECT_H__
2 #define __VISIBLERECT_H__
3
4 #include "cocos2d.h"
5
6 class VisibleRect
7 {
8 public:
9 static cocos2d::Rect getVisibleRect();
10
11 static cocos2d::Vec2 left();
12 static cocos2d::Vec2 right();
13 static cocos2d::Vec2 top();
14 static cocos2d::Vec2 bottom();
15 static cocos2d::Vec2 center();
16 static cocos2d::Vec2 leftTop();
17 static cocos2d::Vec2 rightTop();
18 static cocos2d::Vec2 leftBottom();
19 static cocos2d::Vec2 rightBottom();
20 private:
21 static void lazyInit();
22 static cocos2d::Rect s_visibleRect;
23 };
24
25 #endif /* __VISIBLERECT_H__ */
VisibleRect.h
Cocos2d-x 3.2学习笔记(三)学习绘图APICocos2d-x 3.2学习笔记(三)学习绘图API
 1 #include "VisibleRect.h"
2
3 USING_NS_CC;
4
5 Rect VisibleRect::s_visibleRect;
6
7 void VisibleRect::lazyInit()
8 {
9 // no lazy init
10 // Useful if we change the resolution in runtime
11 s_visibleRect = Director::getInstance()->getOpenGLView()->getVisibleRect();
12 }
13
14 Rect VisibleRect::getVisibleRect()
15 {
16 lazyInit();
17 return s_visibleRect;
18 }
19
20 Vec2 VisibleRect::left()
21 {
22 lazyInit();
23 return Vec2(s_visibleRect.origin.x, s_visibleRect.origin.y+s_visibleRect.size.height/2);
24 }
25
26 Vec2 VisibleRect::right()
27 {
28 lazyInit();
29 return Vec2(s_visibleRect.origin.x+s_visibleRect.size.width, s_visibleRect.origin.y+s_visibleRect.size.height/2);
30 }
31
32 Vec2 VisibleRect::top()
33 {
34 lazyInit();
35 return Vec2(s_visibleRect.origin.x+s_visibleRect.size.width/2, s_visibleRect.origin.y+s_visibleRect.size.height);
36 }
37
38 Vec2 VisibleRect::bottom()
39 {
40 lazyInit();
41 return Vec2(s_visibleRect.origin.x+s_visibleRect.size.width/2, s_visibleRect.origin.y);
42 }
43
44 Vec2 VisibleRect::center()
45 {
46 lazyInit();
47 return Vec2(s_visibleRect.origin.x+s_visibleRect.size.width/2, s_visibleRect.origin.y+s_visibleRect.size.height/2);
48 }
49
50 Vec2 VisibleRect::leftTop()
51 {
52 lazyInit();
53 return Vec2(s_visibleRect.origin.x, s_visibleRect.origin.y+s_visibleRect.size.height);
54 }
55
56 Vec2 VisibleRect::rightTop()
57 {
58 lazyInit();
59 return Vec2(s_visibleRect.origin.x+s_visibleRect.size.width, s_visibleRect.origin.y+s_visibleRect.size.height);
60 }
61
62 Vec2 VisibleRect::leftBottom()
63 {
64 lazyInit();
65 return s_visibleRect.origin;
66 }
67
68 Vec2 VisibleRect::rightBottom()
69 {
70 lazyInit();
71 return Vec2(s_visibleRect.origin.x+s_visibleRect.size.width, s_visibleRect.origin.y);
72 }
VisibleRect.cpp