cocos2d-x shader(2) openGL初探

原创 2016年03月16日 17:09:16

* 1.ocos2d-x从3.0开始引入了一种新的渲染机制,所有的openGL渲染代码不再放到每一个node的draw函数里面,而是通过各种RenderCommand封装起来,然后添加到一个渲染队列里面去,最后在每一帧结束时把所有的这些命令都渲染出来*
.* 2.CCNode是cocos2d-x的渲染链,写游戏基本上就是和他打交道了,cocos2d-x同时只能渲染一个CCScene,因此CCScene是渲染的根节点。在构建游戏时,一般是一个Scene中添加一个或者多个CCLayer,一个Layer中又添加多个CCSprite或者CCMenu,CCSprite中还可以添加CCParticleSystem等等。这样就构建了一个渲染树,cocos2d-x历遍这个树来将图像显示在屏幕上。*
* 3.coco2d-x的渲染实际上是调用visit()函数来完成的:即visit()这个函数调用它包含的Child的zOrder<0的visit()函数,之后调用draw()函数,再调用Child的zOrder>=0的visit()函数,它实际上是一个深度优先的算法。他的Child是按照zOrder排序的,以保证渲染的正确性。draw()的作用是绘制自己。在CCSprite这些确实需要绘制的类中,draw()调用openGL的函数来完成绘制功能——把一个纹理映射到一个矩形上。*
** 4.如果要自定义绘制一些图像,可以重写draw()函数,不过不要忘记调用父类的draw()函数。

可以进行网状关系的管理,其实CCScene,CCLayer也是一个CCNode.它提供节点增删,包含,提供节点缩放,每个节点有一个照相机,提供动画支持,也就是说每一个从CCNode派生的类都可以执行动画操作; **


上一节我们学习了了cocos2d 如何使用shader,这一次我们来使用一下openGL,我参考了网上一些例子,很认同一句话,版本是硬伤,下面我们来使用openGL在cocos2d里绘制一个三角形,首先是3.7版本的,我们新建一个工程,修改HelloWorld里的代码如下

#include "HelloWorldScene.h"

USING_NS_CC;

Scene* HelloWorld::createScene()
{
    // 'scene' is an autorelease object
    auto scene = Scene::create();

    // 'layer' is an autorelease object
    auto 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 ( !Layer::init() )
    {
        return false;
    }
    this->setGLProgram(GLProgramCache::getInstance()->getGLProgram(GLProgram::SHADER_NAME_POSITION_COLOR));

    return true;
}

void HelloWorld::onDraw()
{
    //获得当前HelloWorld的shader
    auto glProgram = getGLProgram();
    //使用此shader
    glProgram->use();
    //设置该shader的一些内置uniform,主要是MVP,即model-view-project矩阵
    glProgram->setUniformsForBuiltins();

    auto size = Director::getInstance()->getWinSize();
    //指定将要绘制的三角形的三个顶点,分别位到屏幕左下角,右下角和正中间的顶端
    float vertercies[] = { 0, 0,   //第一个点的坐标
        size.width, 0,   //第二个点的坐标
        size.width / 2, size.height };  //第三个点的坐标
    //指定每一个顶点的颜色,颜色值是RGBA格式的,取值范围是0-1
    float color[] = { 0, 1, 0, 1,    //第一个点的颜色,绿色
        1, 0, 0, 1,  //第二个点的颜色, 红色
        0, 0, 1, 1 };  //第三个点的颜色, 蓝色
    //激活名字为position和color的vertex attribute
    GL::enableVertexAttribs(GL::VERTEX_ATTRIB_FLAG_POSITION | GL::VERTEX_ATTRIB_FLAG_COLOR);
    //分别给position和color指定数据源
    glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_POSITION, 2, GL_FLOAT, GL_FALSE, 0, vertercies);
    glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_COLOR, 4, GL_FLOAT, GL_FALSE, 0, color);
    //绘制三角形,所谓的draw call就是指这个函数调用
    glDrawArrays(GL_TRIANGLES, 0, 3);
    //通知cocos2d-x 的renderer,让它在合适的时候调用这些OpenGL命令
    CC_INCREMENT_GL_DRAWN_BATCHES_AND_VERTICES(1, 3);
    //如果出错了,可以使用这个函数来获取出错信息
    CHECK_GL_ERROR_DEBUG();
}

void HelloWorld::visit(cocos2d::Renderer *renderer, const Mat4 &transform, uint32_t parentFlags)
{
    Layer::visit(renderer, transform, parentFlags);
    _command.init(_globalZOrder);
    _command.func = CC_CALLBACK_0(HelloWorld::onDraw, this);
    Director::getInstance()->getRenderer()->addCommand(&_command);
}



#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"
USING_NS_CC;
class HelloWorld : public cocos2d::Layer
{
public:
    // there's no 'id' in cpp, so we recommend returning the class instance pointer
    static cocos2d::Scene* createScene();

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

    virtual void visit(Renderer *renderer, const Mat4& parentTransform, uint32_t parentFlags) override;

    void onDraw();

    // implement the "static create()" method manually
    CREATE_FUNC(HelloWorld);
private:
    CustomCommand _command;
};

