Now with some bugfixes (click on quickmenu, load issues) and with Visual Choices!

RenJS is a new videogame engine for making Visual Novels that run directly in the web browser. Based on Ren'Py and powered by PhaserJS, it's easy to use and easy to extend.

In this tutorial game, made with RenJS itself, you can learn the basics to start writing your own game.

Play it in the browser and don't forget to grab the code from https://gitlab.com/lunafromthemoon/RenJSTutorial

Currently working on the official documentation (you can find an incomplete version here: https://lunafromthemoon.github.io/RenJS/) and open to feature suggestions.


* Sometimes weir things happen in chrome, not fully tested yet.

Next features:

* Localization

* In game spritesheet animation

Published Sep 15, 2017
GenreVisual Novel, Interactive Fiction
Tags2D, Game engine, html5, renpy, web-based

Development log


Log in with your itch.io account to leave a comment.

Hi. I am Spanish speaking and I use the google translator to communicate.

my question is if you can adjust the style of the canvas to width: 100%; height: 100%; to make it responsive, since I intent to port the game of the tutorial to android (with cordova) but it looks too large the canvas for the screen. Try changing it from the browser with inspecting elements (in both chrome and firefox) and the style changed it from width: 800px; height: 600; a width: 100%; height: 100%; and it works but only for a moment since the second later it returns to its original configuration. try up with css and nothing at the div level: div # RenJs canvas {width: 100%; height: 100%;} or directly from the canvas: canvas {width: 100%; height: 100%;} and nothing

Is there any way to modify the properties of that canvas?

Hola! Las dimensiones del canvas/juego de Phaser se settean en el archivo de bootstrap. Fijate que es un archivo bastante corto, y lo vas a encontrar bastante r'apido, si ten'es experiencia con Phaser va a ser m'as f'acil, y sino hay muchos recursos sobre como portarlo. Pod'es consultar en castellano directamente. Saludos! 

OK, aún no puedo hacerlo responsive, y he intentando con los códigos mas genéricos. te muestro:

var phaserConfig = {
  splash: "assets/gui/splash.png", //splash background
  loading: "assets/gui/loadingbar.png", //loading bar image
  loadingPosition: [111,462], //loading bar size
  storyFiles: [
var game = new Phaser.Game(800, 600, Phaser.AUTO, "RenJS", {
        this.scaleMode = Phaser.ScaleManager.SHOW_ALL
        this.scale.minWidth = 320;
        this.scale.minHeight = 240;
        this.scale.maxWidth = 800;
        this.scale.maxHeight = 600;

alguna sugerencia? porque todos los tutoriales sobre como hacerlo responsivo apuntan a que no haya style en la etiqueta de canvas, y aqui si hay un style que bloquea cualquier modificacion a nivel externa

Hi, using Brave browser, nothing appears. When I try with Chrome, it runs.

I think this is fantastic. I'd love to help with the code as I'm an avid Node.js/Phaser developer. Want any help?

Hey! It'd be cool! If you want you can fork the project in gitlab and then we'll review it! Right now I'm trying to concentrate in documenting the whole thing.

Ok, sounds good.

Great work, but the tutorial is buggy.

1. Using Chrome, the settings/save/skip/auto buttons don't respond to mouse clicks, instead it overlaps with the normal click-to-continue operation. In Firefox it responds better.

2. I tested the save/load in the tutorial (in Firefox, because of issue #1), when I saved progress and the character is in the center screen, then load it while the game is still in progress, the  character in the center doesn't get cleared when the character is moved to the left as the game continues. It could be a problem with the browser/Javascript engine unable to properly execute due to user's fast clicking, but it's still an undesirable effect for a game engine.

Thanks for the feedback, I'll check the issues.

Hey, I thought I answered this already but now I can't seem to find the comment. I updated the code here and in the repo. Chrome seems to still be randomly weird about clicks, but the issue in Firefox is fixed. Thank you very much for your feedback.

Thanks for the update. Is it easy to implement side images (the smaller image near the dialog box) in the current engine?

you mean the quick menu with the save and settings buttons? you just load each button image, that can have up to 3 frames for normal, pressed and hover, and you can change it's location to wherever you like in the screen. it's part of the hud configuration in the gui file.

(Edited 1 time)

I meant the smaller character portraits, usually on the left side of the dialog box. But if the quick menu buttons use the same concept I'll think about doing that. Thanks!

Oh, yes. I think the easiest way to implement that is to make a character with the image as the portrait itself, then it's just a matter of calling them like a normal character in a special position (where you want the portrait to be located). Is there anything weird you think might happen if you use a normal character?