Jump to content

how can i rotate effect by one image..


Recommended Posts


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




Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...