Giter Club home page Giter Club logo

rpg-js's Introduction

Header icon

Version Downloads License Activity

RPG JS v4 : Create RPG and MMORPG in your browser

RPG JS is a versatile TypeScript framework meticulously designed to empower developers in the creation of both traditional Role-Playing Games (RPGs) and immersive Massively Multiplayer Online Role-Playing Games (MMORPGs). Our primary objective is to offer a seamless development experience where your codebase remains consistent, regardless of the game's nature.

With RPG JS, we aspire to provide developers with a robust foundation that adapts effortlessly to your creative vision. Whether you're crafting epic solo adventures or building vast multiplayer worlds, RPG JS ensures that your development journey remains cohesive and efficient. Our goal is to simplify the complexities of game development, allowing you to focus on bringing captivating stories and engaging gameplay to life.

WebSite and Documentation

Demo

Demo

Demo

Resources

Getting Started

npx degit rpgjs/starter my-rpg-game
cd my-rpg-game
npm install
npm run dev

Then go to port localhost:3000

Features

Feature Description
🌟 Create Events Build NPCs, monsters, and more to shape your game's storyline.
🌎 Tiled Map Editor Craft intricate game worlds with multiple layers, shapes, and collisions.
🎨 Customize Your Hero Personalize your hero's appearance, animations, and attributes.
🖥️ WebGL Rendering Enjoy high-performance game rendering with WebGL and PixiJS.
⚙️ MMORPG Performance Optimize for multiple players with zone-based processing and client-side prediction.
🚀 Designed for Scaling Utilize Agones and Kubernetes to scale your game for thousands of players.
📱 Cross-Platform Gaming Play on mobile, gamepad, or keyboard for versatile gaming experiences.
🌐 Using Vue.js for UI Leverage Vue.js for user interfaces, including dialog boxes and menus.
💻 Code with TypeScript Develop with TypeScript for enhanced code structure and clarity.
📜 RPG-Focused API Simplify RPG development with an intuitive API for in-game actions.
🔄 Same Code: MMORPG or RPG Create both MMORPGs and traditional RPGs using the same codebase.
🧩 Modular Expand functionality with ease through a modular design.
🧪 Unit Tests Ensure game stability and reliability with built-in unit testing.
📦 And Other Plugins Enhance your game with additional features like chat, title screens, and more.

Contribute to developments

To contribute to the developments, install the sources locally:

git clone https://github.com/RSamaium/RPG-JS.git
npm install
npm run dev

The game can be found in @rpgjs/sample2 package.

For documentation

cd docs 
npm install
npm run dev

License

MIT. Free for commercial use.

rpg-js's People

Contributors

dominx99 avatar koderfpv avatar rsamaium avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

rpg-js's Issues

How load a map with out loading a file ?

Hi,
I see that we can load a map wih the function loadmap. Like that :
rpg.loadMap('Town', {
tileset: 'Town.png',
player: {
x: 4,
y: 18,
direction: 'right',
filename: 'Hero.png'
}
}, mapLoad)
But, its will load a file... I prefer give the map directly (I build it just before).
With out knowin how to make it properly, I juste replace the line
Cache.map(filename, callback, propreties.customPath, propreties.noCache);
in loadMap funcion by :
var map_data= //mymap;
callback(map_data);

So how can I make it with out changing rpg.js file ?

How to add new scene with window in the middle of the game?

tried to create a scene in the middle of the game using the same method used in the 'Create a scene' sample. called the function on the event and the window shows up but I can't move the cursor and select the option. Any help is really appreciated, thanks!

Blank textbox (no text drawn)

I'm using Opera Version 11.50 Build 1074, demo only show blank textbox.

Tracing with dragonfly leads to this line:
ctx.fillText(text, 0, y, this.maxWidth);
this.maxWidth is always null, which also means don't draw at all.

