Shoot arrow in place of cursor

dominx99

Hello, I am trying to implement the possibility of clicking on a scene and then shooting an arrow in this place.

I have:

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

const sceneMap: RpgSceneMapHooks = {
    onAfterLoading(scene: RpgSceneMap) {
        scene.viewport?.setZoom(1.4);

        scene.on('click', (e) => {
            scene.game.clientEngine.socket.emit('shoot-bullet', e);
        });
    }
}

export default sceneMap;

        player.on('shoot-bullet', (position: PositionXY) => {
            // here I generate event on map
        });

Video: https://imgur.com/upFZAca

I have some problems with this:

I don't know how I could rotate events depending on position.
I could write a rotation algorithm by myself but I don't know how to pass position to spritesheet or maybe there is other way to achieve that?

Arrows are not removed after achieving their destination. You can see this on video. I tried to remove them by:

        event.moveTo({
            x: position.x,
            y: position.y,
        }, {
            onComplete: () => event.remove(),
            onStuck: () => event.remove(),
            next: () => {
                if (event.tilesCollision.length > 0 || event.shapesCollision.length > 0) {
                    event.remove();
                }
            }
        }).subscribe({
            complete: () => event.remove(),
            error: () => event.remove()
        });

The player can shoot an arrow after resizing the window in all places he wants. I would want to throttle this somehow by frames without using setTimeout and event.remove(). Is it possible?

moveTo is very laggy so it would be nice to have possibility to use something like:

event.moveRoutes([Move.repeatMoveToXYPosition(position, 20)]

but probably it would not work because moveRoutes work by direction and there are only 4 directions.

I think I could implement moving to specific position and remove it on collision by myself by implementing new computeNextPositionByTarget method and removing event on collision detected:

        object.server.tick
            .pipe(
                mergeMap(() => from(object.computeNextPositionByTarget(object.position.copy(), position))),
                map(newPosition => {
                    object.position.set(newPosition);
                })
            )
            .subscribe();

but the most limiting thing is that I cannot rotate the arrow in runtime similar to your autoChangeDirection method.
I would need to implement something like autoRotate.
If you could guide me somehow then please let me know.

Thanks in advance!

dominx99

@Samarium I almost achieved what I needed

Code: https://gist.github.com/dominx99/0dc44e0a7946199d49c086d5afd4e73c
Video: https://imgur.com/D5MV07P

A lot of it I copied from your source. I removed obstacles but I am not sure what it is for because there is no path autofinding in the engine and it is less laggy when it comes to just throwing an arrow.

But still what I need is to rotate the arrow at the start by target direction and here I don't know where to start 😕

Samarium

but I am not sure what it is for because there is no path autofinding in the engine and it is less laggy when it comes to just throwing an arrow.

The special feature of moveTo is that it moves towards a destination while avoiding obstacles.
It's not an autofinding system, but a less "smart" system (which doesn't go around the obstacle), but a more natural one.

I'll take a closer look at why this causes performance problems

But still what I need is to rotate the arrow at the start by target direction and here I don't know where to start

To do this, we can use the scalar product between these two vectors and the arccosine formula to determine the angle between them. Here's how to do it:

Calculate the scalar product between the two vectors: dotProduct = oldDirection.x * newDirection.x + oldDirection.y * newDirection.y.
Calculate the magnitudes of each vector: magnitudeOld = Math.sqrt(oldDirection.x * oldDirection.x + oldDirection.y * oldDirection.y) and the same for newDirection.
Use the formula for the angle between the two vectors: angle = Math.acos(dotProduct / (magnitudeOld * magnitudeNew)). This will give you the angle in radians.
Convert to degrees if necessary.

type Position = {
    x: number;
    y: number;
}

function rotate(oldDirection: Position, newDirection: Position): number {
    const dotProduct = oldDirection.x * newDirection.x + oldDirection.y * newDirection.y;
    const magnitudeOld = Math.sqrt(oldDirection.x * oldDirection.x + oldDirection.y * oldDirection.y);
    const magnitudeNew = Math.sqrt(newDirection.x * newDirection.x + newDirection.y * newDirection.y);

    const angleRadians = Math.acos(dotProduct / (magnitudeOld * magnitudeNew));
    const angleDegrees = angleRadians * (180 / Math.PI); // Convert to degrees

    return angleDegrees;
}

You can implement directly on the client side, unless you need rotation on the server side.

Because you don't have to do the calculations on the server side and synchronize with the client.

dominx99

Samarium

Is there a method to put this calculated rotation on a sprite?
because I don't know where I can change rotation in runtime.

dominx99

Samarium

Thank you for your detailed answer. I very much appreciate this.
Unfortunately formula to calculate rotation did not work for me because I tested it for:

const targetPosition = { x: 475, y: 475 }
const oldPosition = { x: 500, y: 500 }

and it gave me 0 as degrees.

So I found new formula:

        const rotate = function(currentPosition: PositionXY, targetPosition: PositionXY) {
            const deltaX = targetPosition.x - currentPosition.x;
            const deltaY = targetPosition.y - currentPosition.y;

            // Use Math.atan2 to calculate the angle in radians
            const radians = Math.atan2(deltaY, deltaX);

            // Convert radians to degrees
            const degrees = radians * (180 / Math.PI);

            // Ensure the angle is in the range [0, 360)
            const positiveDegrees = (degrees + 360) % 360;

            return positiveDegrees;
        }

and it returns 45 degrees for that example

