cocos2dx opengl入门系列四-显示图片

女爷i 2022-06-13 01:09 178阅读 0赞

运行环境：

mac 10.12.2

xcode Version 8.2.1

cocos2dx-x-3.13.1

代码：

新建cocos2dx项目，具体操作官网有教程。新建好后，

新建Test.cpp，代码如下：

//
    //  Test.cpp
    //  Texture
    //
    //  Created by zhufu on 2017/3/28.
    //
    //
    
    #include "Test.h"
    
    Test* Test::create()
    {
        Test* test = new(std::nothrow) Test();
        if(test && test->init())
        {
            test->autorelease();
            return test;
        }
        else
        {
            delete test;
            test = nullptr;
            return nullptr;
        }
    }
    
    bool Test::init()
    {
        glEnable(GL_BLEND);
        glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
        
        initCommand();
        loadShader();
        loadTexture();
        loadRectangle();
        
        return true;
    }
    
    void Test::flipVertical(int width, int height, unsigned char* arr)
    {
        int index = 0, f_index, cycle=height/2;
        char buf;
        for (int i = 0; i < cycle; i++)
        {
            for (int j = 0; j < width*Test::Format_RGBA; j++)
            {
                //当前像素
                index = i*width*Test::Format_RGBA + j;
                //需要交换的像素
                f_index = (height - 1 - i)*width*Test::Format_RGBA + j;
                //缓存当前像素
                buf = arr[index];
                //交换像素
                arr[index] = arr[f_index];
                //交换回像素
                arr[f_index] = buf;
            }
        }
    }
    
    
    void Test::loadShader()
    {
        _glProgram = new GLProgram();
        _glProgram->initWithFilenames("shader/myVertexShader.vsh", "shader/myFragmentShader.fsh");
        _glProgram->link();
    }
    
    void Test::loadTexture()
    {
        Image *image = new Image;
        std::string imagePath = FileUtils::getInstance()->fullPathForFilename("HelloWorld.png");
        image->initWithImageFile(imagePath);
        unsigned char *imageData = image->getData();
        int width = image->getWidth();
        int height = image->getHeight();
        flipVertical(width, height, imageData);
        
        CCLOG("width %d", width);
        
        //别忘了释放image内存
        //    CC_SAFE_DELETE(image);
        
        glGenTextures(1, &TEXTUREID);
        glBindTexture(GL_TEXTURE_2D, TEXTUREID);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
        glTexImage2D(GL_TEXTURE_2D,
                     0,
                     GL_RGBA,
                     width,
                     height,
                     0,
                     GL_RGBA,
                     GL_UNSIGNED_BYTE,
                     imageData);
        glBindTexture(GL_TEXTURE_2D, 0);
    }
    
    void Test::loadRectangle()
    {
        glGenVertexArrays(1, &_vao);
        glBindVertexArray(_vao);
        
        //make and bind VBO;
        GLuint vbo = 0;
        glGenBuffers(1, &vbo);
        glBindBuffer(GL_ARRAY_BUFFER, vbo);
        
        //put the rectangle vertices(XYZ) and texture coordinates (UV) into the vbo
        GLfloat textureData[] = {
            //  X     Y     Z       U     V
            -1.0f, 1.0f, 0.0f,   0.0f, 1.0f,
            1.0f, 1.0f, 0.0f,   1.0f, 1.0f,
            -1.0f,-1.0f, 0.0f,   0.0f, 0.0f,
            1.0f,-1.0f , 0.0f,   1.0f, 0.0f,
        };
        glBufferData(GL_ARRAY_BUFFER, sizeof(textureData), textureData, GL_STATIC_DRAW);
        
        //connect the xyz to the "vert" arrribute of the vertex shader
        glEnableVertexAttribArray(_glProgram->getAttribLocation("vert"));
        glVertexAttribPointer(_glProgram->getAttribLocation("vert"), 3, GL_FLOAT, GL_FALSE, 5 * sizeof(GLfloat), nullptr);
        
        glEnableVertexAttribArray(_glProgram->getAttribLocation("vertTexCoord"));
        glVertexAttribPointer(_glProgram->getAttribLocation("vertTexCoord"), 2, GL_FLOAT, GL_TRUE, 5 * sizeof(GLfloat), (const GLvoid*)(3*sizeof(GLfloat)));
    }
    
    void Test::initCommand()
    {
        _command.init(getLocalZOrder());
        _command.func = CC_CALLBACK_0(Test::onDraw, this);
    }
    
    void Test::draw(Renderer *renderer, const Mat4 &transform, uint32_t platform)
    {
        Director::getInstance()->getRenderer()->addCommand(&_command);
    }
    
    void Test::onDraw()
    {
        //clear everything
        glClearColor(0, 0, 0, 1);
        glClear(GL_COLOR_BUFFER_BIT);
        
        //bind the program (the shaders)
        _glProgram->use();
        
        //bind the texture and set the "tex" uniform in the fragment shader
        glActiveTexture(GL_TEXTURE0);
        glBindTexture(GL_TEXTURE_2D, TEXTUREID);
        GLuint tex = glGetUniformLocation(_glProgram->getProgram(), "tex");
        glUniform1i(tex, 0);
        
        //bind the vao
        glBindVertexArray(_vao);
        
        //draw the vao
        glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
    }

