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/Home/TopScreen/Background.vue
View File

@@ -7,7 +7,7 @@ const { assets } = useAssets();
onRender((ctx) => {
ctx.globalAlpha = app.booted ? 1 : store.intro.stage1Opacity;
ctx.drawImage(assets.home.topScreen.background, 0, 0);
assets.images.home.topScreen.background.draw(ctx, 0, 0);
});
defineOptions({

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

@@ -2,7 +2,6 @@
const { onRender } = useScreen();
// NOTE: calendar background is handled by TopScreenBackground
const app = useAppStore();
const store = useHomeStore();
const { assets } = useAssets();
@@ -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";
@@ -30,16 +28,16 @@ onRender((ctx) => {
: store.isOutro && store.outro.animateTop
? store.outro.stage1Opacity
: 1;
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,
);
@@ -63,16 +61,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/Home/TopScreen/Clock.vue
View File

@@ -59,7 +59,7 @@ onRender((ctx) => {
: store.isOutro && store.outro.animateTop
? store.outro.stage1Opacity
: 1;
ctx.drawImage(assets.home.topScreen.clock, 13, 45);
assets.images.home.topScreen.clock.draw(ctx, 13, 45);
ctx.globalAlpha = store.isIntro
? store.intro.stage1Opacity

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

@@ -1,13 +1,9 @@
<script setup lang="ts">
const { onRender } = useScreen();
const app = useAppStore();
const store = useHomeStore();
const { assets } = useAssets();
const BAR_WIDTH = 256;
const BAR_HEIGHT = 16;
onRender((ctx) => {
const TEXT_Y = 11;
@@ -15,17 +11,9 @@ onRender((ctx) => {
ctx.globalAlpha =
store.isOutro && store.outro.animateTop ? store.outro.stage2Opacity : 1;
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";
@@ -55,9 +43,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({