skythedragon/papercats
1
0
Fork 0
forked from ilikecats/papercats
Code Pull Requests Activity

Fix some rendering stuff

Browse Source
This commit is contained in:
theKidOfArcrania 2017-03-12 18:47:14 +00:00
parent f83ca3dc04
commit 075b55d5ec
3 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
game-renderer.js
View File

@ -94,7 +94,7 @@ function paintGridBorder(ctx)
function paintGrid(ctx) function paintGrid(ctx)
{ {
//Paint background. //Paint background.
ctx.fillStyle = "#e2ebf3"; ctx.fillStyle = "rgb(211, 225, 237)";
ctx.fillRect(0, 0, CELL_WIDTH * GRID_SIZE, CELL_WIDTH * GRID_SIZE); ctx.fillRect(0, 0, CELL_WIDTH * GRID_SIZE, CELL_WIDTH * GRID_SIZE);
paintGridBorder(ctx); paintGridBorder(ctx);
@ -124,7 +124,7 @@ function paintGrid(ctx)
{ {
var frac = (animateSpec.frame / ANIMATE_FRAMES); var frac = (animateSpec.frame / ANIMATE_FRAMES);
var back = new Color(.58, .41, .92, 1); var back = new Color(.58, .41, .92, 1);
baseColor = animateSpec.before.baseColor.interpolateToString(back, frac); baseColor = animateSpec.before.lightBaseColor.interpolateToString(back, frac);
shadowColor = animateSpec.before.shadowColor.interpolateToString(back, frac); shadowColor = animateSpec.before.shadowColor.interpolateToString(back, frac);
} }
else else
@ -132,7 +132,7 @@ function paintGrid(ctx)
} }
else if (p) else if (p)
{ {
baseColor = p.baseColor; baseColor = p.lightBaseColor;
shadowColor = p.shadowColor; shadowColor = p.shadowColor;
} }
else //No animation nor is this player owned. else //No animation nor is this player owned.
@ -175,7 +175,7 @@ function paintGrid(ctx)
y -= offsetBounce; y -= offsetBounce;
shadowColor = animateSpec.after.shadowColor; shadowColor = animateSpec.after.shadowColor;
baseColor = animateSpec.after.baseColor.deriveLumination(-(offsetBounce / DROP_HEIGHT) * .1); baseColor = animateSpec.after.lightBaseColor.deriveLumination(-(offsetBounce / DROP_HEIGHT) * .1);
ctx.fillStyle = shadowColor.rgbString(); ctx.fillStyle = shadowColor.rgbString();
ctx.fillRect(x, y + CELL_WIDTH, CELL_WIDTH, SHADOW_OFFSET); ctx.fillRect(x, y + CELL_WIDTH, CELL_WIDTH, SHADOW_OFFSET);
@ -285,7 +285,7 @@ function paintUIBar(ctx)
function paint(ctx) function paint(ctx)
{ {
ctx.fillStyle = 'whitesmoke'; ctx.fillStyle = '#e2ebf3'; //'whitesmoke';
ctx.fillRect(0, 0, canvasWidth, canvasHeight); ctx.fillRect(0, 0, canvasWidth, canvasHeight);
//Move grid to viewport as said with the offsets, below the stats //Move grid to viewport as said with the offsets, below the stats
@ -379,8 +379,8 @@ function centerOnPlayer(player, pos)
var xOff = Math.floor(player.posX - (gameWidth / zoom - CELL_WIDTH) / 2); var xOff = Math.floor(player.posX - (gameWidth / zoom - CELL_WIDTH) / 2);
var yOff = Math.floor(player.posY - (gameHeight / zoom - CELL_WIDTH) / 2); var yOff = Math.floor(player.posY - (gameHeight / zoom - CELL_WIDTH) / 2);
var gridWidth = grid.size * CELL_WIDTH + BORDER_WIDTH * 2; var gridWidth = grid.size * CELL_WIDTH + BORDER_WIDTH * 2;
pos[0] = Math.max(Math.min(xOff, gridWidth + (BAR_WIDTH + 100) / zoom - gameWidth / zoom), 0); pos[0] = xOff; //Math.max(Math.min(xOff, gridWidth + (BAR_WIDTH + 100) / zoom - gameWidth / zoom), 0);
pos[1] = Math.max(Math.min(yOff, gridWidth - gameHeight / zoom), 0); pos[1] = yOff; //Math.max(Math.min(yOff, gridWidth - gameHeight / zoom), 0);
} }
function getBounceOffset(frame) function getBounceOffset(frame)

3
player.js
View File

@ -373,8 +373,9 @@ function Player(grid, sdata) {
var hue = Math.random(); var hue = Math.random();
this.baseColor = base = new Color(hue, .8, .5); this.baseColor = base = new Color(hue, .8, .5);
} }
this.lightBaseColor = base.deriveLumination(.1);
this.shadowColor = base.deriveLumination(-.3); this.shadowColor = base.deriveLumination(-.3);
this.tailColor = base.deriveLumination(.2).deriveAlpha(.5); this.tailColor = base.deriveLumination(.3).deriveAlpha(.5);
//Tail requires special handling. //Tail requires special handling.
this.grid = grid; //Temporary this.grid = grid; //Temporary

