rotate and scale

[gri...@griller.org]

hi,

I have an entity displaying an sprite.
Moving is possible through coordinates.

But how can I rotate or scale the entity(sprite) ?



regards,
griller

[Chris McCormick]

Hello,

On Fri, Jul 29, 2011 at 03:10:41PM +0800, Chris McCormick wrote:
> I have an entity displaying an sprite.
> Moving is possible through coordinates.
>
> But how can I rotate or scale the entity(sprite) ?

You are right, this is missing. What I would do is use canvas operations to do your translate, rotate, and scale and draw the sprite at (0, 0). So something like this:

c.save();
c.rotate(angle);
c.scale(size, size);
c.translate(x, y);
mysprite.draw(c, [0, 0]);
c.restore();

Note that the bounding box returned by the sprite will be wrong. I am not sure if those operations are all supported on all platforms.

Cheers,

Chris.

-------------------
http://mccormick.cx

[gri...@griller.org]

hi,

thank you yes works great.

Updating the boundingbox is not yet necessary in my tests because the
playersprite is quatratic. :D

If needed I could create a separate entity for each direction and
switch through them after direction change. To have a matching
BBox.


,
gri

[Chris McCormick]

Hi,

On Mon, Aug 01, 2011 at 02:44:22AM -0700, gri...@griller.org wrote:
> thank you yes works great.

Great!

> Updating the boundingbox is not yet necessary in my tests because the
> playersprite is quatratic. :D
>
> If needed I could create a separate entity for each direction and
> switch through them after direction change. To have a matching
> BBox.

You could also just calculate the rotation of the BBox yourself quite easily and use the polygon collision algorithm instead. You just multiply each point relative to the centre by sin/cos of the rotation of the angle.

On the topic of collisions what I have done that worked well in the past was chain collision algorithms. So first you test colliding entities using a very fast circle collision. Any entities which collide you can refine with a polygon collision. Here is some source code with an example of that:

http://mccormick.cx/dev/blogref/AsteroidsTNG/js/AsteroidsTNG.js

Search for "this.collide_circle" to see how the Ship() class does it.