[16.31] Layered sprite sheet / atlas weirdness

[Deadlock989]

Been experimenting with using layered animations for belts and belt-likes. It works fine - until you get undergrounds and loaders involved. See this gif (ignore the skipping, that's the gif, it's the weirdness on the right that's the issue):



All the animations in the belts have been replaced by two layers. The bottom layer is the grey belt. The top layer is a tinted arrow. It works perfectly well for belts and for splitters. But with the other two types, odd garbled artifacts occurs for the top layer.

I tested and tested and it's something to do with the small size of the arrow and possibly the fact that in the starting_* and ending_* animations, some of the frames are completely empty. If you have two layers of equal size and with pixels in every frame, it starts working perfectly for all four entity types. But I can't explain why it works perfectly well with the splitters, and not the other two layered types. When I look at the atlas sheets by pressing F3, the tiny arrows are all cropped and all mashed together with other things. That's not a problem for the belt and splitters, but it seems to be a problem for the undergrounds and loaders. If I go into graphics options and change the atlas size, I get different garbles.

I'm calling this a bug because it's (a) odd and (b) annoying, YMMV.

[orzelek]

Would be really helpful if you would attach the mod with this to make it for easier testing on devs end.

PS.
Really nice graphics

[Deadlock989]

Would be really helpful if you would attach the mod with this to make it for easier testing on devs end.

PS.
Really nice graphics

Thanks, I will do, needs a bit of tidying first, it's all over the place right now.

[Deadlock989]

I'm thinking it's the empty frames. This is a version with more going on in the mask layer so that there are only a handful of empty frames. It's better, but still broken. If this was a "feature" then it would be broken for all of them, though, not just the underground and the loader. Unless there's something I'm missing.

[Rseding91]

"empty frames"?

[Deadlock989]

"empty frames"?

Sections of the sprite sheet that are all transparent pixels.

[Deadlock989]

It's definitely something to do with the top layer's transparency. Here is a third version where there are no frames that are all transparent. You can see that for the belt_horizontal sheet (and belt_vertical, not shown) only for the underground and loader, the top layer is offset by the trimmed area. starting_* and ending_* work fine. So it only looks chaotic when the transparency border is different from frame to frame, almost like the top layer is being top-aligned or something depending on how it was trimmed for the atlas. This doesn't happen at all for the belt and for the splitter. And it doesn't happen for the bottom layer on the underground, which does have a few transparent pixels around the edge. These are all the exact same resources by the way, defined in the same way for each of the four belt entities.



I'll upload this mod and the graphics if it's something the devs want to investigate.

[Jon8RFC]

I'm no expert, but I noticed that the graphics option "optimize sprite atlas packing" relates to transparency. Do you have that enabled? If so, I wonder how it would act if you disabled it.

[Deadlock989]

I'm no expert, but I noticed that the graphics option "optimize sprite atlas packing" relates to transparency. Do you have that enabled? If so, I wonder how it would act if you disabled it.

Well spotted - but no, it didn't affect it.

I will make the code human-readable and post it later after work.

[posila]

Underground belts and loaders render just half of a belt and the way we handle cropping of sprites in scenarios like this assume all layers have the same size, if the sprite has multiple layers.
You'll need to set no-crop flag on your sprites.

Code: Select all

flags = { "no-crop", "lower-object "}

(lower-object flag would be default flag for belt sprites, so it should be preserved too)

[Deadlock989]

Underground belts and loaders render just half of a belt and the way we handle cropping of sprites in scenarios like this assume all layers have the same size, if the sprite has multiple layers.
You'll need to set no-crop flag on your sprites.

Code: Select all

flags = { "no-crop", "lower-object "}

(lower-object flag would be default flag for belt sprites, so it should be preserved too)

You, sir, are an international hero and I want to have your babies.

[Deadlock989]

Fix one problem, another pops up, like whack-a-mole.

Setting no-crop fixes underground belts, so, 75% of way there now.

It mostly fixes loaders, but for some reason it creates a slight gap between the belt_horizontal and the start/ending_side graphic, and also in the vertical orientation. It's 4 pixels wide in HR, 2 in LR.



I know that the belt is positioned correctly because if I remove no-crop and the top layer, it renders correctly again.

Dump of the definition:

Code: Select all

{
  animation_speed_coefficient = 32,
  belt_distance = 0,
  belt_horizontal = {
    layers = {
      {
        filename = "__DeadlockLoaders__/graphics/lr-belt-base.png",
        flags = {
          "no-crop"
        },
        frame_count = 32,
        height = 40,
        hr_version = {
          filename = "__DeadlockLoaders__/graphics/hr-belt-base.png",
          flags = {
            "no-crop"
          },
          frame_count = 32,
          height = 80,
          line_length = 32,
          priority = "extra-high",
          scale = 0.5,
          width = 80,
          y = 0
        },
        line_length = 32,
        priority = "extra-high",
        scale = 1,
        width = 40,
        y = 0
      },
      {
        filename = "__DeadlockLoaders__/graphics/lr-belt-mask.png",
        flags = {
          "no-crop"
        },
        frame_count = 32,
        height = 40,
        hr_version = {
          filename = "__DeadlockLoaders__/graphics/hr-belt-mask.png",
          flags = {
            "no-crop"
          },
          frame_count = 32,
          height = 80,
          line_length = 32,
          priority = "extra-high",
          scale = 0.5,
          tint = {
            a = 255,
            b = 10,
            g = 165,
            r = 225
          },
          width = 80,
          y = 0
        },
        line_length = 32,
        priority = "extra-high",
        scale = 1,
        tint = nil,
        width = 40,
        y = 0
      }
    }
  },
  belt_length = 0.5,
  belt_vertical = {
    layers = {
      {
        filename = "__DeadlockLoaders__/graphics/lr-belt-base.png",
        flags = {
          "no-crop"
        },
        frame_count = 32,
        height = 40,
        hr_version = {
          filename = "__DeadlockLoaders__/graphics/hr-belt-base.png",
          flags = {
            "no-crop"
          },
          frame_count = 32,
          height = 80,
          line_length = 32,
          priority = "extra-high",
          scale = 0.5,
          width = 80,
          y = 80
        },
        line_length = 32,
        priority = "extra-high",
        scale = 1,
        width = 40,
        y = 40
      },
      {
        filename = "__DeadlockLoaders__/graphics/lr-belt-mask.png",
        flags = {
          "no-crop"
        },
        frame_count = 32,
        height = 40,
        hr_version = {
          filename = "__DeadlockLoaders__/graphics/hr-belt-mask.png",
          flags = {
            "no-crop"
          },
          frame_count = 32,
          height = 80,
          line_length = 32,
          priority = "extra-high",
          scale = 0.5,
          tint = nil,
          width = 80,
          y = 80
        },
        line_length = 32,
        priority = "extra-high",
        scale = 1,
        tint = nil,
        width = 40,
        y = 40
      }
    }
  },
  close_sound = {
    filename = "__base__/sound/wooden-chest-close.ogg",
    volume = 1
  },
  collision_box = {
    {
      -0.2,
      -0.2
    },
    {
      0.2,
      0.2
    }
  },
  collision_mask = {
    "item-layer",
    "object-layer",
    "player-layer",
    "water-tile"
  },
  container_distance = 1,
  corpse = "small-remnants",
  ending_bottom = {
    layers = {
      {
        filename = "__DeadlockLoaders__/graphics/lr-belt-base.png",
        flags = {
          "no-crop"
        },
        frame_count = 32,
        height = 40,
        hr_version = {
          filename = "__DeadlockLoaders__/graphics/hr-belt-base.png",
          flags = {
            "no-crop"
          },
          frame_count = 32,
          height = 80,
          line_length = 32,
          priority = "extra-high",
          scale = 0.5,
          width = 80,
          y = 240
        },
        line_length = 32,
        priority = "extra-high",
        scale = 1,
        width = 40,
        y = 120
      },
      {
        filename = "__DeadlockLoaders__/graphics/lr-belt-mask.png",
        flags = {
          "no-crop"
        },
        frame_count = 32,
        height = 40,
        hr_version = {
          filename = "__DeadlockLoaders__/graphics/hr-belt-mask.png",
          flags = {
            "no-crop"
          },
          frame_count = 32,
          height = 80,
          line_length = 32,
          priority = "extra-high",
          scale = 0.5,
          tint = nil,
          width = 80,
          y = 240
        },
        line_length = 32,
        priority = "extra-high",
        scale = 1,
        tint = nil,
        width = 40,
        y = 120
      }
    }
  },
  ending_patch = {
    sheet = {
      filename = "__DeadlockLoaders__/graphics/blank.png",
      height = 1,
      priority = "low",
      width = 1
    }
  },
  ending_side = {
    layers = {
      {
        filename = "__DeadlockLoaders__/graphics/lr-belt-base.png",
        flags = {
          "no-crop"
        },
        frame_count = 32,
        height = 40,
        hr_version = {
          filename = "__DeadlockLoaders__/graphics/hr-belt-base.png",
          flags = {
            "no-crop"
          },
          frame_count = 32,
          height = 80,
          line_length = 32,
          priority = "extra-high",
          scale = 0.5,
          width = 80,
          y = 320
        },
        line_length = 32,
        priority = "extra-high",
        scale = 1,
        width = 40,
        y = 160
      },
      {
        filename = "__DeadlockLoaders__/graphics/lr-belt-mask.png",
        flags = {
          "no-crop"
        },
        frame_count = 32,
        height = 40,
        hr_version = {
          filename = "__DeadlockLoaders__/graphics/hr-belt-mask.png",
          flags = {
            "no-crop"
          },
          frame_count = 32,
          height = 80,
          line_length = 32,
          priority = "extra-high",
          scale = 0.5,
          tint = nil,
          width = 80,
          y = 320
        },
        line_length = 32,
        priority = "extra-high",
        scale = 1,
        tint = nil,
        width = 40,
        y = 160
      }
    }
  },
  ending_top = {
    layers = {
      {
        filename = "__DeadlockLoaders__/graphics/lr-belt-base.png",
        flags = {
          "no-crop"
        },
        frame_count = 32,
        height = 40,
        hr_version = {
          filename = "__DeadlockLoaders__/graphics/hr-belt-base.png",
          flags = {
            "no-crop"
          },
          frame_count = 32,
          height = 80,
          line_length = 32,
          priority = "extra-high",
          scale = 0.5,
          width = 80,
          y = 160
        },
        line_length = 32,
        priority = "extra-high",
        scale = 1,
        width = 40,
        y = 80
      },
      {
        filename = "__DeadlockLoaders__/graphics/lr-belt-mask.png",
        flags = {
          "no-crop"
        },
        frame_count = 32,
        height = 40,
        hr_version = {
          filename = "__DeadlockLoaders__/graphics/hr-belt-mask.png",
          flags = {
            "no-crop"
          },
          frame_count = 32,
          height = 80,
          line_length = 32,
          priority = "extra-high",
          scale = 0.5,
          tint = nil,
          width = 80,
          y = 160
        },
        line_length = 32,
        priority = "extra-high",
        scale = 1,
        tint = nil,
        width = 40,
        y = 80
      }
    }
  },
  fast_replaceable_group = "loader",
  filter_count = 5,
  flags = {
    "placeable-neutral",
    "player-creation",
    "fast-replaceable-no-build-while-moving"
  },
  icon = "__base__/graphics/icons/loader.png",
  icon_size = 32,
  localised_name = {
    "entity-name.deadlock-loader-1"
  },
  map_color = {
    a = 255,
    b = 8.3300000000000001,
    g = 137.44499999999999,
    r = 187.42499999999998
  },
  max_health = 170,
  minable = {
    hardness = 0.2,
    mining_time = 0.5,
    result = "deadlock-loader-item-1"
  },
  name = "deadlock-loader-entity-1",
  open_sound = {
    filename = "__base__/sound/wooden-chest-open.ogg",
    volume = 1
  },
  resistances = {
    {
      percent = 60,
      type = "fire"
    }
  },
  selection_box = {
    {
      -0.5,
      -0.5
    },
    {
      0.5,
      0.5
    }
  },
  speed = 0.03125,
  starting_bottom = {
    layers = {
      {
        filename = "__DeadlockLoaders__/graphics/lr-belt-base.png",
        flags = {
          "no-crop"
        },
        frame_count = 32,
        height = 40,
        hr_version = {
          filename = "__DeadlockLoaders__/graphics/hr-belt-base.png",
          flags = {
            "no-crop"
          },
          frame_count = 32,
          height = 80,
          line_length = 32,
          priority = "extra-high",
          scale = 0.5,
          width = 80,
          y = 480
        },
        line_length = 32,
        priority = "extra-high",
        scale = 1,
        width = 40,
        y = 240
      },
      {
        filename = "__DeadlockLoaders__/graphics/lr-belt-mask.png",
        flags = {
          "no-crop"
        },
        frame_count = 32,
        height = 40,
        hr_version = {
          filename = "__DeadlockLoaders__/graphics/hr-belt-mask.png",
          flags = {
            "no-crop"
          },
          frame_count = 32,
          height = 80,
          line_length = 32,
          priority = "extra-high",
          scale = 0.5,
          tint = nil,
          width = 80,
          y = 480
        },
        line_length = 32,
        priority = "extra-high",
        scale = 1,
        tint = nil,
        width = 40,
        y = 240
      }
    }
  },
  starting_side = {
    layers = {
      {
        filename = "__DeadlockLoaders__/graphics/lr-belt-base.png",
        flags = {
          "no-crop"
        },
        frame_count = 32,
        height = 40,
        hr_version = {
          filename = "__DeadlockLoaders__/graphics/hr-belt-base.png",
          flags = {
            "no-crop"
          },
          frame_count = 32,
          height = 80,
          line_length = 32,
          priority = "extra-high",
          scale = 0.5,
          width = 80,
          y = 560
        },
        line_length = 32,
        priority = "extra-high",
        scale = 1,
        width = 40,
        y = 280
      },
      {
        filename = "__DeadlockLoaders__/graphics/lr-belt-mask.png",
        flags = {
          "no-crop"
        },
        frame_count = 32,
        height = 40,
        hr_version = {
          filename = "__DeadlockLoaders__/graphics/hr-belt-mask.png",
          flags = {
            "no-crop"
          },
          frame_count = 32,
          height = 80,
          line_length = 32,
          priority = "extra-high",
          scale = 0.5,
          tint = nil,
          width = 80,
          y = 560
        },
        line_length = 32,
        priority = "extra-high",
        scale = 1,
        tint = nil,
        width = 40,
        y = 280
      }
    }
  },
  starting_top = {
    layers = {
      {
        filename = "__DeadlockLoaders__/graphics/lr-belt-base.png",
        flags = {
          "no-crop"
        },
        frame_count = 32,
        height = 40,
        hr_version = {
          filename = "__DeadlockLoaders__/graphics/hr-belt-base.png",
          flags = {
            "no-crop"
          },
          frame_count = 32,
          height = 80,
          line_length = 32,
          priority = "extra-high",
          scale = 0.5,
          width = 80,
          y = 400
        },
        line_length = 32,
        priority = "extra-high",
        scale = 1,
        width = 40,
        y = 200
      },
      {
        filename = "__DeadlockLoaders__/graphics/lr-belt-mask.png",
        flags = {
          "no-crop"
        },
        frame_count = 32,
        height = 40,
        hr_version = {
          filename = "__DeadlockLoaders__/graphics/hr-belt-mask.png",
          flags = {
            "no-crop"
          },
          frame_count = 32,
          height = 80,
          line_length = 32,
          priority = "extra-high",
          scale = 0.5,
          tint = nil,
          width = 80,
          y = 400
        },
        line_length = 32,
        priority = "extra-high",
        scale = 1,
        tint = nil,
        width = 40,
        y = 200
      }
    }
  },
  structure = {
    direction_in = {
      sheets = {
        {
          filename = "__DeadlockLoaders__/graphics/lr-loader-base.png",
          height = 32,
          hr_version = {
            filename = "__DeadlockLoaders__/graphics/hr-loader-base.png",
            height = 64,
            priority = "extra-high",
            scale = 0.5,
            shift = {
              0.125,
              0
            },
            width = 80
          },
          priority = "extra-high",
          scale = 1,
          shift = {
            0.125,
            0
          },
          width = 40
        },
        {
          filename = "__DeadlockLoaders__/graphics/lr-loader-mask.png",
          height = 32,
          hr_version = {
            filename = "__DeadlockLoaders__/graphics/hr-loader-mask.png",
            height = 64,
            priority = "extra-high",
            scale = 0.5,
            shift = {
              0.125,
              0
            },
            tint = nil,
            width = 80
          },
          priority = "extra-high",
          scale = 1,
          shift = {
            0.125,
            0
          },
          tint = nil,
          width = 40
        }
      }
    },
    direction_out = {
      sheets = {
        {
          filename = "__DeadlockLoaders__/graphics/lr-loader-base.png",
          height = 32,
          hr_version = {
            filename = "__DeadlockLoaders__/graphics/hr-loader-base.png",
            height = 64,
            priority = "extra-high",
            scale = 0.5,
            shift = {
              0.125,
              0
            },
            width = 80
          },
          priority = "extra-high",
          scale = 1,
          shift = {
            0.125,
            0
          },
          width = 40
        },
        {
          filename = "__DeadlockLoaders__/graphics/lr-loader-mask.png",
          height = 32,
          hr_version = {
            filename = "__DeadlockLoaders__/graphics/hr-loader-mask.png",
            height = 64,
            priority = "extra-high",
            scale = 0.5,
            shift = {
              0.125,
              0
            },
            tint = nil,
            width = 80,
            y = 64
          },
          priority = "extra-high",
          scale = 1,
          shift = {
            0.125,
            0
          },
          tint = nil,
          width = 40,
          y = 32
        }
      }
    }
  },
  type = "loader",
  vehicle_impact_sound = {
    filename = "__base__/sound/car-metal-impact.ogg",
    volume = 1
  }
}