pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(assets): use single texture atlas instead of loading all images individually

Browse Source
This commit is contained in:
Stevan
2026-01-08 19:55:43 +01:00
parent c6d5911b7d
commit e2d40a4bc1
41 changed files with 488 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
app/components/Common/ButtonSelector.vue
View File

@@ -11,11 +11,9 @@ const props = withDefaults(
const { onRender } = useScreen();
const app = useAppStore();
const { assets } = useAssets();
const ANIMATION_SPEED = 15;
const CORNER_SIZE = 11;
let [currentX, currentY, currentWidth, currentHeight] = props.rect;
@@ -48,67 +46,31 @@ onRender((ctx, deltaTime) => {
ctx.globalAlpha = props.opacity;
const spriteY = (app.color.row * 4 + app.color.col) * CORNER_SIZE;
// top-left corner
assets.images.common.selectorCornersSheet.draw(ctx, x, y, { colored: true });
// Top-left corner
ctx.drawImage(
assets.common.selectorCornersSheet,
0,
spriteY,
CORNER_SIZE,
CORNER_SIZE,
x,
y,
CORNER_SIZE,
CORNER_SIZE,
);
// Top-right corner
// top-right corner
ctx.save();
ctx.scale(-1, 1);
ctx.drawImage(
assets.common.selectorCornersSheet,
0,
spriteY,
CORNER_SIZE,
CORNER_SIZE,
-(x + w),
y,
CORNER_SIZE,
CORNER_SIZE,
);
assets.images.common.selectorCornersSheet.draw(ctx, -(x + w), y, {
colored: true,
});
ctx.restore();
// Bottom-left corner
// bottom-left corner
ctx.save();
ctx.scale(1, -1);
ctx.drawImage(
assets.common.selectorCornersSheet,
0,
spriteY,
CORNER_SIZE,
CORNER_SIZE,
x,
-(y + h),
CORNER_SIZE,
CORNER_SIZE,
);
assets.images.common.selectorCornersSheet.draw(ctx, x, -(y + h), {
colored: true,
});
ctx.restore();
// Bottom-right corner
// bottom-right corner
ctx.save();
ctx.scale(-1, -1);
ctx.drawImage(
assets.common.selectorCornersSheet,
0,
spriteY,
CORNER_SIZE,
CORNER_SIZE,
-(x + w),
-(y + h),
CORNER_SIZE,
CORNER_SIZE,
);
assets.images.common.selectorCornersSheet.draw(ctx, -(x + w), -(y + h), {
colored: true,
});
ctx.restore();
}, 40);