#endif // __HELLOWORLD_SCENE_H__


这里写图片描述

为什么说版本是硬伤?在3.0里我修改到能运行结果。。。。。

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"
USING_NS_CC;
class HelloWorld : public cocos2d::Layer
{
public:
    // there's no 'id' in cpp, so we recommend returning the class instance pointer
    static cocos2d::Scene* createScene();

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

    virtual void visit(Renderer *renderer, const Mat4& parentTransform, uint32_t parentFlags) override;

    void onDraw();

    // implement the "static create()" method manually
    CREATE_FUNC(HelloWorld);
private:
    CustomCommand _command;
};

#endif // __HELLOWORLD_SCENE_H__


#include "HelloWorldScene.h"

USING_NS_CC;

Scene* HelloWorld::createScene()
{
    // 'scene' is an autorelease object
    auto scene = Scene::create();

    // 'layer' is an autorelease object
    auto 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 ( !Layer::init() )
    {
        return false;
    }
    this->setGLProgram(GLProgramCache::getInstance()->getGLProgram(GLProgram::SHADER_NAME_POSITION_COLOR));

    return true;
}

void HelloWorld::onDraw()
{
    //获得当前HelloWorld的shader
    auto glProgram = getGLProgram();
    //使用此shader
    glProgram->use();
    //设置该shader的一些内置uniform,主要是MVP,即model-view-project矩阵
    glProgram->setUniformsForBuiltins();

    auto size = Director::getInstance()->getWinSize();
    //指定将要绘制的三角形的三个顶点,分别位到屏幕左下角,右下角和正中间的顶端
    float vertercies[] = { 0, 0,   //第一个点的坐标
        size.width, 0,   //第二个点的坐标
        size.width / 2, size.height };  //第三个点的坐标
    //指定每一个顶点的颜色,颜色值是RGBA格式的,取值范围是0-1
    float color[] = { 0, 1, 0, 1,    //第一个点的颜色,绿色
        1, 0, 0, 1,  //第二个点的颜色, 红色
        0, 0, 1, 1 };  //第三个点的颜色, 蓝色
    //激活名字为position和color的vertex attribute
    GL::enableVertexAttribs(GL::VERTEX_ATTRIB_FLAG_POSITION | GL::VERTEX_ATTRIB_FLAG_COLOR);
    //分别给position和color指定数据源
    glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_POSITION, 2, GL_FLOAT, GL_FALSE, 0, vertercies);
    glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_COLOR, 4, GL_FLOAT, GL_FALSE, 0, color);
    //绘制三角形,所谓的draw call就是指这个函数调用
    glDrawArrays(GL_TRIANGLES, 0, 3);
    //通知cocos2d-x 的renderer,让它在合适的时候调用这些OpenGL命令
    CC_INCREMENT_GL_DRAWN_BATCHES_AND_VERTICES(1, 3);
    //如果出错了,可以使用这个函数来获取出错信息
    CHECK_GL_ERROR_DEBUG();
}

void HelloWorld::visit(cocos2d::Renderer *renderer, const Mat4 &transform, uint32_t parentFlags)
{
    Layer::visit(renderer, transform, parentFlags);
    _command.init(_globalZOrder);
    _command.func = CC_CALLBACK_0(HelloWorld::onDraw, this);
    Director::getInstance()->getRenderer()->addCommand(&_command);
}

结果是这样的

这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Cocos2d-x opengl shader file

基于Cocos2d-x学习OpenGL ES 2.0系列——OpenGL ES渲染之Shader准备(7)

Cocos2d-x底层图形绘制是使用OpenGL ES协议的。OpenGL ES是什么呢?   OpenGL ES(OpenGl for Embedded System)是OpenGL三维图形API...

Cocos2D-X shader(一) 渲染机制

Cocos2D-X渲染机制     Cocos2D-X 从3.0开始引入了一种新的渲染机制,所有的OpenGL渲染代码不再放到每一个node的draw函数里面,而是通过各种RenderCommand...

Cocos2d-x shader学习3: sprite描边(Outline)

Cocos2d-x 3.x的label使用了freetype字体引擎(http://www.freetype.org/),可以很轻松的实现描边和阴影效果。所以本篇文章只针对于sprite来实现描边效果...

cocos2d-x—使用shader使图片背景透明

这里用shader处理了像素,使黑色背景透明,直接上代码 ShaderSprite.h [cpp] view plaincopyprint? ...

cocos2d-x3.2中用shader使图片背景透明

今天有人问我问题,说怎么实现背景虚化,换句话说,就是把某张图片的背景颜色(比如白色)给弄没了,不然贴在屏幕上有白色背景。下面是解决方法。用shader处理了像素,使黑色背景透明。 Shader.h#i...

Cocos2D-X shader(五) cocostudio导出界面置灰及复原lua实现版

利用cocostudio导出的界面,实现界面置灰与复原效果: 需要变色的有三种类型控件:普通图片(ImageView),九宫格切图(Scale9Sprite)以及文字(Text) ...

cocos2d-x初探学习笔记(21)--精灵类

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 在游戏中还有一个比较重要的元素,那就是精...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)