lunafromthemoon / renjs-v2 Goto Github PK
View Code? Open in Web Editor NEWRenJS Typescript Version
License: Creative Commons Attribution Share Alike 4.0 International
RenJS Typescript Version
License: Creative Commons Attribution Share Alike 4.0 International
Can you include a License file on this repository in order to clarify what the engine's license is?
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.
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
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.
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?
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.
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
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.
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.
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:
- wait: click
does not work as intended. However - wait: 300 or any other wait time works.
The click functionality is not working.
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.
A lot of GitHub Actions fail while submitting a pull request.
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?
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).
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
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.
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
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.
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.
Following #20 this action should be documented. I can probably do this during the weekend.
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.
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
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
Actions are currently parsed by the story manager, they should be able to parse themselves when receiving the raw script line.
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":
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).
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
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
Reigster all plugins on their particular signals (onInit, onStart, onSave, onLoad, onTap, onCharacter, onAction, onEnd) and dispatch signals in the key moments.
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/
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:
Create a button with an background asset and a Label on top. Label can change properties on mouseover/pressed.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.