RPGJS v4.3.0: React App and Web3

Samarium

RPGJS v4.3.0: React App and Web3

RPGJS, the popular JavaScript library for creating role-playing games, has released its latest version 4.3.0. This update brings several exciting features and integrations, making it easier for developers to create and manage their RPG projects. Below, we delve into the key updates of this version.

Integrating RpgGame Component into a React App

With the new version, integrating the RpgGame component into a React application has become straightforward. The process involves a simple import of RpgGame from the @rpgjs/client/react package. Here's a quick example to demonstrate the integration:

import { RpgGame } from '@rpgjs/client/react'

export function App() {
    return <RpgGame />
}

This seamless integration allows developers to incorporate RPGJS into their existing React applications effortlessly.

https://docs.rpgjs.dev/gui/react-app.html

New Configuration Options in rpg.toml

RPGJS v4.3.0 introduces new configuration options to enhance flexibility and control:

modulesRoot:
- Type: string
- Description: Defines the root directory for modules.
- Example: modulesRoot = './src/game'
autostart:
- Type: boolean
- Default: true
- Description: Automatically finds the starting point selector and displays the game. In v4.3.0, this can be set to false.
- Example: autostart = false
type:
- Type: string
- Description: Specifies the type of the RPG, which can be either "rpg" or "mmorpg".
socketIoClient:
- Description: This includes all the SocketIO client configuration options.

These configurations allow developers to have more control over the game's startup process and its structure.

Web3 App Module: First Integration

One of the most notable additions in RPGJS v4.3.0 is the first integration of Web3 technologies. This feature enables connecting with a wallet like Metamask, providing a new dimension of interaction in the gaming experience. For this purpose, two new modules have been introduced:

@rpgjs/auth
@rpgjs/web3

While this integration is in its early stages, developers can start experimenting with it to create more immersive and interactive gaming experiences.

https://docs.rpgjs.dev/web3/auth.html
Example: https://github.com/RSamaium/RPG-JS/tree/v4/packages/sample3

gavinlaucn

offset: {
x: 0,
y: 0,
},
framesWidth: 18,
framesHeight: 21,
animations: (direction: Direction) => [anim(direction, 3)]
},

How can I flip the specific sprite in spritesheet. Flip the right to the left.
if(direction==Direction.Right){
array.push({ time: 0, frameX: 0, frameY: 1 })
array.push({ time: 9060/1000, frameX: 3, frameY: 3 })
array.push({ time: (90+140)60/1000, frameX: 5, frameY: 2 })
array.push({ time: (90+140+100)60/1000, frameX: 0, frameY: 1 })
array.push({ time: (90+140+100+90)60/1000, frameX: 2, frameY: 3 })
array.push({ time: (90+140+100+90+140)60/1000, frameX: 5, frameY: 1 })
array.push({ time: (90+140+100+90+140+100)60/1000})
}
if(direction==Direction.Left){
//want to flip the right sprite here
}
pls help!

gavinlaucn

Problem 1 above:
Flip
I want to remove the left or right sprite by the flip way.
offset: {
x: 0,
y: 0,
},
framesWidth: 18,
framesHeight: 21,
animations: (direction: Direction) => [anim(direction, 3)]
},

gavinlaucn

Problem 2:with rpgjs v4.3.0
When I create a map with tile(width 16 height16),set the collision property to a tile, the sprite will get collision with two tiles.
wrong collision
Thank you in advance

dominx99

gavinlaucn

Hello,

Maybe it won't help you, but I am curious. Do you have an anchor set on your hero sprite sheet?

gavinlaucn

dominx99 Dear dominx，No anchor have been set.
Can you test it with a map(16*16 tile)? To check it.Thank you.

gavinlaucn

Dear dominx,,It is caused by the player's hitbox.

the hitbox of the event. By default, this is the size of the tile of the map

By the way how can I get touch with you.