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

18
app/components/Common/Buttons.vue
View File

@@ -15,9 +15,9 @@ const { onRender, onClick } = useScreen();
const { assets } = useAssets();
const BUTTON_WIDTH = assets.common.button.width;
const BUTTON_HEIGHT = assets.common.button.height;
const LETTER_WIDTH = assets.common.B.width;
const BUTTON_WIDTH = assets.images.common.button.rect.width;
const BUTTON_HEIGHT = assets.images.common.button.rect.height;
const LETTER_WIDTH = assets.images.common.B.rect.width;
const B_BUTTON: Rect = [31, 172, BUTTON_WIDTH, BUTTON_HEIGHT];
const A_BUTTON: Rect = [144, 172, BUTTON_WIDTH, BUTTON_HEIGHT];
@@ -29,23 +29,25 @@ onRender((ctx) => {
ctx.translate(0, props.yOffset);
const drawButton = (
image: HTMLImageElement,
image: {
draw: (ctx: CanvasRenderingContext2D, x: number, y: number) => void;
},
text: string,
x: number,
offset: number,
) => {
ctx.drawImage(assets.common.button, x, 172);
assets.images.common.button.draw(ctx, x, 172);
const { actualBoundingBoxRight: textWidth } = ctx.measureText(text);
const width = LETTER_WIDTH + 4 + textWidth;
const left = Math.ceil(x + BUTTON_WIDTH / 2 - width / 2 - offset / 2);
ctx.drawImage(image, left, 176);
image.draw(ctx, left, 176);
ctx.fillText(text, left + LETTER_WIDTH + 4, 185);
};
drawButton(assets.common.B, props.bLabel, 31, 5);
drawButton(assets.common.A, props.aLabel, 144, 0);
drawButton(assets.images.common.B, props.bLabel, 31, 5);
drawButton(assets.images.common.A, props.aLabel, 144, 0);
}, 60);
onClick((x, y) => {