This week's blog post is about the visual effects used on the flare in the game and how it was created using the built in functionality in the SFML. Namely the scaling functionality for SFML's sprite. This method was used because it was convenient and time saving to use the inbuilt functionality instead of programming it by my self. It was also probably better because it has been developed by the SFML community.
the shrinking sprite
To create the shrinking effect of the light the sf::sprite.SetScale() function was used. SetScale() takes two float variables as arguments, x scale and y scale, which are basically multipliers for the width and height of the sprite. This means that if .5 is put in as argument for x the sprite's width will shrink to half it's size and if 2 is put in, the width will increase to the double of the original width. To shrink the sprite over time with this function a variable that represents how much burning time is left on the flare before it extinguishes, can be used. The flare's lifetime is defined by a variable and in the update function a variable increases with the time since the last time the update function was called. Using these two variables we can get the normalized value of how much of the burning process has taken place. This is done by dividing the currently burned time with the total possible amount of burning time. The value given by this division can not yet be used in our set scale because if we used this value the scale would begin at scale 0 and grow towards scale 1. What is wanted is the opposite of that, so to make it shrink instead of grow the inverted value of this is needed, which can be obtained by subtracting the value from 1. This will invert the value and what is left is the normalized value of how much time is left. This value can be put into the setScale() with the effect of shrinking the light sprite according to how much burning time is left.
the randomness
The decrease of light was only a part of the effect that was sought. It was also sought an effect that would make the flare look like it was flickering. To achieve this a random number generator was used. The random number generator was used because it has a potential to do things inconsistently and a flickering light is just that, a light with inconsistent brightness. The random number generator was set to generate a number between 0.9 times the normalized time left and the normalized time left. This gives the light a random brightness every frame between maximum brightness and a bit bellow the maximum brightness which resulted in the wanted flickering effect.
Hey, I'm here to give you a comment on your post, so here it goes:
ReplyDeleteFirst off, I find this post very valuable, because I personally have tried to make a shadow/light effect in the game my group are doing. I have tried a similar thing, but didn't get it to work completely. You gave me and interesting idéa on how doing it, so I will try it out. So, I find this post very valuable. I tried something similar, that I had a black square that blocked the whole screen and the player had a circular-shaped with a low radius that you could see through. But I scratched this idéa when I wasn't able making it look good.
Second: Just a tip: It's easy to understand what you mean if you are a programmer, but if you are an artist, you would have understood much from this post.
Third: Where is the picture? ( :P).
It's going to be fun trying the final game. It's going to be nice how this shadow-effect is affecting the gameplay. I've seen your game in alpha and beta so I got high expectations for the finals. Continue with this amazing work!