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],

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

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

21
app/components/Settings/TopScreen/Calendar.vue
View File

@@ -1,7 +1,6 @@
<script setup lang="ts">
const { onRender } = useScreen();
const app = useAppStore();
const { assets } = useAssets();
onRender((ctx) => {
@@ -14,7 +13,6 @@ onRender((ctx) => {
const CALENDAR_ROWS = 5;
const CALENDAR_LEFT = 128;
const CALENDAR_TOP = 64;
const SELECTOR_SIZE = 13;
ctx.fillStyle = "#343434";
@@ -25,16 +23,16 @@ onRender((ctx) => {
const firstDay = new Date(year, month, 1).getDay();
const daysInMonth = new Date(year, month + 1, 0).getDate();
ctx.drawImage(
assets.home.topScreen.calendar.calendar,
assets.images.home.topScreen.calendar.calendar.draw(
ctx,
CALENDAR_LEFT - 3,
CALENDAR_TOP - 33,
);
const extraRow = CALENDAR_COLS * CALENDAR_ROWS - daysInMonth - firstDay < 0;
if (extraRow) {
ctx.drawImage(
assets.home.topScreen.calendar.lastRow,
assets.images.home.topScreen.calendar.lastRow.draw(
ctx,
CALENDAR_LEFT - 3,
CALENDAR_TOP + 79,
);
@@ -53,16 +51,11 @@ onRender((ctx) => {
const cellTop = CALENDAR_TOP + col * 16;
if (now.getDate() === day) {
ctx.drawImage(
assets.home.topScreen.calendar.daySelectorsSheet,
0,
(app.color.row * 4 + app.color.col) * SELECTOR_SIZE,
SELECTOR_SIZE,
SELECTOR_SIZE,
assets.images.home.topScreen.calendar.daySelectorsSheet.draw(
ctx,
cellLeft + 1,
cellTop + 1,
SELECTOR_SIZE,
SELECTOR_SIZE,
{ colored: true },
);
}

2
app/components/Settings/TopScreen/Clock.vue
View File

@@ -55,7 +55,7 @@ function drawLine(
onRender((ctx) => {
ctx.translate(0, -16);
ctx.drawImage(assets.home.topScreen.clock, 13, 45);
assets.images.home.topScreen.clock.draw(ctx, 13, 45);
const now = new Date();

38
app/components/Settings/TopScreen/Notifications.vue
View File

@@ -6,12 +6,12 @@ const { assets } = useAssets();
const renderNotification = (
ctx: CanvasRenderingContext2D,
image: HTMLImageElement,
image: AtlasImage,
title: string,
description: string,
) => {
ctx.drawImage(assets.settings.topScreen.notification, 0, 0);
ctx.drawImage(image, 2, 2);
assets.images.settings.topScreen.notification.draw(ctx, 0, 0);
image.draw(ctx, 2, 2);
ctx.font = "10px NDS10";
ctx.fillStyle = "#282828";
@@ -26,29 +26,29 @@ const renderNotification = (
};
const mainNotification = computed(() => ({
image: assets.settings.topScreen.settings,
image: assets.images.settings.topScreen.settings,
title: $t("settings.title"),
description: $t("settings.description"),
}));
const IMAGES_MAP: Record<string, HTMLImageElement> = {
options: assets.settings.topScreen.options.options,
optionsStartUp: assets.settings.topScreen.options.startUp,
optionsLanguage: assets.settings.topScreen.options.language,
optionsGbaMode: assets.settings.topScreen.options.gbaMode,
const IMAGES_MAP: Record<string, AtlasImage> = {
options: assets.images.settings.topScreen.options.options,
optionsStartUp: assets.images.settings.topScreen.options.startUp,
optionsLanguage: assets.images.settings.topScreen.options.language,
optionsGbaMode: assets.images.settings.topScreen.options.gbaMode,
clock: assets.settings.topScreen.clock.clock,
clockTime: assets.settings.topScreen.clock.time,
clockDate: assets.settings.topScreen.clock.date,
clockAlarm: assets.settings.topScreen.clock.alarm,
clock: assets.images.settings.topScreen.clock.clock,
clockTime: assets.images.settings.topScreen.clock.time,
clockDate: assets.images.settings.topScreen.clock.date,
clockAlarm: assets.images.settings.topScreen.clock.alarm,
user: assets.settings.topScreen.user.user,
userUserName: assets.settings.topScreen.user.userName,
userBirthday: assets.settings.topScreen.user.birthday,
userMessage: assets.settings.topScreen.user.message,
userColor: assets.settings.topScreen.user.color,
user: assets.images.settings.topScreen.user.user,
userUserName: assets.images.settings.topScreen.user.userName,
userBirthday: assets.images.settings.topScreen.user.birthday,
userMessage: assets.images.settings.topScreen.user.message,
userColor: assets.images.settings.topScreen.user.color,
touchScreen: assets.settings.topScreen.touchScreen.touchScreen,
touchScreen: assets.images.settings.topScreen.touchScreen.touchScreen,
};
const menuNotification = computed(() => {

24
app/components/Settings/TopScreen/StatusBar.vue
View File

@@ -1,26 +1,14 @@
<script setup lang="ts">
const { onRender } = useScreen();
const app = useAppStore();
const { assets } = useAssets();
const BAR_WIDTH = 256;
const BAR_HEIGHT = 16;
onRender((ctx) => {
const TEXT_Y = 11;
ctx.drawImage(
assets.home.topScreen.statusBar.statusBarsSheet,
0,
(app.color.row * 4 + app.color.col) * BAR_HEIGHT,
BAR_WIDTH,
BAR_HEIGHT,
0,
0,
BAR_WIDTH,
BAR_HEIGHT,
);
assets.images.home.topScreen.statusBar.statusBarsSheet.draw(ctx, 0, 0, {
colored: true,
});
ctx.fillStyle = "#ffffff";
ctx.font = "7px NDS7";
@@ -50,9 +38,9 @@ onRender((ctx) => {
fillNumberCell(now.getMonth() + 1, 12, -1);
// icons
ctx.drawImage(assets.home.topScreen.statusBar.gbaDisplay, 210, 2);
ctx.drawImage(assets.home.topScreen.statusBar.startupMode, 226, 2);
ctx.drawImage(assets.home.topScreen.statusBar.battery, 242, 4);
assets.images.home.topScreen.statusBar.gbaDisplay.draw(ctx, 210, 2);
assets.images.home.topScreen.statusBar.startupMode.draw(ctx, 226, 2);
assets.images.home.topScreen.statusBar.battery.draw(ctx, 242, 4);
});
defineOptions({