Importing PNG Layers from Procreate to Toonsquid

Procreate can export layers as individual files which is useful if you want to draw figures there and export them to Toonsquid.

Toonsquid’s animation tools are far superior to Procreate’s, especially the keyframing capabilities which Procreate doesn’t have. (Although will this change in Procreates upcoming September 2023 announcement? My bet is they’re about to announce a new animation app.)

However, importing layered drawings to Toonsquid has the problem of not automatically cropping the images to the pixel edges, but to the Procreate canvas.

This is good in one way, which is to ensure that when you add each element to the Toonsquid timeline, the layers will be in its correct position relative to the model as a whole. But it’s less good for keyframe animation, especially when adjusting anchor points or using transforms.

So here is the workflow I’m using:

  1. Export the model layers as PNGs from Procreate.
  2. Go to the Library in Toonsquid, and tap the + button.
  3. Select all the files and import them.
  4. Tap on each one to add them to the timeline. This will ensue correct positioning, but the bounding box will be the size of the Procreate canvas.
  5. Go back to the library, long press on the image you want to crop, then tap edit.
  6. Use the erase tool and draw on any empty pixels. This will force Toonsquid to crop the layer to the pixel edges. Tap the arrow tool to confirm that it has been cropped.
  7. Repeat steps 5 and 6 for all the images that you want cropped.
  8. Keep tapping the previous image name in the breadcrumbs in the top left to return to Scene 1 (or whatever your main scene is called).
  9. All of the layers are still in their correct positions, but their individual bounding boxes are at a more useful size.

It is clunky and I hope Toonsquid addresses this in a future update, but in the meantime it does open up the full power of Procreate for design while still getting more sensible bounding boxes for keyframe animations in Toonsquid.

The Ultimate Guide to Animation Tools for the Mac

As my workday leans more towards asset generation rather than straight coding, I’ve started looking at different tools available for creating and animating characters.

The art style I’m aiming for in my games is cartoony but won’t be pixel art so, while there are many great (and often free or low-cost) pixel art animation tools, I won’t be discussing them here.

Continue Reading →