improve bleedpixels

code/draw.js

@@ -62,11 +62,11 @@ function drawInit()
 
 ///////////////////////////////////////////////////////////////////////////////
 
+const bleedPixels = 8;
 class SpriteTile
 {
     constructor(pos)
     {
-        const bleedPixels = 2;
         this.pos = vec3(
             (pos.x * generativeTileSize + bleedPixels) * generativeCanvasSizeInverse,
             (pos.y * generativeTileSize + bleedPixels) * generativeCanvasSizeInverse,
@@ -184,22 +184,27 @@ function pushGradient(pos, size, color, color2)
 function pushSprite(pos, size, color, tile, skew=0)
 {
     const mesh = quadMesh;
-    const points = mesh.points.map(p=>vec3(p.x*abs(size.x)+pos.x, p.y*size.y+pos.y,pos.z));
+    const points = mesh.points.map(p=>vec3(p.x*abs(size.x)+pos.x, p.y*abs(size.y)+pos.y,pos.z));
 
+    // apply skew
     const o = skew*size.y;
     points[0].x += o;
     points[1].x += o;
+
+    // apply texture
     if (tile)
     {
         ASSERT(tile instanceof SpriteTile);
+        let tilePosX  = tile.pos.x;
+        let tilePosY  = tile.pos.y;
+        let tileSizeX = tile.size.x;
+        let tileSizeY = tile.size.y;
         if (size.x < 0)
-        {
-            tile.pos.x += tile.size.x;
-            tile.size.x *= -1;
-        }
-
+            tilePosX -= tileSizeX *= -1;
+        if (size.y < 0)
+            tilePosY -= tileSizeY *= -1;
         const uvs = mesh.uvs.map(uv=>
-            vec3(uv.x*tile.size.x+tile.pos.x, uv.y*tile.size.y+tile.pos.y));
+            vec3(uv.x*tileSizeX+tilePosX, uv.y*tileSizeY+tilePosY));
         glPushVertsCapped(points, 0, color, uvs);
     }
     else

code/generative.js

@@ -204,9 +204,7 @@ function generateTetures()
         setupContext(3,0);
         drawLicensePlate();
         setupContext(4,0);
-        text('13',.5,.6,1,1,.04,undefined,undefined,900); 
-        setupContext(5,0);
-        drawStartSign('START');
+        text(13,.5,.6,1,1,.04,undefined,undefined,900);
         setupContext(6,0);
         drawCheckpointSign(1);
         setupContext(7,0);
@@ -550,6 +548,8 @@ function generateTetures()
         // more stuff
         setupContext(0,6);
         drawStartSign('GOAL');
+        setupContext(1,6);
+        drawStartSign('START');
         /*setupContext(1,6);
         {
             // grave cross
@@ -578,23 +578,47 @@ function generateTetures()
             drawRock(.5,.2,.7,0.003,.9,1,undefined,undefined,undefined,undefined,vec3(0,0,2));
         }*/
         setupContext(3,6);
+        if (js13kBuildLevel2)
+        {
+            // city building
+            color(BLACK);
+            rect(.5,.57,.3,1);
+            for(let i=19; i--;)
+                rect(.5+random.floatSign(.15),random.float(.5,.6),i/2e3,1);
+
+            for(let j=30; j--;)
+            for(let i=9; i--;)
+            {
+                const w = .03;
+                const x = .38+i*w;
+                const y = .1+j*w;
+                color(hsl(random.float(.07,.15),random.float(.5,1),(i&j)%2?0:random.float(.3,1)**3));
+                rect(x,y,w*.7,w*.7);
+            }
+        }
+        else
         {
             // city building
             color(BLACK);
-            rect(.5,.6,.3,1);
             for(let i=19; i--;)
-                rect(.5+random.floatSign(.14),.1,random.float(.02),random.float(.1));
+            {
+                const p = i/19;
+                const h = lerp(p,.9,.86)
+                rect(lerp(p,.36,.64),.07+h/2,.03,h);
+                rect(.5-random.floatSign(.14),.5,random.float(.02),random.float(.85,1));
+            }
 
-            for(let j=33; j--;)
+            for(let j=28; j--;)
             for(let i=9; i--;)
             {
                 const w = .03;
-                const x = .37+i*w;
-                const y = .13+j*w;
-                color(hsl(random.float(.1,.15),random.float(.5,1),(i&j)%2?0:random.float(.3,1)**3));
+                const x = .372+i*w;
+                const y = .1+j*w;
+                color(hsl(random.float(.07,.15),random.float(.5,1),(i&j)%2?0:random.float(.3,1)**3));
                 rect(x,y,w*.7,w*.7);
             }
         }
+
         /*setupContext(5,6);
         {
             // green mountains
@@ -691,10 +715,11 @@ function generateTetures()
             debugGenerativeCanvas = 1
         }
         // set context transform to go from 0-1 to 0-size
+        const b = bleedPixels;
         const w = generativeTileSize;
         context.restore();
         context.save();
-        context.setTransform(w,0,0,w,w*x,w*y);
+        context.setTransform(w-2*b,0,0,w-2*b,w*x+b,w*y+b);
         context.beginPath();
         context.rect(0,0,1,1);
         context.clip();

code/webgl.js

@@ -17,7 +17,6 @@ Potential improvements
 - the colors could be passed in as 32 bit integers rather then vec4s
 - specular lighting would also be pretty easy to include
 - the fog calculation could possibly be moved to the vertex shader
-- antialiasing could be enabled if tiles have more space to prevent bleeding
 - a mip map of the passed in texture could be auto generated for smoother scaling
 - additive blending would also be easy to implement
 - there should be an easier way to set the fog range
@@ -38,9 +37,8 @@ function glInit()
 {
     // create the canvas
     const hasAlpha = false;     // there should be no alpha for the background texture
-    const hasAntialias = false; // anti-aliasing can cause texture bleading from neighboring tiles
     document.body.appendChild(glCanvas = document.createElement('canvas'));
-    glContext = glCanvas.getContext('webgl2', {alpha: hasAlpha, antialias: hasAntialias});
+    glContext = glCanvas.getContext('webgl2', {alpha: hasAlpha});
     ASSERT(glContext, 'Failed to create WebGL canvas!');
 
     // epxeriment with adding specular lighting to the scene