Spawning two sprites in Bevy will spawn at the center of the transform. So if we have a black 3x3 block and a white 1x1 block, the smaller block will spawn at the center of the larger block, which spawned at the global
This is more clearly apparent if we make the 3x3 block a 2x2 block.
If we're making a game like Tetris, this is a problem because we want a set grid with 1 block offsets, not half-block offsets.
So if the offset is set by the center of the transform, we can do some calculations to set the offset to make it look like the origin is in a different location.
We'll spawn another square, the same size this time with a transform, which will offset the sprite relative to it's origin.
The reason the we have to do math to calculate half the width and offset is that the default meshes in bevy spawn at the
(0,0) point of the transform, which places .5 of the sprite to the left and .5 to the right of
(0,0) . To fix this and place the bottom left of the mesh at
(0,0) we can use a custom mesh.
Bevy gives us the ability to create a default
Box, which we can turn into a
Mesh for use with the
Mesh has an attribute called
POSITION that indicates the vertices on a unit box. The default box has vertices at places like
(-0.5, -0.5, 0.0) (it's specified in 3 dimensions even though z is always 0), which indicates that half of the box will be on one side of the x or y axis and half will be on the other side. To fix this we can map over the vertices and add
0.5 to each value that is
-0.5, which will put the original point
(-0.5, -0.5, 0.0) at
(0.0, 0.0, 0.0) and the farthest point, originally
(0.5, 0.5, 0.0), at
(1.0, 1.0, 0.0). This is what offsets the mesh against the transform.
The interior of the
Vec needs to be a 3 element array, so we clone and mutate locally
The type signature of
setup() needs to change. If you're unfamiliar this will likely feel a bit magical, as we get the
meshes argument by declaring that we want it in the
setup function arguments as
ResMut<Assets<Mesh>>. Diving into why this happens is a topic for another post.
We can now use our new mesh to spawn the same sized block as the black and blue blocks. This one will be pink.
We include the
transform for clarity, but the default transform is the same as this one, so we could omit it if we wanted to
We can also now confirm that a new purple 1x1 block at
(0,0) will spawn squarely in the first quadrant of the pink 2x2 block.