1. 程式人生 > >Cocos2d-X直接使用OpenGL接口

Cocos2d-X直接使用OpenGL接口

posit 位置 popu shared 保存 chm nts sco 精靈

Cocos2d-X是基於基於OpenGL ES的2D遊戲引擎,所以Cocos2d-X能夠直接使用OpenGL接口

首先建立一個Draw類,用於處理OpenGL接口

在Draw.h中加入以下的代碼

#ifndef _Draw_H_
#define _Draw_H_

#include "cocos2d.h"
USING_NS_CC;

class Draw : public CCLayer
{
public:
    static CCScene* scene();

    CREATE_FUNC(Draw);

    bool init();

    void draw();
};

#endif


實例1:使用OpenGL接口畫一個點

在Draw.cpp中加入以下的代碼

#include "Draw.h"

CCScene* Draw::scene()
{
    CCScene* s = CCScene::create();

    Draw* layer = Draw::create();

    s->addChild(layer);

    return s;
}

bool Draw::init()
{
    CCLayer::init();

    return true;
}

void Draw::draw()
{
    //得到窗體的大小
    CCSize winSize = CCDirector::sharedDirector()->getWinSize();

    //設置坐標
    CCPoint center = ccp(winSize.width / 2, winSize.height / 2);

    //點:默認一個像素大小,白色
    //ccPointSize設置點的大小
    ccPointSize(25);

    //ccDrawColor4B設置點的顏色
    ccDrawColor4B(255, 0, 0, 255);

    //設置點的位置
    ccDrawPoint(center);
}

運行結果:

技術分享


實例2:使用OpenGL接口畫一條線

在Draw.cpp中加入以下的代碼

#include "Draw.h"

CCScene* Draw::scene()
{
    CCScene* s = CCScene::create();

    Draw* layer = Draw::create();

    s->addChild(layer);

    return s;
}

bool Draw::init()
{
    CCLayer::init();

    return true;
}

void Draw::draw()
{
    //得到窗體的大小
    CCSize winSize = CCDirector::sharedDirector()->getWinSize();

    //設置坐標
    CCPoint center = ccp(winSize.width / 2, winSize.height / 2);
     /*center.x = winSize.width / 2
     center.y = winSize.height / 2*/


    // 線:默認是一個像素寬度。白色
    //ccDrawColor4B設置顏色
    ccDrawColor4B(255, 255, 0, 255);
   
    //glLineWidth是設置線條寬度的函數
    glLineWidth(5);
	
    ccDrawLine(center,//起始點的位置 
        ccpAdd(center, ccp(100, 100))//中點的位置
        );

       /*
       ccpAdd(center, ccp(100, 100))
       表示:center.x + 100, center.y + 100
       */
}


運行結果:

技術分享


實例3:使用OpenGL接口畫多個點

在Draw.cpp中加入以下的代碼

#include "Draw.h"

CCScene* Draw::scene()
{
    CCScene* s = CCScene::create();

    Draw* layer = Draw::create();

    s->addChild(layer);

    return s;
}

bool Draw::init()
{
    CCLayer::init();

    return true;
}

void Draw::draw()
{
    //得到窗體的大小
    CCSize winSize = CCDirector::sharedDirector()->getWinSize();

    //設置坐標
    CCPoint center = ccp(winSize.width / 2, winSize.height / 2);
     /*center.x = winSize.width / 2
     center.y = winSize.height / 2*/

    //設置點的顏色
	ccDrawColor4B(255, 0, 0, 255);
	
    //定義一個數組保存點的位置
    CCPoint pts[] = { 
        CCPoint(100, 100), 
        CCPoint(100, 200), 
        CCPoint(200, 200), 
        CCPoint(200, 100) 
    };
	
    //畫點
    ccDrawPoints(pts, 4);
}

運行結果:

技術分享


實例4:使用OpenGL接口畫一個有圓心連線的圓

在Draw.cpp中加入以下的代碼

#include "Draw.h"

CCScene* Draw::scene()
{
    CCScene* s = CCScene::create();

    Draw* layer = Draw::create();

    s->addChild(layer);

    return s;
}

bool Draw::init()
{
    CCLayer::init();

    return true;
}