新建Test.h，代码如下：

//
    //  Test.h
    //  Texture
    //
    //  Created by zhufu on 2017/3/28.
    //
    //
    
    #ifndef Test_h
    #define Test_h
    
    #include <stdio.h>
    USING_NS_CC;
    
    class Test : public Node
    {
    public:
        
        enum Format {
            Format_Grayscale = 1, /**< one channel: grayscale */
            Format_GrayscaleAlpha = 2, /**< two channels: grayscale and alpha */
            Format_RGB = 3, /**< three channels: red, green, blue */
            Format_RGBA = 4 /**< four channels: red, green, blue, alpha */
        };
        
        static Test* create();
        virtual bool init() override;
        virtual void draw(Renderer* renderer, const Mat4 &transform, uint32_t platform) override;
        void onDraw();
        
        void loadShader();
        void loadTexture();
        void loadRectangle();
        void initCommand();
        void flipVertical(int width, int height, unsigned char* arr);
        
    private:
        GLuint TEXTUREID;
        GLProgram* _glProgram;
        GLuint _vao;
        CustomCommand _command;
    };
    
    #endif /* Test_h */

如图：

![Center][]

修改HelloWorldScene.cpp，

先

include "Test.h"

再修改CreateScene方法：

Scene* HelloWorld::createScene()
    {
        // 'scene' is an autorelease object
        auto scene = Scene::create();
        
        auto test = Test::create();
        scene->addChild(test);
        
        // 'layer' is an autorelease object
        auto layer = HelloWorld::create();
    
        // add layer as a child to scene
        scene->addChild(layer);
    
        // return the scene
        return scene;
    }

如图：

![Center 1][]

在Resources方位夹下新建shader文件夹，再在shader新建myVertexShader.vsh和myFragmentShader.fsh文件。

如图：

![Center 2][]

myVertexShader.vsh

attribute vec3 vert;
    attribute vec2 vertTexCoord;
    
    varying vec2 textureOut;
    
    void main() {
        // Pass the tex coord straight through to the fragment shader
        textureOut = vertTexCoord;
        
        gl_Position =  vec4(vert, 1);
    }

myFragmentShader.fsh

uniform sampler2D tex;
    
    varying vec2 textureOut;
    
    void main() {
        gl_FragColor = texture2D(tex, textureOut);
    }

还有，最后一人是修改cocos2dx的适配模式，就是修改AppDelegate.cpp文件，如图：

![Center 3][]

修改成：

![Center 4][]

接下来，可以开心地运行程序了。

运行效果：

![Center 5][]

[Center]: /images/20220613/e57ad9a9dd4a44d98100ae7c0c731bea.png
[Center 1]: /images/20220613/f2f885ac8ff549448c96454a372adf26.png
[Center 2]: /images/20220613/6b7f425d91634c2081ebe7547bbf06e1.png
[Center 3]: /images/20220613/ae8c661bc3274794a91214e9d49ff38d.png
[Center 4]: /images/20220613/8078ece213394ebcb24574b36ae494a5.png
[Center 5]: /images/20220613/5b3bef24484544eca635b80b1b3a7aee.png