feat(intro): implement intro screen
This commit is contained in:
35
app/components/Intro/TopScreen/TopScreen.vue
Normal file
35
app/components/Intro/TopScreen/TopScreen.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
const { onRender } = useScreen();
|
||||
const { assets } = useAssets();
|
||||
const store = useIntroStore();
|
||||
|
||||
const frames = Object.keys(assets.images.intro.logoAnimated).sort();
|
||||
|
||||
onMounted(() => {
|
||||
store.$reset();
|
||||
store.animateIntro();
|
||||
});
|
||||
|
||||
onRender((ctx) => {
|
||||
ctx.fillStyle = "#fbfbfb";
|
||||
ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT);
|
||||
|
||||
ctx.globalAlpha = store.isIntro
|
||||
? store.intro.textOpacity
|
||||
: store.isOutro
|
||||
? store.outro.textOpacity
|
||||
: 1;
|
||||
|
||||
const frameIndex = Math.floor(store.intro.logoFrameIndex);
|
||||
const frameKey = frames[
|
||||
frameIndex
|
||||
] as keyof typeof assets.images.intro.logoAnimated;
|
||||
const frame = assets.images.intro.logoAnimated[frameKey];
|
||||
|
||||
frame.draw(ctx, 0, 0);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div />
|
||||
</template>
|
||||
Reference in New Issue
Block a user