Skip to main content

Positioning Problems

You might try to position or center a sprite, but for some reason it doesn't work -- it is drawn in the wrong position. This may be because the image that the sprite uses has extra padding within it.

In the example below, the white circle is positioned at the center of the scene at { x: 100, y: 200}. The sprite, which is created from an SVG, is also positioned in the center of the scene at { x: 100, y: 200}, but the sprite appears off-center.

What happened? Within the SVG, there is a separate coordinate system, with additional bounds and padding that may not be apparent. This SVG already has padding around the circled X. When the sprite is drawn, it is centered -- but this centering includes the padding within the SVG!

How to fix this?​

There are two options:

  • Remove the padding from the SVG. This is the best option, because you can then reliably position the sprite. To do this, you will need specialized image editing software, such as Adobe Illustrator.
  • Reposition the sprite to account for the padding. If you change the sprite position to { x: 81, y: 181 }, it will appear centered. Although this is a quick fix, it is not recommended because this requires trial and error to get it right, and if you use the sprite in a different scene, you may need to reposition it again.
Loading...