The fourth parameter is optional, and Text.maxWidth seems never been initialized anywhere, so I try these:
ctx.strokeText(text, 0, y); //ctx.strokeText(text, 0, y, this.maxWidth);
ctx.fillText(text, 0, y); //ctx.fillText(text, 0, y, this.maxWidth);
and voila, I can see your voice echoing through my canvas again (:

Do maxWidth really needed? From what I read its not for text clipping but stretch to fit.

RPGJS Documentation down

RPGJS documentation is down for at least a week now, we only have the discussion threads, not the original tutorials. Without them, it's hard to build rpgjs projects from scratch.

displaying a tileset over autotiles

Hello RPGJS team,

first of all, thank you for the support you offered up to this point. I'm getting further with my game based on your project. I'm still working on the maps in RPG Maker and now I have another issue I am stuck on.

When I create an object as autotiles and then put a tileset object on it, the tileset object is not displayed at all. However, a character object is visible over an autotiles object. Displaying a tileset over autotiles is required for example to put a bridge over water on a map.
I would appreciate if you could offer a way to workaround this issue.
Best regards,

"passage" and "priority"

Hello RPGJS Team,

I'm currently working on a game based on your project. I'm using the recommended RPG Maker XP to create maps. There are two main variables for every static object: "passage" and "priority". I have on my map a bunch of objects whith "passage=false" and in the same time "priority=1" or more.

The problem is, when I export my map from RPG Maker XP to your project, every object that is marked as non-passable with priority above 1 is getting passable, with other words, it is loosing its "passage" argument.

Is it the matter of such behavior that you simply didn't implement the flag "passage" and just used "priority=0" instead of it? Were it possible for you to add to your project the support of non-passable objects with priority above 1 in the same way like it is in the RPG Maker XP?

Many thanks in advance,

How can I change pixel movement to tile movement?

Like the question: how can I change pixel movement to tile movement?
In the mozzilla developer page of RPGJS the demo is with tile movement, I would to use it if it possible.

Thanks in advance.

EDIT: I found it.

convertToJS_vs.rb to RGSS3?

Hey, Web Programmer and Gamer combining the two for the first time ever so please forgive ignorance as I also don't know Ruby.. My goal is to create a web page for a client that includes a game built into it.

As I understand it, the convertToJs_vs.rb script is written in RGSS(2?) ? It sounds like I will have to convert or have someone convert it to RGSS3 for use with VX ACE where I have been developing my project.

  1. Am I right? and
  2. Has this been done already? and
  3. Is someone here able to do it or should I put it to RPG Maker forums as a script request or
  4. Should I just shut up and use the in-browser RPG Creator ?

Map Maker for RPG-JS Alone?

Hello! I have stumbled upon this JS library and am very amazed at its capabilities. I'm slowly inching my way around the framework and I came across the part about making maps. As it seems, that "It is recommended to use RPG Maker XP to create a map.'. However, being a mac user, I believe RPG Maker XP doesn't have a mac port that I can use. Are there plans to create a map maker for RPG-JS alone or will it just keep on to using the RPG Maker XP approach?

How hard would it be to implement a web-based map editor for the framework? How long would it take to get a rough one up and running? I'm asking this because I might be able to bother my friend into coding it and I just want to have an oversight of how long it would normally take.

Thanks in advance!

Participate in the completion of version 1

Are you a JS developer ? Help us to complete the version 1 :

1) Improve (or change) the A-RPG battle

Improve colission between two events. Currently, only one contact between the two characters (32px area to another area of 32px).

We must assign more specific areas on the characters for interaction:

  • Zone attack
  • Zone defense

Improve the artificial intelligence so that it is more realistic (moving, detection, etc.).. Allow the developer to customize the fight

The A-RPG battle is a plugin (see "plugins/arpg.js") et https://github.com/RSamaium/RPG-JS/wiki/Create-a-plugin-(next-version) for create or modify this plugin

Currently, the A-RPG battle has states attack, liabilities, detect, etc.)..This mode gives the monster a new way for him to make new actions

File : plugins/arpg.js

2) Improve the movement of the hero

A more fluid motion in places quite narrow. For this, we should think about reducing the collision zone of the character

File : Event.js

3)In the event commands, add conditional instructions.

Example :

"IF: {'switch': 2}"
"CHANGE_GOLD: 10"
"ELSE"
"CHANGE_GOLD: -10"
"ENDIF"

