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

This commit is contained in:
2026-01-08 19:55:43 +01:00
parent c6d5911b7d
commit e2d40a4bc1
41 changed files with 488 additions and 377 deletions

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

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

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

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;

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