Log In  

Note: To see updates to this post, check out my blog here.

So I was working on making an improved version of "The Story of Zeldo" and realized a few weeks ago that outlining my sprites was taking up more CPU cycles than I wanted it to. I was using the outlining function where the palette is cleared to a color, then 8 sprites are drawn around the actual sprite to produce an outline effect as shown here. I decided to change all the sprites that needed outlines to 10x10 instead of 8x8.


You can see the 10x10 sprites at the bottom right of the graphic. Getting rid of the outlining function like this improved my CPU, but wasted sprite space. I later needed more sprite space, but didn't want to take a CPU hit. Then I thought, what if I use rectangles to draw the outline of sprites instead of drawing actual sprites for the outline?

So that's what I did and I thought I would share. There are two parts to this process. The first is generating the rectangles for all your sprites and caching them at the beginning of the game.

-- 175 tokens
g_out_cache = {}
function init_out_cache(s_beg, s_end)
   for sind=s_beg,s_end do
      local bounds, is_bkgd = {}, function(x, y)
         return mid(0,x,7) == x and sget(x+sind*8%128, y+flr(sind/16)*8) != 0

      local calc_bound = function(x)
         local top, bot

         for i=0,7 do
            top, bot = top or is_bkgd(x,i) and i-1, bot or is_bkgd(x,7-i) and 8-i

         return {top=top or 10, bot=bot or 0}

      g_out_cache[sind] = {}
      for i=0xffff,8 do
         -- prev, cur, next
         local p, c, n = calc_bound(i-1), calc_bound(i), calc_bound(i+1)
         local top, bot = min(min(p.top, c.top), n.top), max(max(p.bot, c.bot), n.bot)

         if bot >= top then
            add(g_out_cache[sind], {x1=i,y1=top,x2=i,y2=bot})

init_out_cache should be called on startup in the _init function, passing in the start and end of the sprites you want outlined. Then the other part to outlining sprites is to actually outline them!

-- 84 tokens
function spr_out(sind, x, y, sw, sh, xf, yf, col)
   local ox, x_mult, oy, y_mult = x, 1, y, 1
   if xf then ox, x_mult = 7+x, 0xffff end
   if yf then oy, y_mult = 7+y, 0xffff end

   foreach(g_out_cache[sind], function(r)

   spr(sind, x, y, sw, sh, xf, yf)

This function just takes the rectangle data created from the init function and draws them as rectangles. A little bit extra logic is needed for xf and yf to work. Using these snippets, CPU efficiency of outlines is better than the old method, but worse than having no outline at all.

Although I thought this was cool, there are four at least four drawbacks to using this method:

  • The token count is much higher than the old method (259 tokens instead of 59 tokens).
  • The init function is not very efficient, because I went for token count on that instead of efficiency.
  • Currently sw and sh are not implemented with this method. So it only works on 8x8 sprites.
  • If a sprite is hollow, then the entire hollow region will be filled with the outline color as seen below.


The green arrow is the old method, the red arrow is the new function.

Here is a demo of this sprite outline function in action!

Cart #efficient_outline-3 | 2020-02-08 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA

As you can see, drawing 56 outlined sprites with this function saves over 15% of CPU usage compared with the old method!

As far as improvements go, here are a few areas this code could be improved on:

  • There are only up to 10 rectangles drawn for each 8x8 sprite, but some sprites could have less rectangles if extra code is added to check for duplicate rectangles.
  • Making variable sprite height and width, instead of just 8x8 (aka. sw and sh).

I am going to be using this in my Zeldo game in the future, but I will probably pre-process all the outlines I need and just store the rectangle data to save on token count. Comment if you have improvements for this, if you found this useful, or if you just have something to say. I might do another post like this in the future if I find people read this one :D.

P#61115 2019-01-22 22:38 ( Edited 2020-02-08 02:18)

How much of a cpu hit were you experiencing with 10x10 sprites? Every time I've tried to optimize something to use spr+logic+drawing instead of sspr, sspr has won.

P#72830 2020-02-06 20:57

Do you mean you used sspr to create the outline? Or you used sspr instead of spr for the Sprite drawing?

For this should work for 10x10 whatever the case without very much of a performance hit.

P#72881 2020-02-07 16:12

@sparr I just updated the demo with 10x10 sprites. If you run it again, you will see that there is over a 2x speed increase over the traditional method for 10x10 sprites. EDIT: I also included an approach of outlining with sspr. It is slightly faster than what I'm doing now, but the lines are jagged. That might only work in some use cases.

P#72899 2020-02-08 02:05 ( Edited 2020-02-08 02:21)

Hi, thank you for sharing this.

Would you mind comparing it with the version of outline_sprite which draws the outline with only 4 draw calls?

function outline_sprite(n,col_outline,x,y,w,h,flip_x,flip_y)
  -- reset palette to col_outline
  for c=1,15 do
  -- draw outline

  -- reset palette
  -- draw final sprite
P#99076 2021-10-23 16:28

@kikito I love this! so simple!

Here's a version where I use ... to pass along the spr arguments, saving some tokens:

function outline_sprite(outline_color, n, x, y, ...)
    -- set all colors for outline
    for i = 1, 15 do
        pal(i, outline_color)
    -- draw outline by stamping sprite in each direction
    spr(n, x + 1, y, ...)
    spr(n, x - 1, y, ...)
    spr(n, x, y + 1, ...)
    spr(n, x, y - 1, ...)

    -- reset palette and draw sprite
    spr(n, x, y, ...)

Relevant section in the doc explaining ...:

P#145863 2024-04-05 23:05

[Please log in to post a comment]