void Draw::draw()
{
    //得到窗體的大小
    CCSize winSize = CCDirector::sharedDirector()->getWinSize();

    //設置坐標
    CCPoint center = ccp(winSize.width / 2, winSize.height / 2);
     /*center.x = winSize.width / 2
     center.y = winSize.height / 2*/

    //設置圓圈的顏色
	ccDrawColor4B(192, 192, 0, 255);

      /*畫圓圈
	  參數1:圓心
      參數2:半徑
      參數3:初始化時旋轉的弧度(3.14=180度)
      參數4:線段數。
      參數5:是否要圓心連線
      */
	ccDrawCircle(center, 100, 1.57, 200, true);
}

運行結果:

技術分享


實例5:使用OpenGL接口畫一個沒有圓心連線的圓

在Draw.cpp中加入以下的代碼

#include "Draw.h"

CCScene* Draw::scene()
{
    CCScene* s = CCScene::create();

    Draw* layer = Draw::create();

    s->addChild(layer);

    return s;
}

bool Draw::init()
{
    CCLayer::init();

    return true;
}

void Draw::draw()
{
    //得到窗體的大小
    CCSize winSize = CCDirector::sharedDirector()->getWinSize();

    //設置坐標
    CCPoint center = ccp(winSize.width / 2, winSize.height / 2);
     /*center.x = winSize.width / 2
     center.y = winSize.height / 2*/

    //設置圓圈的顏色
	ccDrawColor4B(192, 192, 0, 255);

      /*畫圓圈
	  參數1:圓心
      參數2:半徑
      參數3:初始化時旋轉的弧度(3.14=180度)
      參數4:線段數,
      參數5:是否要圓心連線
      */
	ccDrawCircle(center, 100, 1.57, 200, false);
}


運行結果:

技術分享


實例6:使用OpenGL接口畫一個封口的多邊形

在Draw.cpp中加入以下的代碼

#include "Draw.h"

CCScene* Draw::scene()
{
    CCScene* s = CCScene::create();

    Draw* layer = Draw::create();

    s->addChild(layer);

    return s;
}

bool Draw::init()
{
    CCLayer::init();

    return true;
}

void Draw::draw()
{
    //得到窗體的大小
    CCSize winSize = CCDirector::sharedDirector()->getWinSize();

    //設置坐標
    CCPoint center = ccp(winSize.width / 2, winSize.height / 2);
     /*center.x = winSize.width / 2
     center.y = winSize.height / 2*/

    //設置點的顏色
	ccDrawColor4B(192, 192, 0, 255);

    //定義一個數組保存點的位置
    CCPoint pts[] = { 
        CCPoint(100, 100), 
        CCPoint(100, 200), 
        CCPoint(200, 200), 
        CCPoint(200, 100),
        CCPoint(150, 50)
    };

    // 畫封口的多邊形
	ccDrawPoly(pts, 5, true);
}

運行結果:

技術分享


實例7:使用OpenGL接口畫一個不封口的多邊形

在Draw.cpp中加入以下的代碼

#include "Draw.h"

CCScene* Draw::scene()
{
    CCScene* s = CCScene::create();

    Draw* layer = Draw::create();

    s->addChild(layer);

    return s;
}

bool Draw::init()
{
    CCLayer::init();

    return true;
}

void Draw::draw()
{
    //得到窗體的大小
    CCSize winSize = CCDirector::sharedDirector()->getWinSize();

    //設置坐標
    CCPoint center = ccp(winSize.width / 2, winSize.height / 2);
     /*center.x = winSize.width / 2
     center.y = winSize.height / 2*/

    //設置點的顏色
	ccDrawColor4B(192, 192, 0, 255);

    //定義一個數組保存點的位置
    CCPoint pts[] = { 
        CCPoint(100, 100), 
        CCPoint(100, 200), 
        CCPoint(200, 200), 
        CCPoint(200, 100),
        CCPoint(150, 50)
    };

    // 畫封口的多邊形
	ccDrawPoly(pts, 5, false);
}

運行結果:

技術分享


實例8:使用OpenGL接口畫一個實心多邊形

在Draw.cpp中加入以下的代碼

#include "Draw.h"

CCScene* Draw::scene()
{
    CCScene* s = CCScene::create();

    Draw* layer = Draw::create();

    s->addChild(layer);

    return s;
}

bool Draw::init()
{
    CCLayer::init();

    return true;
}

