Circles of Salt
Updated 2 years ago
A top down Monsters in the dark shooter with a 6th sense
This game is a top down shooter at its heart. I wanted to work with the Tilemap and see how I can use that in combination with spirtes, Sprite Masks and make the game even more scary than a regular shooter in the dark.


At the end of day 1 the basic idea was born: Your character has two fields of view: one in the front, that works like your eyes: blocked line of sight and only able to perceive what exists in the "physical plane of existence" and another in the back, where invisible things can be seen.... the tickling feeling in the back.
The blocked line of sight part did not yet work, since there is a little more collision and raycasting required. The mind eye however already sees different things, like the blueish sprites seen below.


For day 2 I decided, that before thinking if I want more of an exploration based game, I first wanted to get the visual style into the right direction. So the third eye now does not see the ground tiles anymore and the line of sight is blocked by walls that are also under collision detection. The cool thing about this perspective is, that you not only see, what is hidden, but you can also see behind walls, which opens up some nice design avenues.

The line of sight mechanics is based on the ideas presented by Sebastian Lague in this video: but I had to adapt it to 2D, and then invert it, since the field of view there is covered by triangles, and I actually wanted to cover up, what is not in the field of view.
There are some issues with the edge cases, which need fixing eventually, but for now, that seems ok.

I started this game as an experiment with Tilemaps and Sprite Masks and as a response to my other game falling out of the rules of this contest, since I had put it on google play in beta on 2018-11-09 - before knowing about this contest :(. (see if you're interested in the other game: A puzzle with trains base on finite automata).

Day 3: Visibilty masking refined

Yesterday I had the layering as a core idea, but it was not formalized: the same monster sprite was visible in the third eye, as well as the physical view. So I knew that I needed to write down, which objects should occupy which sprite layer. I went for a simple rat, that would later run around the scene: a rat has a physical body, that should be visible, makes noise, that is independet of the vision field, and might have a spiritual representation. Here is how it looks now:
Now I have a basic idea, of what object needs to be put where. Also a small venn diagram was helpful to puzzle it out.

Ok, I feel like the engine pieces are assembled now, and I can start building a game around it.

Day4: Sprite Shapes and SVG

Friday I added the view mask, however as a mesh. Of course, once you start using meshs, you also need to consider lighting. Which is not a problem, if there is no light and your mesh should stay back. But if you want a different color, the approach falls apart. I tried over the weekend to adapt the mesh color to the mask, but failed miserably, since the color of the mesh would always be a little off, and I am not yet an expert in materials to make it right. But what is maybe like a Mesh, but in 2d (could also be in 3d really): A Vector graphic. So I dove into replacing the mesh with a Vector shape, and the result is better than for the mesh, since I do not need to handle triangles, that made some problems on edge cases, but can handle the Shape outline via a bezier curve.
The change to SVG was really easy, since I just needed to find out some properties of the Vector API, but had all the points I needed already at hand.

Next thing is to give a little life to my ghostly friends in the scene. Some theories say, that souls are kept in this world by an anchor. I wanted the player to see the souls connection to its anchor, and the Sprite Shape comes just right. So here is said connection.
Which together with a sprite Shape renderer looks a bit alive:

Day 6: A* Implementation and Lines of Salt

Yesterday I added a basic waypoint system, where the ghost has a list of places, it wants to run to. It was always running in a straight line however. With the A* implementation the player now has the option to draw lines of salt ( which are currently tile based). I adapted the code to work with tilemaps instead of the 3d sphere based graph that was originally created. And instead of a single map, it is now possible, that different entities use a different tilemap to navigate. A physical enemy or NPC could use the regular walls, that also block sight, while the ghost in my case is only stopped by the salt line created by the player.
I am not yet convinced by the totally tile based approach, since lying down the line is currently a bit tedious.

Lucky find: use a shader for some sprites on hit.

Sometimes the gifs I create show artefacts, like a single frame has a different color. Out of this effect a friend had the illusion that the character was hit by something. Quite cool actually. I found a shader that lets me modify colors on a sprite based on their position in the HSL or HSV wheel [4]. A simple script can now be added to my Sprite Renderers, and when the Event "hit" is fired, it changes the colors of the sprite for a second.


[1] Sebastian Lague in this video: as a start for 2d field of view.
[2] again, for path finding
[3] Oil6: 6 colors pixelart palette from Grafxkid
[4] Color Changer shader:
Jens Dehnert
Gaming Enthusiast - Owner
Saurabh Saxena
2 years ago
Founder of Delhi Technology Club
Unique idea💡