Creating an unfogettable ambient


Creating a lasting experience for the player that convey mystery and excitement yet is not too intrusive or frightening is probably the decider whether our Umibōzu will succeed or crash and burn. While a lot of atmosphere and ambient can be build up with music and sound cues, having believable, coherent and frankly spoken “beautiful” art is arguably the most important factor. Last week, I already touched upon the water in Umibōzu and my aesthetic vision for the project. In this entry, I will continue giving some insight on the environment, this time focusing around the characteristic fog of Umibōzu, showcasing its creation process as well as explaining issues that arose along the way alongside future plans for the environment.



My first approach was to mess around with some watercolour brushes in photoshop to create some kind of smoke puffs. I played around with different opacities and blending options, as seen below, to get a general feel of the subject.



Following up on that, I created a basic particle system using Unitys‘ shuriken particle sytem engine. The particle system basically consists of a flat box-shaped emitter and the sprite. After adjusting some components in shuriken, such as the color and rotation over lifetime and the emission, the results looked surprisingly good already. In the end, I was not satisfied with it though, considering it is one of the key components of the game. One of the issues is quite obvious – only using one sprites looks lame af. Admittedly, playing with opacity and rotation did wonders, but once you realize that it is only one sprite, the cookie crumbles.


Organic Fog Animation

One of my goals was to maintain the organic and fluid character of fog, and it became clear pretty early that achieving such effect using Photoshop would take too much time. To be precise, I did not achieve satisfying results by trying to animate different types of opacity layers. Instead, I generated a fractal noise texture in Adobe After Effects, which I later on animated, adjusted and masked.


Looping smoke/fume sprites made in Adobe After Effects. These are animated gifs so they might take some time to load, clicking on them individually might result in a faster loading time.




Back to Photoshop / Unity

After a completed render process, I imported the video into photoshop and made a sprite sheet out of it. In total, the animation consists out of 36 unique frames. As mentioned before, creating such fluid looking animation by hand is arguably impossible (at least for me). In the picture below, you can see a X10 Y1 Z10 box emitting the sprites in Unity.


Fine-tuning different components turned out to be really time intensive in retrospective. The reason why i decided to emit in tiles rather than emit from a fullscreen-covering box  is that I tried out different types of emission rates as well as alpha values and hues, depending on how far away the fog is in comparison to the center of the screen (where the player character is). Having a gradient of increasing thickness might evoke a more mysterious and realistic experience. I tried to translate the feeling of only having near vision when covered in natural fog into the top-down setting of the game. The use of a particle system as well as smaller tiles makes it easy to customize the fog to our desire. Changes to density, color, size and even masking can easily be applied and thus result in a very flexible asset within our project.


Technical issues and limitations aside, the fog in Umibōzu is a rather tricky element, resulting in many groups rather going with a night setting to evoke the sense of mystery and uncertainty. As you might have noticed, the fog rather looks like smoke than uniform mist. Our art direction, which is aiming to represent asian ink on water paintings, makes it additionally more complex. The water in our game will represent asian rice paper and having natural looking fog on top of that might be not visual clear for the player. How could she distinguish between water and fog? Is combining fog and water the optimal way to go? Having darker particles indicating the fog could be a bridge between the water and the ink elements that will be portraying the enemies later on.

Screenshot of pre-alpha state footage, showcasing how water and fog blend


„The mist looked really great! Added a lot to the feeling of mystery“
„loved the fog and the how calm the game feels“
“ Positive aspects: Art and the feelings the art produces“


The results of the last playtest session just a few days before the alpha deadline showed that the fog in fact fulfilled its purpose and is a nice confirmation that what I am working on is heading in the right direction.


What’s next?

While the fog basically goes through changes on a daily basis, I am still uncertain of its future, but there are definitely some elements that I have in mind and am eager to implement, since I am not satisfied with its current state. First of all, I want to include additionally effects when the fog is interacting with the light and reveals obstacles or enemies. Emitting small threads of mist particles and fume at the edges of the light cone might result in a better experience for the player, underlining the misty nature of the effect. I am also looking into adjusting the sprite sheet a bit, since I have the impression that the edges stand out too much, which is good for indicating individual smoke puffs but not optimal in approach of a more uniform fog/mist in mind. Since we will be working a lot with ink later on, I am very motivated to push this to its boundaries to create an optimal yet minimalistic visual experience.