void Draw::draw()
{
    //得到窗體的大小
    CCSize winSize = CCDirector::sharedDirector()->getWinSize();

    //設置坐標
    CCPoint center = ccp(winSize.width / 2, winSize.height / 2);
     /*center.x = winSize.width / 2
     center.y = winSize.height / 2*/

    //設置點的顏色
	ccDrawColor4B(192, 192, 0, 255);

       //定義數組保存點的位置
	CCPoint pts2[] = {
        CCPoint(300, 100), 
        CCPoint(400, 200), 
        CCPoint(400, 300)
    };
	
    //畫實心多邊形
    ccDrawSolidPoly(pts2, 3, ccc4f(1, 0, 0, 1));
}

運行結果:

技術分享


實例9:使用OpenGL接口實現Bezier曲線

在Draw.cpp中加入以下的代碼

#include "Draw.h"

CCScene* Draw::scene()
{
    CCScene* s = CCScene::create();

    Draw* layer = Draw::create();

    s->addChild(layer);

    return s;
}

bool Draw::init()
{
    CCLayer::init();

    return true;
}

void Draw::draw()
{
    //得到窗體的大小
    CCSize winSize = CCDirector::sharedDirector()->getWinSize();

    //設置坐標
    CCPoint center = ccp(winSize.width / 2, winSize.height / 2);
     /*center.x = winSize.width / 2
     center.y = winSize.height / 2*/

    //設置點的顏色
	ccDrawColor4B(192, 192, 0, 255);

      //定義數組保存點的位置
	CCPoint pts2[] = {
        CCPoint(300, 100), 
        CCPoint(400, 200), 
        CCPoint(400, 300)
    };

    //Bezier曲線
	//二階Bezier曲線
	ccDrawQuadBezier(pts2[0], pts2[1], pts2[2], 10);

}


運行結果:

技術分享


實例10:使用OpenGL接口實現二階Bezier曲線

在Draw.cpp中加入以下的代碼

#include "Draw.h"

CCScene* Draw::scene()
{
    CCScene* s = CCScene::create();

    Draw* layer = Draw::create();

    s->addChild(layer);

    return s;
}

bool Draw::init()
{
    CCLayer::init();

    return true;
}

void Draw::draw()
{
    //得到窗體的大小
    CCSize winSize = CCDirector::sharedDirector()->getWinSize();

    //設置坐標
    CCPoint center = ccp(winSize.width / 2, winSize.height / 2);
     /*center.x = winSize.width / 2
     center.y = winSize.height / 2*/

    //定義數組保存點的位置
    CCPoint pts[] = { 
        CCPoint(100, 100), 
        CCPoint(100, 200), 
        CCPoint(200, 200), 
        CCPoint(200, 100)
    };

    //定義數組保存點的位置
	CCPoint pts2[] = {
        CCPoint(300, 100), 
        CCPoint(400, 200), 
        CCPoint(400, 300)
    };

   // Bezier曲線
	// 二階Bezier曲線
	ccDrawQuadBezier(pts2[0], pts2[1], pts2[2], 10);

	ccDrawColor4B(90, 90, 255, 255);
	ccDrawCubicBezier(pts[0], pts[1], pts2[2], pts[3], 10);

}

運行結果:

技術分享

??

實例11:使用OpenGL接口實現通過鼠標點擊畫多邊形

首先建立一個ActiveDraw類。用於處理OpenGL接口

在ActiveDraw.h中加入以下的代碼

#ifndef __ActiveDraw_H__
#define __ActiveDraw_H__

#include "cocos2d.h"
USING_NS_CC;

class ActiveDraw : public CCLayer
{
public:
	static CCScene* scene();
	
    CREATE_FUNC(ActiveDraw);
	
    bool init();

    //設置觸摸事件
	bool ccTouchBegan(CCTouch*, CCEvent*);

    //保存觸摸點
	CCPoint _pts[100];

    //記錄有效的觸摸點
    int _ptsCount;

	void draw();
};

#endif


在ActiveDraw.cpp中加入以下的代碼

#include "ActiveDraw.h"


CCScene* ActiveDraw::scene()
{
	CCScene* s = CCScene::create();
	
    s->addChild(ActiveDraw::create());
	
    return s;
}

bool ActiveDraw::init()
{
	CCLayer::init();

    //處理觸摸事件
	setTouchEnabled(true);
	setTouchMode(kCCTouchesOneByOne);

	_ptsCount = 0;

	return true;
}

