【cocos2d-x 2.x 学习与应用总结】13: 借助CCGLProgram实现自定义绘制
2016-01-21 01:42
609 查看
前言
本文总结了如何借助CCGLProgram来实现自定义绘制的节点类,使用自定义的顶点着色器和片段着色器,实现一个绘制彩色矩形的节点类。绘制的效果图如下所示:
思路及实现
思路
目标是:实现一个可绘制对象A,绘制出一个彩色的矩形。首先, 要能实现绘制,那么A就要能够加入到节点树之中,这样引擎在遍历节点树进行绘制的时候,它才能够被绘制出来。怎样才能被加入到节点树?成为Node的子类, 然后addChild即可。
其次,要实现自定义绘制,就要重写Node::draw()方法,并且在draw调用之前,创建好顶点shader和片段shader,以及准备好shader program, 完成shader中变量的绑定和值传递。
思路清楚后,开始写代码。
实现 第1步: 自定义节点类CustomDrawNode继承自CCNode
CustomDrawNode作为一个自定义绘制节点类的父类的角色,具体的自定义绘制类继承CustomDrawNode. 它定义了绘制逻辑的骨架,具体的绘制操作延迟到不同的子类来完成,可以扩展出各种绘制操作,恩,这是模板方法设计模式的思路。// .h class CustomDrawNode : public cocos2d::CCNode { public: static CustomDrawNode* create(const char *vsFileName, const char *fsFileName); bool initWithShaders(const char *vsFileName, const char *fsFileName); virtual void customSetupBeforeLink() {} virtual void updateCustomUniforms() {} protected: CustomDrawNode() {} }; // .cpp // create方法,使用initWithShaders来完成初始化 CustomDrawNode* CustomDrawNode::create(const char *vsFileName, const char *fsFileName) { CustomDrawNode *self = new CustomDrawNode; if (self && self->initWithShaders(vsFileName, fsFileName)) { self->autorelease(); return self; } return nullptr; } bool CustomDrawNode::initWithShaders(const char *vs, const char *fs) { if (CCNode::init()) { // 创建并设置CCGLProgram. CCGLProgram *program = new CCGLProgram; program->initWithVertexShaderFilename(vs, fs); setShaderProgram(program); program->release(); customSetupBeforeLink(); // 完成shader中attribute的绑定等任务 program->link(); // 链接shader program program->updateUniforms(); // 绑定预定义的8个uniform updateCustomUniforms(); // 给shader中变量传值 return true; } return false; }
CustomDrawNode的创建通过指定一对着色器文件名,内部使用CCGLProgram来创建着色器程序
CustomDrawNode预留模板方法接口,让具体的子类来控制着色器程序的变量绑定及传值
customSetupBeforeLink: 在程序链接之前,实现绑定一些attribute等操作
updateCustomUniforms: 在程序链接之后,获取program中一些uniform的位置,并未绘制做准备,向OpenGL服务器传值等操作
实现 第2步: 定义绘制矩形类CustomRectangleNode继承CustomDrawNode
下面就开始定义要绘制的矩形类了,定义一个类叫CustomRectangleNode,它继承CustomDrawNode,并且根据自己使用的shader来实现父类预留的模板方法接口。CustomRectangleNode的具体实现取决于其使用的shader,因此首先要确定shader。因为我只想绘制一个彩色的矩形,shader很简单:
顶点着色器
#ifdef GL_ES precision mediump float; #endif attribute vec4 custom_a_position; // 为了区别于cocos预定义的shader中的a_position,名字起的繁琐一些。 void main() { gl_Position = CC_MVPMatrix * custom_a_position; // 使用cocos预定义的投影矩阵 }
片段着色器
#ifdef GL_ES precision mediump float; #endif uniform vec4 custom_u_color; // 区别于cocos预定义的u_color void main() { gl_FragColor = custom_u_color; }
顶点shader中定义了一个attribute, 片段shader中定义了一个uniform,这些对于了解绘制过程足够了。下面是CustomRectangleNode的实现:
// 成员变量的类型 attribute 和 uniform是在别的文件里定义的。 // cocos_include.h typedef GLuint uniform; typedef GLuint attribute; // CustomRectangleNode.h class CustomRectangleNode : public CustomDrawNode { public: static CustomRectangleNode* create(const char *vs, const char *fs); void draw() override; void customSetupBeforeLink() override; void updateCustomUniforms() override; protected: CustomRectangleNode() : _attribPosition(0), _uniformColor(0) {} const attribute _attribPosition; uniform _uniformColor; }; // CustomRectangleNode.cpp // 创建方法,通过父类接口来初始化 CustomRectangleNode* CustomRectangleNode::create(const char *vs, const char *fs) { auto self = new CustomRectangleNode; if (self && self->initWithShaders(vs, fs)) { self->autorelease(); return self; } return nullptr; } // 模板方法接口1 void CustomRectangleNode::customSetupBeforeLink() { // 在链接程序之前,绑定顶点shader中唯一的attribute: custom_a_position. getShaderProgram()->addAttribute("custom_a_position", _attribPosition); } // 模板方法接口2 void CustomRectangleNode::updateCustomUniforms() { // 程序链接之后,获得顶点着色器中唯一的uniform:custom_u_color _uniformColor = glGetUniformLocation(getShaderProgram()->getProgram(), "custom_u_color"); // 随机颜色 getShaderProgram()->setUniformLocationWith4f( _uniformColor, CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1()); } // 开始绘制 void CustomRectangleNode::draw() { // 调用program->use(), 为预定义的uniform传值 CC_NODE_DRAW_SETUP(); // 定义矩形顶点坐标,中心定位在屏幕中心,宽高是窗口一半。 auto size = CocosWindow::size(); auto center = CocosWindow::center(); GLfloat width = size.width/2; GLfloat height = size.height/2; GLfloat x = center.x - width/2; GLfloat y = center.y - height/2; GLfloat vertexes[] = { x, y, x+width, y, x, y+height, x+width, y+height, }; // 启用顶点数组, 并传值 glEnableVertexAttribArray(_attribPosition); glVertexAttribPointer(_attribPosition, 2, GL_FLOAT, false, sizeof(GL_FLOAT) * 2, vertexes); // 使用这四个顶点绘制两个三角形 glDrawArrays(GL_TRIANGLE_STRIP, 0, 4); // 关闭顶点数组 // glDisableVertexAttribArray(_attribPosition); 不注释掉这句的话,绘制会有点问题: 绘制完矩形之后,按钮什么的没有绘制。还没发现是咋回事 // 增加draw call次数 CC_INCREMENT_GL_DRAWS(1); }
好了,CustomRectangleNode定义完成了,
CustomRectangleNode重写了父类定义的模板方法customSetupBeforeLink(), 在其中中绑定了顶点着色器中的attribute:
custom_a_position,
CustomRectangleNode重写了父类定义的模板方法updateCustomUniforms,在其中绑定了片段着色器中的uniform:
custom_u_color, 并且给其赋值一个随机的颜色向量。
CustomRectangleNode重写了Node的draw()方法, 定义了顶点数组,并且把数组传给顶点shader中的
custom_a_position,最终实现了矩形的绘制。
下面是测试代码:
创建一个CustomRectangleNode, 并且把它addChild()到节点树即可。
void CustomDrawNodePage::onEnterState() { // add test cases. _createFuncs.clear(); _createFuncs.insert(_createFuncs.begin(), { std::bind(&CustomRectangleNode::create, "shaders/custom_rectangle_vert.glsl", "shaders/custom_rectangle_frag.glsl"), }); loadUI(); } void CustomDrawNodePage::loadUI() { auto node = _createFuncs[_testIndex](); // CustomRectangleNode::create("shaders/custom_rectangle_vert.glsl", "shaders/custom_rectangle_frag.glsl") ADD_CHILD(node); }
源码
CustomDrawNodePage.hCustomDrawNodePage.cpp
作者水平有限,对相关知识的理解和总结难免有错误,还望给予指正,非常感谢!
在这里也能看到这篇文章:github博客, CSDN博客, 欢迎访问
相关文章推荐
- Cocos2d-x中背景音乐和音效使用实例
- Cocos2d-x学习笔记之CCScene、CCLayer、CCSprite的默认坐标和默认锚点实验
- Cocos2d-x UI开发之CCControlPotentiometer控件类使用实例
- Cocos2d-x UI开发之文本类使用实例
- Cocos2d-x保存用户游戏数据之XML文件是否存在问题判断方法
- Cocos2d-x UI开发之菜单类使用实例
- Cocos2d-x UI开发之CCControlButton控件类实例
- Cocos2d-x学习笔记之世界坐标系、本地坐标系、opengl坐标系、屏幕坐标系
- Cocos2d-x UI开发之CCControlColourPicker控件类使用实例
- Cocos2d-x学习笔记之CCLayerColor层的使用实例
- Cocos2d-x Schedule定时器的使用实例
- Cocos2d-x中使用CCScrollView来实现关卡选择实例
- Cocos2d-x中CCEditBox文本输入框的使用实例
- cocos2d-x学习笔记之CCLayer、CCLayerColor、CCLayerGradient、CCLayerMultiplex场景层介绍
- Cocos2d-x UI开发之CCControlSlider控件类使用实例
- Cocos2d-x学习笔记之开发环境搭建
- Cocos2d-x学习笔记之Hello World!
- 使用C++进行Cocos2d-x游戏开发入门过程中的要点解析
- Cocos2d-x的内存管理总结
- Cocos2d-x 3.0中集成社交分享ShareSDK的详细步骤和常见问题解决