hyperandroid / CAAT

Canvas Advanced Animation Toolkit
hyperandroid.github.com/CAAT
MIT License
727 stars 117 forks source link

Actors with SpriteImage can't rotate or scale correctly with anchors #145

Closed hugoruscitti closed 10 years ago

hugoruscitti commented 10 years ago

Hi !, i'm starting to use spritesheet images in my caat game, but when i rotate or scale em', caats don't compute the anchor values correctly.

I think caat don't take the sprite frame size correctly. For example, i made a little demo using two sprites:

captura_de_pantalla_16_05_13_20_45

Both sprites uses the same rotation and anchor, but the right sprite show a bigger bounding box (the original texture size i think) and rotates with other anchor value.

With no rotation, the sprites show the same bounding box difference:

captura_de_pantalla_16_05_13_20_40

(the first image was taken with 'bounding box' debug option enabled)

You can see my testing code in:

https://github.com/hugoruscitti/texturepacker-caat-exporter/blob/master/demo/game.js

hyperandroid commented 10 years ago

setBackgroundImage method has a second optional parameter, a boolean, which indicates whether you want the actor to be equal in size to the image. so call setBackgroundImage( spriteImage, false ) to make it work properly.

2013/5/16 Hugo Ruscitti notifications@github.com

Hi !, i'm starting to use spritesheet images in my caat game, but when i rotate or scale em', caats don't compute the anchor values correctly.

I think caat don't take the sprite frame size correctly. For example, i made a little demo using two sprites:

[image: captura_de_pantalla_16_05_13_20_45]https://f.cloud.github.com/assets/99183/515772/7645912c-be84-11e2-866a-9f916d90c0ab.png

Both sprites uses the same rotation and anchor, but the right sprite show a bigger bounding box (the original texture size i think) and rotates with other anchor value.

With no rotation, the sprites show the same bounding box difference:

[image: captura_de_pantalla_16_05_13_20_40]https://f.cloud.github.com/assets/99183/515780/c20d2304-be84-11e2-9cdc-01cf1853e1df.png

(the first image was taken with 'bounding box' debug option enabled)

You can see my testing code in:

https://github.com/hugoruscitti/texturepacker-caat-exporter/blob/master/demo/game.js

— Reply to this email directly or view it on GitHubhttps://github.com/hyperandroid/CAAT/issues/145 .

hugoruscitti commented 10 years ago

Thank Ibon!, but when i set the second parameter to false, the sprite rotates from the top left corner, ignoring the anchors values:

rotation

hugoruscitti commented 10 years ago

Hi, i found a ugly workaround, but i want to get some alternative: when i set the actor size equals to be equal to the frame size it's works as i expected:

captura_de_pantalla_21_05_13_16_32

captura_de_pantalla_21_05_13_16_31-2

I'm reading the caat source code, but i don't find when the actor change the image index. I think in that point caat needs to set the actor size to the frame size. could you guide me to my about it?

hyperandroid commented 10 years ago

I don't know what your problem is w/o taking a look at your code, but plenty of the CAAT bundled demos use sprite sheets to animate independent frames.

look at :

http://hyperandroid.github.io/CAAT/documentation/demos/demo9/behaviors_org.html http://hyperandroid.github.io/CAAT/documentation/demos/demo7/anchors_org.html

where sprites are used for rotation, etc. Post your code, will be way better for me to figure out.

hugoruscitti commented 10 years ago

Hi ibon !!!, thanks, I write a smaller example code of my problem:

https://github.com/hugoruscitti/texturepacker-caat-exporter/blob/master/demo/simple_rotation/simple_spritesheet_test.js

In the code, there are two sprites, one with a single image attached and the other with a spritesheet attached. I spec both rotates from the center point, buts the actor with the spritesheet image attached does not change its anchor.

I see that caat works great with regular spritesheets (like in demos, created with "initilize" method with rows and cols) but i don't figure how to use texture spritesheets (created with "initializeFromMap" method and diferent frame size).

My code are attached as a zip file too:

https://www.dropbox.com/s/8vc7xgm2iufosjx/simple_rotation.zip

Thanks again ibon !

hyperandroid commented 10 years ago

sorry i missed this email. to use results from a map, use the map key name instead of an index. that is all.

i will post a sampke since some other people are asking for the same feature.

Hi ibon !!!, thanks, I write a smaller example code of my problem:

https://github.com/hugoruscitti/texturepacker-caat-exporter/blob/master/demo/simple_rotation/simple_spritesheet_test.js

In the code, there are two sprites, one with a single image attached and the other with a spritesheet attached. I spec both rotates from the center point, buts the actor with the spritesheet image attached does not change its anchor.

I see that caat works great with regular spritesheets (like in demos, created with "initilize" method with rows and cols) but i don't figure how to use texture spritesheets (created with "initializeFromMap" method and diferent frame size).

My code are attached as a zip file too:

https://www.dropbox.com/s/8vc7xgm2iufosjx/simple_rotation.zip

Thanks again ibon !

— Reply to this email directly or view it on GitHubhttps://github.com/hyperandroid/CAAT/issues/145#issuecomment-18941451 .