Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
Tags

RenJS

HTML5 Visual Novel creation made easy and free · By lunafromthemoon

IDEA : an hover effect on visual choice items

A topic by Lapinay created Jul 09, 2019 Views: 426 Replies: 7
Viewing posts 1 to 4

Hi !  I'm thinking of an effect when touching/hovering a visual choice image.

It could just be another image for the hover for each image of a visual choice.

What do you think ?

Developer(+1)

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

Hi developer, may I ask if the hover effect is implemented? If so, how can I use it in a RenJs game? Thank you!

Developer

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!

Hi developer, I'm currently a computer science student, should be able to set it up. Would really appreciate the help!

Developer

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!

You're welcome  :)

Hi. So, if I wanted to use a button with a hover effect, what is the code I'd need to use in the story.yaml file? Do I need to use the 'visualchoice' command, or is there now a 'button' command instead? Couldn't find anything in the documentation..