feat(assets): use single texture atlas instead of loading all images individually
This commit is contained in:
@@ -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({
|
||||
|
||||
@@ -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 },
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -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();
|
||||
|
||||
|
||||
@@ -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(() => {
|
||||
|
||||
@@ -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({
|
||||
|
||||
Reference in New Issue
Block a user