Create MovieClip sprite object in WebGL

Hello! I will present a small class that displays a sprite on a WebGL screen with a texture overlaid on it, but first you have to make yourself think a little about higher mathematics, namely the matrix. To do this, we need to connect the following:

#include <cheerp/client.h> //standard libraries cheerp
#include <cheerp/clientlib.h> //standard libraries cheerp
#include <cheerp/webgl.h> //webgl library
#include <math.h> //mathematical
#include <stdio.h> //standart std::std
#include "matrix.h" //matrix 2,3,4
#include "Camera.h" //camera webgl

Let’s look at the structure of the MovieClip class below:

class [[cheerp::jsexport]] MovieClip
{
public:
        MovieClip(WebGLRenderingContext* _gl, float width, float height); //init MovieClip
        void checkReady(); //Defines status at set copyVideo
        void setName(const char *value) //set name MovieClip
        {
        name = new char[strlen(value)];
        strcpy(name,value);
        }
        void setType(const char *value)
        {
        type = new char[strlen(value)];
        strcpy(type,value);
        }
        void setColor(float r, float g, float b)
        {
        color = new float[3];
        color[0] = r; color[1] = g; color[2] = b;
        }
        void setColor(float *value){color = value;}
        char* getName(){return name;}
        char* getType(){return type;}
        void set_timeupdate(bool value){ontimeupdate = value;}
        void set_playing(bool value){isPlaying = value;}
        bool get_playing(){return isPlaying;}
        void setQuality(float value){quality = value;}
        float getQuality(){return quality;}
        bool isCopyVideo(){return copyVideo;}
        void setCopyVideo(bool value){copyVideo = value;}
        int getClipType(){return clipType;}
        int getIndex(){return index-1;}
        int getMovieLength()
        {
        if(clipType == 0)return clipType;
        return Math.round(_playerVideo->get_duration()*(100 / 3.33));
        }
        int getCurrentTime()
        {
        if(clipType == 0)return clipType;
        return currentFrame;//Math.round(_playerVideo->get_currentTime()*(100 / 3.33));
        }
        void setCurrentTime(int value)
        {
        double cTime = value / (100 / 3.3);
        currentFrame = value;
        if(clipType > 0)
            _playerVideo->set_currentTime(cTime);
        }
        float getInnerWidth(MovieClip* component){return (x+width)-component->getWidth();}
        float getWidth(){return width;}
        float getHeight(){return height;}
        float getX(){return x;}
        float getY(){return y;}
        float getAlpha(){return alpha;}
        void setRect(float w, float h)
        {
        width = w; height = h;
        updateBuffer(); 
        }
        void setPos(float _x, float _y){x = _x; y = _y;}
        void setAlpha(float value){alpha = value;}
        void setStepAnimOffset(int offset);
        int **getAnimOffset(){return _anim_offset;}
        void printAnimOffset()
        {
        for(int i=0; i<MAX_ANIM_OFFSET; i++)
            console.log(_anim_offset[i][0]," ",_anim_offset[i][1]);
        }
        HTMLImageElement* getImageElement(){return _playerImage;}
        HTMLVideoElement* getVideoElement(){return _playerVideo;}
        void loadMovieClip(const char* url, int type);
        void loadSprite(const char* url, int type);
        void setIsTexture(bool value){isTexture = value;}
        bool getIsTexture(){return isTexture;}
        void setLockX(vec2 value){lockX = value;}
        void setLockY(vec2 value){lockY = value;}
        void setDragDrop(bool value){DragDrop = value;}
        bool getIsDrag(){return isDrag;}
        bool hitSelect(Camera *cam)
        {
        return ((cam->getMouseX() > x+(width / 3)) && (cam->getMouseX() < (x+width)+(width / 2)) 
               && (cam->getMouseY() > y) && (cam->getMouseY() < (y+height)));
        }
        vec2* getLockX(){return (vec2*)&lockX;}
        vec2* getLockY(){return (vec2*)&lockY;}
        void setParent(MovieClip* value){Parent = value;}
        MovieClip* getParent(){return Parent;}
        float getLocalX(float value);
        void setTexturePointer(WebGLTexture* value){textureID = value;}
        void setLocalX(float max, float value);
        void OnMouseMove(float _x, float _y);
        void OnMouseDown(float _x, float _y);
        void OnMouseUp(float _x, float _y);
        void updateTexture();
        void bindVP8();
        void bindFrameVP8(int index);
        void Render(bool textured, Camera* cam);
    protected:

    private:
        void updateBuffer();
        void InitTexture();
        char *name, *type;
        float width, height, x, y, alpha, quality;
        bool ontimeupdate, isPlaying, copyVideo, isTexture, bindInTexture;
        bool isDrag, DragDrop;
        vec2 lockX, lockY;
        float lastDragX,lastDragY;
        int clipType, currentFrame;
        float *color;
        int **_anim_offset;
        static int index;
        HTMLImageElement *_playerImage;
        HTMLVideoElement *_playerVideo;
        WebGLTexture *textureID;
        WebGLTexture **textures;
        WebGLBuffer* positionBuf;
        WebGLBuffer* texcoordBuf;
        WebGLRenderingContext* gl;
        MovieClip* Parent;
};

The MovieClip library will be presented separately, a little bit later.

Leave a Reply

Your email address will not be published. Required fields are marked *