Roadmap RPGJS
The Future of RPGJS
While development on the main repository might seem quiet, RPGJS is more active than ever. We're working on multiple exciting initiatives that will shape the future of the framework:
Current Development Focus
- Canvas Engine: A new library facilitating canvas-based development with reactive components
- Signe packages: A collection of libraries providing advanced features like dependency injection and state synchronization
- RPGJS Studio: A commercial offering leveraging AI to accelerate game development
- Version 5 Experimental: A new branch exploring the next major version of RPGJS
Our Release Strategy
We're adopting a more frequent release cycle, inspired by Angular's six-month release schedule. Instead of waiting for one massive update, we'll deliver incremental major versions (V4, V5, V6, etc.) with meaningful improvements in each release.
Compatibility & Migration
- The upcoming version will establish consistent patterns for future releases
- We're committed to maintaining backward compatibility where possible
- When breaking changes are necessary, we'll provide smooth migration paths
- Our goal: make RPGJS simpler, more robust, and more performant without disrupting existing projects
Migration to vite.config
While TOML has served us well for configuration, we're transitioning to vite.config to unlock more advanced capabilities. This change will allow better integration with Vite plugins and provide more flexibility in project configuration.
Features
- Full Vite.js plugin system support
- TypeScript-first configuration
- Enhanced development workflow
Example of code (experimental)
// vite.config.ts
import { defineConfig } from 'vite';
import { rpgjs } from '@rpgjs/vite';
export default defineConfig({
plugins: [
rpgjs({
input: './src/main.ts',
maps: './src/maps'
})
]
})
Modern Dependency Injection
Inspired by modern frameworks like Angular, we're introducing a powerful dependency injection system that makes the codebase more modular and easier to understand: 1. Clear Module System: - Better separation of client and server code - Easy-to-understand file structure - Framework-agnostic design 2. Provider Pattern: - Flexible configuration through providers - Easy service replacement and testing - Clear dependency management 3. Next.js-inspired directives: - 'use client' and 'use server' directives - Clear indication of code execution context - Better code organization
Features
- Modern dependency injection system
- Clear client/server separation
- Flexible provider pattern
- Easy module configuration
Example of code (experimental)
// in rpgjs.config.ts
export { Player } from './src/player';
export const config = {
providers: [
provideSaveStrategy(HttpSaveStrategy),
provideTiledMapEngine(),
provideBattleSystem(),
provideDatabase(),
providerPlayer(Player)
]
}
// in src/player.ts
'use server';
export const Player = {
async onConnected(player) {
await player.showText('Hello, world!');
}
}
RPGJS Studio
RPGJS Studio represents a revolutionary approach to game creation, leveraging AI to make game development accessible to everyone: 1. AI-Powered Creation: - Generate complete maps in minutes - AI-assisted gameplay design - Battle system 2. Rapid Development: - No coding required - Instant preview - Ready-to-use game systems The Studio version will be a commercial offering, designed to make game creation accessible while providing professional-grade features.
Features
- AI-powered game generation
- No-code development
- Instant game preview
CanvasEngine & Reactive System
We're introducing a powerful new CanvasEngine that revolutionizes how we handle rendering and component management. While Pixi.js remains an excellent rendering engine with WebGPU support, our new CanvasEngine adds a reactive layer specifically designed for game development.
Features
- Reactive component system
- Optimized for complex game scenes and viewports
- Seamless server synchronization for multiplayer
- Framework-agnostic design
Example of code (experimental)
<script>
import { signal } from 'canvasengine';
const x = signal(0);
const y = signal(0);
</script>
<Rect x y width="10" height="10" color="red" />
Enhanced Physics with MatterJS
We're upgrading our physics system to address performance limitations and provide more realistic interactions: - Current physics system has shown limitations, particularly in complex scenarios with many entities - MatterJS integration will provide robust physics simulation with better performance - Virtual grid system for optimized collision detection - Support for advanced physics properties like velocity, mass, and forces - Perfect for creating more dynamic gameplay mechanics The new physics system will be particularly useful for: - Combat systems with knockback effects - Environmental interactions - Particle effects and dynamic objects
Features
- Optimized collision detection with virtual grids
- Advanced physics properties (mass, velocity)
- Better performance with many entities
- Realistic movement and interactions
PartyKit Integration
We're revolutionizing how multiplayer games are deployed and synchronized: 1. Real-time Synchronization: - Low-latency updates using PartyKit (https://www.partykit.io) - Efficient state management with signals 2. Cloud Infrastructure (but you can use your own server) - Cloudflare-powered deployment - Automatic scaling - Global distribution 3. Easy Setup: - Zero-config multiplayer - Built-in room management - Automatic state persistence
Features
- Low-latency real-time sync
- Cloudflare integration
- Automatic scaling
- Simple deployment process
Example of code (experimental)
import { signal, sync, Action, Room } from '@rpgjs/server';
@Room()
class Map {
// automatically syncs to all clients and persists in the database.
// So, if server restarts, the state is not lost.
@sync() wood = signal(0)
// persists state in the storage. So, if server restarts, the state is not lost.
// But value is not synced to clients
@persist() secretValue = signal(0)
// action is a function that is called by the client. Possible to add guards for permissions.
@Action('incrementWood')
addWood(player, data) {
this.wood.update(wood => wood + 1)
}
}
Advanced Combat System
Building upon our new physics and component systems, we're creating a comprehensive combat system: 1. Physics-Based Combat: - Realistic hit detection - Knockback effects - Weapon physics 2. AI Combat Behaviors: - Smart enemy AI - Dynamic difficulty adjustment - Customizable behavior patterns 3. Visual Effects: - Impact effects - Damage indicators - Combat animations
Features
- Physics-based hit detection
- Advanced AI behaviors
- Visual combat effects
- Flexible combat rules