Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics


A member registered Jun 29, 2017 · View creator page →

Creator of

Recent community posts

There are many different transitions, the no fade is called CUT, here's a list with the other ones:

Does this solve your problem? Also, theres a Defaults.js file, where you can set the default transitions for each kind of object.


It's in my plans, but I haven't used phaser 3 a lot and the changes seemed to be a lot from one version to the other.

I just checked and there was a problem when skipping some quotation marks in the comparison. The Quickstart repository is updated with the fix.

Here's a link to the documentation: just in case.

Hello, the problem is that you need to surround the variable with {}, like this: if ({variable}=="value").

Thanks! I tried to keep the code clean so anyone could make they own modifications. If your method works then it's good, I thought about this other way because changing the states could bring unexpected bugs.

Here's the example:

Your minigame is in a folder called minigame, it's the breakout example from Phaser ( The only change is that the creation of the game is inside a function called createMinigame(callback), the callback is a function that the minigame has to call when it's over. In this case, the minigame is over when you lose three lives. By calling the callback function, the control returns to RenJS. Also, the  score of the minigame is sent as a parameter to the callback function, so that I can have this information in the story.

To start the minigame, I use an action "call", to the CustomContent function minigame. This function hides the RenJS canvas, calls the createMinigame() function and creates the callback, that will store the score from the minigame into RenJS.logicManager.vars, show again the RenJS canvas, and then continue with the story. 

The file for the minigame has to be called from the index too.

The example is very simple and the transition between the story and the minigame is very rough, you should code a nicer one.

Hello SuCicada, this function internally calls the "story action" interpreter for RenJS, and it's better not to use it. The way to continue a story after a custom action is by calling RenJS.resolve(). Here's the documentation to the "call" action that might be helpfull:

Hello guys, the Phaser STATES can not be used for a mini game because RenJS uses them internally to run. Basically, if you change your state to a minigame, it will be very difficult to return back to the story as it was before calling the minigame.

I think the solution of calling a new Phaser Game entirely (in a different div) from a CustomContent function is the right way. You just have to add your minigame files to the index.html, along with RenJS, and when you want to call the minigame you do it from a CustomContent function, remembering to call RenJS.resolve() once your minigame is over (and hiding your minigame div).

I'll try to build a simple example for you to play with.

To continue with the story, you need to call the function RenJS.resolve(), this is called after completing every action, and tells the story interpreter that this action is finished and to read the next one. In your minigame, make sure that you finish it completely before calling RenJS.resolve(), for example, you'll need to hide all of the assets, finish all animations and tweens, stop music, etc.

On you're second question, as long as you store your variables into RenJS.logicManager.vars during the minigame, then you can use them in the story as well.

I can't really see what could be the problem, are you loading the Jquery library correctly? If you don't have it, then it can't execute.

Hello again, there's really not a roadmap, I add features as I need them in my games and I also take suggestions along the way.

Hello Alix, you where right! There was a bug in the LanguageChooser.js file. It's fixed now both in the RenJSMultilanguage example and in the RenJSQuicktstart. You just need to replace that file with the updated one and it should work.

Thanks for the bug report!

Is there any error in the console when it freezes? Play it with the browswer console and you should see it in the console tab. Once we know what's the issue we can fix it. 

I was editing my answer, read it now.

(1 edit)

Let's say you have want to update your score. You would have to use the "var" action, and then call a custom function with "call", to update your GUI. something like this

  - text: You win one point!
  - var score: "{score} + 1" 
  - call updategauges:

Then, in the CustomContent.js, you need the function updategauges, something like this (if you're using jquery):

RenJS.customContent = {
	updategauges: function () {
	  var score = RenJS.logicManager.vars.score;

This would update your "intel" meter. If you need to animate it, change the color according to the value, etc, you should be doing it in this function. And of course, when you start your game and all your gagues are in their starting value, you should call this function too so you see them.

Hope it helps!

Then the problem is in the language chooser, it's choosing always english. The key must be in the LanguageChooser.js file, I'll check again if there's a problem with the example.

Hello Alix, to properly integrate the PhaserInput plugin you need to add it to the game object:

In your own example try adding this line:


as the first line of the bootstrap init function (RenJSBootstrap.js, line 7). This is not an official addition to RenJS but just a quick example I did for someone that asked for it, so it's not perfect and I don't know if any other unexpected bug could appear.

In any case, I updated also the example repository and it should work now.

I'll check it and come back to you.

Hey Alix, it should be fairly easy. RenJS creates a global object called RenJS, which contains everything about the game. When you set a variable in game, it is stored into this global object, specifically here: RenJS.logicManager.vars

This is a map that contains all of the variables, and you can access it from wherever you want, be it in game or from any javascript you have. What's more, if you add variables to this map externally (let's say, you have an input and save its value into RenJS.logicManager.vars.myInput, then in game you can call this variable as you would normally do with {}.

I'm not sure I'm explaining myself too well, but let me know if you need to know more about this. The last part of this doc ( has a list of things you can use to interact with the game from outside (or inside).

What I mean is:


This means you should different splash screen, one per language. Is this being loaded correctly? 

Does the example as is work for you?

Are the different language assets loaded correctly?

Hello Alix, I haven't used the Phaser Editor, so I can't be of much help with this. I can point you to the GUI file for RenJS, called SimpleGUI.js. This file is where the GUI is created and contains also all the interactions with it.

What happens when you execute it? If it freezes the story, then press F12 in the navigator and copy here what the error is (it should appear in the browser console).

How are your files arranged? As it is, you need a directory called story, and inside it three other directories called "en", "es" and "fr", inside each of them there should be a file called YourStory.yaml.

Hello Alix, it looks Ok to choose a different config. In case you haven't read it, here's a link to the Mobile/Desktop documentation:

In general, as it is made with Phaser, any procedure to make a Phaser game into mobile should work with RenJS too.

hermoso! quiero un nivel de ir saltando sobre toros

Hello Alix, that should certainly work. When working on a multilanguage game, any path with LANG on it, be it in the GUI, config file or setup file will be converted to the right language.

(1 edit)

Hello Alix, the parameter you need is called textBounds, with properties x, y, w and h. This let's the namebox know where to center the names. Example:


     x: 36

      y: -40
      x: 0
      y: 20
      w: 50
      h: 20
      font: 20pt audimat-mono
      boundsAlignH: center
      boundsAlignV: middle

This means your name box will be located in position (36,-40) respecting the message box, and the name will be displayed in a box positioned in (0,20) respecting the name box, with width 50 and height 20.

When the parameter textBounds is missing, the text bounds are taken from the image itself, and that's why is looking wrong in your case.

Hope this solves your issue!

Hello Alix, great ideas! The engine currently has a "Simple GUI" module with the only text box, but this simple gui can be changed or extended to add anything you like. Doing something like having a different text box for the normal text should be the easiest thing to implement, but the other ones should be quite easy too. I'll think about adding this features. Thanks, and bring more ideas!

Hello Alix, to change the background color you have to add a line of code at the start of the game. The line is this:

game.stage.backgroundColor = "#4488AA";

Using the color you like in hex format, of course. And you should add it in the file Preload.js, line 137, as the first line of the function.

Let me know if it worked.


Hello Butterfly, to start from scratch I recommend you to use the Quickstart game (here's the link ). Download this and check if it works, then start adding small parts of your story to it.

A very useful tool to is the browser debug console, every browser has one, you usually need to press F12 to open it, there you can see the log of the game and any errors. For example, open the console and load the game, after the loading bar is done, you will probably see an error displayed in the console, you might need to scroll down the console to see the last lines. If you don't understand this error, paste it here and I'll help you.

And if you can run the tutorial game, then you most certainly can use it for your own, since the tutorial game is made with the engine.


Hello Alix, I can confirm that the character spriter are not scaled on their own. The whole game may be scaled to fit the window, and that could cause the issue. When you open the folder of the game there's a file called config.js, there you have a variable "scaleMode" that can take the values: EXACT_FIT (will scale to fit the window exactly), NO_SCALE (will not scale), SHOW_ALL (will scale but maintain proportions). Try using NO_SCALE and see if the issue is fixed. RenJS is based on Phaser, the assets are loaded exactly like in this example, may you try to use your own in an example like this and check if the problem persists.

Hello Alix, RenJS is based on Phaser, everything is inside a canvas, so it'll not be that easy to implement such a thing. In any case, you're welcomed to try.

Hello thomas234, it's finally fixed! You'll find the changes in the RenJSQuickstart repo here. Just grab the RenJS folder and replace the one you have in your game (unless you made some changes yourself, in which case, just replace the RenJS.js file).
Thanks for reporting this bug!

Hi thomas234, I had found the bug before but it was tricky to reproduce to fix it. Thanks for reporting it, I'll try to fix it as soon as I can!

You're welcome. You can change the values of these positions, and also add some other interesting positions for your game and use the keywords in your script as you like, too.

What kind of tweening do you mean, using the MOVE transition for characters or tweening inside a call action?

If the example you're referring to is the MOVE transition:

  - show deuzi: WITH CUT AT OUTRIGHT  
  - show deuzi: WITH MOVE AT CENTER

It's working fine integrated with the quickstart, something that could be happening is that for some reason it doesn't find the named positions, these are present in the Defaults.js file, under the positions key:

Check if you have the correct positions and let me know

Oh, the issue is that the key "loading" is already used for the game loading bar of the game. 

As the loading bar and splash screen are loaded before everything in the game, including the yaml files, they can't be specified there. The game loading bar and splash screen paths are in the config file of the game, and the actual loading of them are in the bootstrap file for RenJS. 

If your loading bar has nothing to do with that, and it's just another kind of loading bar for the gui, you will just have to change the key name, for example use loading2, and you will then have that key available to use anywhere from the gui.