Hello
If you need something like this: https://imgur.com/yMtfXW4
Then here is my Vue GUI CharacterPreview component:
<template>
<div v-if="spritesheets" v-for="sprite in spritesheets" class="spritesheet-preview" :style="spritesheet(sprite)"></div>
</template>
<script lang="ts">
import { LayoutObject } from '@rpgjs/types';
export default {
inject: ['rpgCurrentPlayer', 'rpgResource'],
data: () => ({
spritesheets: [] as string[],
}),
methods: {
mapSpritesheets(graphics: string[]): string[] {
return graphics.map(
graphic => this.rpgResource.spritesheets.get(graphic + '-preview')?.image
).filter(sprite => !!sprite);
},
mapGraphics(layout: LayoutObject<any>): string[] {
if (!layout || !layout.center || !layout.center.lines) return [];
return layout.center.lines.map(
line => line.col.map(
col => col.value
)
);
},
spritesheet(sprite: string) {
return {
'background-image': `url(${sprite})`,
}
},
},
mounted() {
this.obsCurrentPlayer = this.rpgCurrentPlayer
.subscribe((obj: any) => {
if (!obj || !obj.object) return;
this.spritesheets = this.mapSpritesheets(this.mapGraphics(obj.object.layout));
})
}
}
</script>
<style>
.spritesheet-preview {
position: absolute;
top: 0;
left: 0;
width: 64px;
height: 64px;
transform: scale(3.7)
}
</style>
I don't know if it's ok to read player.layout.center.lines property but I discovered that there are stored ids of graphics of a player when you set them by
player.setGraphics([...])
You can also add new property for player and read it from rpgCurrentPlayer
declare module '@rpgjs/server' {
export interface RpgPlayer {
graphics: string[]
}
}
but remember to add this as a props in RpgPlayerHooks:
const player: RpgPlayerHooks = {
props: {
graphics: String
},
}
- I map these graphics ids to array
- I have stored spritesheet with all actions like walking, attack, spellcast but also I have the same spritesheet only for preview reasons with only one frame named like:
*-preview.png eg. I have:
human-body-male.png
human-body-male-preview.png
- Next I fetch preview spritesheet of original graphic using:
this.rpgResource.spritesheets.get(graphic + '-preview')?.image
- I render these images as background of a div with scale to get it bigger.
If there is method to not have 2 versions of the same spritesheet then I am eager to learn 😄