I tested it and when I set angle to 45 then arrow is rotated correctly, but I can't get it working because I don't know how to get current and next position in this RpgSpriteHooks.

I tried with:

sprite.position as currentPosition
sprite.data.position as currentPosition
sprite.data.paramsChanged.position as targetPosition
sprite.data.prevParamsChanged.position

but result is very similar for every combination as on this video: https://imgur.com/a/7ZJ5wvA

I tried to add new param targetPosition to AbstractObject or RpgCommonPlayer
in my computeNextPosition method

AbstractObject.prototype.computeNextPosition = async function(nextPosition: Vector2d, target: Vector2d): Promise<Vector2d> {
    const pullDistance = target.distanceWith(nextPosition)
    if (pullDistance <= this.speed) {
        return nextPosition.set(target)
    }
    const pull = (target.copy().subtract(nextPosition)).multiply((1 / pullDistance))
    const totalPush = new Vector2dZero()
    let contenders = 0

    await this.isCollided(nextPosition);

    pull
        .multiply(Math.max(1, 4 * contenders))
        .add(totalPush)
        .normalize()

    nextPosition.add(pull.multiply(this.speed))

    this.targetPosition = nextPosition.copy();

    return nextPosition;
}

and I tried to add it here:

declare module "@rpgjs/server" {
    export interface AbstractObject {
        targetPosition?: Vector2d

        movePlayerToPosition(position: Vector2d): Observable<Vector2d>
        computeNextPosition(nextPosition: Vector2d, target: Vector2d): Promise<Vector2d>
        changeDirectionByNextPosition(nextPosition: Vector2d): void
    }

    export interface RpgCommonPlayer {
        targetPosition?: Vector2d
    }
}

but I couldn't fetch it through Sprite on the client side.
Probably it's not synchronized in this way.

Do you have any idea how could I achieve that?

Thank you in advance.

Edit: I got formula that works pretty well

    onChanges(sprite: RpgSprite, data, old) {
        const rotate = function(currentPosition: PositionXY, targetPosition: PositionXY) {
            const deltaX = targetPosition.x - currentPosition.x;
            const deltaY = targetPosition.y - currentPosition.y;

            // Use Math.atan2 to calculate the angle in radians
            const radians = Math.atan2(deltaY, deltaX);

            // Convert radians to degrees
            const degrees = radians * (180 / Math.PI);

            // Ensure the angle is in the range [0, 360)
            const positiveDegrees = (degrees + 360) % 360;

            return positiveDegrees;
        }

        if (sprite.data.name === 'arrow') {
            if (old.paramsChanged?.position) {
                const angle = rotate(data.position, old.paramsChanged?.position)

                if (angle === 0) {
                    return;
                }

                console.log('angle', angle);

                sprite.angle = angle
            }
        }
    }

but unfortunatelly it is in onChanges hook and I can't update angle here

Check console in video: https://imgur.com/K9igTRa

These degrees are very accurate

Samarium

Perhaps by using onUpdate on the sprite.
it's a call to each frame

https://docs.rpgjs.dev/classes/sprite.html#onupdate:

main/sprite.ts

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

const sprite: RpgSpriteHooks = {
    onUpdate(sprite: RpgSprite) {
         console.log(sprite.x, sprite.y)
    }
}

export default sprite

dominx99

@Samarium I can't get it working 😥

I suppose that you didn't read previous comment, so I will make it short

It would be great if it was possible to update the sprite angle in onChanges because there is access for current and last position to calculate rotation.
Eventually it would be nice if it was possible to add custom props for AbstractObject to read it in onUpdate hook.

Both ways are in my opinion hacks than solutions, but I believe that there is the possibility to achieve this rotation by something that is not described in the documentation.
If you will have some time, please take a look 🙈 .

I also see a lot of improvements being made apart from the game engine, like this community and documentation so keep going! You are doing great bro 😄

dominx99

Finally I got it working.

For those interested:

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

const rotate = function(currentPosition: PositionXY, targetPosition: PositionXY) {
    const deltaX = targetPosition.x - currentPosition.x;
    const deltaY = targetPosition.y - currentPosition.y;

    // Use Math.atan2 to calculate the angle in radians
    const radians = Math.atan2(deltaY, deltaX);

    // Convert radians to degrees
    const degrees = radians * (180 / Math.PI);

    // Ensure the angle is in the range [0, 360)
    const positiveDegrees = (degrees + 360) % 360;

    return positiveDegrees;
}

const sprite: RpgSpriteHooks = {
    onUpdate(sprite: RpgSprite, obj) {
        if (sprite.data.name && sprite.data.name.endsWith('bullet')) {
            if (
                !sprite.data.paramsChanged
                || !sprite.data.paramsChanged.position
                || !sprite.data.prevParamsChanged
                || !sprite.data.prevParamsChanged.paramsChanged
                || !sprite.data.prevParamsChanged.paramsChanged.position
            ) {
                return;
            }

            const currentPosition = sprite.data.paramsChanged?.position
            const nextPosition = sprite.data.prevParamsChanged?.paramsChanged?.position

            /* @TODO: Round sprite.angle and check if it's changed instead of input values */
            const angle = rotate(
                {
                    x: Math.round(currentPosition.x),
                    y: Math.round(currentPosition.y),
                },
                {
                    x: Math.round(nextPosition.x),
                    y: Math.round(nextPosition.y),
                }
            );

            sprite.angle = angle;
        }
    }
}

export default sprite

Video: https://imgur.com/0Ubm7qX, https://imgur.com/MR00xwA