ptotheaul

Animate CC exporter

Recommended Posts

Hi.

I know there has been some discussion about how to export an Animate CC animation for use with Phaser/Pixi on the forums but it all is kind of old so I figured I'd ask to see if there is a new method of doing this.   I have a movie clip that has other nested movie clips(each with a timeline animation) that need to be triggered.  This is a conversion from Flash and works in createJS but it's really slow and I think would be much better if done with Phaser or Pixi.  Also do any of the Phaser IDEs have timeline animators in them?  That could also be an option.

Share this post


Link to post
Share on other sites

Untitled-1.png.f4e1424f1cd004989db1b4c22e61cb6c.png

Hi,

In the screenshot above you can see the spritesheet export window of Animate CC. I go to this windows by right clicking on a movieclip and selecting "generate spritesheet" from the menu.

On the spritesheet export window, inside the red rectangle you can see that I prefered custom and insert witdh and height to tile my movieclip contents horizontally. If this customly orginized with and height are not fits the minimal needs you will see an exclamation mark next to image dimensions selection box. This means you should increase the height or width till this mark is disappeared. Then in the dark blue rectangle you see that I prefered basic algorithm and JSON data format. Border and shape padding arrangements is up to you. I recommend to export the spritesheet directly into your phaser asset directory.

Untitled-2.png.0787d01758886d0ba36d3c23f480cac4.png

Then in Phaser Editor open a pack file and in the screen above after createing a section click on the "add asset" button inside the red rectangle and choose spritesheet entry inside the dark blue rectangle.

Untitled-3.png.da652a875c59146efc42c2feca073aac.png

Then open the json file that Animate CC created with png image file while exporting spritesheet. Insert values of width, height and padding to the fields of Phaser Editor's spritesheet properties. After finishing and saving this pack editing session you can use this spritesheet by drag-dropping this asset into your canvas visually.

Share this post


Link to post
Share on other sites

Hi,

Very nice explanation of how to load a spritesheet in Phaser Editor :)

 

In addition, you can learn how to preview that spritesheet and animations here: https://phasereditor2d.com/docs/preview-window.html#the-sprite-sheet-preview

 

And how to create the animations in the scene editor:    https://phasereditor2d.com/docs/canvas.html#animations

 

In a future, we should implement a timeline animation tool.

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.