Creating Sprites Programmatically in Unity

So, I’ve been working on a game idea (yeah, I know, I haven’t actually completed any games thus far… my bad!), and have created some place-holder graphics for testing a few game mechanics. In other words, the visuals are not a permanent sort of thing. However, one of the mechanics will require some programmatically generated sprites to come into being as directed by a UI window the player will be presented with.

The basic setup is like this: The main game visuals are using Unity’s Tileset feature. The grid has (currently) three overlaid tilemaps: ground, ground shadows, ground clutter; the clutter being grass and flowers and other non-interactable bits for visual effect. Each tilemap moves up one in the z-sort order and all but the ground layer are using alpha transparency.

The programmatic sprites will be one z-sort layer above those (and below the player/NPCs) and is displayed at a target transform called CircleTarget. The initial code looked like this:

if (tex == null)
{
     tex = new Texture2D(256, 256);
     tex.alphaIsTransparency = true;

     Color c = Color.red;
     
     for (int x = 120; x <= 130; x++)
          for (int y = 120; y <= 130; y++)
               tex.SetPixel(x, y, c);

      s = Sprite.Create(tex, new Rect(0, 0, 256, 256), new Vector2(0.5f, 0.5f), 32f);

      CircleTarget.GetComponent<SpriteRenderer>().sprite = s;
}

This was intended just to put a small red square down where the CircleTarget lives, but instead I was just presented with this:

Ah, you need to apply changes – but also need to set things up for transparency. So, let’s try this:

if (tex == null)
{
      tex = new Texture2D(256, 256);
      tex.alphaIsTransparency = true;

      Color c = Color.red;
      Color a = new Color(1f, 1f, 1f, 0f);

      for (int x = 0; x < tex.width; x++)
            for (int y = 0; y < tex.height; y++)
                 tex.SetPixel(x, y, a);

       tex.Apply();

       for (int x = 120; x <= 130; x++)
           for (int y = 120; y <= 130; y++)
               tex.SetPixel(x, y, c);

       tex.Apply();

       s = Sprite.Create(tex, new Rect(0, 0, 256, 256), new Vector2(0.5f, 0.5f), 32f);

       CircleTarget.GetComponent<SpriteRenderer>().sprite = s;
}

Ah, much better, however the red pixels are surrounded by a buffer of whiteish/alphaish pixels. Of course, if you have existing sprites that you’re importing into Unity that use alpha and you want pixels to look precise, we need to change how they’re filtered. For programmatic sprites, you need to do the same thing.

tex = new Texture2D(256, 256);
tex.alphaIsTransparency = true;
tex.filterMode = FilterMode.Point;  // Add this line

...

And now we have a properly transparent background red square placed at our target location.

I’m a big fan of programmatic generation of meshes, sprites, and really everything. It makes the overall footprint of the game smaller and often consumes no more memory or processing power than what you’d have anyway – not always, but often. In this case, the programmatic option is actually significantly better than having a bunch of predesigned objects as sizes can be calculated on the fly and the variations that I plan for won’t require any palette-swapping, or even any palettes at all since it’ll just be stored in code. Generation of pixel art on the fly really opens up how this game mechanic can be used. I’m sure there will be more posts on it down the road – keep an eye out.

Pixel Art Tutorials – Small House

So I’m playing around with pixel art – which was the reason I started messing around with palettes. I am not an artist, but I want to gain some pixel art skills. I figured I’d share my trials and tribulations on this journey because… why not?

I’ll be using some simple tutorials from some great artists, including: Slynyrd (who also has a great blog), Pedro Medeiros, and Rémy Devaux.

I plan to try limiting myself to an eight or fewer color palette (though that may not always be possible). When the tutorial isn’t behind a paywall (is otherwise freely available), I’ll share both the tutorial and my result. Bear with me as the first attempts will likely not be so great.

First tutorial is from Slynyrd’s 3/4 Top Down House.

And my first attempt…

Small House, animated pixel art
Small House, animated pixel art

Not great, but not awful. At least it’s obvious what it’s supposed to be, which is more than I can say for many of my attempts at art.

Palettes

I’ve started working on some color palettes for a few projects. Because we aren’t limited to 8-bit visuals these days, I’ve taken an atypical tack. Rather than having a palette for a specific biome or environment, I’m working on creating a variety of 8-color palettes that can be combined as needed in any various environment. The benefit here is that the total colors in a scene are still being limited, and the palettes can be used to ensure a visual “feel”, but more total colors can be utilized in a pixel art format.

Sulfur Pools
Seafoam
Hot & Cold
Greyscale
Flames
Cool Blue

I have ideas for about a dozen more and plan to utilize each of them in various ways. I also have CSS stylesheets made for them. I’ll upload those at some point and add links for anyone who might be interested.