Hi, I am adding some fireflies to a night scene. They are currently objects with part of the background included. I would like to fade them out and fade them in, staggering them so they are not all on at the same time. Right now I am just making them visible or non visible and it's not really the effect I am looking for. Any suggestions?
You may use Object.Transparency (https://adventuregamestudio.github.io/ags-manual//Object.html#objecttransparency) for this.
This is just a random example for illustration, in the room's script:
int ffdir; //1 for fading in and -1 for fading out.
int ffcoutner = 0; //coutner of the sprite's animation
function repeatedly_execute_always(){
ffcoutner += ffdir;
if (ffcoutner == 0||ffcoutner == 200) ffdir = -ffdir; //Change direction)
if (ffcoutner > 100) objFF.Transparency = 200 - ffcoutner;
else objFF.Transparency = 100;
}
You may use it as a reference and tweak it to meet your needs (timing, etc.).
(Don't mind the spelling of coutner. It's just an old AGS meme that few people may get.)
Thank you. This is exactly what I was looking for. I'll play around with this.
It depends a little on what exact effect you want to achieve. For example, do you want them to always be fading in and out, "bouncing" between those states, or would it be more that they are on for a while, then fade out, stay off for a while, then fade in?
And should the fade be at a constant speed, or vary (for example that the lights come on more quickly than they fade out)?
Here is one way to do it if you have 10 fireflies numbered as objects 6-15 (just as an example), and they're meant to stay on and off for some time, but with random variation:
#define FIRST_FIREFLY 6 // Object index of first firefly
#define FIREFLY_COUNT 10 // Number of fireflies
#define FIREFLY_FADEIN_SPEED 10 // Fade in over 0.25 seconds (assuming GameSpeed==40)
#define FIREFLY_FADEOUT_SPEED 3 // Fade out over 0.82 seconds
#define FIREFLY_ON_AVG 120 // On average, stay on for 3 seconds
#define FIREFLY_OFF_AVG 240 // On average, stay off for 6 seconds
bool fadingIn[FIREFLY_COUNT]; // Keep track of whether each firefly is fading in or out
function repeatedly_execute_always()
{
for(int i=0; i<FIREFLY_COUNT; i++)
{
Object* firefly = object[FIRST_FIREFLY+i];
if(firefly.Transparency == 0) // Firefly on
{
if(Random(FIREFLY_ON_AVG-1) == 0) // Wait a random number of cycles
{
// Start fading out
fadingIn[i] = false;
firefly.Transparency = clamp(firefly.Transparency+FIREFLY_FADEOUT_SPEED, 0, 100);
}
}
else if(firefly.Transparency == 100) // Firefly off
{
if(Random(FIREFLY_OFF_AVG-1) == 0) // Wait a random number of cycles
{
// Start fading in
fadingIn[i] = true;
firefly.Transparency = clamp(firefly.Transparency-FIREFLY_FADEIN_SPEED, 0, 100);
}
}
else // Continue firefly fading
{
if(fadingIn[i])
firefly.Transparency = clamp(firefly.Transparency-FIREFLY_FADEIN_SPEED, 0, 100);
else
firefly.Transparency = clamp(firefly.Transparency+FIREFLY_FADEOUT_SPEED, 0, 100);
}
}
}
This code uses a helper function clamp() to ensure that we don't try to set Transparency to a value less than 0 or greater than 100. It's very simple:
int clamp(int value, int min, int max)
{
if(value<min) return min;
if(value>max) return max;
return value;
}
@eri0o 's game Don't give up the cat (https://www.adventuregamestudio.co.uk/site/games/game/2643-don-t-give-up-the-cat/) also features fireflies. He's made his source code available on github (https://github.com/ericoporto/dont-give-up-the-cat), in case you are interested. (I haven't compared his code to the other suggestions already made in this thread, so this suggestion may very well be redundant.)
Hey the code to my fireflies is here
https://github.com/ericoporto/dont-give-up-the-cat/blob/main/dont-give-up-the-cat/FireflyFx.asc
The only small detail is that is a 3D game, so they move in 3D space. But it is easy to adapt it.
I probably won't be able to get to this until after the holidays and I'm sure I'll will need more help at that time.
I would like to see a small snippet of the fireflies in action if you have it, EriOo.
Quote from: Ghostlady on Fri 20/12/2024 05:33:59They are currently objects with part of the background included.
If they are going to be moving, that will have to be done a different way. Not that that should be difficult, unless the firefly lights interact with the scenery (e.g. throwing shadows).
I mean. I'm just a noob here, but couldn't you use Snarkey's 'Particles' module?
Quote from: Snarky on Sat 21/12/2024 06:55:39Quote from: Ghostlady on Fri 20/12/2024 05:33:59They are currently objects with part of the background included.
If they are going to be moving, that will have to be done a different way. Not that that should be difficult, unless the firefly lights interact with the scenery (e.g. throwing shadows).
They won't be moving, just a slow fade in and out, using multiple objects.
The fireflies in my game are in the region of the cat graves. Screen capture looks weird because of the way I had done an additional effect on top where each alternate frame has a different effect. :/
Hi, I am back on the fireflies now. The fireflies were painted onto a background and then I am cutting out the area to make it as an object. When I lay the object onto the game background, it never aligns correctly. It is either a byte to high or low or a byte to far left or right. I did get one out of five to work. I am very confused about this. Do I have to cut them out a certain way or place them on the background a certain way?
Here is an example of one of the objects, top left outlined in red, that I cannot get to align to the background. If I toggle the object off and on it will shift on the screen.
(https://mysterymanor.net/junk/AGSSample2.jpg)
Quote from: Ghostlady on Wed 22/01/2025 20:28:25Hi, I am back on the fireflies now. The fireflies were painted onto a background and then I am cutting out the area to make it as an object. When I lay the object onto the game background, it never aligns correctly. It is either a byte to high or low or a byte to far left or right.
I do not understand this, and screenshot does not really help, as I am not sure what I'm seeing there. What is the red outline, is this the place you need to put object on? Do you mean that you cannot position an object on certain coordinates, or that the image looks unaligned even if coordinates are precise?
If former, then have you tried adjusting object's position with keyboard (arrow keys) or setting X,Y properties in the properties grid?
If latter, then please tell: what is your background resolution, and what is the image's resolution? Does the object image contain only fireflies, or it contains a part of background as well?
Quote from: Ghostlady on Wed 22/01/2025 20:28:25If I toggle the object off and on it will shift on the screen.
Um, please elaborate, toggle how (is it by using the "eye" button in the room menu?), and do you mean that its position properties (X,Y) actually change when you make it visible or not visible?
It sounds like if the fireflies are turned on or off during the game, you can see the rectangular area shift slightly because the object isn't aligned with the background exactly.
I'd use Photoshop's Change Canvas dialog to crop the background to precise coordinates, then enter those in the editor.
One used to use only even coordinates for objects in highres games to avoid precisely the "one pixel off" problem, but newer versions don't use lowres coordinates internally any longer.
Another way to solve this is to remove the background of the fireflies sprites entirely. PNGs and AGS both support alpha channels, i.e. varying degrees of transparency.
Quote from: Khris on Wed 22/01/2025 22:42:59One used to use only even coordinates for objects in highres games to avoid precisely the "one pixel off" problem, but newer versions don't use lowres coordinates internally any longer.
Hmm, if this game was upgraded from a very old version of AGS (which it is, I think?), then this setting is kept after upgrade.
You may double check this in General Settings -> Backwards Compatibility -> Use low-resolution coordinates in script.
If it's turned True, that means that you are using old-style coordinate logic, where in high-res games the actual object position is halved. For example, in 640x400 games the object positions are in 320x200 resolution, so you can only have them on even coordinates.
Quote from: Crimson Wizard on Wed 22/01/2025 23:02:21Quote from: Khris on Wed 22/01/2025 22:42:59One used to use only even coordinates for objects in highres games to avoid precisely the "one pixel off" problem, but newer versions don't use lowres coordinates internally any longer.
Hmm, if this game was upgraded from a very old version of AGS (which it is, I think?), then this setting is kept after upgrade.
You may double check this in General Settings -> Backwards Compatibility -> Use low-resolution coordinates in script.
If it's turned True, that means that you are using old-style coordinate logic, where in high-res games the actual object position is halved. For example, in 640x400 games the object positions are in 320x200 resolution, so you can only have them on even coordinates.
All of the above is true. Very old game using low-resolution coordinates in script.
What Kris said, "
It sounds like if the fireflies are turned on or off during the game, you can see the rectangular area shift slightly because the object isn't aligned with the background exactly." is also true. For testing purposes, I am turning the objects off and on for the very reason to see if they are on the background correctly.
That being the case, is sounds like the objects have to be cut out a certain way?
This is the background in the game:
(https://mysterymanor.net/junk/night_straight1.png)
This is what I am cutting the firefly objects out of to put on the above background:
(https://mysterymanor.net/junk/night_straight2.png)
These are two examples of cutouts I am trying to place onto the background:
(https://mysterymanor.net/junk/Firefly2.png)
(https://mysterymanor.net/junk/Firefly3.png)
Quote from: Ghostlady on Thu 23/01/2025 03:40:19That being the case, is sounds like the objects have to be cut out a certain way?
If you have "low coordinates" on, then you must either
- cut the pieces defined by even coordinates (multiplies of two).
- create images that have only fireflies on a transparent surface, and not parts of the background. In that case any coordinate mismatches will be less of an issue. But of course that's much more work (depends on how this background's source is done, i.e. as a layered image or not).
I originally asked the graphic artist if they could create the fireflies on a transparent background, which I would prefer, and this is how they replied.
(https://mysterymanor.net/junk/Firefly.jpg)
I would need to ask if the background has layers.
Based on her explanation, does anyone have any ideas on how to create the fireflies? Graphics are not in my wheel house so I don't know how to reply and this is why we opted to do the cutting out.
If I opted to do the cutting how do I get them cut on coordinates? Is this a graphics program with a grid or something like that?
- cut the pieces defined by even coordinates (multiplies of two).
Quote from: Ghostlady on Thu 23/01/2025 04:22:14If I opted to do the cutting how do I get them cut on coordinates? Is this a graphics program with a grid or something like that?
- cut the pieces defined by even coordinates (multiplies of two).
The trick is simply to choose even positions when you drag a rectangle to select the portion that you want to cut.
Choose a point with even coordinates when you start dragging, and make sure that the selection has even width and height.
Normally the graphic software should display the coordinates you are selecting when you're dragging a rectangle, somewhere on a status bar or a tooltip.
Ah ok, this helps. Let me see what I can come up with. Crimsom Wizard to my rescue again.
Older versions of AGS didn't have alpha channel support yet. The pink thing only applies if you do not use alpha channels.
You can tell your artist that AGS supports alpha channels and she can just draw assets on a transparent background using partially transparent pixels and store it as PNG and it will appear in the game just fine.
I was probably confused about the situation. Somehow I assumed that these fireflies are a part of the older assets, created years ago, and that you have to cut them out from those old assets. Are these on contrary new assets created right now by an artist?
As for whether to have these animations on a transparent surface, or having them with parts of background, I suppose that depends also on artistic features. For example, if the fireflies cast light on some object in background (such as trees), then the animation frames should also include trees (or parts of trees).
If that's not a issue, then of course it may be better for an artist to create fireflies on a transparent surface, separate from room background, and save them as 32-bit ARGB images to let keep half-transparent pixels.
But then, before that, we'd also have to clarify this: what is your game's color depth? is your game actually 32-bit, or lower (16-bit, 8-bit)?
The fireflies are new assets being created. The background is from the original game.
The fireflies are shedding light on pieces of the background. See screenshot above.
The color depth is 16 bit.
I'm going to go with the fireflies on the background. Seeing how they look on the background with the light shedding outwards, has a nice look to me.
I just need to figure out how to cut them correctly.
Alright, the situation is clear now. Since your game is 16-bit, then you won't be able to have translucent effects (at least not easily).
Speaking of cutting out firefly frames, perhaps your artist can make these cuts for you? :).
Quote from: Crimson Wizard on Thu 23/01/2025 22:16:04Alright, the situation is clear now. Since your game is 16-bit, then you won't be able to have translucent effects (at least not easily).
Speaking of cutting out firefly frames, perhaps your artist can make these cuts for you? :).
I wanted to try it myself first. I have a 2023 version of Paint Shop Pro. I need to google a little to figure out how to get the coordinates. If I can't figure it out I'll definitely ask the artist. She will do it for me for sure. :)
The fireflies are now working, very cool. I slowed the speed down a little. Tell me what you all think, if I should change anything.
https://www.youtube.com/watch?v=CaYjGR-JUOU
If it were me, I would really try to have one sprite for each light, so that they would fade in and out individually and not in a cluster. Aside from that, you can probably play around with different parameter values to make it behave the way you want.
I agree.
I am posting the final version in case someone else has an interest in Fireflies. Thanks everyone for the help. I love it.
https://youtu.be/TxVn0UbQFfg
How about if they move?
(https://i.imgur.com/fymWNs6.gif)
Here's the room script I used: https://pastebin.com/th66nY8u
@Khris, the game is 16-bit, so it can't use alpha-transparent sprites.
Right; one could draw each fly in multiple steps though to achieve more or less the same effect.
You could use objects or room overlays for each firefly, instead of raw drawing.
That would have significantly better runtime performance, and then these may use their Scaling and Transparency properties.
Kris...this is really awesome! I could use this on a separate scene in the swamp. Its more "magical" with a red fox. Can I actually do this with this older game?
It should work with overlays, like this: https://pastebin.com/1YDztxrj
(https://i.imgur.com/w3xbzMe.gif)
The sprites I used are a ~20 pixel circle and a 6 pixel circle; just put the sprite numbers into the #define lines at the top.
The script should work as-is with the exception of the Game.Camera parts; you might have to replace those with GetViewportX/Y(). Or just remove the offset altogether if the room isn't scrolling anyway.
Can you send me one of your sprites so that I can have my graphic artist take a look at it?
Sure, it's literally just two filled circles: https://imgur.com/a/tMe63VR
In-game, the glow circle is displayed at about 20% opacity.
I created a new room, added the background, copied in your script. I grabbed your two sprites, added them to the sprites in the game and put their number in the define area. When I run the game there are no fireflies. What am I doing wrong? I tried commenting out the lines with Game.Camera, still no fireflies.
Hmm, did you link to room_Load and room_RepExec in the room's events table?
Ah that was it.
https://youtu.be/tZLHsJGzUB4