forked from goplus/builder
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
preview for animation & sprite (goplus#1280)
- Loading branch information
Showing
14 changed files
with
378 additions
and
148 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| <script setup lang="ts"> | ||
| import { ref, watchEffect } from 'vue' | ||
| import { useMessageHandle } from '@/utils/exception' | ||
| import { getCleanupSignal, type OnCleanup } from '@/utils/disposable' | ||
| import type { Costume } from '@/models/costume' | ||
| import CostumesPlayer from './CostumesPlayer.vue' | ||
| const props = defineProps<{ | ||
| costumes: Costume[] | ||
| /** Duration (in seconds) for all costumes to be played once */ | ||
| duration: number | ||
| placeholderImg?: string | null | ||
| }>() | ||
| const playerRef = ref<InstanceType<typeof CostumesPlayer>>() | ||
| const loadAndPlay = useMessageHandle(async (onCleanup: OnCleanup) => { | ||
| const player = playerRef.value | ||
| if (player == null) return | ||
| const signal = getCleanupSignal(onCleanup) | ||
| const { costumes, duration } = props | ||
| await player.load(costumes, duration, signal) | ||
| player.play(signal) | ||
| }).fn | ||
| watchEffect(loadAndPlay) | ||
| </script> | ||
|
|
||
| <template> | ||
| <CostumesPlayer ref="playerRef" :placeholder-img="placeholderImg" /> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,131 @@ | ||
| <script setup lang="ts"> | ||
| import { ref } from 'vue' | ||
| import { File } from '@/models/common/file' | ||
| import type { Costume } from '@/models/costume' | ||
| import { UIImg } from '../ui' | ||
| const props = defineProps<{ | ||
| placeholderImg?: string | null | ||
| }>() | ||
| type Frame = { | ||
| img: HTMLImageElement | ||
| width: number | ||
| height: number | ||
| x: number | ||
| y: number | ||
| } | ||
| const canvasRef = ref<HTMLCanvasElement>() | ||
| async function loadImg(file: File, signal: AbortSignal) { | ||
| const url = await file.url((f) => signal.addEventListener('abort', f)) | ||
| const img = new Image() | ||
| img.src = url | ||
| await img.decode().catch((e) => { | ||
| // Sometimes `decode` fails, while the image is still able to be displayed | ||
| console.warn('Failed to decode image', url, e) | ||
| }) | ||
| return img | ||
| } | ||
| async function loadFrame(costume: Costume, signal: AbortSignal): Promise<Frame> { | ||
| const [img, size] = await Promise.all([loadImg(costume.img, signal), costume.getSize()]) | ||
| const x = costume.x / costume.bitmapResolution | ||
| const y = costume.y / costume.bitmapResolution | ||
| return { img, x, y, ...size } | ||
| } | ||
| async function loadFrames(costumes: Costume[], signal: AbortSignal) { | ||
| return Promise.all(costumes.map((costume) => loadFrame(costume, signal))) | ||
| } | ||
| const drawingOptionsRef = ref({ | ||
| scale: 1, | ||
| offsetX: 0, | ||
| offsetY: 0 | ||
| }) | ||
| function adjustDrawingOptions(canvas: HTMLCanvasElement, firstFrame: Frame) { | ||
| const scale = Math.min(canvas.width / firstFrame.width, canvas.height / firstFrame.height) | ||
| drawingOptionsRef.value = { | ||
| scale, | ||
| offsetX: (canvas.width - firstFrame.width * scale) / 2, | ||
| offsetY: (canvas.height - firstFrame.height * scale) / 2 | ||
| } | ||
| } | ||
| function drawFrame(canvas: HTMLCanvasElement, frame: Frame) { | ||
| const ctx = canvas.getContext('2d')! | ||
| const { scale, offsetX, offsetY } = drawingOptionsRef.value | ||
| const x = offsetX - frame.x * scale | ||
| const y = offsetY - frame.y * scale | ||
| const width = frame.width * scale | ||
| const height = frame.height * scale | ||
| ctx.clearRect(0, 0, canvas.width, canvas.height) | ||
| ctx.drawImage(frame.img, x, y, width, height) | ||
| } | ||
| function playFrames(frames: Frame[], duration: number, signal: AbortSignal) { | ||
| const canvas = canvasRef.value | ||
| if (canvas == null) return | ||
| const dpr = window.devicePixelRatio | ||
| canvas.width = Math.floor(canvas.clientWidth * dpr) | ||
| canvas.height = Math.floor(canvas.clientHeight * dpr) | ||
| if (frames.length === 0) return | ||
| adjustDrawingOptions(canvas, frames[0]) | ||
| const interval = (duration * 1000) / frames.length | ||
| let currIdx = 0 | ||
| drawFrame(canvas, frames[currIdx]) | ||
| const timer = setInterval(() => { | ||
| currIdx = (currIdx + 1) % frames.length | ||
| drawFrame(canvas, frames[currIdx]) | ||
| }, interval) | ||
| signal.addEventListener('abort', () => clearInterval(timer)) | ||
| } | ||
| type Loaded = { | ||
| frames: Frame[] | ||
| duration: number | ||
| } | ||
| const loadedRef = ref<Loaded | null>(null) | ||
| async function load(costumes: Costume[], duration: number, signal: AbortSignal) { | ||
| const frames = await loadFrames(costumes, signal) | ||
| signal.throwIfAborted() | ||
| loadedRef.value = { frames, duration } | ||
| } | ||
| async function play(signal: AbortSignal) { | ||
| if (loadedRef.value == null) throw new Error('not loaded yet') | ||
| const { frames, duration } = loadedRef.value! | ||
| playFrames(frames, duration, signal) | ||
| } | ||
| defineExpose({ load, play }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="frames-player"> | ||
| <canvas ref="canvasRef" class="canvas"></canvas> | ||
| <UIImg | ||
| v-show="props.placeholderImg != null && loadedRef == null" | ||
| class="placeholder" | ||
| :src="props.placeholderImg ?? null" | ||
| loading | ||
| /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .frames-player { | ||
| position: relative; | ||
| } | ||
| .canvas, | ||
| .placeholder { | ||
| position: absolute; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.