Is it possible to detect click of the sprite (NPC)?

dominx99

Hello,

I wonder if I should detect click on NPC (RPGEvent) by comparing the positions of click & NPC.
Or maybe there is already a kind of logic that does that?

I tried this:

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

const sprite: RpgSpriteHooks = {
    onInit(sprite: RpgSprite) {
        console.log('init', sprite);
        sprite.onclick = () => {
            console.log('clicked sprite');
        }
        sprite.on('pointerdown', () => { // or click
            console.log('clicked sprite');
        });
    }
}

export default sprite;

but nothing happens.

Edit: I see that this event is not initialized in the sprite.ts, so it couldn't work

Thanks in advance.

Samarium

Hello,

Add sprite.eventMode = 'static':

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

const sprite: RpgSpriteHooks = {
    onInit(sprite: RpgSprite) {
        sprite.eventMode = 'static'
        sprite.on('click', () => {
            console.log('clicked sprite');
        })
    }
}

export default sprite

PIXIJS Sprite click: https://pixijs.com/examples/events/click

Example:

dominx99

Thank you, it worked.

One more question 🙈

It emits also a scene click event. Is it possible to not emit a scene click event when the sprite is clicked?

import { RpgSceneMapHooks, RpgSceneMap } from '@rpgjs/client'

const sceneMap: RpgSceneMapHooks = {
    onAfterLoading(scene: RpgSceneMap) {
        scene.on('click', (e) => {
            scene.game.clientEngine.socket.emit('shoot-bullet', e);
        });
    }
}

export default sceneMap;

dominx99

Nevermind,

Solved this using a right click to open the GUI of NPC instead of a left click.

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

const sprite: RpgSpriteHooks = {
    onInit(sprite: RpgSprite) {
        if (sprite.data.name === 'SimpleBlacksmith') {
            sprite.eventMode = 'static';
            sprite.on('rightclick', () => {
                RpgGui.display('item-upgrade-gui');
            });
        }
    },
}

export default sprite;

but I also had to disable context menu of right-click:

import { RpgSceneMapHooks, RpgSceneMap } from '@rpgjs/client'

const sceneMap: RpgSceneMapHooks = {
    onAfterLoading(scene: RpgSceneMap) {
        document.addEventListener('contextmenu', event => {
            event.preventDefault();
        });
    }
}

export default sceneMap;