Tag: programmatic

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.