Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs

lunafromthemoon

107
Posts
20
Topics
103
Followers
27
Following
A member registered Jun 29, 2017 · View creator page →

Creator of

Recent community posts

RenJS community · Created a new topic New discord server!

Hello everyone!

I've set up a discord server for RenJS, so you can share the games you make, follow up on new RenJS features and see the development roadmap. You will also get news about a visual GUI editor that's in the works.

Please, be excellent to each other! 

Hope to see you there:
https://discord.gg/bmdBaDm

lunafromthemoon

Really cute!

Disgustingly awesome!

Will do so, thanks for your feedback!

it's a remake of supaplex, who is supposed to be a remake of boulder dash

:) thanks! i'm glad you enjoyed it!

You can use grow on the statue to cross that stream

There was only an optional boss to fight in the ice temple. In any case, the fight system is kind of broken since I didn't spent too much time on it. This game was a birthday present for a dear friend, and I only released it because to have it somewhere, I'm glad people can enjoy it a bit even then. :)

Good to know, I'll have to make a few revisions.

There has to be a passage from inside the waterfall cave, going up, and you end up in that side of the map.

for the desert path, you need to activate the three ice stones around to open the temple. after nuru is left alone, he has to go back and find boris to learn new magic, to activate the ice stones

i think you can get that chest after activating all the stones (activate them with the spell) there are five stones in the forest: the one where you appear first, the second is very close on the second map, to the right. third in the next map you can go up on the left side, where the owls are, fourth after crossing the bridge, final one is on the big waterfall map, at the end of the path to the left. when you activate them all, the screen will shake and you will be able to continue with the path to the right side of the big waterfall

Hey, you're right, you have to freeze the vines. To climb the tree you need to activate the three fire stones, one is in the cave, another is next to the lake and there's one on top of the hills almost at the start of the map

With X you open the menu and you should be able to do some spells from there. For example, when trying to climb the frozen vines, you need to use fire spell first.

And thanks for playing!

Hey, you can go down over the column on the right side. Have you checked there?

Hello, it depends mostly on your OS. I've had some reports of this happening, for example, with MacOs or some browsers on linux. Try another browser, or, if it's still an issue, you should be able to run it as a local server. The open source text editor Brackets allows you to run files in a server very easily, by pressing a button. Another option is tu run the python simpleHttpServer from a terminal.

Let me know if it works for you.

Cheers!

Hello computer science student, sorry for the delay, here's more or less what you should do: 

The visual choices are loaded as buttons in the screen. In PhaserJS, a button has this parameters:

button(x, y, key, callback, callbackContext, overFrame, outFrame, downFrame, upFrame, group)

That's the position where the button will be displayed, the image "key", the function that will execute when pressed and then the frames, that's where all the magic happens.

The image reference can be a static image (in which case has only one frame) or a spritesheet, with many frames. As it is in RenJS, we assume the visual choices will be a static image, so for the frames I use 0 value for all of them (line97 in LogicManager.js):

var button = game.add.button(position.x,position.y,str[0],function(){
                RenJS.logicManager.choose(index,key);
            },RenJS.logicManager,0,0,0,0,this.visualChoices);

See all the 0,0,0,0 are the frames, you just have to load a spritesheet and use different values. You don't need to have 4 different frames, you can have two normally (normal and hover) and use the frames 1,0,1,0.

The second most important thing is, the images have to actually be spritesheets. You can load spritesheets easily in the setup.yaml file:

spritesheets:
      icecream_choice: assets/effects/ice_cream.png 100 100

In this case, we're loading a spritesheet for our icecream_choice, with frames of 100x100 pixels. That means each frame in the image is 100x100. I.e. if I have 2 frames, the image will be 100x200.

With that little change then it should work. Let me know if there's any issue.

Cheers!

Hi Asthenosphere, it's not implemented in the last version yet, but if you're a bit of a coder I can help you set it up. Let me know!

Hello Yuna, it's easy to do, but you'll have to use a call function to set the name.

First, the characters have two names, an id, which is used in the script, and a name that will be shown in the name box. The id can never change, so if you have a character that represents the player, you can use, for example, "player" as the id. What you need to do is change the name property of the character so that when you make them talk, the new name will appear in the name box, instead of "player".

