This commit is contained in:
49
aranroig/app/components/Sprite.vue
Normal file
49
aranroig/app/components/Sprite.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<img ref="sprite"
|
||||
class="sprite pixelated"
|
||||
:src="frame_paths[0]"
|
||||
:width="props.width">
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
const props = defineProps<{
|
||||
path: string,
|
||||
frames: string,
|
||||
top?: string,
|
||||
right?: string,
|
||||
left?: string,
|
||||
bottom?: string,
|
||||
width: string,
|
||||
fps?: string
|
||||
}>();
|
||||
|
||||
const sprite = ref(null);
|
||||
|
||||
let frame_paths = [];
|
||||
for(let i = 1; i <= parseInt(props.frames); i++){
|
||||
frame_paths.push(props.path + "frame" + i + ".png");
|
||||
}
|
||||
|
||||
let current = 0;
|
||||
const fps = props.fps ? parseInt(props.fps) : 4;
|
||||
|
||||
onMounted(() => {
|
||||
sprite.value.style.top = props.top;
|
||||
sprite.value.style.left = props.left;
|
||||
sprite.value.style.bottom = props.bottom;
|
||||
sprite.value.style.right = props.right;
|
||||
setInterval(() => {
|
||||
current = (current + 1) % frame_paths.length;
|
||||
sprite.value.src = frame_paths[current];
|
||||
}, 1000 / fps);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sprite {
|
||||
position: absolute;
|
||||
z-index: -10;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user