On my game team, I am the sole UI/UX Designer. We recently added a new mechanic that is darkness. The flame would make the area around him bright, but it would get darker the further away it was. We thought the easiest way to implement this would be by having the darkness be an overlay, meaning the task of developing it came to me. Utilizing a reverse masking component I used the flames background light as the image. This made the first area have no darkness right around the flame and outside of that reverse mask image, it was dark. I added 3 more to make it seem like it was darker the further away it was from the flame. With each mask layering over one another, I had to adjust the opacity, so it seemed like it was a slow progression of darkness. I also wanted to make it so the player could still see a bit even when they were away from the flame. I had to tweak the opacity value a couple of times based on player feedback until it felt just dark enough. My next step was to fade the darkness in and out. I used the animation system to do this. I have each reverse masking image slowly fade in so the darkness feels like its easing into the scene. I played around a bit with the speed of this as well as when each image would come in, so the entire thing wouldn't blindside the player as well as come in fast enough so the player could continue about the level. I had thought to have each level of darkness be called separately but had decided against that. The game is so small it doesn't need to have each level of darkness happen one by one and can all happen in the same animation. With the fade-in animation done I simply needed to make a fade out now. Instead of going light to dark, it goes dark to light. Reusing the animation in the reverse felt off here, so I opted to make a new animation. With all of the darkness animations complete I then had to make sure the darkness would follow the flame and grow and shrink with it. I made the panel match it's transform to the flame, so it would follow them. Then in the flame's health script where its size is changing, I used the same system for changing the flame's size to change the area of light size. Below is a video to demonstrate the system, since it can be hard to visualize.
- Kara Laumann
