convert hedge to grayscale, fix lava entity to use the new sprites, wordIs is pushable, dynamically color sprites

This commit is contained in:
phat_sumo 2022-04-06 18:26:03 -06:00
parent 66b29967e1
commit a54812ed50
5 changed files with 36 additions and 10 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 17 KiB

View File

@ -4,12 +4,7 @@ game.createLava = () => {
lava.addComponent(game.components.LoadPriority({priority: 5})); lava.addComponent(game.components.LoadPriority({priority: 5}));
lava.addComponent(game.components.Appearance({rot: 0, width: 100, height: 100})); lava.addComponent(game.components.Appearance({rot: 0, width: 100, height: 100}));
lava.addComponent(game.components.Alive()); lava.addComponent(game.components.Alive());
lava.sprite = game.graphics.Sprite({ lava.sprite = game.sprites.lava;
image: game.assets.lava,
spriteHeight: 24,
spriteWidth: 24,
numFrames: 3,
timePerFrame: 100,
});
return lava; return lava;
} }

View File

@ -2,7 +2,8 @@ game.createWordIs = () => {
const wordIs = game.Entity(); const wordIs = game.Entity();
wordIs.addComponent(game.components.LoadPriority({priority: 3})); wordIs.addComponent(game.components.LoadPriority({priority: 3}));
wordIs.addComponent(game.components.Appearance({rot: 0, width: 100, height: 100})); wordIs.addComponent(game.components.Appearance({rot: 0, width: 100, height: 100}));
wordIs.addComponent(game.components.Stop({stop: true})); // wordIs.addComponent(game.components.Stop({stop: true}));
wordIs.addComponent(game.components.Pushable());
wordIs.addComponent(game.components.Alive()); wordIs.addComponent(game.components.Alive());
wordIs.sprite = game.sprites.wordIs; wordIs.sprite = game.sprites.wordIs;
return wordIs; return wordIs;

View File

@ -6,7 +6,7 @@ game.graphics = (
context.clearRect(0, 0, game.canvas.width, game.canvas.height); context.clearRect(0, 0, game.canvas.width, game.canvas.height);
}; };
const Sprite = ({image, spriteX, spriteY, spriteWidth, spriteHeight, timePerFrame, cols, rows, numFrames, drawFunction}) => { const Sprite = ({image, spriteX, spriteY, spriteWidth, spriteHeight, timePerFrame, cols, rows, numFrames, color, drawFunction}) => {
timePerFrame = timePerFrame ?? 100; timePerFrame = timePerFrame ?? 100;
numFrames = numFrames ?? 1; numFrames = numFrames ?? 1;
cols = cols ?? numFrames; cols = cols ?? numFrames;
@ -33,6 +33,15 @@ game.graphics = (
const row = currentFrame % rows; const row = currentFrame % rows;
const col = Math.floor(currentFrame / rows); const col = Math.floor(currentFrame / rows);
context.drawImage(image, spriteX+col*spriteWidth, spriteY+row*spriteHeight, spriteWidth, spriteHeight, x, y, width, height); context.drawImage(image, spriteX+col*spriteWidth, spriteY+row*spriteHeight, spriteWidth, spriteHeight, x, y, width, height);
// apply color to sprite
if (color) {
context.globalAlpha=0.7;
context.globalCompositeOperation="source-atop";
context.fillStyle=color;
context.fillRect(x, y, width, height);
}
context.restore(); context.restore();
}; };
} else { } else {
@ -43,4 +52,4 @@ game.graphics = (
return { clear, Sprite }; return { clear, Sprite };
} }
)(document.getElementById("game-canvas").getContext("2d")); )(document.getElementById("game-canvas").getContext("2d"));

View File