bool ActiveDraw::ccTouchBegan(CCTouch* touch, CCEvent* ev)
{
	//得到觸摸點的坐標
	CCPoint pt = touch->getLocation(); // save 

	//將坐標保存到數組中
	_pts[_ptsCount++] = pt;

	return true;
}

void ActiveDraw::draw()
{
    //得到窗體的大小
	CCSize winSize = CCDirector::sharedDirector()->getWinSize();
	
    //設置點的位置
    CCPoint center = ccp(winSize.width / 2, winSize.height / 2);

	//畫多邊形
	ccDrawPoly(_pts, _ptsCount, true);
}


運行結果:

技術分享


實例11:使用OpenGL接口實現通過鼠標點擊畫多邊形2.0

首先建立一個ActiveDraw類,用於處理OpenGL接口

在ActiveDraw.h中加入以下的代碼

#ifndef __ActiveDraw_H__
#define __ActiveDraw_H__

#include "cocos2d.h"
USING_NS_CC;

class ActiveDraw : public CCLayer
{
public:
	static CCScene* scene();
	
    CREATE_FUNC(ActiveDraw);
	
    bool init();

    //設置觸摸事件
	bool ccTouchBegan(CCTouch*, CCEvent*);

    //保存觸摸點
	CCPoint _pts[100];

    //記錄有效的觸摸點
    int _ptsCount;

    //定義精靈
	CCSprite* _sprite;

	void draw();
};

#endif

在ActiveDraw.cpp中加入以下的代碼

#include "ActiveDraw.h"


CCScene* ActiveDraw::scene()
{
	CCScene* s = CCScene::create();
	
    s->addChild(ActiveDraw::create());
	
    return s;
}

bool ActiveDraw::init()
{
	CCLayer::init();

    //處理觸摸事件
	setTouchEnabled(true);
	setTouchMode(kCCTouchesOneByOne);

	_ptsCount = 0;

    //創建精靈
	_sprite = CCSprite::create();
   addChild(_sprite);

	return true;
}

bool ActiveDraw::ccTouchBegan(CCTouch* touch, CCEvent* ev)
{
    //得到觸摸點的坐標
	CCPoint pt = touch->getLocation();
	_pts[_ptsCount++] = pt;

    //得到窗體的大小
    CCSize winSize = CCDirector::sharedDirector()->getWinSize();

    //設置精靈的位置(精靈的位置為隨機位置)
    _sprite->setPosition(ccp(winSize.width*CCRANDOM_0_1(), winSize.height*CCRANDOM_0_1()));

	return true;
}

void ActiveDraw::draw()
{
    //得到窗體的大小
	CCSize winSize = CCDirector::sharedDirector()->getWinSize();
	
    //設置點的位置
    CCPoint center = ccp(winSize.width / 2, winSize.height / 2);

    //畫多邊形
	ccDrawPoly(_pts, _ptsCount, true);

	if(_sprite)
    {
        //畫圓形
        ccDrawCircle(_sprite->getPosition(), 20, 0, 100, true);
    }
}

運行結果:

技術分享

?


實例12:使用OpenGL接口實現畫線段

首先建立一個DrawNode類,用於處理OpenGL接口

在DrawNode.h中加入以下的代碼

#ifndef _DrawNode_H_
#define _DrawNode_H_

#include "cocos2d.h"
USING_NS_CC;

class DrawNode : public CCLayer
{
public:
    static CCScene* scene();

    CREATE_FUNC(DrawNode);

    bool init();
};

#endif


在DrawNode.cpp中加入以下的代碼
#include "DrawNode.h"

CCScene* DrawNode::scene()
{
    CCScene* s = CCScene::create();

    DrawNode* layer = DrawNode::create();

    s->addChild(layer);

    return s;
}

bool DrawNode::init()
{
    //初始化父類
    CCLayer::init();

    //創建DrawNode
    CCDrawNode* node = CCDrawNode::create();

     //得到窗體的大小
    CCSize winSize = CCDirector::sharedDirector()->getWinSize();
    
    //設置點的坐標
    CCPoint center = ccp(winSize.width / 2, winSize.height / 2);

    //設置node的位置
    node->setPosition(center);

    //畫一條線段
    node->drawSegment(ccp(0, 0), ccp(100, 100), 2, ccc4f(1, 0, 0, 1));

    //加入node
    addChild(node);

    return true;
}


運行結果: 技術分享?? ??

Cocos2d-X直接使用OpenGL接口