RPG-JS Tutorial - Creating random odds chance game items and a teleportation scroll!

As you may have been following, I've recently been blogging about my efforts working with the rpg-js framework, check out my profile if you've missed out on this content.

Today's tutorial covers several areas - market items, lootboxes and teleportation!

To begin - Creating a 'Teleportation Scroll'

Let's go ahead and add a scroll sprite onto the market table, and wrap it with a market object shape with the following custom properties:

Very simple stuff, no coding so far! Adding new items to the marketplace is a very quick process within the Tiled map editor!

Now, let's create the item in our database /main/database/teleportScroll.ts:

import { RpgPlayer } from '@rpgjs/server'
import { Item } from '@rpgjs/database'

@Item({
    id: 'teleportScroll',
    name: 'Scroll of teleportation',
    description: 'Teleports you to another map of your choosing!',
    price: 100,
    consumable: true
})
export default class TeleportScroll {
    async onUse(player: RpgPlayer) {

        const choice = await player.showChoices('Where do you want to teleport to?', [
            { text: 'The docks', value: 'map' },
            { text: 'Market', value: 'shop-1' },
            { text: 'NFTEA Gallery', value: 'gallery' },
            { text: 'Castle entrance', value: 'castle-entrance' },
            { text: 'Underground office', value: 'shop-4' },
            { text: 'Underground passage', value: 'corridor' }
        ])

        if (!choice) {
            player.addItem('teleportScroll', 1);
            return;
        }

        const map = choice.value;
        player.changeMap(map);
    }
}

.
When the user interacts with the scroll in their inventory they'll be asked where they want to teleport & when they select a destination that's where they're immediately teleported to!

See for yourself:

Looks like it needs a small tweak to remove the post-teleportation menu screen blurring, I'm sure all it'll take to change this is to remove/close the GUI we've used to teleport.

Next - Creating a gold loot box!

Now, let's create another item in the marketplace like so:

And let's create the following item code for the gold loot box:

import { RpgPlayer } from '@rpgjs/server'
import { Item } from '@rpgjs/database'

@Item({
    id: 'lootBox',
    name: 'Loot box',
    description: 'May contain gold, or may be empty! Try your luck!',
    price: 100,
    consumable: true
})
export default class LootBox {
    async onUse(player: RpgPlayer) {
        console.log("Opening loot box...");
        if (Math.random() < 0.25) {
            const goldQty = Math.random() * 1000;
            player.gold += goldQty;
            player.showNotification(`Congratulations! You've won ${goldQty} gold!`);
        } else {
            player.showNotification("Unlucky, you're not a winner. Better luck next time!");
        }
    }
}

You've got 25% chance of winning & when you do win you can win up to 1000 gold, for the low cost of 100 gold per loot box unboxing!

Let's see it in action then!

This loot box could further be improved by adjusting the rewards to be more in line with probabilities found in scratch cards or competitor videogame loot boxes, as well as tweaking the cost to purchase them in the shop compared to their potential payout.

Now, these don't reward real money/crypto, just in game gold, but you need bitshares in order to get gold in the first place for free.

Lastly - Creating a loot sack!

Rather than rewarding the user with a random amount of gold (or no gold at all) from a loot box, how about we distribute multiple random items from a loot sack?!

Alright, so once again add a new item to the marketplace!

And then let's create the item in /main/database/lootSack.ts:

import { RpgPlayer } from '@rpgjs/server'
import { Item } from '@rpgjs/database'

import items from '../assets/index';

@Item({
    id: 'lootSack',
    name: 'Loot sack',
    description: 'Contains 3 random items, try your luck!',
    price: 100,
    consumable: true
})
export default class LootSack {
    async onUse(player: RpgPlayer) {
        const chosenItems: any[] = [];
        for (let i = 0; i < 3; i++) {
            const item = items[Math.floor(Math.random() * items.length)];
            player.addItem((item as any).id, 1);
            if (item) {
                chosenItems.push((item.prototype as any).name);
            }
        }
        player.showNotification(`The loot sack contained the items: ${chosenItems.join(", ")}!`);
    }
}

So, as you can see from the code, it's dead simple, we just randomly select multiple items from the pool of items we've created, to give to the user when they open the loot sack!

This could be used to create a collectable card booster pack in game, and to distribute individual card items from the 'pack', similar to how we're distributing items from our sack.

Improvements could be made to change the odds of getting an item based on its rarity/price, compared to equal odds of getting all items, but that's a change for the future!

Let's see it in action!

---

Have any questions?

Can you think of any other types of items you would like to see implemented?

Have an opinion on random chance items?

Comment below!

---

These developments were brought to you by the NFTEA Gallery.

Consider collecting an NFTEA NFT to or donate to the following BTS or EOS blockchain accounts directly, to fund continued developments.

Don't have a Bitshares account? Make one today!