@ -12,6 +12,7 @@ game.sprites = {
spriteWidth: 24, spriteWidth: 24,
numFrames: 3, numFrames: 3,
timePerFrame: 100, timePerFrame: 100,
color: "#ede285",
}), }),
floor: game.graphics.Sprite({ floor: game.graphics.Sprite({
image: game.assets.floor, image: game.assets.floor,
@ -19,6 +20,7 @@ game.sprites = {
spriteWidth: 24, spriteWidth: 24,
numFrames: 3, numFrames: 3,
timePerFrame: 100, timePerFrame: 100,
color: "#404040",
}), }),
hedge: game.graphics.Sprite({ hedge: game.graphics.Sprite({
image: game.assets.hedge, image: game.assets.hedge,
@ -26,6 +28,7 @@ game.sprites = {
spriteWidth: 24, spriteWidth: 24,
numFrames: 3, numFrames: 3,
timePerFrame: 250, timePerFrame: 250,
color: "#5c8339",
}), }),
grass: game.graphics.Sprite({ grass: game.graphics.Sprite({
image: game.assets.grass, image: game.assets.grass,
@ -33,6 +36,7 @@ game.sprites = {
spriteWidth: 24, spriteWidth: 24,
numFrames: 3, numFrames: 3,
timePerFrame: 100, timePerFrame: 100,
color: "#5c8339",
}), }),
lava: game.graphics.Sprite({ lava: game.graphics.Sprite({
image: game.assets.lava, image: game.assets.lava,
@ -40,6 +44,7 @@ game.sprites = {
spriteWidth: 24, spriteWidth: 24,
numFrames: 3, numFrames: 3,
timePerFrame: 100, timePerFrame: 100,
color: "#e49950",
}), }),
rock: game.graphics.Sprite({ rock: game.graphics.Sprite({
image: game.assets.rock, image: game.assets.rock,
@ -47,6 +52,7 @@ game.sprites = {
spriteWidth: 24, spriteWidth: 24,
numFrames: 3, numFrames: 3,
timePerFrame: 100, timePerFrame: 100,
color: "#90673e",
}), }),
wall: game.graphics.Sprite({ wall: game.graphics.Sprite({
image: game.assets.wall, image: game.assets.wall,
@ -54,6 +60,7 @@ game.sprites = {
spriteWidth: 24, spriteWidth: 24,
numFrames: 3, numFrames: 3,
timePerFrame: 100, timePerFrame: 100,
color: "#707070",
}), }),
water: game.graphics.Sprite({ water: game.graphics.Sprite({
image: game.assets.water, image: game.assets.water,
@ -61,6 +68,7 @@ game.sprites = {
spriteWidth: 24, spriteWidth: 24,
numFrames: 3, numFrames: 3,
timePerFrame: 100, timePerFrame: 100,
color: "#5f9dd1",
}), }),
wordBigBlue: game.graphics.Sprite({ wordBigBlue: game.graphics.Sprite({
image: game.assets.wordBigBlue, image: game.assets.wordBigBlue,
@ -68,6 +76,7 @@ game.sprites = {
spriteWidth: 24, spriteWidth: 24,
numFrames: 3, numFrames: 3,
timePerFrame: 100, timePerFrame: 100,
color: "#0f2439",
}), }),
wordFlag: game.graphics.Sprite({ wordFlag: game.graphics.Sprite({
image: game.assets.wordFlag, image: game.assets.wordFlag,
@ -75,6 +84,7 @@ game.sprites = {
spriteWidth: 24, spriteWidth: 24,
numFrames: 3, numFrames: 3,
timePerFrame: 100, timePerFrame: 100,
color: "#ede285",
}), }),
wordIs: game.graphics.Sprite({ wordIs: game.graphics.Sprite({
image: game.assets.wordIs, image: game.assets.wordIs,
@ -82,6 +92,7 @@ game.sprites = {
spriteWidth: 24, spriteWidth: 24,
numFrames: 3, numFrames: 3,
timePerFrame: 100, timePerFrame: 100,
color: "#ffffff",
}), }),
wordKill: game.graphics.Sprite({ wordKill: game.graphics.Sprite({
image: game.assets.wordKill, image: game.assets.wordKill,
@ -89,6 +100,7 @@ game.sprites = {
spriteWidth: 24, spriteWidth: 24,
numFrames: 3, numFrames: 3,
timePerFrame: 100, timePerFrame: 100,
color: "#e49950",
}), }),
wordLava: game.graphics.Sprite({ wordLava: game.graphics.Sprite({
image: game.assets.wordLava, image: game.assets.wordLava,
@ -96,6 +108,7 @@ game.sprites = {
spriteWidth: 24, spriteWidth: 24,
numFrames: 3, numFrames: 3,
timePerFrame: 100, timePerFrame: 100,
color: "#e49950",
}), }),
wordPush: game.graphics.Sprite({ wordPush: game.graphics.Sprite({
image: game.assets.wordPush, image: game.assets.wordPush,
@ -103,6 +116,7 @@ game.sprites = {
spriteWidth: 24, spriteWidth: 24,
numFrames: 3, numFrames: 3,
timePerFrame: 100, timePerFrame: 100,
color: "#90673e",
}), }),
wordRock: game.graphics.Sprite({ wordRock: game.graphics.Sprite({
image: game.assets.wordRock, image: game.assets.wordRock,
@ -110,6 +124,7 @@ game.sprites = {
spriteWidth: 24, spriteWidth: 24,
numFrames: 3, numFrames: 3,
timePerFrame: 100, timePerFrame: 100,
color: "#90673e",
}), }),
wordSink: game.graphics.Sprite({ wordSink: game.graphics.Sprite({
image: game.assets.wordSink, image: game.assets.wordSink,
@ -117,6 +132,7 @@ game.sprites = {
spriteWidth: 24, spriteWidth: 24,
numFrames: 3, numFrames: 3,
timePerFrame: 100, timePerFrame: 100,
color: "#5f9dd1",
}), }),
wordStop: game.graphics.Sprite({ wordStop: game.graphics.Sprite({
image: game.assets.wordStop, image: game.assets.wordStop,
@ -124,6 +140,7 @@ game.sprites = {
spriteWidth: 24, spriteWidth: 24,
numFrames: 3, numFrames: 3,
timePerFrame: 100, timePerFrame: 100,
color: "#252e0e",
}), }),
wordWall: game.graphics.Sprite({ wordWall: game.graphics.Sprite({
image: game.assets.wordWall, image: game.assets.wordWall,
@ -131,6 +148,7 @@ game.sprites = {
spriteWidth: 24, spriteWidth: 24,
numFrames: 3, numFrames: 3,
timePerFrame: 100, timePerFrame: 100,
color: "#707070",
}), }),
wordWater: game.graphics.Sprite({ wordWater: game.graphics.Sprite({
image: game.assets.wordWater, image: game.assets.wordWater,
@ -138,6 +156,7 @@ game.sprites = {
spriteWidth: 24, spriteWidth: 24,
numFrames: 3, numFrames: 3,
timePerFrame: 100, timePerFrame: 100,
color: "#5f9dd1",
}), }),
wordWin: game.graphics.Sprite({ wordWin: game.graphics.Sprite({
image: game.assets.wordWin, image: game.assets.wordWin,
@ -145,6 +164,7 @@ game.sprites = {
spriteWidth: 24, spriteWidth: 24,
numFrames: 3, numFrames: 3,
timePerFrame: 100, timePerFrame: 100,
color: "#ede285",
}), }),
wordYou: game.graphics.Sprite({ wordYou: game.graphics.Sprite({
image: game.assets.wordYou, image: game.assets.wordYou,
@ -152,5 +172,6 @@ game.sprites = {
spriteWidth: 24, spriteWidth: 24,
numFrames: 3, numFrames: 3,
timePerFrame: 100, timePerFrame: 100,
color: "#0f2439",
}), }),
}; };