The characters are their own object, and the property for the display name is called "name". The characters are all stored in a map, accessible from the Character Manager (RenJS.chManager.characters), and you access each one indexed by their id. On the other hand, the variables are stored also in a map, in the Logic Manager (RenJS.logicManager.vars). Knowing this, it's easy to make a custom function to change a character name.

I'll give you an example with the Quickstart. The character with id "deuzi" has a displayName property defined in the setup as "Deuzilene".

Setup.yaml

characters:
  deuzi:
    displayName: Deuzilene
    speechColour: "#ca90cf"
    looks:
      normal: assets/characters/Char3Normal.png
      happy: assets/characters/Char3Happy.png

Story.yaml

start:
  - play morningBGM:
  - show room: WITH FADE CONTINUE
  - show deuzi: happy AT CENTER WITH FADE
  - var username: Sandrine
  - deuzi says: I prefer to be called by my middle name, {username}.
  - call changeName:
      character: deuzi
      name: username
  - deuzi says happy: That's much better!

In this case I just used a normal variable to store the new name, but you will use the one obtained from the input. The new name will appear only after calling the function changeName, with two parameters, the character id (deuzi), and the variable where we have the new name (username). In this way, you can change any name you want. Finally, let's see what's inside the changeName function:

CustomContent.js

RenJS.customContent = {
    //put here your own functions
    changeName: function (params) {
        //params is a map with {character,name}
        //lookup of the character with "character" id
        var character = RenJS.chManager.characters[params.character];
        //lookup the content of the variable with "name" id
        var newName = RenJS.logicManager.vars[params.name];
        //change the character name property
        character.name = newName;
        //continue with the game
        RenJS.resolve();
    }
}

Hope you can make it work, and let me know if there's more I can help you with.

Cheers!

Luna

This feature is important ans should work, so I will fix it anyway, but any donation on the engine is very welcomed.

Hello Alberto, thanks for reporting this bug, right now I'm on holidays but I will check it and fix it as soon as possible.  Feliz año nuevo!

Hello nick, thanks, I'm glad you're enjoying RenJS.

The current save/load functionality saves and loads only one game. As you saw, the save/load function takes a "slot" number, so you can potentially save and load as many games as you want. In fact, that was the idea when creating the save system, and it was finally not implemented.

To add new menus to RenJS, you should check the SimpleGUI.js file, in this file, all the GUI is created, including main menu, setting menu, hud, etc. You would need to track where the menus are created, and add manually the ones that you need. Creating a new menu is not a huge crazy thing, and it's good that you know a bit of Phaser, because you will need to use it, more or less, to create them.

Phaser has groups of display objects (a display object is an image, a sprite, buttons, etc), a menu is simply a phaser group with all the elements of your menu, your menu background, the buttons, and anything else that you might need (in the save menu, maybe some squares for the save slots?). You create the menu (i.e. the phaser group) at the start of the game, and hide it until you want to use it. 

Let's check the roadmap to create a classical save and load menu for visual novels, like this:


Let's check what are the most important elements:

* A menu background

* The save slots: It's a small box (an image, basically) with a screenshot of the moment you saved, associated with a slot number, save date and a title. It also has a little cross to delete it. If there's no game saved, a default image is shown.

* Return button: to go back to the game or main menu

* Save button: Select a slot and click on this button to save

* Load button: Select a slot and click on this button to load

The rest of the elements we can ignore for now. 

Then let's see more or less how to create this menu:

  1. Create save menu Phaser group
  2. Create menu background and add it to the menu group
  3. Create the save slots:
    1. Create a the slot image (slot background) and add it to the menu group
    2. Create the thumbnail image for the saved game, add it to the slot image (addChild)
    3. Add the text part, if you want, and add it to the slot image too
    4. Add an event listener to the slot: on click, we want to select the slot. We can save this information in the menu group, for example, as a new property.
  4. Create the save button and add it to the menu group, the action on click should be to check if you selected a slot, and if you did, use this property to call RenJS.save(slot), after this you can hide the menu.
  5. Create the load button and add it to the menu group, the action on click should be to get call RenJS.load(slot) with the selected slot, and then close the menu.
  6. Create the return button and add it to the menu group, the action on click should be to hide the menu.

