diff --git a/code/draw.js b/code/draw.js index 6167db4..f60d18d 100644 --- a/code/draw.js +++ b/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 diff --git a/code/generative.js b/code/generative.js index fc28b8f..42d6fdc 100644 --- a/code/generative.js +++ b/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(); diff --git a/code/webgl.js b/code/webgl.js index 79cdf7b..38cca97 100644 --- a/code/webgl.js +++ b/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