A lot of GitHub Actions fail while submitting a pull request.

So we can automatically install and update it via

npm install / yarn add

There is a bit of a name overlap btw
https://www.npmjs.com/search?q=ren-js
https://www.npmjs.com/search?q=renjs

Couple minor typos spotted in docs:

• asignation -> assignation
• rigth -> right

Note that "assignation" is also a bit strange terminology-wise: afaik "assignment" is usually the term used in this context (I've heard "assignation" far more often as the alternate definition of "meeting to have an affair" haha).

Create a button with an background asset and a Label on top. Label can change properties on mouseover/pressed.

Character portraits should be on top of the GUI. A character portrait is configured as a look in the character, with look name prefixed by "PORTRAIT":

• Add new portrait layer on top of GUI
• Create look image in portrait layer when look name is prefixed by 'PORTRAIT'
• Check for default portrait position in case position is not specified with key name PORTRAIT, if not specified, DEFAULT will be used as always.
• Document character portraits

Can you include a License file on this repository in order to clarify what the engine's license is?

Actions are currently parsed by the story manager, they should be able to parse themselves when receiving the raw script line.

- wait: click does not work as intended. However - wait: 300 or any other wait time works.
The click functionality is not working.

If you have a lot of options for a single choice and include a line of dialogue, they can get hidden by the dialogue box. The covered-up choices are still clickable, but should probably always be on top of dialogue.

Note that there's a similar issue with choices overflowing the top/bottom of the screen if you add so many that they can't fit vertically. Hopefully folks aren't putting that many options on a single choice ofc, but you could support arbitrarily long choice lists with scrolling or pagination.

RenJS is using Phaser, which is in turn using Pixi, which supports making elements keyboard-focusable and providing accessible labels. It'd be theoretically possible to leverage these to make games accessible to screen-readers + keyboard users. edit: on further investigation it looks like the version of Pixi included in Phaser predates any of the DOM-based accessibility improvements, so adding this will be more work than I guessed.

It may be worth considering how to make audio, bgs, cgs, etc accessible as well (e.g. I've seen some Ren'py games include captioning via this tool), but the text and buttons are naturally easier + more important for a first pass at accessibility.

The README says

And open each example in the browser:

localhost:8080/test.html localhost:8080/tutorial.html localhost:8080/quickstart.html localhost:8080/i18n.html

the files are however in a dev-only subfolder

if you try to load them, they all fail with

GET http://localhost:8080/dev-only/renjs.js net::ERR_ABORTED 404 (Not Found)
boot.js:5 Uncaught ReferenceError: Phaser is not defined
    at boot.js:5

If I mistype something, I would like the game to try to continue and instead giving we a warning or error in the console.

Examples:

- dude says: Hello
- dudesays: It's me
- dude says: Just wanted to say hi

Suggested message: "Warning: Action dudesays does not exist at Story.yaml:

- show exhibitA: AT LEFT
- show typo: AT CENTER
- show exhibitC: AT RIGHT

Suggested message: "Warning: Asset typo does not exist at Story.yaml:

Let's say I want to make a small demo game with renjs and host it on codepen. Is that possible without hacky solutions?

It can be done with phaserjs games
https://codepen.io/tag/phaser

But not with renjs. I couldnt figure out how to import them from an external path.

What about blobs from cache - is it at all possible to use them as resources? I want to make a live code editor for yaml file that can access the yaml files and rerun renjs in the browser directly - similar to kaboomjs
https://kaboomjs.com/play?demo=movement

I tried to do it with a bit of a hacky solution that puts them in cache, where i can edit them, but without any luck
https://codepen.io/blurymind/pen/QWQMXxr

renjs fails to initialize with an error

Text wrapping seems to be getting re-calculated as individual characters print to the screen, which makes words jump from the end of a line to the beginning of the next line when they hit the edge. This is a bit clunky: it'd be a smoother read if all of the wrapping was handled up-front, and characters appeared already in their final positions one-by-one.

Recently a GUI update changed some stuff. I think it would be nice to have version numbers, and a (simple) changelog. Maybe we also also need to tag releases to make #6 possible?

Would it be possible to add a back button in case the player missed some dialogue and wants to read it again?

Monogatari has this feature: https://monogatari.io/demo/

Reigster all plugins on their particular signals (onInit, onStart, onSave, onLoad, onTap, onCharacter, onAction, onEnd) and dispatch signals in the key moments.

It may be helpful to add instructions on linking to plugins (e.g., <script src="plugins/TextLog.js"></script>)
in the index.html doc to the Plugins section of the documentation. Right now I don't think readers will know to do it unless they have some coding experience. Could be helpful for people without coding experience trying to get plugins working.

Happy to create a PR if helpful.

It would be nice be able to show a picture of character that's talking next to the messageBox, or any place specified in the GUI.yaml.

Ren'py and monogatari calls them side images.
https://developers.monogatari.io/documentation/v/develop/script-actions/dialogs#side-images
https://www.renpy.org/doc/html/side_image.html?highlight=side%20image

I couldn't figure out any way to seamlessly move a cg from being behind characters to in front, or vice versa. You can fade and re-show the same cg on separate lines of the script, but it may cause a flicker due to hide being async (even with CUT).

Example:

start:
  - show mycharacter: look
  - show mycg: WITH CUT BEHIND
  - hide mycg: WITH CUT
  - show mycg: WITH CUT

A possible solution would be to allow a show call on a cg which is already onscreen to move the existing sprite (currently it seems to do nothing).

Example:

start:
  - show mycharacter: look
  - show mycg: WITH CUT BEHIND
  - show mycg: WITH CUT

I don't if this is useful to anyone else, but on the projects I'm working on I need to show a background image behind the visual choices. I would like to be able to specify a background image i GUI.yaml, and if it's present show it behind every visual choice.

Right now I'm doing something like this in lots of places:

  - text: Time to choose...
  - hide CGS: WITH CUT
  - show VC3A: AT VC3A WITH CUT # This is a background image for choices
  - show VC3B: AT VC3B WITH CUT # The same image, with another name to show it in multiple places at once
  - show VC3C: AT VC3C WITH CUT # And again...
  - visualchoice:
    - flickan says: Jag vill att min vän ska vara...
    - choice_likeyou AT VC3A:
      - var girlsChoice: 'likeyou'
      - var girlsChoiceText: 'lik flickan'
    - choice_curious AT VC3B:
      - var girlsChoice: 'curious'
      - var girlsChoiceText: 'nyfiken'
    - choice_soccer AT VC3C:
      - var girlsChoice: 'soccer'
      - var girlsChoiceText: 'bra på fotboll'
  - hide CGS: WITH CUT

Maybe this feature is to specific for RenJS core and should be made as a plugin instead?

Example:

start:
  - hide mybg:
  - text: this text wont be reached

This freezes the game, but should probably be silently ignored (or log a warning at most).

Currently sliders are MaskSliders that just have two frames: empty and full, clicking on the slider changes the mask of the full slider. A new component with background and thumb should be allowed.

Attempting to use custom fonts when storing assets under a non-default URL causes all fonts to 404.

src/gui/RJSGUIByNewBuilder.ts doesn't leverage gui.assetsPath when building the URLs for fonts, so fonts either have to be stored in a different location from other assets, or cannot be used with custom asset URLs.

The technical fix is easy, but would break backwards compatibility with existing projects using a custom assetsPath and custom fonts. Looking for recommendations on how to proceed.

Example:

start:
  - choice:
    - "a":
      - text: "a response"
    - "b":
      - text: "b response"
    - "c":
      # no response for c
  - text: generic response

Having a choice like this can be useful for pacing/"illusion-of-choice" style choices that don't actually do anything specific, but currently they will error out if selected.

Known workaround: You can put something unnecessary like a variable declaration in the choice body so that it doesn't error out, and continues to the rest of the scene, e.g.

start:
  - choice:
    - "fake choice":
      - var null: null
  - text: generic response

Following #20 this action should be documented. I can probably do this during the weekend.

It would be nice to be able to use variables in actions, for instance to have the player choose characters / objects in the story.

  - var evilCharacter: 'girl'
  - show "choice_{evilCharacter}": AT CENTER

The old internationalization module is still there and should more or less work out of the box, but I haven't tried it nor tested it, language chooser page creation should be reimplemented too.

The GUI builder generates CSS like this:
`
@font-face {

      font-family: 'fontsaudimat-mono';

      src: url('/assets/gui/fontsfontsaudimat-mono.ttf');

      src: url('/assets/gui/fontsfontsaudimat-mono.ttf').format('truetype');

     // ...

  }

With.formatinstead of format` with a spece between.

All the text elements have been put a little lower than usual, even in the tutorial things have changed

Currently plugins can be transitions with the onCall action, change this so the transition can be registered in the onInit function of the plugin.
Remove the plugin search in transition.get
Document how to add transitions in this new way

Example:

start:
  - effect ROLLINGCREDITS:
    text:
      - test
  - effect ROLLINGCREDITS:
    text:
      - (bold)text(end)

The first example here will render test as a credits roll as expected, but the second will render (bold)text(end) instead of text in bolded letters.

With cypress https://www.cypress.io/ we can create test cases that work visually in a browser. I'm not familiar with it but Monogatari was using them successfully and it could work with renjs too.

I'm not exactly sure what triggers this, but it seems that in a variety of cases, text and/or images will be rendered in the top-left corner for a single frame before being placed in the expected position. A few of the cases I saw this happening:

• The character name when there's a change in who's speaking (this one seemed to repro pretty consistently and is probably easiest to debug)
• Credits text when the credits roll starts
• Title/loader bg when first starting the game