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

1
.gitignore vendored
View File

@@ -1,5 +1,6 @@
# generated
public/nds/images/projects/pokemons
public/nds/atlas.webp
app/composables/useAssets.ts
# ESlint

32
app/components/Common/Bars.vue
View File

@@ -13,29 +13,17 @@ const props = withDefaults(
);
const { onRender } = useScreen();
const app = useAppStore();
const { assets } = useAssets();
const BAR_WIDTH = 256;
const BAR_HEIGHT = 24;
const TITLE_Y = 5;
onRender((ctx) => {
ctx.globalAlpha = props.opacity;
// top bar
ctx.drawImage(
assets.common.barsSheet,
0,
(app.color.row * 4 + app.color.col) * BAR_HEIGHT,
BAR_WIDTH,
BAR_HEIGHT,
0,
-props.yOffset,
BAR_WIDTH,
BAR_HEIGHT,
);
assets.images.common.barsSheet.draw(ctx, 0, -props.yOffset, {
colored: true,
});
if (props.title) {
ctx.fillStyle = "#000000";
@@ -46,17 +34,9 @@ onRender((ctx) => {
ctx.scale(1, -1);
// bottom bar
ctx.drawImage(
assets.common.barsSheet,
0,
(app.color.row * 4 + app.color.col) * BAR_HEIGHT,
BAR_WIDTH,
BAR_HEIGHT,
0,
-192 - props.yOffset,
BAR_WIDTH,
BAR_HEIGHT,
);
assets.images.common.barsSheet.draw(ctx, 0, -192 - props.yOffset, {
colored: true,
});
}, 50);
defineOptions({

66
app/components/Common/ButtonSelector.vue
View File

@@ -11,11 +11,9 @@ const props = withDefaults(
const { onRender } = useScreen();
const app = useAppStore();
const { assets } = useAssets();
const ANIMATION_SPEED = 15;
const CORNER_SIZE = 11;
let [currentX, currentY, currentWidth, currentHeight] = props.rect;
@@ -48,67 +46,31 @@ onRender((ctx, deltaTime) => {
ctx.globalAlpha = props.opacity;
const spriteY = (app.color.row * 4 + app.color.col) * CORNER_SIZE;
// top-left corner
assets.images.common.selectorCornersSheet.draw(ctx, x, y, { colored: true });
// Top-left corner
ctx.drawImage(
assets.common.selectorCornersSheet,
0,
spriteY,
CORNER_SIZE,
CORNER_SIZE,
x,
y,
CORNER_SIZE,
CORNER_SIZE,
);
// Top-right corner
// top-right corner
ctx.save();
ctx.scale(-1, 1);
ctx.drawImage(
assets.common.selectorCornersSheet,
0,
spriteY,
CORNER_SIZE,
CORNER_SIZE,
-(x + w),
y,
CORNER_SIZE,
CORNER_SIZE,
);
assets.images.common.selectorCornersSheet.draw(ctx, -(x + w), y, {
colored: true,
});
ctx.restore();
// Bottom-left corner
// bottom-left corner
ctx.save();
ctx.scale(1, -1);
ctx.drawImage(
assets.common.selectorCornersSheet,
0,
spriteY,
CORNER_SIZE,
CORNER_SIZE,
x,
-(y + h),
CORNER_SIZE,
CORNER_SIZE,
);
assets.images.common.selectorCornersSheet.draw(ctx, x, -(y + h), {
colored: true,
});
ctx.restore();
// Bottom-right corner
// bottom-right corner
ctx.save();
ctx.scale(-1, -1);
ctx.drawImage(
assets.common.selectorCornersSheet,
0,
spriteY,
CORNER_SIZE,
CORNER_SIZE,
-(x + w),
-(y + h),
CORNER_SIZE,
CORNER_SIZE,
);
assets.images.common.selectorCornersSheet.draw(ctx, -(x + w), -(y + h), {
colored: true,
});
ctx.restore();
}, 40);

18
app/components/Common/Buttons.vue
View File

@@ -15,9 +15,9 @@ const { onRender, onClick } = useScreen();
const { assets } = useAssets();
const BUTTON_WIDTH = assets.common.button.width;
const BUTTON_HEIGHT = assets.common.button.height;
const LETTER_WIDTH = assets.common.B.width;
const BUTTON_WIDTH = assets.images.common.button.rect.width;
const BUTTON_HEIGHT = assets.images.common.button.rect.height;
const LETTER_WIDTH = assets.images.common.B.rect.width;
const B_BUTTON: Rect = [31, 172, BUTTON_WIDTH, BUTTON_HEIGHT];
const A_BUTTON: Rect = [144, 172, BUTTON_WIDTH, BUTTON_HEIGHT];
@@ -29,23 +29,25 @@ onRender((ctx) => {
ctx.translate(0, props.yOffset);
const drawButton = (
image: HTMLImageElement,
image: {
draw: (ctx: CanvasRenderingContext2D, x: number, y: number) => void;
},
text: string,
x: number,
offset: number,
) => {
ctx.drawImage(assets.common.button, x, 172);
assets.images.common.button.draw(ctx, x, 172);
const { actualBoundingBoxRight: textWidth } = ctx.measureText(text);
const width = LETTER_WIDTH + 4 + textWidth;
const left = Math.ceil(x + BUTTON_WIDTH / 2 - width / 2 - offset / 2);
ctx.drawImage(image, left, 176);
image.draw(ctx, left, 176);
ctx.fillText(text, left + LETTER_WIDTH + 4, 185);
};
drawButton(assets.common.B, props.bLabel, 31, 5);
drawButton(assets.common.A, props.aLabel, 144, 0);
drawButton(assets.images.common.B, props.bLabel, 31, 5);
drawButton(assets.images.common.A, props.aLabel, 144, 0);
}, 60);
onClick((x, y) => {

6
app/components/Common/ConfirmationModal.vue
View File

@@ -6,8 +6,8 @@ const { onRender } = useScreen();
const { assets } = useAssets();
const confirmationModal = useConfirmationModal();
const BG_WIDTH = assets.common.confirmationModal.width;
const BG_HEIGHT = assets.common.confirmationModal.height;
const BG_WIDTH = assets.images.common.confirmationModal.rect.width;
const BG_HEIGHT = assets.images.common.confirmationModal.rect.height;
const BG_X = Math.floor((SCREEN_WIDTH - BG_WIDTH) / 2);
const BG_Y = Math.floor((SCREEN_HEIGHT - BG_HEIGHT) / 2);
@@ -34,7 +34,7 @@ onRender((ctx) => {
ctx.translate(0, confirmationModal.offsetY);
ctx.drawImage(assets.common.confirmationModal, BG_X, BG_Y);
assets.images.common.confirmationModal.draw(ctx, BG_X, BG_Y);
ctx.font = "16px Pokemon DP Pro";
ctx.textBaseline = "top";

4
app/components/Contact/BottomScreen/Background.vue
View File

@@ -5,12 +5,12 @@ const store = useContactStore();
const { assets } = useAssets();
onRender((ctx) => {
ctx.drawImage(assets.home.bottomScreen.background, 0, 0);
assets.images.home.bottomScreen.background.draw(ctx, 0, 0);
ctx.globalAlpha = store.isIntro
? store.intro.stage2Opacity
: store.outro.stage3Opacity;
ctx.drawImage(assets.contact.bottomScreen.background, 0, 0);
assets.images.contact.bottomScreen.background.draw(ctx, 0, 0);
});
defineOptions({

2
app/components/Contact/BottomScreen/Buttons.vue
View File

@@ -8,7 +8,7 @@ onRender((ctx) => {
ctx.globalAlpha = store.isIntro
? store.intro.stage3Opacity
: store.outro.stage1Opacity;
ctx.drawImage(assets.contact.bottomScreen.buttons, 31, 32);
assets.images.contact.bottomScreen.buttons.draw(ctx, 31, 32);
});
defineOptions({

4
app/components/Contact/TopScreen/Background.vue
View File

@@ -5,12 +5,12 @@ const store = useContactStore();
const { assets } = useAssets();
onRender((ctx) => {
ctx.drawImage(assets.home.topScreen.background, 0, 0);
assets.images.home.topScreen.background.draw(ctx, 0, 0);
ctx.globalAlpha = store.isIntro
? store.intro.stage2Opacity
: store.outro.stage3Opacity;
ctx.drawImage(assets.contact.topScreen.background, 0, 0);
assets.images.contact.topScreen.background.draw(ctx, 0, 0);
});
defineOptions({

4
app/components/Contact/TopScreen/LeftBar.vue
View File

@@ -8,12 +8,12 @@ onRender((ctx) => {
ctx.globalAlpha = store.isIntro
? store.intro.stage1Opacity
: store.outro.stage2Opacity;
ctx.drawImage(assets.contact.topScreen.leftBar, 0, 0);
assets.images.contact.topScreen.leftBar.draw(ctx, 0, 0);
ctx.globalAlpha = store.isIntro
? store.intro.stage3Opacity
: store.outro.stage1Opacity;
ctx.drawImage(assets.contact.topScreen.leftBarThings, 0, 0);
assets.images.contact.topScreen.leftBarThings.draw(ctx, 0, 0);
});
defineOptions({

6
app/components/Contact/TopScreen/Notifications.vue
View File

@@ -15,7 +15,7 @@ onRender((ctx) => {
const y = 169 - 24 * index + store.notificationsYOffset;
if (y < -24) break;
ctx.drawImage(assets.contact.bottomScreen.notification, 21, y);
assets.images.contact.bottomScreen.notification.draw(ctx, 21, y);
const content = store.notifications[i]!;
ctx.fillStyle = content.includes("opened") ? "#00fbba" : "#e3f300";
@@ -26,8 +26,8 @@ onRender((ctx) => {
ctx.globalAlpha = store.isIntro
? store.intro.stage1Opacity
: store.outro.stage2Opacity;
ctx.drawImage(
assets.contact.topScreen.title,
assets.images.contact.topScreen.title.draw(
ctx,
21,
store.isIntro
? store.intro.titleY

2
app/components/Gallery/BottomScreen/BottomScreen.vue
View File

@@ -4,7 +4,7 @@ const store = useGalleryStore();
const { assets } = useAssets();
onRender((ctx) => {
ctx.drawImage(assets.home.bottomScreen.background, 0, 0);
assets.images.home.bottomScreen.background.draw(ctx, 0, 0);
ctx.fillStyle = "#000000";
ctx.globalAlpha = store.isIntro

2
app/components/Gallery/TopScreen/TopScreen.vue
View File

@@ -14,7 +14,7 @@ onMounted(() => {
});
onRender((ctx) => {
ctx.drawImage(assets.home.topScreen.background, 0, 0);
assets.images.home.topScreen.background.draw(ctx, 0, 0);
ctx.fillStyle = "#000000";
ctx.globalAlpha = store.isIntro

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

2
app/components/NDS.vue
View File

@@ -27,7 +27,7 @@ const props = defineProps<{
const { assets } = useAssets();
const app = useAppStore();
const model = assets.nitendoDs.model.clone(true);
const model = assets.models.nitendoDs.model.clone(true);
let topScreenTexture: THREE.CanvasTexture | null = null;
let bottomScreenTexture: THREE.CanvasTexture | null = null;

2
app/components/Projects/BottomScreen/Background.vue
View File

@@ -4,7 +4,7 @@ const { onRender } = useScreen();
const { assets } = useAssets();
onRender((ctx) => {
ctx.drawImage(assets.projects.bottomScreen.background, 0, 0);
assets.images.projects.bottomScreen.background.draw(ctx, 0, 0);
});
defineOptions({
render: () => null,

35
app/components/Projects/BottomScreen/Buttons.vue
View File

@@ -11,23 +11,28 @@ const CLICK_RADIUS = 22;
const BUTTONS = {
prev: {
position: [36, 100],
image: assets.projects.bottomScreen.prevPressed,
image: assets.images.projects.bottomScreen.prevPressed,
},
quit: {
position: [88, 156],
image: assets.projects.bottomScreen.quitPressed,
image: assets.images.projects.bottomScreen.quitPressed,
},
link: {
position: [168, 156],
image: assets.projects.bottomScreen.linkPressed,
image: assets.images.projects.bottomScreen.linkPressed,
},
next: {
position: [220, 100],
image: assets.projects.bottomScreen.nextPressed,
image: assets.images.projects.bottomScreen.nextPressed,
},
} as const satisfies Record<
string,
{ position: Point; image: HTMLImageElement }
{
position: Point;
image: {
draw: (ctx: CanvasRenderingContext2D, x: number, y: number) => void;
};
}
>;
type ButtonType = keyof typeof BUTTONS;
@@ -115,15 +120,15 @@ onClick((x, y) => {
onRender((ctx) => {
// Draw disabled buttons
if (store.currentProject === 0) {
ctx.drawImage(
assets.projects.bottomScreen.prevDisabled,
assets.images.projects.bottomScreen.prevDisabled.draw(
ctx,
BUTTONS.prev.position[0] - 14,
BUTTONS.prev.position[1] - 14,
);
}
if (store.currentProject === store.projects.length - 1) {
ctx.drawImage(
assets.projects.bottomScreen.nextDisabled,
assets.images.projects.bottomScreen.nextDisabled.draw(
ctx,
BUTTONS.next.position[0] - 14,
BUTTONS.next.position[1] - 14,
);
@@ -131,24 +136,24 @@ onRender((ctx) => {
if (currentAnimation?.showButton) {
const image = BUTTONS[currentAnimation.type].image;
ctx.drawImage(
image!,
image.draw(
ctx,
currentAnimation.position[0] - 14,
currentAnimation.position[1] - 14,
);
}
if (currentAnimation?.showSmallCircle) {
ctx.drawImage(
assets.projects.bottomScreen.circleSmall,
assets.images.projects.bottomScreen.circleSmall.draw(
ctx,
currentAnimation.position[0] - 28,
currentAnimation.position[1] - 28,
);
}
if (currentAnimation?.showBigCircle) {
ctx.drawImage(
assets.projects.bottomScreen.circleBig,
assets.images.projects.bottomScreen.circleBig.draw(
ctx,
currentAnimation.position[0] - 44,
currentAnimation.position[1] - 44,
);

10
app/components/Projects/BottomScreen/LinkConfirmationPopup.vue
View File

@@ -124,7 +124,7 @@ onRender((ctx) => {
ctx.strokeRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
// text
ctx.drawImage(assets.projects.bottomScreen.popupTextBackground, 2, 146);
assets.images.projects.bottomScreen.popupTextBackground.draw(ctx, 2, 146);
ctx.font = "16px Pokemon DP Pro";
ctx.textBaseline = "top";
const displayedText = text.value.slice(
@@ -135,10 +135,14 @@ onRender((ctx) => {
// choice box
if (textProgress.value >= 1) {
ctx.drawImage(assets.projects.bottomScreen.popupChoiceBackground, 194, 98);
assets.images.projects.bottomScreen.popupChoiceBackground.draw(
ctx,
194,
98,
);
const y = selectedOption === "yes" ? YES_Y : NO_Y;
ctx.drawImage(assets.projects.bottomScreen.popupSelector, 200, y);
assets.images.projects.bottomScreen.popupSelector.draw(ctx, 200, y);
drawTextWithShadow(
ctx,

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

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

14
app/components/Projects/TopScreen/Project.vue
View File

@@ -56,7 +56,7 @@ const drawTextWithShadow2Lines = (
};
onRender((ctx) => {
ctx.drawImage(assets.projects.topScreen.background, 0, 0);
assets.images.projects.topScreen.background.draw(ctx, 0, 0);
ctx.textBaseline = "hanging";
ctx.font = "16px Pokemon DP Pro";
@@ -80,19 +80,19 @@ onRender((ctx) => {
const offsetFromCurrent = i - store.currentProject;
// TODO: project.id should be typed from useAssets, shouldn't be just a string
const thumbnailImage =
assets.projects.pokemons[
store.projects[i]!.id as keyof typeof assets.projects.pokemons
assets.images.projects.pokemons[
store.projects[i]!.id as keyof typeof assets.images.projects.pokemons
]!;
ctx.drawImage(
thumbnailImage,
thumbnailImage.draw(
ctx,
Math.floor(
thumbnailCenterX +
offsetFromCurrent * thumbnailSpacing -
thumbnailImage.width / 2 +
thumbnailImage.rect.width / 2 +
store.offsetX,
),
Math.floor(thumbnailCenterY - thumbnailImage.height / 2),
Math.floor(thumbnailCenterY - thumbnailImage.rect.height / 2),
);
}

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

62
app/composables/useAssets.ts.in
View File

@@ -1,29 +1,44 @@
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
const imageCache = new Map<string, HTMLImageElement>();
type Rect = [number, number, number, number];
let atlasImage: HTMLImageElement | null = null;
const modelCache = new Map<string, THREE.Group>();
const loaded = ref(0);
const total = ref({{TOTAL}});
const isReady = computed(() => loaded.value === total.value);
const createImage = (path: string) => {
if (imageCache.has(path)) {
return imageCache.get(path)!;
}
if (import.meta.client) {
atlasImage = document.createElement('img');
atlasImage.src = '/nds/atlas.webp';
const img = document.createElement('img');
img.src = path;
imageCache.set(path, img);
if (img.complete) {
if (atlasImage.complete) {
loaded.value += 1;
} else {
img.onload = () => { loaded.value += 1 };
atlasImage.onload = () => {
loaded.value += 1;
};
}
}
const drawAtlasImage = (
ctx: CanvasRenderingContext2D,
[sx, sy, sw, sh]: Rect,
[dx, dy, dw, dh]: Rect,
opts?: Partial<{ colored: boolean }>,
): void => {
if (!atlasImage) return;
if (opts?.colored) {
const app = useAppStore();
sh /= 16;
sy += (app.color.row * 4 + app.color.col) * sh;
dh = sh;
}
return img;
ctx.drawImage(atlasImage, sx, sy, sw, sh, dx, dy, dw, dh);
};
const createModel = (path: string) => {
@@ -54,7 +69,28 @@ const createModel = (path: string) => {
return model;
};
const assets = {{ASSETS}};
export type AtlasImage = {
draw: (
ctx: CanvasRenderingContext2D,
x: number,
y: number,
opts?: Partial<{ colored: boolean }>,
) => void;
rect: { x: number; y: number; width: number; height: number };
};
type ImageTree = {
[key: string]: AtlasImage | ImageTree;
};
type ModelTree = {
[key: string]: THREE.Group | ModelTree;
};
const assets = {
images: {{IMAGES}} as const satisfies ImageTree,
models: {{MODELS}} as const satisfies ModelTree,
};
export const useAssets = () => {
return {

316
modules/asset-generator.ts
View File

@@ -2,14 +2,56 @@ import { defineNuxtModule, useLogger } from "@nuxt/kit";
import { readdir, readFile, writeFile } from "fs/promises";
import { join, relative, parse } from "path";
import { existsSync, watch } from "fs";
import sharp from "sharp";
type AssetsTree = {
[key: string]: string | AssetsTree;
type AtlasRect = {
x: number;
y: number;
width: number;
height: number;
};
type ImageTree = {
[key: string]: AtlasRect | ImageTree;
};
type ModelTree = {
[key: string]: string | ModelTree;
};
type ImageData = {
path: string;
buffer: Buffer;
width: number;
height: number;
};
const IMAGE_EXTENSIONS = [".png", ".webp"];
const MODELS_EXTENSIONS = [".gltf"];
const ASSETS_EXTENSIONS = [...IMAGE_EXTENSIONS, ...MODELS_EXTENSIONS];
const MODEL_EXTENSIONS = [".gltf"];
const MAX_WIDTH = 1024;
const toCamelCase = (str: string) =>
str.replace(/[-_](.)/g, (_, c) => c.toUpperCase()).replaceAll(".", "_");
const scanByExt = async (
dir: string,
extensions: string[],
): Promise<string[]> => {
if (!existsSync(dir)) return [];
const entries = await readdir(dir, { withFileTypes: true });
const results: string[] = [];
for (const entry of entries) {
const fullPath = join(dir, entry.name);
if (entry.isDirectory()) {
results.push(...(await scanByExt(fullPath, extensions)));
} else if (extensions.includes(parse(fullPath).ext.toLowerCase())) {
results.push(fullPath);
}
}
return results;
};
export default defineNuxtModule({
meta: {
@@ -19,125 +61,237 @@ export default defineNuxtModule({
defaults: {},
async setup(_, nuxt) {
const logger = useLogger("asset-generator");
const publicDir = join(nuxt.options.rootDir, "public/nds");
const templateFile = join(
nuxt.options.rootDir,
"app/composables/useAssets.ts.in",
);
const outputFile = join(
nuxt.options.rootDir,
"app/composables/useAssets.ts",
const rootDir = nuxt.options.rootDir;
const imagesDir = join(rootDir, "public/nds/images");
const modelsDir = join(rootDir, "public/nds/models");
const templateFile = join(rootDir, "app/composables/useAssets.ts.in");
const outputFile = join(rootDir, "app/composables/useAssets.ts");
const atlasOutputPath = join(rootDir, "public/nds/atlas.webp");
const loadImages = async (
paths: string[],
): Promise<Map<string, ImageData>> => {
const images = new Map<string, ImageData>();
await Promise.all(
paths.map(async (path) => {
try {
const [metadata, buffer] = await Promise.all([
sharp(path).metadata(),
sharp(path).png().toBuffer(),
]);
if (metadata.width && metadata.height) {
images.set(path, {
path,
buffer,
width: metadata.width,
height: metadata.height,
});
}
} catch {
logger.warn(`Failed to load ${path}, skipping...`);
}
}),
);
const hasExt = (filename: string, exts: string[]): boolean => {
const ext = parse(filename).ext.toLowerCase();
return exts.includes(ext);
return images;
};
const scanDirectory = async (dir: string): Promise<string[]> => {
const assets: string[] = [];
const entries = await readdir(dir, { withFileTypes: true });
const packImages = (images: ImageData[]) => {
const sorted = images.toSorted((a, b) => b.height - a.height);
const rects = new Map<string, AtlasRect>();
let x = 0;
let y = 0;
let rowHeight = 0;
let maxWidth = 0;
for (const entry of entries) {
const fullPath = join(dir, entry.name);
if (entry.isDirectory()) {
const assetFiles = await scanDirectory(fullPath);
assets.push(...assetFiles);
} else if (hasExt(fullPath, ASSETS_EXTENSIONS)) {
assets.push(fullPath);
}
for (const img of sorted) {
if (x + img.width > MAX_WIDTH) {
x = 0;
y += rowHeight;
rowHeight = 0;
}
return assets;
rects.set(img.path, {
x,
y,
width: img.width,
height: img.height,
});
x += img.width;
rowHeight = Math.max(rowHeight, img.height);
maxWidth = Math.max(maxWidth, x);
}
return { rects, width: maxWidth, height: y + rowHeight };
};
const toCamelCase = (str: string): string => {
return str
.replace(/[-_](.)/g, (_, c) => c.toUpperCase())
.replaceAll(".", "_");
};
const buildImageTree = (
imagePaths: string[],
rects: Map<string, AtlasRect>,
): ImageTree => {
const tree: ImageTree = {};
const buildAssetsTree = (assets: string[], baseDir: string): AssetsTree => {
const tree: AssetsTree = {};
for (const path of imagePaths) {
const parts = relative(imagesDir, path).split("/");
const fileName = parse(parts.at(-1)!).name;
for (const assetPath of assets) {
const relativePath = relative(baseDir, assetPath);
const parts = relativePath.split("/");
const filename = parse(parts[parts.length - 1]!).name;
let current = tree;
// start at 1 to skip images/, models/
for (let i = 1; i < parts.length - 1; i += 1) {
const key = toCamelCase(parts[i]!);
current[key] ??= {};
current = current[key] as AssetsTree;
let node = tree;
for (const part of parts.slice(0, -1)) {
const key = toCamelCase(part);
node[key] ??= {};
node = node[key] as ImageTree;
}
current[toCamelCase(filename)] = `/${relativePath}`;
const rect = rects.get(path);
if (rect) node[toCamelCase(fileName)] = rect;
}
return tree;
};
const generatorFn = (filePath: string): string => {
if (hasExt(filePath, IMAGE_EXTENSIONS)) return "createImage";
if (hasExt(filePath, MODELS_EXTENSIONS)) return "createModel";
throw new Error(`No matching generator for '${filePath}'`);
const buildModelTree = (modelPaths: string[]): ModelTree => {
const tree: ModelTree = {};
for (const path of modelPaths) {
const parts = relative(modelsDir, path).split("/");
const fileName = parse(parts.at(-1)!).name;
let node = tree;
for (const part of parts.slice(0, -1)) {
const key = toCamelCase(part);
node[key] ??= {};
node = node[key] as ModelTree;
}
node[toCamelCase(fileName)] =
`/nds/models/${relative(modelsDir, path)}`;
}
return tree;
};
const generateAssetsObject = (tree: AssetsTree, indent = 0): string => {
const spaces = " ".repeat(indent);
const generateImageCode = (tree: ImageTree, indent = 0): string => {
const entries = Object.entries(tree);
if (!entries.length) return "{}";
const lines = entries.map(([key, value]) =>
typeof value === "string"
? `${spaces} ${key}: ${generatorFn(value)}("/nds${value}"),`
: `${spaces} ${key}: ${generateAssetsObject(value, indent + 1)},`,
);
const sp = " ".repeat(indent);
const lines = entries.map(([key, value]) => {
if (value && typeof value === "object" && "x" in value) {
const { x, y, width, height } = value;
return `${sp} ${key}: {
${sp} draw: (ctx, x, y, opts?) => drawAtlasImage(ctx, [${x}, ${y}, ${width}, ${height}], [x, y, ${width}, ${height}], opts),
${sp} rect: { x: ${x}, y: ${y}, width: ${width}, height: ${height} },
${sp} }`;
}
return `${sp} ${key}: ${generateImageCode(value, indent + 1)}`;
});
return `{\n${lines.join("\n")}\n${spaces}}`;
return `{\n${lines.join(",\n")}\n${sp}}`;
};
const generateAssetsFile = async () => {
const generateModelCode = (tree: ModelTree, indent = 0): string => {
const entries = Object.entries(tree);
if (!entries.length) return "{}";
const sp = " ".repeat(indent);
const lines = entries.map(([key, value]) => {
if (typeof value === "string") {
return `${sp} ${key}: createModel("${value}")`;
}
return `${sp} ${key}: ${generateModelCode(value, indent + 1)}`;
});
return `{\n${lines.join(",\n")},\n${sp}}`;
};
const generateAssets = async () => {
try {
if (!existsSync(publicDir)) {
logger.warn("No public directory found");
return;
const imagePaths = await scanByExt(imagesDir, IMAGE_EXTENSIONS);
const modelPaths = await scanByExt(modelsDir, MODEL_EXTENSIONS);
const totalAssets = (imagePaths.length > 0 ? 1 : 0) + modelPaths.length;
let imageCode = "{}";
let atlasWidth = 0;
let atlasHeight = 0;
if (imagePaths.length > 0) {
const imageMap = await loadImages(imagePaths);
const images = Array.from(imageMap.values());
const { rects, width, height } = packImages(images);
atlasWidth = width;
atlasHeight = height;
const atlasBuffer = await sharp({
create: {
width,
height,
channels: 4,
background: { r: 0, g: 0, b: 0, alpha: 0 },
},
})
.composite(
images.map((img) => {
const rect = rects.get(img.path)!;
return { input: img.buffer, left: rect.x, top: rect.y };
}),
)
.webp({ lossless: true })
.toBuffer();
await writeFile(atlasOutputPath, atlasBuffer);
const imageTree = buildImageTree(imagePaths, rects);
imageCode = generateImageCode(imageTree);
}
const assets = await scanDirectory(publicDir);
const assetsTree = buildAssetsTree(assets, publicDir);
const assetsObject = generateAssetsObject(assetsTree);
const modelTree = buildModelTree(modelPaths);
const modelCode = generateModelCode(modelTree);
const template = await readFile(templateFile, "utf-8");
const fileContent = template
.replace("{{TOTAL}}", assets.length.toString())
.replace("{{ASSETS}}", assetsObject);
const code = template
.replace("{{TOTAL}}", totalAssets.toString())
.replace("{{IMAGES}}", imageCode)
.replace("{{MODELS}}", modelCode);
await writeFile(outputFile, fileContent, "utf-8");
logger.success(`Generated useAssets.ts with ${assets.length} assets`);
await writeFile(outputFile, code, "utf-8");
logger.success(
`Generated assets with ${imagePaths.length} images (${atlasWidth}x${atlasHeight}) and ${modelPaths.length} models`,
);
} catch (error) {
logger.error("Error generating assets file:", error);
logger.error("Error generating assets:", error);
}
};
nuxt.hook("build:before", async () => {
await generateAssetsFile();
});
nuxt.hook("build:before", generateAssets);
if (nuxt.options.dev) {
nuxt.hook("ready", () => {
watch(publicDir, { recursive: true }, async (_, filePath) => {
if (filePath && hasExt(filePath, ASSETS_EXTENSIONS)) {
logger.info(`Detected change: ${filePath}`);
await generateAssetsFile();
const watchAndRegenerate = (
dir: string,
extensions: string[],
type: string,
) => {
watch(dir, { recursive: true }, (_, filePath) => {
if (
filePath &&
extensions.includes(parse(filePath).ext.toLowerCase())
) {
logger.info(`Detected ${type} change: ${filePath}`);
generateAssets();
}
});
};
watch(templateFile, async () => {
nuxt.hook("ready", () => {
watchAndRegenerate(imagesDir, IMAGE_EXTENSIONS, "image");
watchAndRegenerate(modelsDir, MODEL_EXTENSIONS, "model");
watch(templateFile, () => {
logger.info("Template file changed");
await generateAssetsFile();
generateAssets();
});
});
}

1
package.json
View File

@@ -40,6 +40,7 @@
"eslint": "9.39.1",
"nuxt": "4.2.1",
"prettier": "3.6.2",
"sharp": "^0.34.5",
"typescript": "5.9.3"
}
}

7
pnpm-lock.yaml generated
View File

@@ -86,6 +86,9 @@ importers:
prettier:
specifier: 3.6.2
version: 3.6.2
sharp:
specifier: ^0.34.5
version: 0.34.5
typescript:
specifier: 5.9.3
version: 5.9.3
@@ -11047,8 +11050,7 @@ snapshots:
"@iconify/types": 2.0.0
vue: 3.5.25(typescript@5.9.3)
"@img/colour@1.0.0":
optional: true
"@img/colour@1.0.0": {}
"@img/sharp-darwin-arm64@0.34.5":
optionalDependencies:
@@ -17020,7 +17022,6 @@ snapshots:
"@img/sharp-win32-arm64": 0.34.5
"@img/sharp-win32-ia32": 0.34.5
"@img/sharp-win32-x64": 0.34.5
optional: true
shebang-command@2.0.0:
dependencies: