I thought I’d share my progress on the platformer I’m building. I’ve started to implement a few game features including a couple of parallax scrolling layers, basic character movement, collision detection with solids and some simple enemy AI.
Although the enemy doesn’t interact with the player directly, it will start chasing you if you get too close. It forgets about you if you manage to get enough distance between you though.
Check out a video here:
Massive thanks to Grisknuckle on Fiverr for platform and enemy concept, designs and character amends! I’ve been working with this artist a lot since I started the project.
I’ve wanted to learn how to make convincing pixel art clouds for a while now, and this week I had an opportunity. I’m working on a project that needs a parallax cloud layer, so it was a perfect time to look into how they work.
The first thing I usually do when leaning a new technique is look on the web for some examples, then see if I can copy the style. It gives me an idea of some of the processes I need to employ.
Most of them were daytime scenes, or sunsets, but I needed something in night-time colours. It still seems a bit bright for a background and I’ll probably change the palette later, but there’s enough contrast here to work with it easily.
This one is heavily stylised. However, it followed the pattern I saw in a lot of pixel art clouds: create a number of balls with diffuse lighting and gather them together into a cloud shape. This one uses some tails and a bit of crosshatching to give impressions of speed and diffuse cloudiness respectively.
There’s a bit more to it than that though. The cloud needs a good shape and clouds don’t quite look like a collection of bubbles.
Here I’m adding a darker colour, to represent shadow, and flattening the base. It’s a more complex cloud, but still just a collection of balls.
I like the flat base, and I’m teasing that base out on the left and right to attempt to give some direction to the cloud. It still comes across as a bit static though. And to be honest, the bubble effect is more noticeable and gives the wrong impression of the material the cloud is made of.
To start with I thought I’d play with the form a bit more. This one is more complex still, with smaller bubble units. It still looks very bubbly, but I like the way the cloud bunches up towards the left and tails off to the right. It definitely looks like it’s moving.
Here are two ways I found to reduce the bubbly finish. In the top one I added in a new shade between the highlight and the mid-brown, then I disturbed the edges of the shapes. As the motion of the cloud is horizontal I disturbed the edges using sideways mouse strokes. The overall effect is fluffier looking, and the bubbles are gone. It seems to be a successful technique and I like the result.
In the bottom image I started to merge the bubble highlights together. This changed the bubbles into what looked like more complex structures with rounded lines, much as you’d get in a cloud. It’s more stylised, but that’s not necessarily a bad thing. I like both results and I would probably choose one or the other depending on the situation.
Then it was time to put what I’d learned into practice. This is a section of cloud I’ve been drawing for the parallax background layer I needed. In the final result it should have some mountain layers in front and mist and stars behind. I like the fluffy effect and I think it should look good when I decrease the contrast.
This is a relatively long post, so if you just want the fix you can scroll to the bottom, download the tool and watch the instruction video.
The Unity 2D tile system is an excellent way to build levels quickly, but it’s easy to end up with small subpixel gaps between your tiles. Depending on your tiles and settings, floating-point rounding issues can make these gaps very obvious and constant or subtle and brief. Neither is good for a released game.
I’ve come across many potential solutions to this issue, most of which are quick fixes that either store up problems for later or flat out don’t work. So you can try turning off antialiasing, or setting the tile margins to a small negative number, playing with your filter settings… A hunt around Youtube will yield many of these kinds of tips. If they work for you then great! But they can come at a cost. Using negative margins can cause issues with subpixel alignment, changing antialiasing settings may decrease the quality of your overall graphics, and so on. Some people say the problem only happens in play mode, but I’ve had it happen consistently it in a build, and after things seemed to be fine for months.
The further you are into development, the greater the impact of any potential solution you may want to apply. It’s best to get things sorted properly, and as soon as possible.
So what’s really going on?
As we all know, Unity is a 3D system so it uses floating-point operations for positioning. when it’s dealing with pixels, this can lead to rounding errors. Rounding errors lead to gaps. And gaps lead to the dark side.
Unity has a way of dealing with these gaps, but it’s a little… let’s say “counterintuitive”. It will go back to the original tile sheet and sample the pixels next to the tile, then use those to fill in the gaps.
When I was hunting for a solution, the best explanation I found was in this video. It clearly demonstrates the problem and proves that the cause is the pixels surrounding tiles in the tilesheets.
As you can see, the gaps could end up being made from transparent pixels, random bits of other tiles, tile sheet background colours… Whatever is found around each tile in the tilesheet.
So the solution is theoretically easy. “Simply” surround all of your tiles with pixels that mirror the edge pixels, as you see in the video.
The result is like magic. Tiles become rock solid across all of play mode, editor mode and builds.
This may seem like a daunting task though, depending on how far you are into development. You may have many tiles to process. Luckily we developed a simple editor panel to help take the sting out of the task. You can load up your tilesheet, dial in your size, offset and padding values, check that the tiles are slicing nicely, and it will fix them in place. You’ll only have to touch the sprite editor slicing tool again if your original offset and padding values are less than 1 and 2 respectively (for what should be obvious reasons). The plugin will tell you the values you need and prompt you to update the settings.
You can see the panel in use here:
Or download it here.
By downloading this tool you accept that Chonky Pixel do not take any responsibility and are not liable for any damage caused through the use of this product, be it indirect, special, incidental or consequential damages (including but not limited to damages for loss of money, loss of time, loss of business, loss of profits, interruption or the like.)