Thank you for taking your time reading about the making of the fog in Umibōzu. I am as excited as you to see how this will shape out in the future.


//Alexander Sinn





Comment on „Pixel Perfect in Unity„, a blog entry published by Benjamin Thomas Harbakk:

Hey Ben!
I hope my comment shows now 😀
Thank you very much for this blog entry. Not only do you present what you have done this week, but you also talk about what issues you have had and how you solved them. Great! Pixel Art is definitely not appreciated enough in my opinion, and after reading your entry I feel even more so.

Your blog entry is well written and coherent, making it easy for the reader to follow along.To support this, structuring the post like you have done it, going from what you have worked on to what issues you had and finally to how you solved them was a fantastic choice. Furthermore, I appreciate that you went the extra mile to visually explain the phenomenon of sprite line thickness and its influence in approaching pixel art. This also ensures that people without much knowledge about the subject have an easier time following your process and to understand the problems you have faced. In my opinion, the entry ends a bit too abrupt. I would have loved to maybe see a short conclusion of everything you have mentioned above, how much the difficulties influenced or even delayed your project or in general just some smoother ending. Nevertheless, I admire your passion and obsession for what you do, which will always end up in great results.

As I have already written on Ellens’ blog, the pixel art style absolutely seems to fit both of you and I am really excited to see how this project will shape out.
Keep up the good work!
-Alex Sinn


Comment on „The Role of a Lead Artist„, a blog entry published by Ellen Wetterholm:

Hi Ellen,
Thank you very much for this interesting blog post. You describe really well your motivation and your responsibilities that you as the Lead Artist of your group have for this project. Your blog entry is well written and coherent. It felt genuinely natural to read. I admire that you took this challenge of being the Lead Artist upon you. I am really happy that you state to have overcome your art block during this project and you seem to flourish doing so.

For me being the only artist of our group, I value that you give some insight on the workflow and talk about the benefits and struggles of working together as multiple artists. For example, creating good mood boards to prevent incoherence between art assets is something I probably have undervalued so far. It was also interesting to see how you have interpreted the lead artist role so far. Including your plans on how to proceed made this blog entry certainly well-rounded.

The pixel art style absolutely seems to fit both of you and I am really excited to see how this project will shape out.
Keep up the good work!

-Alex Sinn


8 Kommentare zu „Creating an unfogettable ambient

  1. Hallo!

    This blog entry is very cool! The way you describe what you are doing is both a narrative and a technical description, which is very pleasant and enjoyable to read. You describe very nicely each step that leads to the final decision and seeing that you are not really content with the result (even though the fog looks pretty damn nice and it expresses a lot of feeling), but you are eager to improve in the future is a useful skill that will pay off in the end. The fog seems to express a serene and peaceful feeling, like the calm before the storm, which undoubtedly sets the player on the edge and brings mystery and adrenaline to the experience of the game. I have really enjoyed reading this post and I am very excited to see what you come up with next. Keep up the good work because it looks beautiful so far!!

    PS: Sick FX skills by the way!


    Gefällt 1 Person

  2. I can appreciate how you’ve chosen to take the harder yet potentially more fruitful path by going with the fog instead of nighttime. You explained your process clearly and the way you described it was also clear. I feel like me or someone else could possibly reverse engineer what you did, which, if that was your intention, you’ve succeeded.

    Some English advice though. Words like ‘basically’ and ‘essentially’ are similar to ‘like’ in that there are mostly used to fill in the air between words without resorting to ‘ums’ or ‘uhs.’ I recommend not using them in writing as you could remove them and no one would see a difference. On the bright side, if I’m nitpicking about a word you used a grand total of two times, that means the content of your blog post is solid.

    As for distinguishing between the fog and water more clearly, you are right in that it’s a bit tricky when you are going for the papery look. If you don’t mind me backseat driving for a bit here, you might be able to tweak the water or shaders/lighting so the ripples/waves in the water have a high contrast and almost look inky. That way, you could have something like water = dark and fog = light similar to real life but without sacrificing your vision. Though it’s just a suggestion. What you do with it is up to you.

    Best of luck in development!

    – Christopher Haibel

    Gefällt 1 Person

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

Du kommentierst mit Deinem Abmelden /  Ändern )

Google Foto

Du kommentierst mit Deinem Google-Konto. Abmelden /  Ändern )


Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )


Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s