I’ve wanted to get animation for the trees into the game for a while, but could never quite manage it. I’ve tried many different approaches to this, but always the main issue is that the game renders at a fixed low-resolution pixel grid.
Some other pixel art games choose to render the game at a higher internal resolution than that of the actual pixel art, which means that you can rotate sprites without much aliasing. You can see a comparison between a high-res rotation-based animation (left) and how the effect breaks down when you render at a low resolution (right):
I have never liked the look of pixel art games that mix different resolutions, so I chose to render Taiji in a way that would force all effects in the game to be rendered at the same resolution of the base pixel art. But as you can see above, this means that rotating pixel art tends to cause strange artifacts that sort of look like edges sliding across the image. Obviously, this is very unaesthetic looking, and we need to try something else.
One possibility that I tried was to add in some noise to attempt to jitter out the sampling and create a smoother look. This removes the “sliding edges” appearance, but ends up adding in a lot of noise along edges. The effect could perhaps work well with a game that has a more forgiving art-style with a lot of noise built into the graphics.
So, with a couple of failures under my belt, I decided to rule out large motions such as rotating the entire tree, and instead I focused my efforts on animating the leaves on their own. This type of effect can be done fairly easily in a shader by simply adding in a noise offset when you sample the texture for the leaves.
This is certainly an improvement, but the effect is a bit too strong. Also if you look at it closely, it feels more like the tree is underwater than being effected in the wind. We could tone the strength of the distortion down, but then the motion becomes so subtle that it’s almost not worth having.
Another possibility that I attempted was to custom author a secondary texture which would control how the distortion was applied. I tried using a noise texture with leaf pattern built into it. I even did some tests pre-rendering leaves with Blender so that I could use the scene normals of the leaves to modulate the distortion.
I didn’t save this iteration of the shader, but suffice to say that it did not work much better than the purely random noise I was using earlier.
However, I started to think that an approach similar to how I animated the grass would be effective. The grass is essentially just a flat texture on the inside, with all the distortion happening along the outside edges.
So what would it look like if I did the same for the trees?
We’re getting close! This effect is even more pleasing, with a better balance between the details of the original pixel art and significant enough motion to be worthwhile. However, the motion feels a bit unnatural because it is confined completely to the outside edges.
What I chose to do to resolve this was to re-incorporate the idea of having a secondary texture control where the distortion effect can be applied. When used to highlight the internal edges, this forms the final effect. The wind map texture is below on the left. You can see that some interior pixels are colored red, those are the ones that are allowed to be distorted in the final effect on the right:
Overall, I’m pretty happy with how this came out. It adds some much needed motion to the trees, giving those scenes a more dynamic feel, and it doesn’t distort the base pixel art so much that it feels unnatural.
For a fun bonus, remember when I said that the unconstrained effect looked like water? I ended up using the same effect for this reflection in the water:
It’s hard to be sure exactly what to write about, since most of the work lately has been going into painting over each of the areas in the game. But this past month I’ve finished drafts of art for two major areas in the game, so I guess I’ll post up some screenshots!
(You can click any of the screenshots to view them full-size)
This area is styled after a Japanese shrine and centered within a large lake.
This area is an ancient ruin seated atop a narrow plateau. Some parts of the ruins have seen better days.
You may recognize this area from an earlier iteration of the art. Some parts of this area are still unfinished, art wise, and I need to add in the shadows. (I paint in all the shadows by hand!)
Here’s a bonus screenshot of another area in the game.
This past month, I’ve been both working on Taiji and crunching on promotional materials for Manifold Garden. (Which is out now on Apple Arcade and the Epic Games Store, by the way! You should check it out if you like puzzle games. I get no extra money if the game does well, so I am just recommending it personally.)
Seeing off Manifold Garden has been exciting. But turning back around to work on my own thing has been a bit depressing. It still has so much further to go before it will be done! I’ve been trying to keep my head on straight but it’s been a bit of a damper on my spirits.
The Breaking Point
Some technical aspects about the visuals in Taiji started to come unraveled earlier this month. One of the decisions I made early on was how to sort all of the individual graphical elements in the game. Although for 3D games, sorting is just handled as part of the perspective (except for translucent objects), in 2D games you usually set up an explicit sorting order.
In Unity, there are actually two systems you can use to handle sorting, the first is a sorting axis, which is equivalent to the Painter’s Algorithm: objects that are further away from the camera are drawn first and closer ones are drawn last.
The other system is Sorting Layers. These are just buckets you can put different objects into and you can set the order in which the buckets draw. My initial idea was to only use 3 sorting layers for the entire game: a layer below the player, the player layer, and a layer above the player. This seemed like it would work, because you are additionally allowed to specify a numerical sorting order for the objects within each layer.
The primary benefit of this approach is that it is player-centric. This means that I know that all objects in the “Below Player” layer will always be drawn below the player, and vice-versa for the “Above Player” layer.
But what happens if I want to have objects that are above the player at one point, and then below the player at another?
There are two types of scenarios where this problem might happen.
One is “vertical” objects that the player can walk around, such as trees. If we place them below the player, the player will be walking above the branches, and if we place them above, then the trunk will float over the players head. This problem is easy to solve by simply placing those objects on the player layer. In this case, Unity will fall back to the sorting axis and sort by distance. However, we can tell Unity to sort using the Y-axis, instead of the Z-axis. This means that objects that are higher on the screen than the player will draw behind them, and those that are lower, draw in front.
The other slippery sorting situation is when the player is underneath an area which they can climb up into. A basic example of this is a bridge over a canyon. The player might be in the canyon, walking underneath the bridge, but they can also climb out of the canyon and end up above the bridge, walking across it.
This scenario is challenging to achieve under a simple 3 layer (Below Player, Player, Above Player) setup. The only real way to do this is to either shuffle all the objects between the above and below layers, or have copies of the objects on both layers, and only enable whichever is appropriate depending on where the player is.
I was using a mixture of both of these systems up until recently. It worked, although it was quite cumbersome. You’re moving around of dozens of objects from layer to layer all the time, and you can’t even see any of the visual issues until you run around the game. But eventually you run into scenarios where there need to be more than two layers, and it all falls apart.
So I made the difficult decision to change the entire sorting system used by the game. Under the new setup, each area in the game has a sorting layer, and the player is moved from layer to layer as they walk around the world, always staying at order 0 in whichever layer they are in. Objects with negative sort values will be below the player in that sorting layer, and those with positive values will sort above the player.
This setup makes so much more sense. Since only the player ever moves around, I never have to worry about the environment looking any different than it does in the editor.
In fact, I feel like I should have changed things over much sooner than I did.
I think this particular type of mistake was misguided optimization, which is even worse than premature optimization. Instead of optimizing for my sanity, and the simplicity of building the game over the long haul, I tried to optimize for the number of layers without being sure that it would ever be an issue. It wasn’t a performance concern, more just an aesthetic one.
I think it’s important to accept that your game is going to be a big icky mess at some point anyway, so you just should just leave the cleanup until you can actually see what you’re dealing with.
In any case, things haven’t been perfectly rosy with the new setup, but I’ll leave that story for next month perhaps. See you soon.
Proof Of Work
Perhaps you’d like to see the work I did related to Manifold Garden? If so, you can check out the following links:
I also did a ton of odds and ends stuff that I can’t really take the time to list here, but suffice to say it’s been a bit busy.
So, I’ve been continuing to bang away on the visuals for the game, which means I could just post up some more screenshots like I did last month, but I thought it might be more fun to do a bit of a technical breakdown of the waterfall effect in the game.
You can see what the finished effect looks like below:
So, there are obviously lots of references I can go to for waterfalls. Photo references, other games. I happen to live near quite a few streams and rivers, many of which have waterfalls.
A few of the bigger influences on this effect are the waterfalls in the Zelda games Breath of the Wild and The Wind Waker. You can see examples of both of those below:
I’m actually not a huge fan of the look of the waterfalls in Breath of the Wild, but the way in which the effect is technically achieved is fairly obvious there, and so I consider it somewhat of an influence on my approach. Really, both of the above waterfall effects, as well as the waterfalls in Taiji are essentially a variant on a basic scrolling texture effect.
Below on the left, you can see the source texture I use for the bulk of the waterfall effect. And on the right you can see and what it looks like when scrolled across a distorted UV map. ( A UV map is what tells the graphics card which part of the 2D texture to draw on each part of a 3D model. In this case, the UVs are stretched in the shader, with the underlying geometry just being a flat rectangle)
So the basis of the effect is that I overlay two copies of this texture, with different offsets and slightly different scrolling speeds. These form the white foam layer.
After that, I make two more layers, only these scroll much faster and are partially transparent. This forms a second layer to go beneath the white layer.
Both these layers are composited together and then overlaid (at a lower alpha and with a fade towards the top) onto a screen-space gradient that acts as the water’s base color. The gradient is subtle but resembles the reflection of a blue sky.
Alright, so we now have the base of our effect, and can add the edges. The edges are just another scrolling texture using the same distorted UVs as before. The left and the right edges are just mirror images of eachother, offset a bit along the direction of scrolling. The UVs for the edge texture are also pinched in a bit at the top of the waterfall. Below, the original edge texture is on the left and how it gets distorted and scrolled is on the right
The black area of the edge texture is used to mask off the effect so that it can be composited into the rest of our effect and blended in. We add a slight fade to transparency at the top of the waterfall and we’ve completed the base effect.
At this point, we add a churn effect to the bottom of the waterfall, using particle systems. One system is emitting large circles which shrink and fade out, the other system emits smaller circles which fly up and then are killed off when they cross the bottom edge of the waterfall. You can see the two particle effects separately below.
When we put it all together, we get our full waterfall effect:
Thanks for reading, hopefully this was an interesting dive into some of the technical art that I’ve been doing lately for the game. 🙂
So, the gameplay is getting close to something resembling an overall rough draft. Most of the areas that I want to put in are playable in a rough form. This is great, but unfortunately hides the fact that I’m still way behind on the art and the music.
The past month has therefore been focused on trying to “art up” as much of the game as possible. I’ve still been quite busy with the “part-time” contract job I mentioned last month, so I’ve gotten less of that done than I would’ve liked to. But in any case, progress has been made.
Here are some screenshots of areas as they’ve come along so far.
Obviously, everything is still very WIP, and these screenshots should not be considered indicative of the look of the final game. There’s still a lot to be done, but I’m pretty happy with how these areas are coming along and the overall aesthetic.
So, the next question is: “What about the music?”
There are currently only two tracks of real music in the game, which is (needless to say) quite a bit less than I think a complete game should have. However, I have found it somewhat difficult to get a handle on the musical style for the game.
I think there’s two main reasons for this. The first is that it’s just plain hard to come up with themes that are strong, dramatic, and not too grating to listen to for a long time. Essentially the same challenges as any game.
The additional problem that I think Taiji has is that I have to be a bit careful about the types of music that I choose, to not accidentally draw too much attention away from the puzzles, or introduce any red herrings.
I presently find myself quite stymied by the music, but this is not the only time in the history of this project that I’ve found myself stuck on one problem for quite some time. Progress can stall for a while until I get a sudden breakthrough and then things start progressing very fast.
So, I will either end up finding a good way forward soon, or I’ll have to look into hiring a musician. I’m not opposed to seeking more experienced help here. Music, to me, is the heart and soul of a great game, and great music can carry much of the weight of a game’s tone and atmosphere.
In any case, don’t submit your resumes just yet. I may perhaps find my way.
See you soon with another post (ideally before the end of the month, as I need to make up for the fact that I’m a month behind!)
So, this past week I spent a few days polishing up the character movement and animation, primarily focusing on adding running animations. The results are as follows (Recommend watching at 60fps):
I’m pretty happy with the running animations, although they do make the walking animations look a bit cheap by comparison. I figure most players will just toggle running on and play the game always running everywhere, so it’s probably fine if the walk animation is not as developed.
This week, I’ve also been trying to think a bit more concretely about the big picture ideas for the game, including story and world design.
Right now the world design of the game is pretty much non-existent. Everything in the game is just laid out in the way that was most convenient to fit everything together without overlaps. However, I’d like to do something that has a much more overlapping and interconnected feel.
My ultimate inspiration for world design is Dark Souls (wait wait don’t close the browser tab). I don’t necessarily want to attempt that game’s scale, but one of my favorite things about the game’s world is how you head off in a long winding direction that you think you will never come back from, only to find an elevator that takes you straight back down to the central hub area, unlocking a massive shortcut in the process. This creates a wonderful sense of surprise and is a real tangible reward for exploration. And the best thing about it is that there’s almost no cheating involved in the 3D space of the entire game world.
If you’ve played the game, you probably already know all about this. But if you haven’t, here’s a good look at the world of Dark Souls using a map viewer tool:
Now, obviously this is a very high bar to attempt to reach, especially in a 2D game, but it has at least got me thinking about what types of tools I will need to accomplish anything even remotely close to that. (More on that perhaps later)
Secondarily, I’ve been thinking a bit more about what I want to do about story. What store do I want to tell with the game, and what methods of storytelling are appropriate, both to the style of the game, as well as my limited resources (I am the only one making the game, after all).
I’ve been pretty stumped on this, as I don’t want to resort to JRPG style characters who simply stand around and bark repetitive lines if they’re not involved in a cut-scene. Nor do I really want to put text in the game at all, if I can help it. Luckily, inspiration struck this week when I was watching my girlfriend play through Journey. I had played the game years earlier, but the way in which the game communicates a clear story through entirely non-verbal means struck me.
As with my inspiration from Dark Souls, I don’t necessarily want to emulate Journey’s scope, and I don’t plan on putting cut-scenes in the game. (Or, at the very least, they would be extremely minimal at the start and the end of the game.) In particular though, I’m interested in how the game uses murals hidden throughout the world to communicate a backstory element. So, you may see a similar approach in Taiji, as it’s a good cost-effective and unobtrusive approach.
It took a bit longer than I anticipated, but I’ve completed converting all of the puzzles in the game over to the new puzzle panel system I described in the last blog post. I probably could have made this a bit easier on myself if I had more deeply integrated the new system within the old one, but I wanted to keep things as cross-compatible as possible so I more or less have both systems working in parallel.
There’s a couple reasons for doing things this way, one is that I didn’t know how well it was going to work, and so I might want to abort the whole thing partway through. This is much easier if I didn’t break any of the existing stuff in the process. The other reason is that it’s just still easier to design new puzzles using the old system. I can just duplicate a panel and I don’t have to wire it up to anything for it to work. The new system, at minimum, requires wiring up each panel to it’s starting tile.
Going forward, I may choose to more deeply integrate the starting tiles, so that puzzle panels will automatically generate them as needed, and I don’t have to do any particular wiring. But going forward, it shouldn’t ever be as much of a hassle as converting everything was in the first place.
I also took this opportunity to heavily revise a couple areas in the game, in order to test out approaches to the art, make something that is a closer approximation of what the game might be like when finished, and encounter issues which I might not encounter otherwise.
Here are a couple screenshots of the “arted up” areas.
Overall, I’d say I’m fairly happy with how the artwork has been coming along. The game seems like it might actually not look terrible, and might have something approaching a unified art style. It is admittedly a bit time-consuming to get this level of fidelity, but I think the results speak for themselves.
The other thing that I’m doing this week, is another round of playtesting. I’m pretty sure the next development steps are going to involve cutting a bunch of puzzles. However, I want to get a more broad base of feedback so I can make more informed decisions about where I should let certain things stay in the game and what areas might feel too tedious or drawn out.
Apologies if you’ve been on the testing waiting list for a long time. Feel free to hit me up in the comments, or on twitter, if you’re interested in testing sometime soon. (Or if you expressed your interest a long time ago and are becoming irate)
I have to admit, I’ve been feeling a bit wore out lately. I haven’t worked full time on a game for many years, and it can be exhausting. No matter how much you love a project, it will always go through ups and downs.
I guess I would say that I’ve reached a new plateau. There’s a certain amount of satisfaction mixed with depression that hits whenever I hit one of these new plateaus. In one sense, the game is clearly better than it’s ever been, but it’s also clear how much I could still improve things. Reaching one plateau means I now have to plan the route to the next plateau.
I’ve already taken some of those first steps though. One of the biggest ones was making this overhaul to the panel interaction method. I had been putting that one off for a long time, as there were still so many easy wins in sight on the puzzle design. Now I have migrated everything over, and the puzzle design challenges seem daunting in comparison. I don’t lack for ideas, but I do lack somewhat for the energy.
In the diagram of flow state, I’d say I’m more in the frustration section than the fiero section. I feel a bit overwhelmed and stymied. I’m sure I’ll get back into the zone soon enough though.
It’s been too long since I wrote a devlog entry. Mostly this has been because I’ve been doing a lot of nitty gritty puzzle design stuff, and I try to keep the blog posts fairly high level so that people can read without getting too spoiled on specific puzzles. I’ve been working through the checklist for the next test build, which involves time-consuming revisions to most of the areas in the game.
The most recent area I’ve finished revising is the “dice” puzzles. Here’s a birds-eye comparison shot between the area “pre-revision” and after. The right version is the new and revised area.
You’ll notice that the overall structure of the area hasn’t changed too much, but internally there have been a lot of changes. Both some entire sets of puzzles have been added, as well as some of the earlier puzzles have been cut or moved to other areas.
I thought it might be fun to put this image alongside the previous revisions of this area, so you can see four different versions of the same area side-by-side.
Needless to say, the area has continued to evolve over the years, and will most likely see more changes in the future. The continuing level of flux is the main reason why it’s all still using prototype graphics. Luckily I feel like things are starting to congeal a bit more, so I should be able to start “arting it up” pretty soon.
There are 60 puzzles in the newest version of the area, although it may change to where the player is only required to solve a much smaller subset to “complete” the area.
Speaking of completing areas, I added a fun little effect that happens when you finish an area. This gives the player a bit more satisfaction at that moment and leaves them with little confusion as to whether they need to do more to finish the area.
I may or may not get it in for the next round of testing, but I’d also like to add a warp that allows the player to warp back to the central hub area after finishing a world.
Something else that I spent an inordinate amount of time on over the past month or so is implementing a mouse cursor that exists in world-space instead of screen space.
This means that when the camera moves, the cursor will be fixed relative to the world. For example. if the player was interacting with a puzzle panel, and the camera moved, the mouse cursor would continue to hover over the tile on the panel that the player was originally pointing it at.
You can see a comparison below, screen-space is on the top and world-space is on the bottom. The mouse cursor is represented by a fairy.
This is good because it allows me the flexibility to move the camera without having to worry about negatively impacting the players experience.
However, since I’ve had some people complain about the possibility of this being disorienting or annoying, I’ve decided to maintain the old cursor system in parallel with the new one, until such time as I decide that the world-space cursor (or the old one) is better and I don’t need the other.
Can’t say too much about what I worked on this week, but it’s pretty cool I think.