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

3
app/components/Home/BottomScreen/Background.vue
View File

@@ -3,11 +3,12 @@ const { onRender } = useScreen();
const store = useHomeStore();
const app = useAppStore();
const { assets } = useAssets();
onRender((ctx) => {
ctx.globalAlpha = app.booted ? 1 : store.intro.stage1Opacity;
ctx.drawImage(assets.home.bottomScreen.background, 0, 0);
assets.images.home.bottomScreen.background.draw(ctx, 0, 0);
});
defineOptions({

6
app/components/Home/BottomScreen/Button.vue
View File

@@ -3,14 +3,16 @@ const props = defineProps<{
x: number;
y: number;
opacity: number;
image: HTMLImageElement;
image: {
draw: (ctx: CanvasRenderingContext2D, x: number, y: number) => void;
};
}>();
const { onRender } = useScreen();
onRender((ctx) => {
ctx.globalAlpha = props.opacity;
ctx.drawImage(props.image, props.x, props.y);
props.image.draw(ctx, props.x, props.y);
});
defineOptions({

14
app/components/Home/BottomScreen/Buttons.vue
View File

@@ -128,45 +128,45 @@ onRender((ctx) => {
:x="33"
:y="25 + getButtonOffset('projects')"
:opacity="getOpacity('projects')"
:image="assets.home.bottomScreen.buttons.game"
:image="assets.images.home.bottomScreen.buttons.game"
/>
<Button
:x="32"
:y="72 + getButtonOffset('contact')"
:opacity="getOpacity('contact')"
:image="assets.home.bottomScreen.buttons.contact"
:image="assets.images.home.bottomScreen.buttons.contact"
/>
<Button
:x="128"
:y="72 + getButtonOffset('gallery')"
:opacity="getOpacity('gallery')"
:image="assets.home.bottomScreen.buttons.gallery"
:image="assets.images.home.bottomScreen.buttons.gallery"
/>
<Button
:x="33"
:y="121"
:opacity="getOpacity()"
:image="assets.home.bottomScreen.buttons.gamePak"
:image="assets.images.home.bottomScreen.buttons.gamePak"
/>
<Button
:x="10"
:y="175 + getButtonOffset('theme')"
:opacity="getOpacity('theme')"
:image="assets.home.bottomScreen.buttons.theme"
:image="assets.images.home.bottomScreen.buttons.theme"
/>
<Button
:x="117"
:y="170 + getButtonOffset('settings')"
:opacity="getOpacity('settings')"
:image="assets.home.bottomScreen.buttons.settings"
:image="assets.images.home.bottomScreen.buttons.settings"
/>
<Button
:x="235"
:y="175 + getButtonOffset('alarm')"
:opacity="getOpacity('alarm')"
:image="assets.home.bottomScreen.buttons.alarm"
:image="assets.images.home.bottomScreen.buttons.alarm"
/>
<Selector :rect="selectorPosition" :opacity="getOpacity()" />

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