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

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({