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 c93a8c4437
commit 44b876a5ca
41 changed files with 488 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/Settings/BottomScreen/Background.vue
View File

@@ -4,7 +4,7 @@ const { onRender } = useScreen();
const { assets } = useAssets();
onRender((ctx) => {
ctx.drawImage(assets.home.bottomScreen.background, 0, 0);
assets.images.home.bottomScreen.background.draw(ctx, 0, 0);
});
defineOptions({

18
app/components/Settings/BottomScreen/Menus/Clock/Menu.vue
View File

@@ -33,27 +33,27 @@ onRender((ctx) => {
ctx.translate(props.x, props.y);
if (isOpen.value || animation.playing) {
ctx.drawImage(
assets.settings.topScreen.clock.time,
assets.images.settings.topScreen.clock.time.draw(
ctx,
48 - animation.stage2Offset,
-48 + animation.stage1Offset,
);
ctx.drawImage(
assets.settings.topScreen.clock.date,
assets.images.settings.topScreen.clock.date.draw(
ctx,
0,
-96 + animation.stage2Offset + animation.stage1Offset,
);
ctx.drawImage(
assets.settings.topScreen.clock.alarm,
assets.images.settings.topScreen.clock.alarm.draw(
ctx,
0,
-48 + animation.stage1Offset,
);
ctx.drawImage(assets.settings.topScreen.clock.clockActive, 0, 0);
assets.images.settings.topScreen.clock.clockActive.draw(ctx, 0, 0);
} else if (isAnyOtherMenuOpen.value) {
ctx.drawImage(assets.settings.topScreen.clock.clockDisabled, 0, 0);
assets.images.settings.topScreen.clock.clockDisabled.draw(ctx, 0, 0);
} else {
ctx.drawImage(assets.settings.topScreen.clock.clock, 0, 0);
assets.images.settings.topScreen.clock.clock.draw(ctx, 0, 0);
}
});

18
app/components/Settings/BottomScreen/Menus/Options/Menu.vue
View File

@@ -33,27 +33,27 @@ onRender((ctx) => {
ctx.translate(props.x, props.y);
if (isOpen.value || animation.playing) {
ctx.drawImage(
assets.settings.topScreen.options.language,
assets.images.settings.topScreen.options.language.draw(
ctx,
0,
-48 + animation.stage1Offset,
);
ctx.drawImage(
assets.settings.topScreen.options.gbaMode,
assets.images.settings.topScreen.options.gbaMode.draw(
ctx,
48 - animation.stage2Offset,
-48 + animation.stage1Offset,
);
ctx.drawImage(
assets.settings.topScreen.options.startUp,
assets.images.settings.topScreen.options.startUp.draw(
ctx,
0,
-96 + animation.stage2Offset + animation.stage1Offset,
);
ctx.drawImage(assets.settings.topScreen.options.optionsActive, 0, 0);
assets.images.settings.topScreen.options.optionsActive.draw(ctx, 0, 0);
} else if (isAnyOtherMenuOpen.value) {
ctx.drawImage(assets.settings.topScreen.options.optionsDisabled, 0, 0);
assets.images.settings.topScreen.options.optionsDisabled.draw(ctx, 0, 0);
} else {
ctx.drawImage(assets.settings.topScreen.options.options, 0, 0);
assets.images.settings.topScreen.options.options.draw(ctx, 0, 0);
}
});

8
app/components/Settings/BottomScreen/Menus/TouchScreen/Menu.vue
View File

@@ -27,14 +27,14 @@ const isAnyOtherMenuOpen = computed(() => {
onRender((ctx) => {
if (isAnyOtherMenuOpen.value) {
ctx.drawImage(
assets.settings.topScreen.touchScreen.touchScreenDisabled,
assets.images.settings.topScreen.touchScreen.touchScreenDisabled.draw(
ctx,
props.x,
props.y,
);
} else {
ctx.drawImage(
assets.settings.topScreen.touchScreen.touchScreen,
assets.images.settings.topScreen.touchScreen.touchScreen.draw(
ctx,
props.x,
props.y,
);

2
app/components/Settings/BottomScreen/Menus/User/Color.vue
View File

@@ -63,7 +63,7 @@ onClick((x, y) => {
});
onRender((ctx, deltaTime) => {
ctx.drawImage(assets.settings.bottomScreen.user.colorPalette, 16, 32);
assets.images.settings.bottomScreen.user.colorPalette.draw(ctx, 16, 32);
// animate
const finalSelectorX = GRID_START_X + selectedCol * (CELL_SIZE + SPACING) - 4;

22
app/components/Settings/BottomScreen/Menus/User/Menu.vue
View File

@@ -33,32 +33,32 @@ onRender((ctx) => {
ctx.translate(props.x, props.y);
if (isOpen.value || animation.playing) {
ctx.drawImage(
assets.settings.topScreen.user.birthday,
assets.images.settings.topScreen.user.birthday.draw(
ctx,
-48 + animation.stage2Offset,
-48 + animation.stage1Offset,
);
ctx.drawImage(
assets.settings.topScreen.user.userName,
assets.images.settings.topScreen.user.userName.draw(
ctx,
0,
-48 + animation.stage1Offset,
);
ctx.drawImage(
assets.settings.topScreen.user.message,
assets.images.settings.topScreen.user.message.draw(
ctx,
48 - animation.stage2Offset,
-48 + animation.stage1Offset,
);
ctx.drawImage(
assets.settings.topScreen.user.color,
assets.images.settings.topScreen.user.color.draw(
ctx,
0,
-96 + animation.stage2Offset + animation.stage1Offset,
);
ctx.drawImage(assets.settings.topScreen.user.userActive, 0, 0);
assets.images.settings.topScreen.user.userActive.draw(ctx, 0, 0);
} else if (isAnyOtherMenuOpen.value) {
ctx.drawImage(assets.settings.topScreen.user.userDisabled, 0, 0);
assets.images.settings.topScreen.user.userDisabled.draw(ctx, 0, 0);
} else {
ctx.drawImage(assets.settings.topScreen.user.user, 0, 0);
assets.images.settings.topScreen.user.user.draw(ctx, 0, 0);
}
});

38
app/components/Settings/BottomScreen/NumberInput.vue
View File

@@ -49,33 +49,34 @@ const { onRender, onClick } = useScreen();
const Y = 30;
const SQUARE_HEIGHT = 49;
const ARROW_IMAGE_HEIGHT = assets.settings.bottomScreen.numberInputUp.height;
const ARROW_IMAGE_HEIGHT =
assets.images.settings.bottomScreen.numberInputUp.rect.height;
const upImage = computed(() => {
if (props.digits === 2) {
return props.disabled
? assets.settings.bottomScreen.numberInputUpDisabled
: assets.settings.bottomScreen.numberInputUp;
? assets.images.settings.bottomScreen.numberInputUpDisabled
: assets.images.settings.bottomScreen.numberInputUp;
} else {
return props.disabled
? assets.settings.bottomScreen.numberInputUpXlDisabled
: assets.settings.bottomScreen.numberInputUpXl;
? assets.images.settings.bottomScreen.numberInputUpXlDisabled
: assets.images.settings.bottomScreen.numberInputUpXl;
}
});
const downImage = computed(() => {
if (props.digits === 2) {
return props.disabled
? assets.settings.bottomScreen.numberInputDownDisabled
: assets.settings.bottomScreen.numberInputDown;
? assets.images.settings.bottomScreen.numberInputDownDisabled
: assets.images.settings.bottomScreen.numberInputDown;
} else {
return props.disabled
? assets.settings.bottomScreen.numberInputDownXlDisabled
: assets.settings.bottomScreen.numberInputDownXl;
? assets.images.settings.bottomScreen.numberInputDownXlDisabled
: assets.images.settings.bottomScreen.numberInputDownXl;
}
});
const squareWidth = computed(() => upImage.value.width);
const squareWidth = computed(() => upImage.value.rect.width);
const increase = () => {
const newValue = value.value + 1;
@@ -89,7 +90,7 @@ const decrease = () => {
onRender((ctx) => {
// arrow up
ctx.drawImage(upImage.value, props.x, Y);
upImage.value.draw(ctx, props.x, Y);
// outline
ctx.fillStyle = "#515151";
@@ -123,11 +124,7 @@ onRender((ctx) => {
);
// arrow down
ctx.drawImage(
downImage.value,
props.x,
Y + ARROW_IMAGE_HEIGHT + SQUARE_HEIGHT,
);
downImage.value.draw(ctx, props.x, Y + ARROW_IMAGE_HEIGHT + SQUARE_HEIGHT);
// title
ctx.font = "10px NDS10";
@@ -140,7 +137,7 @@ onRender((ctx) => {
// TODO: -10 is needed because fillTextCentered isn't using top baseline
// i will change that in the future (maybe)
Y + ARROW_IMAGE_HEIGHT * 2 + SQUARE_HEIGHT - 6,
downImage.value.width,
downImage.value.rect.width,
);
});
@@ -159,7 +156,10 @@ useKeyDown((key) => {
onClick((x, y) => {
if (props.disabled) return;
if (
rectContains([props.x, Y, upImage.value.width, ARROW_IMAGE_HEIGHT], [x, y])
rectContains(
[props.x, Y, upImage.value.rect.width, ARROW_IMAGE_HEIGHT],
[x, y],
)
) {
increase();
emit("select");
@@ -175,7 +175,7 @@ onClick((x, y) => {
[
props.x,
Y + ARROW_IMAGE_HEIGHT + SQUARE_HEIGHT + 2,
downImage.value.width,
downImage.value.rect.width,
ARROW_IMAGE_HEIGHT,
],
[x, y],