Jump to content

Animate CC exporter


ptotheaul
 Share

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.

Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

  • 3 weeks later...

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.

 

 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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