Create a GUI attached to a sprite ​

Prerequisites ​

• Know how to create a GUI and add it in the module
• Be comfortable with React
• Since v4.1.0

Example ​

This is very useful to make more advanced interactions on a sprite. For example, display a tooltip or additional interactive displays.

Create Component ​

export default function MyTooltip({ spriteData }) {
    return (
        <span className="tooltip">
            {spriteData.position.x}, {spriteData.position.y}
	    </span>
    )
}

MyTooltip.rpgAttachToSprite = true

Trigger the GUI ​

You have either the client side solution or the server side solution.

• Advantage on the client side: instantaneous, no communication with the server
• Disadvantage: the server does not have the authority and cannot trigger it for all players at once

On the server side, it's the opposite 😃

Client Side ​

1. you must open the menu, as usual (here, named my-tooltip)

RpgGui.display('my-tooltip')

You can open it whenever you want, for example, after loading a map

import { RpgClient, RpgModule, RpgGui } from '@rpgjs/client'
import myTooltip from './gui/tooltip.vue'
import sprite from './sprite'

@RpgModule<RpgClient>({ 
    scenes: {
        map: {
            onAfterLoading() {
                RpgGui.display('my-tooltip')
            }
        }
    },
	sprite,
    gui: [
        myTooltip
    ]
})
export default class RpgClientModuleEngine {}

import { RpgSprite, RpgSpriteHooks } from '@rpgjs/client'

export const sprite: RpgSpriteHooks = {
    onInit(sprite: RpgSprite) {
        sprite.interactive = true
        sprite.on('click', () => {
            sprite.guiDisplay = !sprite.guiDisplay
        })
    }
}

import {RpgGui } from '@rpgjs/client'

export default {
	onAfterLoading() {
		RpgGui.display('my-tooltip')
	}
}

import { RpgSprite, RpgSpriteHooks } from '@rpgjs/client'

export const sprite: RpgSpriteHooks = {
    onInit(sprite: RpgSprite) {
        sprite.interactive = true
        sprite.on('click', () => {
            sprite.guiDisplay = !sprite.guiDisplay
        })
    }
}

Server Side ​

Even if we are on the server side, remember to add the GUI in the client side module

import { RpgPlayer, RpgPlayerHooks } from '@rpgjs/server'
 
export const player: RpgPlayerHooks = {
    onJoinMap(player: RpgPlayer) {
        player.gui('my-tooltip').open()
        player.showAttachedGui()
		// you can hide with player.hideAttachedGui()
    }
}

We open the my-tooltip GUI and display the player's tooltip

player.showAttachedGui([otherEvent, otherPlayer])