release of version 4 (beta)

Samarium

The first big news of this version is the switch to ViteJS as compiler and the latest version of PixiJS. This strategic choice allows RPGJS to take advantage of the latest technological advances in web development, offering a more fluid and immersive game experience. Developers will be able to take full advantage of the performance of these modern tools to create rich and engaging game worlds.

Another major change is the compatibility with Node.js 18. RPGJS thus adapts to the latest developments in the Node.js ecosystem, offering developers a solid and secure platform for creating their role-playing games. Compatibility with Node.js 18 also ensures better performance and increased stability for RPGJS projects.

The project creation structure has also been simplified in this new version. Developers now have a more intuitive and user-friendly process for starting their role-playing game project. Whether you're a beginner or a veteran in the field of game development, RPGJS makes it easier for you by reducing tedious steps and allowing you to focus on the creative aspect of your game.

One of the most exciting features introduced in RPGJS 4 is "Hot Reloading" for map creation. This mechanism allows developers to instantly view changes made to game maps without having to reload the entire application. The result is a more efficient workflow and increased productivity for role-playing game designers. This feature allows for quick iteration on the visual and gameplay aspects of maps, providing a convenient way to perfect the game experience.

AutoLoad

In RPGJS, the folder structure plays an important role in organizing and loading the various elements of a role-playing game. Files and resources are placed in specific folders according to their function or type, and RPGJS is able to detect them automatically without having to declare them explicitly.

For example, RPGJS can automatically load script, sprite, sound, or game data files by analyzing the project's folder structure. When you add a new file to an appropriate folder, RPGJS detects it and makes it available for use in the game without you having to do any additional configuration.

This folder autoload feature in RPGJS simplifies the development process by reducing the amount of manual configuration required. It also makes it easier to manage resources and game elements by organizing them consistently in specific folders.

Documentation: https://github.com/RSamaium/RPG-JS/blob/v4/docs/guide/autoload.md

Hot Reloading

You can change the map without restarting the game 🙂

Video for example: https://vimeo.com/830100086

Migration from v3 to v4

There are brief changes:

https://github.com/RSamaium/RPG-JS/blob/v4/docs/migration/to-v4.md

Installation of v4

For the moment, the site is not to be updated while v4 is in beta but you can try the beta right now:

npx degit rpgjs/starter#v4 my-rpg-game
cd my-rpg-game
npm install
npm run dev # and go to localhost:3000

mqllin

The first thing I do every day when I go to Work is open the RPGJS community to see if there is any news about V4.It's great that V4 is here!!!

CoolGame

Love this. Gonna start building my game start from v4

CoolGame

Error: Transform failed with 1 error: virtual-main-client.ts?client:6:8: ERROR: Syntax error "m" at failureErrorWithLog (C:\Users\aaa\Desktop\Metaverse\my-rpg-game\node_modules\esbuild\lib\main.js:1636:15) at C:\Users\aaa\Desktop\Metaverse\my-rpg-game\node_modules\esbuild\lib\main.js:837:29 at responseCallbacks.<computed> (C:\Users\aaa\Desktop\Metaverse\my-rpg-game\node_modules\esbuild\lib\main.js:697:9) at handleIncomingPacket (C:\Users\aaa\Desktop\Metaverse\my-rpg-game\node_modules\esbuild\lib\main.js:752:9) at Socket.readFromStdout (C:\Users\aaa\Desktop\Metaverse\my-rpg-game\node_modules\esbuild\lib\main.js:673:7) at Socket.emit (node:events:513:28) at addChunk (node:internal/streams/readable:324:12) at readableAddChunk (node:internal/streams/readable:297:9) at Socket.Readable.push (node:internal/streams/readable:234:10) at Pipe.onStreamRead (node:internal/stream_base_commons:190:23) { errors: [ { detail: undefined, id: '', location: { column: 8, file: 'virtual-main-client.ts?client', length: 0, line: 6, lineText: "import \\main\\characters\\characters_ts from '.\\main\\characters\\characters.ts'", namespace: '', suggestion: '' }, notes: [], pluginName: '', text: 'Syntax error "m"' } ], warnings: [], frame: '\n' + '\x1B[33mSyntax error "m"\x1B[39m\n' + '4 | \n' + '5 | \n' + "6 | import \\main\\characters\\characters_ts from '.\\main\\characters\\characters.ts'\n" + ' | ^\n' + '7 | \n' + '8 | \n', loc: { column: 8, file: 'virtual-main-client.ts?client', length: 0, line: 6, lineText: "import \\main\\characters\\characters_ts from '.\\main\\characters\\characters.ts'", namespace: '', suggestion: '' }, plugin: 'vite:esbuild', id: 'virtual-main-client.ts?client', pluginCode: '\n' + " import { RpgClient, RpgModule } from '@rpgjs/client'\n" + ' \n' + ' \n' + ' \n' + "import \\main\\characters\\characters_ts from '.\\main\\characters\\characters.ts'\n" + ' \n' + ' \n' + '\n' + ' \n' + ' \\main\\characters\\characters_ts.images = {\n' + ' "female": "\\\\main\\characters\\female.png",\n' + '"hero": "\\\\main\\characters\\hero.png",\n' + '\n' + ' }\n' + ' \\main\\characters\\characters_ts.prototype.width = 96\n' + ' \\main\\characters\\characters_ts.prototype.height = 128\n' + ' \n' + ' \n' + ' @RpgModule<RpgClient>({ \n' + ' spritesheets: [\n' + ' \\main\\characters\\characters_ts\n' + ' ],\n' + ' sprite: {},\n' + ' \n' + ' scenes: {\n' + ' \n' + ' },\n' + ' gui: [],\n' + ' sounds: []\n' + ' })\n' + ' export default class RpgClientModuleEngine {}\n' +

I'm getting this error when i run npm run dev

Samarium

CoolGame

thanks for the feedback, it's a problem on Windows, I'll look into it

Samarium

The code has been corrected for Windows. You can download the latest version of Beta 4

CoolGame

Thanks for the speedy fixes. Tested, it is working now

CoolGame

How to run starter-kit modules in v4 starter?
I try the below and it is not working

1) npm install @rpgjs/starter-kit
2) Create a folder on main/modules/index.ts

import starterKit from '@rpgjs/starter-kit' export default [ starterKit ]

dominx99

Why when I create a new project from version v4 there is no more separation for client and server in modules?

Samarium

dominx99

Yes, version 4 offers two structures.

A structure equivalent to version 3, with a separation of client and server. However, the structure is much more complex.
A simplified structure. Version 4 seeks to simplify the structure by including only the files required to run the game.

dominx99

Samarium Sure, I understand it now. Thank you

hazim-j

I'm trying to port over the chat plugin but I'm running into some error:

> dev
> rpgjs dev

Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files. (x2)
Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files. (x3)
file:///Users/xyz/Desktop/my-rpg-game/node_modules/@rpgjs/client/lib/Scene/Map.js:3
import { Viewport } from 'pixi-viewport';
         ^^^^^^^^
SyntaxError: Named export 'Viewport' not found. The requested module 'pixi-viewport' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'pixi-viewport';
const { Viewport } = pkg

I tried to solve it by installing @vitejs/plugin-vue and creating the follwing vite.config.js in the root directory.

import vue from "@vitejs/plugin-vue";

export default {
    plugins: [vue()],
};

This solved the Failed to parse errors but not sure what to do about the import errors. Any ideas?

Samarium

hazim-j

Are the RPGJS packages on the latest version? Here, I have the impression that the v4 compiler reads RPGJS libraries from v3.