how can i rotate effect by one image..

[GBear]

hi 

how can i calculate  like following image with pixi.js?

rotating fire is calculating by only one image.

it can be by pixi.js too.

but i don't know correct calculating theory..

i wanna draw follawing image to effect like magic

 

thx...

[mattstyles]

Hmm, tricky, not sure pixi is going to help you out too much as its effectively a 3d transform.

With CSS you'd create 5 elements (I'd use a top-down image, yours already has perspective), add perspective, play with their X and Y rotation so they are in position and then each tick update the Z rotation so they spin (I think, I may have fuddled some of the axes).

This can all be done with a rotation matrix, it's all the CSS applies behind the scenes anyway. Can you apply a matrix transformation to a pixi sprite? I think the tricky bit will be the perspective transform, if you apply an X or Y rotation to a DOM element using CSS then without perspective it will look flat and boring (the top and bottom edges will be horizontal), however, with perspective applied it will 'pop' out of the screen at you, this will be the key to making your animation work I think.

There are a few matrix libraries around if you don't fancy the maths yourself (I wouldnt blame you, it can get hairy).

Tricky bit will be applying the transforms to the pixi objects, although you could code this up in a shader, which would probably be the best way anyway.

[GBear]

@mattstyles hi matt

it will be do..

because it can be with spine on pixi.

i can create by spine and it can play on pixi.

but i wanna calculate manually.. so i wrote this post.



 

[GBear]

bandicam 2016-07-12 13-45-07-107.avi

upper video is played with pixi. and resource created by spine

skeleton.json is spine export data.
skeleton.json

if set any images, it rotae like that


to play in spine
   1.import json data
   2.add image on slot
   3.play

one of any images