17
public/bundle.js
View File

@ -887,7 +887,7 @@ function paintGridBorder(ctx)
function paintGrid(ctx) function paintGrid(ctx)
{ {
//Paint background. //Paint background.
ctx.fillStyle = "#e2ebf3"; ctx.fillStyle = "rgb(211, 225, 237)";
ctx.fillRect(0, 0, CELL_WIDTH * GRID_SIZE, CELL_WIDTH * GRID_SIZE); ctx.fillRect(0, 0, CELL_WIDTH * GRID_SIZE, CELL_WIDTH * GRID_SIZE);
paintGridBorder(ctx); paintGridBorder(ctx);
@ -917,7 +917,7 @@ function paintGrid(ctx)
{ {
var frac = (animateSpec.frame / ANIMATE_FRAMES); var frac = (animateSpec.frame / ANIMATE_FRAMES);
var back = new Color(.58, .41, .92, 1); var back = new Color(.58, .41, .92, 1);
baseColor = animateSpec.before.baseColor.interpolateToString(back, frac); baseColor = animateSpec.before.lightBaseColor.interpolateToString(back, frac);
shadowColor = animateSpec.before.shadowColor.interpolateToString(back, frac); shadowColor = animateSpec.before.shadowColor.interpolateToString(back, frac);
} }
else else
@ -925,7 +925,7 @@ function paintGrid(ctx)
} }
else if (p) else if (p)
{ {
baseColor = p.baseColor; baseColor = p.lightBaseColor;
shadowColor = p.shadowColor; shadowColor = p.shadowColor;
} }
else //No animation nor is this player owned. else //No animation nor is this player owned.
@ -968,7 +968,7 @@ function paintGrid(ctx)
y -= offsetBounce; y -= offsetBounce;
shadowColor = animateSpec.after.shadowColor; shadowColor = animateSpec.after.shadowColor;
baseColor = animateSpec.after.baseColor.deriveLumination(-(offsetBounce / DROP_HEIGHT) * .1); baseColor = animateSpec.after.lightBaseColor.deriveLumination(-(offsetBounce / DROP_HEIGHT) * .1);
ctx.fillStyle = shadowColor.rgbString(); ctx.fillStyle = shadowColor.rgbString();
ctx.fillRect(x, y + CELL_WIDTH, CELL_WIDTH, SHADOW_OFFSET); ctx.fillRect(x, y + CELL_WIDTH, CELL_WIDTH, SHADOW_OFFSET);
@ -1078,7 +1078,7 @@ function paintUIBar(ctx)
function paint(ctx) function paint(ctx)
{ {
ctx.fillStyle = 'whitesmoke'; ctx.fillStyle = '#e2ebf3'; //'whitesmoke';
ctx.fillRect(0, 0, canvasWidth, canvasHeight); ctx.fillRect(0, 0, canvasWidth, canvasHeight);
//Move grid to viewport as said with the offsets, below the stats //Move grid to viewport as said with the offsets, below the stats
@ -1172,8 +1172,8 @@ function centerOnPlayer(player, pos)
var xOff = Math.floor(player.posX - (gameWidth / zoom - CELL_WIDTH) / 2); var xOff = Math.floor(player.posX - (gameWidth / zoom - CELL_WIDTH) / 2);
var yOff = Math.floor(player.posY - (gameHeight / zoom - CELL_WIDTH) / 2); var yOff = Math.floor(player.posY - (gameHeight / zoom - CELL_WIDTH) / 2);
var gridWidth = grid.size * CELL_WIDTH + BORDER_WIDTH * 2; var gridWidth = grid.size * CELL_WIDTH + BORDER_WIDTH * 2;
pos[0] = Math.max(Math.min(xOff, gridWidth + (BAR_WIDTH + 100) / zoom - gameWidth / zoom), 0); pos[0] = xOff; //Math.max(Math.min(xOff, gridWidth + (BAR_WIDTH + 100) / zoom - gameWidth / zoom), 0);
pos[1] = Math.max(Math.min(yOff, gridWidth - gameHeight / zoom), 0); pos[1] = yOff; //Math.max(Math.min(yOff, gridWidth - gameHeight / zoom), 0);
} }
function getBounceOffset(frame) function getBounceOffset(frame)
@ -9453,8 +9453,9 @@ function Player(grid, sdata) {
var hue = Math.random(); var hue = Math.random();
this.baseColor = base = new Color(hue, .8, .5); this.baseColor = base = new Color(hue, .8, .5);
} }
this.lightBaseColor = base.deriveLumination(.1);
this.shadowColor = base.deriveLumination(-.3); this.shadowColor = base.deriveLumination(-.3);
this.tailColor = base.deriveLumination(.2).deriveAlpha(.5); this.tailColor = base.deriveLumination(.3).deriveAlpha(.5);
//Tail requires special handling. //Tail requires special handling.
this.grid = grid; //Temporary this.grid = grid; //Temporary