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

32
app/components/Common/Bars.vue
View File

@@ -13,29 +13,17 @@ const props = withDefaults(
);
const { onRender } = useScreen();
const app = useAppStore();
const { assets } = useAssets();
const BAR_WIDTH = 256;
const BAR_HEIGHT = 24;
const TITLE_Y = 5;
onRender((ctx) => {
ctx.globalAlpha = props.opacity;
// top bar
ctx.drawImage(
assets.common.barsSheet,
0,
(app.color.row * 4 + app.color.col) * BAR_HEIGHT,
BAR_WIDTH,
BAR_HEIGHT,
0,
-props.yOffset,
BAR_WIDTH,
BAR_HEIGHT,
);
assets.images.common.barsSheet.draw(ctx, 0, -props.yOffset, {
colored: true,
});
if (props.title) {
ctx.fillStyle = "#000000";
@@ -46,17 +34,9 @@ onRender((ctx) => {
ctx.scale(1, -1);
// bottom bar
ctx.drawImage(
assets.common.barsSheet,
0,
(app.color.row * 4 + app.color.col) * BAR_HEIGHT,
BAR_WIDTH,
BAR_HEIGHT,
0,
-192 - props.yOffset,
BAR_WIDTH,
BAR_HEIGHT,
);
assets.images.common.barsSheet.draw(ctx, 0, -192 - props.yOffset, {
colored: true,
});
}, 50);
defineOptions({

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);

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) => {

6
app/components/Common/ConfirmationModal.vue
View File

@@ -6,8 +6,8 @@ const { onRender } = useScreen();
const { assets } = useAssets();
const confirmationModal = useConfirmationModal();
const BG_WIDTH = assets.common.confirmationModal.width;
const BG_HEIGHT = assets.common.confirmationModal.height;
const BG_WIDTH = assets.images.common.confirmationModal.rect.width;
const BG_HEIGHT = assets.images.common.confirmationModal.rect.height;
const BG_X = Math.floor((SCREEN_WIDTH - BG_WIDTH) / 2);
const BG_Y = Math.floor((SCREEN_HEIGHT - BG_HEIGHT) / 2);
@@ -34,7 +34,7 @@ onRender((ctx) => {
ctx.translate(0, confirmationModal.offsetY);
ctx.drawImage(assets.common.confirmationModal, BG_X, BG_Y);
assets.images.common.confirmationModal.draw(ctx, BG_X, BG_Y);
ctx.font = "16px Pokemon DP Pro";
ctx.textBaseline = "top";