2
\$\begingroup\$

  I'm learning to use createjs using this game level to-be as a sandbox: http://www.mboyeman.com/dashingdog/
  The level is composed of a single background image and 64X64pixel Sprites all coming from the same Spritesheet.
  Sprites were placed edge to edge, but spaces still appear between them when the page loads and the stage's scaleX and scaleY are set to .2 using a tween. I thought all elements of the stage should scale evenly with it, since they are its children, so am a bit lost.
         Any tips on how I can to make the whole page scale uniformly during a tween :?

\$\endgroup\$
1
\$\begingroup\$

You haven't shown any code, so I don't know for sure but I think your sprites have an origin that lies in the middle of it.

Here is how the actual sprite is created in model space:

enter image description here

As you can see we have 4 vertices at each corner. This makes our quad and we texture map it with the sprite we want. The important thing to note here is that the origin is in the center of the quad.

What does this mean? If you've done a bit of 3D programming you'll know that any rotation , scale or translation will be done to the center of the quad. So, if we rotate, we'll rotate about the middle, and if we scale, we'll scale inwards.

The vector ( -1, -1 ) scaled by 0.2 will result in the vector ( -0.2, -0.2 ). The quad becomes smaller from all directions.

You may have been expecting the opposite:

enter image description here

As you can see, the origin is now in the top left corner, this means every thing scales towards that. So, if you scale the vector ( 1, 1 ) by 0.2 we get ( 0.2, 0.2 ), and if we scale the vector ( 0, 0 ) by 0.2, we still get ( 0, 0 ). This was everything will stay together. However, the map will still, as a whole, scale towards the top left corner.

The answer here is really just perform the correct translations after the scale. Once something is scaled to the center, you'll want to translate it by half the new size towards the center of the entire map.

\$\endgroup\$
  • \$\begingroup\$ I gave this the best answer because it taught me something very useful, but the gaps were actually appearing whenever the 64px width tiles were scaled down to an odd number of pixels. I adjusted the tween to only scale the tiles to values which would divide 64 evenly (32/16/8/4/2), and its working now! \$\endgroup\$ – mannadu May 14 '14 at 2:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.