Added stuff and things...
authorJimmy Christensen <dusted@dusted.dk>
Sun, 20 Mar 2016 11:11:25 +0000 (12:11 +0100)
committerJimmy Christensen <dusted@dusted.dk>
Sun, 20 Mar 2016 11:11:25 +0000 (12:11 +0100)
game/data/gl/2d_fragment.js
game/data/gl/2d_vertex.js
game/src/DstEng.js

index 67d7ad7..23ff252 100644 (file)
@@ -1,15 +1,16 @@
 precision highp float;
  
-// our texture
-uniform sampler2D u_image; 
-// the texCoords passed in from the vertex shader.
-varying vec2 v_texCoord;
+// The texture
+uniform sampler2D u_image;
 
-//Color
+// texCoords passed in from the vertex shader.
+varying vec2 v_texCoord;
 
 void main() {
    // Look up a color from the texture.
    vec4 col = texture2D(u_image, v_texCoord);
+   
+   //Colorkey out 00FFFF
    if( col.rgb == vec3( 0.0, 1.0, 1.0 ) )
    discard;
    
index 09968f2..3c2f977 100644 (file)
@@ -1,15 +1,11 @@
 attribute vec2 a_texCoord;
 attribute vec2 a_position;
 
-uniform vec2 u_frameSize;
-uniform vec2 u_frameGridPos;
 uniform vec2 u_resolution;
 uniform vec2 u_translation;
 
 varying vec2 v_texCoord;
 
-
-
 void main() {
     // convert the rectangle from pixels to 0.0 to 1.0
     vec2 position = a_position + u_translation;
@@ -27,5 +23,5 @@ void main() {
     
        // pass the texCoord to the fragment shader
    // The GPU will interpolate this value between points
-   v_texCoord = (a_texCoord + (u_frameSize*u_frameGridPos) );
+   v_texCoord = a_texCoord;
 }
index 0e0e764..1cf0763 100644 (file)
@@ -1,6 +1,7 @@
 /* globals $ */
 
 var timeScale = 1;
+var timeDelta = 0;
 
 function DstEng(config) {
     this.accTs = 0;
@@ -51,19 +52,19 @@ DstEng.prototype.log = function() {
 DstEng.prototype.initGl = function() {
     try {
         this.gl = this.cfg.screen.getContext("webgl");
-        if(! this.gl ) { 
+        if (!this.gl) {
             this.gl = this.cfg.screen.getContext("experimental-webgl");
         }
         this.gl.viewportWidth = this.cfg.screen.width;
         this.gl.viewportHeight = this.cfg.screen.height;
-  
-  
-  //http://mrdoob.github.io/webgl-blendfunctions/blendfunc.html      
-/*        var gl = this.gl;
-gl.enable( gl.BLEND );
-gl.blendEquation( gl.FUNC_ADD );
-gl.blendFunc( gl.SRC_ALPHA, gl.DST_ALPHA ); */
+
+
+        //http://mrdoob.github.io/webgl-blendfunctions/blendfunc.html      
+        /*        var gl = this.gl;
+         
+        gl.enable( gl.BLEND );
+        gl.blendEquation( gl.FUNC_ADD );
+        gl.blendFunc( gl.SRC_ALPHA, gl.DST_ALPHA ); */
     } catch (e) {}
 
     return !!this.gl;
@@ -181,8 +182,6 @@ DstEng.prototype.createProgram = function(gl, vertexShader, fragmentShader) {
         program: program,
         a_texCoord: gl.getAttribLocation(program, "a_texCoord"),
         a_pos: gl.getAttribLocation(program, "a_position"),
-        u_frameSize: gl.getUniformLocation(program, "u_frameSize"),
-        u_frameGridPos: gl.getUniformLocation(program, "u_frameGridPos"),
         u_res: gl.getUniformLocation(program, "u_resolution"),
         u_translation: gl.getUniformLocation(program, "u_translation")
     };
@@ -522,9 +521,8 @@ DstEng.prototype.startLoader = function() {
 
     var texture = new this.Texture(this.gl, {
         img: this.res.img_DstEng,
-        cut: [0, 0, 160, 120],
+        cut: [0, 0, 320, 240],
         numFrames: 1,
-        animate: false,
         frameTime: 0
     });
 
@@ -541,45 +539,32 @@ DstEng.prototype.startLoader = function() {
     this.gl.bindBuffer(this.gl.ARRAY_BUFFER, polyBuffer);
     this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array([
         0, 0,
-        0.0, 0.0,
         w, 0,
-        1.0, 0.0,
         0, h,
-        0.0, 1.0,
         0, h,
-        0.0, 1.0,
         w, 0,
-        1.0, 0.0,
         w, h,
-        1.0, 1.0
     ]), this.gl.STATIC_DRAW);
 
     var brick = this.gl.createBuffer();
     this.gl.bindBuffer(this.gl.ARRAY_BUFFER, brick);
     w = h = 20;
-    var glw = 20 / 480;
+
     this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array([
         0, 0,
-        0.0, 0.0,
         w, 0,
-        glw, 0.0,
         0, h,
-        0.0, 1.0,
         0, h,
-        0.0, 1.0,
         w, 0,
-        glw, 0.0,
         w, h,
-        glw, 1.0
     ]), this.gl.STATIC_DRAW);
 
     var bricks = new this.PolyGroup(brick);
     var brickTex = new this.Texture(this.gl, {
         img: this.res.img_tiles,
         cut: [0, 0, 20, 20],
-        numFrames: 10,
-        frameTime: 100,
-        animate: true
+        numFrames: 24,
+        frameTime: 1
     });
 
 
@@ -597,49 +582,64 @@ DstEng.prototype.startLoader = function() {
         if (this.pos[0] < 0) {
             this.pos[0] = 0;
             this.vx *= -1;
+
             //   snd.play();
-            this.frameGridPos[0]++;
-            if (this.frameGridPos[0] > 9) {
-                this.frameGridPos[0] = 0;
-            }
+/*            this.frame++;
+            if (this.frame == this.tex.numFrames) {
+                this.frame = 0;
+            }*/
         } else if (this.pos[0] > 320 - 20) {
             this.pos[0] = 320 - 20;
             this.vx *= -1;
             //            this.frameGridPos = [Math.floor(Math.random() * 10), 0];
-            this.frameGridPos[0]++;
-            if (this.frameGridPos[0] > 9) {
-                this.frameGridPos[0] = 0;
-            }
+            /*this.frame++;
+            if (this.frame == this.tex.numFrames) {
+                this.frame = 0;
+            }*/
         }
 
         if (this.pos[1] < 0) {
-            this.frameGridPos[0]++;
-            if (this.frameGridPos[0] > 9) {
-                this.frameGridPos[0] = 0;
-            }
+            /*this.frame++;
+            if (this.frame == this.tex.numFrames) {
+                this.frame = 0;
+            }*/
             //          this.frameGridPos = [Math.floor(Math.random() * 10), 0];
             this.pos[1] = 0;
             this.vy *= -1;
         } else if (this.pos[1] > 240 - 20) {
             //        this.frameGridPos = [Math.floor(Math.random() * 10), 0];
-            this.frameGridPos[0]++;
-            if (this.frameGridPos[0] > 9) {
-                this.frameGridPos[0] = 0;
-            }
+            /*this.frame++;
+            if (this.frame == this.tex.numFrames) {
+                this.frame = 0;
+            }*/
             this.pos[1] = 240 - 20;
             this.vy *= -1;
         }
+        
+        //
+        this.frameTimeLeft -= timeDelta;
+        
+        if( this.frameTimeLeft < 1 ) {
+            this.frameTimeLeft = this.tex.frameTime;
+            if( ++ this.frame == this.tex.numFrames ) {
+                this.frame=0;
+            }
+        }
 
     };
 
-    for (var i = 0; i < 10; ++i) {
-        sprite = new this.Sprite([300, 220]);
-        sprite.frameGridPos = [Math.floor(Math.random() * 15), 0];
-        sprite.vx = Math.random() * 0.5 - 0.25;
-        sprite.vy = Math.random() * 0.5 - 0.25;
+    for (var i = 0; i < 1000; ++i) {
+        sprite = new this.Sprite();
+        
+        sprite.vx = Math.random() * 2.0 - 1.0;
+        sprite.vy = Math.random() * 2.5 - 1.0;
+        sprite.frame = Math.floor( Math.random() * 20 ) ;
+        
+        sprite.setPos( [160-10, 120-10]);
 
         // sprite.animate = animate.bind(sprite);
         brickTexGroup.addSprite(sprite);
+        
     }
 
     bricks.addTexGroup(brickTexGroup);
@@ -669,37 +669,60 @@ DstEng.prototype.startLoader = function() {
 };
 
 
-//TODO: Rewrite to use vertex arrays for texture coords instead.
+
 DstEng.prototype.Texture = (function() {
     function Tex(gl, setup) {
 
-        if (!gl) {
-            throw Error('Need gl');
-        }
 
-        if (!setup.img.resType) {
-            throw Error('Required: img.');
-        }
+        this.numFrames = setup.numFrames;
+        this.frameTime=  setup.frameTime;
 
-        if (!setup.img.image || !setup.img.image.height) {
-            throw Error('Invalid or no image in setup.img');
-        }
+        //This will be  an array of vertex-buffer-indexes
+        this.frameCoords = [];
 
-        this.w = setup.img.image.width;
-        this.h = setup.img.image.height;
+        var imgSizeX = setup.img.image.width;
+        var imgSizeY = setup.img.image.height;
 
-        this.numFrames = setup.numFrames || 1;
-        this.animate = setup.animate || false;
-        this.frameTime = setup.frameTime || false;
+        var glSizeX = (setup.cut[2] - setup.cut[0])/imgSizeX;
+        var glSizeY = (setup.cut[3] - setup.cut[1])/imgSizeY;
 
-        this.pxCut = setup.cut || [0, 0, this.w, this.h];
+        var glCutFromX = setup.cut[0] / imgSizeX;
+        var glCutFromY = setup.cut[1] / imgSizeY;
 
-        this.glTex = setup.img.texture;
+        //Calculate coords for each frame
+        for (var i = 0, l = setup.numFrames; i < l; ++i) {
+
+            var texFrame = gl.createBuffer();
+            this.frameCoords.push(texFrame);
+            gl.bindBuffer(gl.ARRAY_BUFFER, texFrame);
+
+           gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+                glCutFromX + (glSizeX * i), glCutFromY, //Top Left
+                glCutFromX + (glSizeX*i)+glSizeX, glCutFromY, //Top Right
+                glCutFromX + (glSizeX * i), glCutFromY+glSizeY, //Bottom Right
 
-        this.glFrameSize = new Float32Array([(this.pxCut[2] / this.w), (this.pxCut[3] / this.h)]);
+                glCutFromX + (glSizeX * i), glCutFromY+glSizeY, //Bottom Left
+                glCutFromX + (glSizeX * i)+glSizeX, glCutFromY, //Top Right
+                glCutFromX + (glSizeX * i)+glSizeX,glCutFromY+glSizeY //Bottom Right
+            ]), gl.STATIC_DRAW); 
+            
+
+/*            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+              glCutFromX,glCutFromY  , //Top Left
+              glCutFromX+glSizeX,glCutFromY  , //Top Right
+              glCutFromX,glCutFromY+1  , //Bottom Right
+
+              glCutFromX,glCutFromY+1  , //Bottom Left
+              glCutFromX+glSizeX,glCutFromY  , //Top Right
+              glCutFromX+glSizeX,glCutFromY+ 1   //Bottom Right
+            ]), gl.STATIC_DRAW);
+*/
+        }
 
+        this.glTex = setup.img.texture;
     }
 
+    
     return Tex;
 }());
 
@@ -723,22 +746,24 @@ DstEng.prototype.DrawGroup = (function() {
 
             //VertexBuffer is the same for a polygroup
             gl.bindBuffer(gl.ARRAY_BUFFER, pg.buffer);
-            gl.vertexAttribPointer(prgInfo.a_pos, 2, gl.FLOAT, false, pg.stride, pg.vertexOffset);
-            gl.vertexAttribPointer(prgInfo.a_texCoord, 2, gl.FLOAT, false, pg.stride, pg.texCoordOffset);
+            gl.vertexAttribPointer(prgInfo.a_pos, 2, gl.FLOAT, false, 0, 0);
 
             pg.texGroups.forEach(function drawTexGroup(tg) {
                 //Texture is the same for each texGroup
                 gl.bindTexture(gl.TEXTURE_2D, tg.texture.glTex);
 
-                gl.uniform2fv(prgInfo.u_frameSize, tg.texture.glFrameSize);
+
+//                gl.uniform2fv(prgInfo.u_frameSize, tg.texture.glFrameSize);
                 tg.sprites.forEach(function drawSprite(spr) {
                     //Set geometry location and texture location
                     if (spr.vx) spr.animate();
+                    
+                    
+                    gl.bindBuffer(gl.ARRAY_BUFFER, tg.texture.frameCoords[spr.frame]);
+//
+                    gl.vertexAttribPointer(prgInfo.a_texCoord, 2, gl.FLOAT, false, 0, 0);
 
                     gl.uniform2fv(prgInfo.u_translation, spr.pos);
-                    gl.uniform2fv(prgInfo.u_frameGridPos, spr.frameGridPos);
-
-
 
                     gl.drawArrays(gl.TRIANGLES, 0, 6);
                 });
@@ -752,9 +777,9 @@ DstEng.prototype.DrawGroup = (function() {
 DstEng.prototype.PolyGroup = (function() {
     function Pg(buffer) {
         this.buffer = buffer;
-        this.vertexOffset = 0;
+/*        this.vertexOffset = 0;
         this.texCoordOffset = Float32Array.BYTES_PER_ELEMENT * 2;
-        this.stride = Float32Array.BYTES_PER_ELEMENT * 4;
+        this.stride = Float32Array.BYTES_PER_ELEMENT * 4;*/
         this.texGroups = [];
     }
 
@@ -772,6 +797,8 @@ DstEng.prototype.TexGroup = (function() {
     }
 
     Tg.prototype.addSprite = function(spr) {
+        spr.tex = this.texture;
+        spr.frameTimeLeft=this.texture.frameTime;
         this.sprites.push(spr);
     };
 
@@ -782,13 +809,16 @@ DstEng.prototype.TexGroup = (function() {
 DstEng.prototype.Sprite = (function() {
     function Spr() {
         this.pos = new Float32Array([0, 0]);
-        this.frameGridPos = [0, 0];
+        this.frame=0;
+        this.frameTimeLeft=0;
     }
 
     Spr.prototype.setPos = function(pos) {
-        this.pos = pos;
+        this.pos = new Float32Array(pos);
     };
 
+    Spr.prototype.tex = null;
+
     return Spr;
 }());
 
@@ -803,6 +833,8 @@ DstEng.prototype.drawFrame = function(timeStamp) {
         this.state.timeDelta = 16.0;
         this.state.lastTime = performance.now();
     }
+    
+    timeDelta = this.state.timeDelta;
 
 
     timeScale = this.state.timeDelta / 16.00;
@@ -822,10 +854,10 @@ DstEng.prototype.drawFrame = function(timeStamp) {
     }
 
 
-    /*    if (this.state.frame % 60 === 0) {
+        if (this.state.frame % 60 === 0) {
             this.state.fps = 1000 / this.state.timeDelta;
-            console.log(this.state.fps, (1000.0 / (this.state.time / this.state.frame)), this.state.time - timeStamp, this.state.frame, this.accTs / this.state.frame);
-        }*/
+            console.log(this.state.fps);
+        }
 
 
     //  this.spr.pos = this.state.pointer.pos;