I know this sounds like a lot, but you can start trying to implement it and I'll help along the way

Cheers!

Luna

You will find the new changes in the Quickstar repo, for background animation: https://gitlab.com/lunafromthemoon/RenJSQuickstart

You can now load a background as a spritesheet, in the setup file as:

backgrounds:
  # key: filepath frame_width frame_height framerate
  forest: assets/backgrounds/forest-spritesheet-800x600.png 800 600 5
The information you need to add is the frame width and height, and the framerate. You can see an example in the quickstart, by changing the background that is loaded in the story file from "room" to "forest".

Hello, I understand. You're right that the way should be more or less like the new animated cgs. I don't think this would take too much to implement, so probably I will update it this week with two new features: Animated backgrounds (load background as spritesheet and it will loop forever), and background cgs (exactly the same as cgs, but will be loaded behind the characters). The second feature will be interesting in cases like when you have an actual static background but a few animated parts (like a torch with moving fire, for example).

Anyways, I'll post in this thread when it is done. 

Cheers!

Hello, the new spritesheet animation for now is only for cgs. You want animated backgrounds, meaning a looping image while the characters and the rest of the story keeps playing in the foreground? I invite you to post in the renjs forum (https://lunafromthemoon.itch.io/renjs/community) with a clearer description of what you need, and we can try to find a solution. I hope you do use it. Cheers!

There are a few ways to tackle this:


In a functional aspect you have it, you declare the different choice boxes in the GUI.yaml (avoid the whitespaces in the key names, so instead of "choice green" use "choice_green", and then specify the box in the choice option (using "!box" as separator maybe):

- choice:    
    - "I don't kiss and tell!" choice green:      
        - deuzi says: ...    
    - "You bet we did!" choice red:      
        - deuzi says: ...


The main code to change will be in two places, one in the SimpleGUI.js fil. There's a function called showChoices, that creates each box for the choice, and it already discriminates if the choice is a normal choice or an interrupt. If you change the key name there, then you will have different boxes. But where do you get the information for this?

The other part to modify would be the call to showChoices, to add the choice box, in the LogicManager (showChoices funcion in LogicManager.js). In this function you map the choices text, and you filter some of them in case there's an "!if" and a condition for this choice. You actually need to do something very similar to this. After the filter line, each of your choices will have a "choiceText" property where you can try and find the choice box. To find it you can do something similar to how we find the condition:

For every choice in choices list
split choice.choiceText by ("!box") into result
if length of result is > 1 (you have two parts)
    choice.choiceText = result[0] (remove the choice box from the actual text of the choice)
    choice.choiceBox = result[1] (add the choice box to the choice
else (default choice box)
    choice.choiceBox = "choice"

This is more or less what you should do, let me know how it goes.

Luna

Love it! I was a big fan of the original and it feels the same.

Hello Alix, this is an interesting idea, I can guide you through the steps if you'd like to implement it yourself for your game.

Hey, thanks for playing. In the puzzles you're supposed to "eat" or cut the square to reveal the monster behind. You do this by entering the square pressing enter while moving, if the monster eats you you lose a life. The puzzle ends when you reveal enough of the monster or lose all lives. About the freeze, it doesn't happen to me, maybe it's because of the browser, it's tested on firefox.

Hey, at first view, I think the main problem is that you're initializing the variables top and bottom just at the start. This is a problem because you are modifying the values with an addition instead of absolute values, so if you say you want to choose again, you keep adding and if this end value is more than 3 then you don't have anything to show.

Let me explain with an example:

scene bodyChoice

1. Init body, top and bottom with 0

2. Choose body: I choose option 1, then body = body + 1 = 0 + 1 = 1

scene topChoice

1. show body_1 because body == 1

2. Choose top: I choose option 1, then top = top + 1 = 0 + 1 = 1

scene topBottom

1. show body_1 because body == 1

2. show top_1 because top == 1

3. Choice (Ok or choose another top): I choose another top

scene topChoice

1. show body_1 because body == 1

2. Choose top: I choose option 3, then top = top + 3 = 1 + 3 = 4 (!!!!!!!)

Here's the problem, now top == 4, and you don't have a top_4 to show, and in fact, what you want to show is top_3, the same problem happens with the bottoms.

There are two ways of solving this: You can reset top and bottom to 0 at the start of the functions with the visual choice that modifies them. This means, every time you do the addition, the variable will be 0. The second option, and the one I recommend you do is to change the additions for assignations. What I mean with this is very simple: Instead of doing:

      - var top: "{top} + 1"

You do:

      - var top: 1

And the same with all the assignations, including body, top and bottom.

I think this should fix all your problems, but let me know how it goes.

Cheers!

Hello Alix, 

What exactly is the problem? Do the body parts appear at a wrong position? Do they disappear? I'll be easier to debug if you tell us exactly what is the intended behaviour and what is actually happening.

Hello everyone,

For the fans of old school point and click adventure games, we, Orbis Tertius, present to you, Personal Rocket.

Personal Rocket is a tale of paranoia and loneliness, the evils of capitalism and too much web surfing, the material world and the Occult universe. Your typical postmodern blues.

Currently released as a demo (that you can download and play for free here).


I invite everyone too to read the postmortem of this game, developed by a team of two amateurs with no money, from a poor country, during the 10 long years that took us to release this demo.

https://lunafromthemoon.itch.io/personal-rocket-demo

Hello, to change the spritesheets of the snowflakes you just need to change the files in the setup:

extra:
  spritesheets:
    snowflakes: assets/ambient/snowflakes.png 17 17
    snowflakes_large: assets/ambient/snowflakes_large.png 64 64

By changing the file names and frame size to the spritesheets you want, but keeping the keywords "snowflakes" and "snowflakes_large", you can use your own things.

If what you want to do is having more than one kind of "snow", and select it with parameters during the story, that would be something different, and you would need to code your own function (though it shouldn't be too hard if you base it on the current SNOW code).

For your second question, this is more tricky. It has to do with the order in which we add the display objects with Phaser. Since the snow emitters are created in the moment you call the ambient, it's on top of everything, including background, characters, etc. Phaser has groups of display objects, and in RenJS we have different groups to simulate layers, this layers are, from bottom to top:

  1. backgroundSprites
  2. behindCharacterSprites
  3. characterSprites
  4. cgsSprites
  5. GUI

The emitters, right now, are created outside of all this groups, so they are displayed on top of the GUI, if we want them behind the characters, then we have to add them to the group behindCharacterSprites.

In the ambient file, the SNOW, RAIN and SAKURA ambients use a helper function to create the emitters (it's very close to the top of the file, and it's called addEmiter). There, we create an emitter and put it to work. what you need to do is add it to the group, like this (second line):

var emitter = game.add.emitter(game.world.centerX, -32, options.maxParticles);
RenJS.storyManager.behindCharactersSprites.add(emitter);
emitter.width = game.world.width * 1.5;
The ambients RAIN and SAKURA will be shown behind the characters as well, but maybe it's ok for you.

Hello John, there might be a few issues here:

The ambient "snow", did you code it yourself? The one that comes with the Tutorial is called "SNOW" in caps, and doesn't take any params. If you're trying to call this one, you'll need to load the assets in the setup file:

extra:
  spritesheets:
    snowflakes: assets/ambient/snowflakes.png 17 17
    snowflakes_large: assets/ambient/snowflakes_large.png 64 64

And then call it in the story like this:

- ambient SNOW:
- other stuff
- ambient CLEAR:

Remember the name of the ambient should be before the ":", including CLEAR.

Hope it helps!

Luna

It's a really good idea, and easy to implement! Thanks!

You can donate on the RenJS tutorial page, or directly to my paypal: paypal.me/lunafromthemoon

Thanks, it's very appreciated, and if you have more suggestions about features you'd like to see, just keep posting them.

Hello, I'll probably work on this feature this week.

There are many different transitions, the no fade is called CUT, here's a list with the other ones: https://lunafromthemoon.github.io/RenJS/actions/showandhide/transitions/

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

Cheers!

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.