How to implement collectible coins in RPGJS?

jocimar

Hello!

I am new to RPGJS and I would like to program a game with collectible coins. I am not sure how to implement the collectible coins, whether to use item or events and especially how to use animation on the coin. Should the animation be associated with the item or the event, for example. I have looked at the API documentation and I couldn't figure it out. I would like to know how you would implement this case.

Thanks

Samarium

Hello and welcome to the forum,

I assume you want to put a coin on the map and when the player touches the coin, he wins it?

If so, perhaps you could share the image of the coin? I'll be able to help you with the animation and tell you how to put it on the map.

jocimar

Hi Samarium,

Thanks for your reply.

Yes, you are right. I want to put a coin on the map and when the player touches the coin, he wins it.

I have created a spritesheet for the coin and animated it. I have also added it to the scene. However, I don't know how to make the coin disappear when the player touches it. I have tried linking the animation to an event and to an item, but it didn't work. I am not sure if this is the right approach.

Here is what I have done so far:
main/scene-map.ts
main/spritesheets/coins/coin_gold.png
main/spritesheets/coins/coin.ts
The code for the scene-map.ts file is as follows:

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

const sceneMap: RpgSceneMapHooks = {
    onAfterLoading(scene: RpgSceneMap) {
        console.log('onAfterLoading');
        scene.showAnimation({
             graphic: 'coin_gold',
             animationName: 'default',
             x: 100,
             y: 100,
             loop: true      
         })
    }
}
export default sceneMap;

The code for the coin.ts file is as follows:

import { Spritesheet } from '@rpgjs/client'

const to = () => {
    const array: any = [];
    let k = 0;
    const durationFrame = 2;
    for (let j=0 ; j < 8 ; j++) {
        array.push({ time: k * durationFrame, frameX: j, frameY: 0 });
        k++;
    }
    array.push({ time: k * durationFrame });
    return array;
}
@Spritesheet({
    id: 'coin_gold',
    image: require('./coin_gold.png'), 
    framesWidth: 8,
    framesHeight: 1,
    width: 135,
    height: 16,
    opacity: 1,
    anchor: [0.5],
    textures: {
        default: {
            animations: [ to() ]
        }
    }
})
export default class coinAnimations {}

coin_gold.png image source:
https://opengameart.org/content/gold-0

Samarium

To make the coin disappear when the player touches it in RPGJS, you need to create an event for the coin and define its behavior in the event's onPlayerTouch method. The onPlayerTouch method is triggered when the player collides with the event (in this case, the coin).

Since you have already created a spritesheet for the coin and added it to the scene, the next step is to implement the logic to remove the coin when the player touches it. Here's an example of how you might implement this in TypeScript:

import { RpgEvent, EventData, RpgPlayer } from '@rpgjs/server';

@EventData({
    name: 'CoinEvent',
    hitbox: {
        width: 16,
        height: 16,
    }
})
export default class CoinEvent extends RpgEvent {
    onInit() {
        this.setGraphic('coin_gold'); // Set the coin graphic
    }

    onPlayerTouch(player: RpgPlayer) {
        this.remove(); // Remove the coin when the player touches it
        // You can also add logic here to increase the player's coin count or score
    }
}

In this example, the onInit method sets the graphic for the coin using this.setGraphic('coin_gold');, where 'coin' is the identifier for your coin sprite in the spritesheet. When the player touches the coin, the onPlayerTouch method is called, and this.remove(); is used to remove the coin from the scene.

Remember to place this event on your map where you want the coins to appear. When the player moves over the coin, it will trigger the onPlayerTouch method and execute the logic you've defined there.

If you also want to keep track of the number of coins the player has collected, you can add additional logic in the onPlayerTouch method to update the player's coin count. This might involve setting a variable on the player object or triggering a custom method to handle scoring.

Spritesheet

import { Spritesheet, Animation } from '@rpgjs/client'

const to = () => {
    const array: any = [];
    let k = 0;
    const durationFrame = 2;
    for (let j = 0; j < 8; j++) {
        array.push({ time: k * durationFrame, frameX: j, frameY: 0 });
        k++;
    }
    array.push({ time: k * durationFrame });
    return array;
}
@Spritesheet({
    framesWidth: 8,
    framesHeight: 1,
    width: 135,
    height: 16,
    opacity: 1,
    anchor: [0.5],
    scale: [0.1],
    textures: {
        [Animation.Stand]: {
            animations: () => [to()]
        },
    }
})
export default class CoinAnimations { }

Note [Animation.Stand] for default animation

Full Example

jocimar

Wonderful!
I will try to create a playground for this example. In addition to solving the problem, you brought a lot of important information. Such as, adding objects programmatically to the map, without the need to use a map editor.

Thanks