Large Sprite Animation

Help & Support
1

Hi, I have a 2d animated characetr that I originally wanted to bring in an fbx to my app but when I bring the animation data in from c4d (which has a lot of animated point data) it is completely wrong so I have decide that the next option would be to bring it in as an animated sprite.(unless there is a way to fix this but I tried all day without success)

The animation is only 2 seconds (60 frames) but I would want the images/frames to be quite hi res so there is no pixelation in an an AR app. Is this an accepted methods? Would the animation file size be too big?

Finally,how do i do this? I looked at the documentation but its quite brief…do I really need to click one by one on each exported file/frame and convert to an atlas. Isnt there some way I can drag in the exported animation frames easily?
Thanks

2

It may not fit in a sprite texture atlas. The max suggested size for mobile is 4096x4096.

That means 8 x 8 columns and rows and gives you a max frame size of 512px 512px. In terms of file size, yes it can be very big, especially if it’s a PNG.

Ideally you would have it as a single texture in a grid, it’s a few clicks to create the frames and into a sprite asset.

3

Without either the FBX or video to show the issues, it’s hard to say.

4

Also depending on the type of animation it is, perhaps Spine could be an option?

5

Dropbox link to a video of the animation: https://www.dropbox.com/s/3g26mqhjsyhdybl/FBx_Playcanvas_Issue.mp4?dl=0

You can see it has bones, effectors and point level animation. Barely any of it makes it through to Playcanvas.

6

@slimbuck Should we be able to support the animation shown in the MP4 above? Would we need a sample FBX to work with?

@Grimmy Looking at the animation, Spine (where we have a runtime: https://github.com/playcanvas/playcanvas-spine) could be an alternative? Also, exporting to GLB could be another option where the model and animation can be loaded at runtime.

7

it’d be also worth testing in unity to see if they can use that fbx. But I suspect that it’s similar story to play canvas … bones are supported, but effectors and point level animations most likely not (I’m not even sure what those are, but sounds like some custom shader based animations perhaps)

8

Is transparent video an option? I’m guessing not but hey, worth asking.

Regarding Spine, the body/arm should be easy enough, but could I do the fire in Spine? I don’t really know it very well. Thanks

9

Spine seems a perfect match to your video … 2d bones but also some kind of deformers of 2d sprites, which would be great for fire. See some online demos http://esotericsoftware.com/spine-demos

10

Okay, I’ll give it a shot. At least I can use my original animation as some kind of reference and they say its always better the second time I guess. I start tomorrow fresh!

Is everything in Spine supported by Playcanvas or should I avoid anything?
Thanks

11

I believe everything in version 3.8 is supported … they have some 4.0 beta or something when I checked few weeks ago, but I’m not sure about that.

12

‘green screening’ is an option with mixed results. Eg Big size video lags

13

Hi all, I have my test animation built in SPine and ready to implement.
I have added the SPine scripts to Playcanvas and a script on the entity which says:

this.entity.spine.state.setAnimation(0, “Wave_02”, true);

But When I run my app the character/spine entity is drawn in its initial state and nothing happens. I would expect the animation to be looping. Am I missing something?

Thanks

Also, I tried to run the Spine boy Example Playcanvas project as a reference, but when I run it I just get console errors:

addComponent: System spine doesn’t exist

[spineboy.js:10]: Cannot read property ‘state’ of undefined

TypeError: Cannot read property ‘state’ of undefined

14

I notice that the file playcanvas-spine.3.8.min.js has a ton of errors when imported to Playcanvas. Maybe that has something to do with it? According to the github page (https://github.com/playcanvas/playcanvas-spine) I’m supposed to just import that file file straight into PLaycanvas, which I have done.

15

Quick example here for the Spine 3.6: https://playcanvas.com/editor/scene/1128115

Using 3.6 as the asset I was testing was built with 3.6. I can’t remember which asset out of the examples are using 3.8 but the setup should be the same.

16

Here is a 3.8 example just to check the library is fine: https://playcanvas.com/editor/scene/1128118

17

Okay great, from this I got it working. Not sure if the problem was because my spine scripts were not in a Spine folder or because my play anim script was slightly different. But hey it works now.
Thanks!!

1 Like