我们这节来学习几何图形,即怎样使用Cocos2d-x绘制各种图形。已经贝塞尔曲线


我们查看CCNode中有个draw函数,我们须要将绘制的代码所有写在这个函数里面。写在init函数里是画不出线来的,

draw是有Cocos2d-x内部调用的。详细什么机制我也不知道。初期我们学习的是怎么使用。等以后做出来游戏赚钱了,闲的蛋疼的时候再回过头来钻研吧。学习不论什么东西追求的是高速的做出有用的东西 。


OK   我们在头文件里重写draw

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"

class HelloWorld : public cocos2d::CCLayer
{
public:
    // Here's a difference. Method 'init' in cocos2d-x returns bool, instead of returning 'id' in cocos2d-iphone
    virtual bool init();  

    // there's no 'id' in cpp, so we recommend returning the class instance pointer
    static cocos2d::CCScene* scene();
    
    // implement the "static node()" method manually
    CREATE_FUNC(HelloWorld);

	virtual void draw();
};

#endif // __HELLOWORLD_SCENE_H__

源文件

#include "HelloWorldScene.h"

USING_NS_CC;

CCScene* HelloWorld::scene()
{
    // 'scene' is an autorelease object
    CCScene *scene = CCScene::create();
    
    // 'layer' is an autorelease object
    HelloWorld *layer = HelloWorld::create();

    // add layer as a child to scene
    scene->addChild(layer);

    // return the scene
    return scene;
}

// on "init" you need to initialize your instance
bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !CCLayer::init() )
    {
        return false;
    }
    return true;
}
void HelloWorld::draw(){

}

我们这次基本的代码都会先在draw函数中


这里有各种绘制函数,我们一个个来看

ok   我们来绘制一个线条

void HelloWorld::draw(){
	CCSize visibleSize= CCDirector::sharedDirector()->getVisibleSize();
	ccDrawLine(ccp(0,0),ccp(visibleSize.width,visibleSize.height));
}


我们用到了CCDrawLine函数

看凝视draws a line given the origin and destination point measured in points

百度翻译和我说:画线起点和终点測量

OK   第一个为起点,第二个为终点。两个点连成一条线



我们从左上角到右下角绘制一条红色的粗线

void HelloWorld::draw(){
	CCSize visibleSize= CCDirector::sharedDirector()->getVisibleSize();
	ccDrawLine(ccp(0,0),ccp(visibleSize.width,visibleSize.height));

	//设置画刷颜色
	ccDrawColor4F(255,0,0,255);
	//设置线条的宽度
	glLineWidth(10);
	ccDrawLine(ccp(0,visibleSize.height),ccp(visibleSize.width,0));

	
}



有问题啊!

怎么我第一次画的线也变为红色了呢?

用过.net或C++或Java事实上都清楚,这个画刷是全局唯一的,当你设置了画刷的属性之后,假设不还原回去,下次另外一个地方使用的话还是先前的画刷属性。

可是,我们设置画刷的属性是在绘制完第一条线之后才设置的,为什么还是这样呢??

这就是Cocos2d-x的机制了,你能够在该函数下CCLog一下,发现程序会不停的调用这个函数,

我在想。这效率不是太低了吗?假设换在手机上,不敢想象啊!

(还是那句话,先学怎么用。赚钱才是硬道理,生活苦逼,么办法啊)


总之。用完画笔之后我们,在方法最后就得还原它

void HelloWorld::draw(){
	CCSize visibleSize= CCDirector::sharedDirector()->getVisibleSize();
	ccDrawLine(ccp(0,0),ccp(visibleSize.width,visibleSize.height));

	//设置画刷颜色
	ccDrawColor4F(255,0,0,255);
	//设置线条的宽度
	glLineWidth(10);
	ccDrawLine(ccp(0,visibleSize.height),ccp(visibleSize.width,0));

	//还原画笔
	glLineWidth(1);
	ccDrawColor4B(255,255,255,255);
	ccPointSize(1);
	
}

这就正常了。

这里我们接触了一个新的函数,glLineWidth

我们发现,大部分都是CC开头,表示Cocos2d-x   这里的gl

OpenGL的意思,事实上Cocos2d-x底层还是调用的OpenGL来绘制的


绘制一个比較大的点

//绘制一个比較大的点,蓝色的,半透明
	ccPointSize(50);
	ccDrawColor4B(0,0,255,128);
	ccDrawPoint(ccp(visibleSize.width/2,visibleSize.height/2));

ok   这里注意了   ccDrawColor4F 设置半透明没效果

用4B才干够,至于为什么,反正我不关心

总之我们认为4B好用一点。那我们就都用4B吧


//一次绘制多个点
	CCPoint points[]={ccp(60,60),ccp(60,70),ccp(70,70),ccp(70,60)};
	ccPointSize(2);
	ccDrawColor4B(0,255,255,255);
	ccDrawPoints(points,sizeof(points)/sizeof(points[0]));


//绘制圆形
	glLineWidth(16);
	ccDrawColor4B(0, 255, 0, 255);
	ccDrawCircle(ccp(visibleSize.width/2,visibleSize.height/2),100,0,1000,false);

绘制圆须要说一下

第一个參数:  圆的中心点

第二个參数:  圆半径

第三个參数: 圆的逆时针旋转角度  (搞不懂就是0)

第四个參数:圆的平均分段   (越大越平滑。但始终有锯齿,这个非常纠结)


//绘制多边形
	ccDrawColor4B(255, 255, 0, 255);
	glLineWidth(10);
	CCPoint vertices[] = {ccp(50,50), ccp(100,50), ccp(100,100), ccp(50,100) };
	//须要绘制多边形的点,參数2。点的个数  參数3  是否须要起点和终点闭合
	ccDrawPoly(vertices,sizeof(vertices)/sizeof(vertices[0]),true);


	//绘制实心的多边形
	glLineWidth(1);
	CCPoint filledVertices[] = { ccp(0,120), ccp(50,120), ccp(50,170), ccp(25,200), ccp(0,170) };
	//须要绘制多边形的点,參数2。点的个数  參数3  填充的颜色
	ccDrawSolidPoly(filledVertices,sizeof(filledVertices)/sizeof(filledVertices[0]),ccc4f(0, 255, 0, 255));


	//绘制矩形
	//參数1   起点   參数2  终点  參数3   填充的颜色
	//打开绘图工具画个矩形  事实上起点就是左上角   终点就是右下角
	ccDrawSolidRect(ccp(visibleSize.width-70,visibleSize.height-20),ccp(visibleSize.width-20,visibleSize.height-70),ccc4f(0, 255, 0, 255));



源代码连接http://download.csdn.net/detail/q269399361/7391247


posted on 2017-04-21 17:00  yutingliuyl  阅读(329)  评论(0编辑  收藏  举报