Able to handle nested conditions. Same with the choice.

File : Interpreter.js

4) To export the game natively on iOS and Android with PhoneGap (http://phonegap.com)

=> Native file system

BGM/Cache.loadAudio not working--workaround.

So either the syntax was too complicated or the functions just don't work. Added a new function Cache.js that does work (and is simple), feel free to pull it.

Cache.audioStart = function(type) {
if (Cache.files[type]) {
for (var i=0 ; i < Cache.files[type].length ; i++) {
Cache.files[type][i].play();
}
}
}

Demo is broken, progression-wise, and rather unclear.

I know, I know, the point of the site is the system, but the demo showcases the system, and it has some big issues:

The rock puzzle: It's a bit more difficult to physically accomplish that puzzle (something like 30 keypresses to accomplish it?) than it should be for the first puzzle of a demo.

NPCs: NPCs damage you from two spaces away, while you can only damage them from one space away swinging the sword. As such, you always get damaged for each damage you do.

The colored switch puzzle: No clues as to which switches open the door. I only got past it by randomly trying all combinations until one worked.

The room after the colored switch puzzle: Very unclear that the tiles that are switches are indeed switches.

Health: On the demo, there's no way to regain your health, so you just inevitably count down to zero health. Now, for some games that might be appropriate, but for the demo, and in general for simple games that are likely to be built with the system, being able to regain health would be beneficial.

dir.move not defined anywhere (freezes game)

The event command "MOVE_ROUTE" (cmdMoveRoute) calls for the direction of the event (assuming from the sprite sheet) as a function dir.move, but dir.move doesn't exist. Writing out a call to this function ("MOVE_ROUTE: {'dir': [2,2,4,8,2]}",) will cause the game to freeze.

Removing the .move will fix the freezing error, but the event still won't move along any specified route.

Empty Screen

Well, ive just download a demo to test, then put it on my local server, but when i go to page, nothing happens (the game stay blank).
Can someone help me? Screenshot of error: http://i55.tinypic.com/n3u8p1.png
Thanks.

Help: creating a Class

Hi, I'm trying to create a new Class called Game_Screen, in which I'll set up width, height, coordinates for some document divs.
Here's the code

Class.create("Game_Screen", {
    game_screen: null,
    camera: null,
    scene: null,
    anaglyph: false,
    renderer: null,

    initialize: function( game_screenID, fullWidth, fullHeight, viewX, viewY, viewWidth, viewHeight, this.anaglyph ) {
        game_screen = document.getElementById( game_screenID );
        game_screen.appendChild( renderer.domElement );

        camera = new THREE.PerspectiveCamera( 30, game_screen.clientWidth / game_screen.clientHeight, 1, 10000 );
        camera.setViewOffset( fullWidth, fullHeight, viewX, viewY, viewWidth, viewHeight );

        scene = new THREE.Scene();

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( game_screen.clientWidth, game_screen.clientHeight );

        if ( this.anaglyph==true ) {
            this.effect = new THREE.AnaglyphEffect( renderer );
            effect.setSize( fullWidth, fullHeight );
        } else {
            // nothing
        };
    },

game_screen, camera, anaglyph, renderer, scene are new vars.
I want to make this possible:

screen_3D = Class.New("Game_Screen").initialize( "game_screen_3D", 400, 480, 0, 0, 400, 240, true );

Setting "true" or "false" to apply or not the anaglyph effect.
Is it possible to do something like this?

Thanks for reading!

Full documentation in english

Im missing the full english documentation (i cant understand french so good) and also what file types are supported eg for the background music (mp3, ogg, ... maybe using soundmanager 2 or modernizr, and also have the same audio file with different file extensions like bg.mp3 bg.ogg, and the one is selected that the browser supports?)

and also a demo project (yours?) so we can see how the structure has to be and where to put what

makes it all easier and also committing and testing =)

bind and trigger 'update'

No plugins.
No evets.
Just load map.

My code:

rpg.loadMap('nikita', {
[skiped]

        }, function () { 
                                rpg.bind('update', function() {
                                 console.log('update');

                            });

            rpg.setScreenIn("Player"); 

}
});

Map loading. All work fine.
But
In console nothing.
What am I doing wrong?

UPD1:
If I uncomment following line in the rpg.js file
// if (this.func_trigger[name] != undefined) {
// return this.func_triggername;
// }

all works like expected.

API changed?

ARPG plugins example

Can you please POST a simple example with ARPG at work ? Just a mob to kill for understand how do that.

Thanks a lot.

Main page example is not working

Uncaught TypeError: undefined is not a function
canvasengine-latest.all.min.js:21
Input.Input.Gamepad.getState canvasengine-latest.all.min.js:21
Input.Input.Gamepad.update canvasengine-latest.all.min.js:21
RPGJS_Canvas.Scene.New.render Scene_Map.js:249
Class.create._loop canvasengine-latest.all.min.js:11
e canvasengine-latest.all.min.js:11

Chrome 35.0.1916.114

event trigger issue

Hello.
I'm working on a project with RPG-JS and i have an issue with event.
Here is my event code:

[
    {
      "x": 11,
      "y": 12,
      "id": "1",
      "name": "EV001"
    },
    [
        {


            "trigger": "contact",
            "direction": "bottom",
            "frequence": 16,
            "type": "fixed",
            "through": false,
            "stop_animation": false,
            "no_animation": true,
            "direction_fix": true,
            "alwaysOnTop": false,
            "speed": 4,
            "commands": [
              "SHOW_TEXT: {'text': 'xzcz'}"
            ]
        }
    ]
]

Browser: Mozilla Firefox 6.0
OS: GNU/Linux (Ubuntu 11.04)

The problem is when player contacts event the text won't disappear with space or enter key.
Is this RPG-JS problem or something is wrong with my event code ?

Uncaught RangeError: Maximum call stack size exceeded

Hi everyone
This is the demo I made with RPG-JS:

http://www.masterpage.it/game.php?height=500&width=800

It isn't complete ad has many things to be fixed, but seems to work properly on most os and browsers. The main problem is when the player is transferred to another map - in the javascript console the error is:

Uncaught RangeError: Maximum call stack size exceeded
(anonymous function)
c.sortChildren
Rpg._sortEventsDepthIndex
moving
(anonymous function)
p.call
moving
(anonymous function)
p.call
moving
(anonymous function)
[...]

At the beginning the error doesn't block the game, but after some maps are loaded the next one remains blank and it is impossible to continue playing. Are there any suggestions?

Rpg.js example not working chrome..

I downloaded the repo and opened the demo with Chrome

Blank Screen

I then opened it with Firefox..

Worked just fine.

i did not modify the demo at all. Same result on windows and Ubuntu.

animation.js Improper display of animation

Sorry about my english.
My interpreter was lost

Some animations are displayed incorrectly.
For examlple:
Cast Magic or Use Item

I think bug in animation.js
After some experimentation, I found parameter currentWaitFrame

So
If you add a line "bitmap.currentWaitFrame = 100;" after line "bitmap.currentFrame = (currentSeq.pattern-1);" then
Everything begins to work as needed

The number 100 can be any
But necessarily greater than the number of frames in the animation

I do not know why
I found this an experimental

RPGJS.load() called from Ajax successCallback() - fails on IE and Firefox

Hello,

I have an Ajax web service call in my script. I would like to load the map inside successCallback() function. The problem is this only works in Chrome.

In Firefox or IE the map does not load at all. Any other function I try to use instead of RPGJS.load() seems to work in these 2 other browsers.

Thanks for your help in advance

Previous version (v1)

Can someone please send me de previous demo? I am already making a game with the previous version, and I will like to see somethings in the demo.

This project is awesome.

@RSamaium Can you help me?

Multiple player instances

Hi,
I want switch between two or more players. So I created a instance of player in the console

p2 = new Player( {
x: 2,
y: 2,
filename: '001-Fighter01.png'
},rpg)

And the original player and the new one listen the keyboard at the same time. I used the attribute “freeze” to stop one, but after that both player are frozen. It's a bug ? I doing something wrong? Or this feature is not supported?

Problème d'installation

Bonjour,

Je viens de tester le jeu (http://rpgjs.rpgcreative.net/examples/examples/demo/) et je le trouve super bien foutu !!
Par contre je n'arrive pas l'installer sur mon ordinateur en local, j'ai bien télécharge l'archive suivante : http://rpgjs.com/download/demo-rpgjs.zip
, puis décompresser dans un répertoire et ouvert fichier index.html, mais je n'ai que la barre d'état en haut. J'ai aussi télécharger le fichier : https://github.com/downloads/RSamaium/RPG-JS/rpgjs-alpha-2.zip.

Merci d'avance.

LeSanglier

Passable tiles

For the passability of the tiles, there is used a hex value. On the website I read that 15 means that the tile is passable, but it's not. That's with zero. But for all the other numbers than zero, my tile is not passable at all the sides. I have to create tiles which are passable at by example 2 of the 4 sides, but is this still possible?

How to include the non-minified version of the code?

I was wondering how can I use the non minified version of the code, I think this will give me a better understanding of how the library works and maybe I can help in the future, since the documentation is really scarce.

Russian language for demo

Hi. This is Russian language for demo:

ru: {
        "GET_GOLD": "Вы получили 7 золотых",
        "GET_GOLD_2": "Вы получили 3 золотых",
        "GET_GOLD_3": "Вы получили 5 золотых",
        "PROHIBITED": "Вход запрещен",
        "YEAHHHH": "УРАаааааа",
        "SPEND": "Я проведу день убирая сорняки",
        "HELP_US": "Помоги нам, мою дочь похитили и заперли \nв подземелье восточнее деревни",
        "WARRIOR": "Я воин без оружия. Мне кажется, \nмеч есть в пещере в деревне",
        "LEAVE": "Если вы покинете город, будьте осторожны!",
        "CALM": "Город спокоен.",
        "BORED": "Мне скучно",
        "COURAGE": "Вы заслуживаете хорошей награды за мужество",
        "MONEY": "Не трать деньги без надобности!",
        "NEED_SWORD": "У вас должен быть меч, прежде чем покинуть деревню",
        "SWORD": "Вы получили меч",
        "PASS": "Вы можете пройти только если дадите мне 15 золотых!",
        "GIVE_ME": "Дайте мне 15 золотых",
        "YOU_LOSE": "Вы отдали 15 золотых",
        "TY": "Спасибо, что спас меня!"
    }

Character statistics ?

Hello,

Does RPG-JS allow editing or viewing the players statistics like: life, mana, magic points or so?

Tile locations not showing correctly when scrolled.

I have implemented the game in the middle of the page, but when a user scroll the page the information when I use a mouse event by example is wrong. They don't use the scrolled width and this also gives problems by playing with the mouse. Is there a solution to this WITHOUT using a frame?

Not working in Chrome 17

Hello,

I just wanted to try out the demo and the samples, but in Chrome 17 the canvas is completely black and I get the following error message in the console:
Uncaught TypeError: Cannot read property 'length' of null in line 336.

Some errors?

The game hangs when i press space in the cave in the demo near the right rock (there are 4 of them)

and also the game is very slow on some browsers and systems and the whole script needs some improvement

Event & approach & frequence > 0

"frequence": 0,
"type": "approach",
works as expected.

"frequence": 1,
"type": "approach",
If the frequency is greater than zero then the event makes only one move.

Problems in Android

Hi
I have a problem using RPG JS in Android
The Demo works fine in my computer. But in Android, i open the demo and says "Loading..." ... and Loading and... well... loading... (can't load)
How i can fix that?

Thx :)

Not working on Opera android

Opera 12.0, android 2.2, just get the screen telling me to upgrade my browser, but I believe this is the latest version. As the opera logo is on the page I presume this is supposed to work.

Not loading correctly in IE9/IE10

I'm creating an online game with rpgjs now, but it won't load in IE9 and IE10. It should load as mentioned on the website. I've tried to load it from the moment when the dom is loaded (using jquery), but it's still not working. What's the problem here?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.