Migrate from SVG animations to Canvas

[Richacinas]

Hello there!

 

First of all, thank so much for such an amazing library. I can't stop recommending it.

 

We integrated gsap on our project in order to handle better the timings and make our code much easier and performant. I will share the temporary url with you so you can take a look:

 

http://lab.pre.rtve.es/el-cuento/

 

We are getting good results on desktop, however, not so much on mobile devices. It gets all laggy sometimes and the animations start to suffer delays.

 

How could I improve performance for mobile devices? I have been trying to set the framerate on Tweenmax ticker to 60fps, I tried force3D:true on all our translate/rotate/scale animations but still cant see a proper improvement...

 

Do you think I made a bad choice and this is too many animations for a mobile device? We are only animating our character, doing translates, rotations, scale, and svg morphing using Snap.svg. We have a function that takes an array of svg groups (parts of our character) and goes one by one throwing snap svg morphs in order to make, for example, the whole mouth move from one type to another.

 

Thank you very much for your help,

 

Ricardo

[Richacinas]

I just realized that the topic of this post says "migrate from SVG animations to canvas"... do you know if this would be possible considering the kind of animations we are doing?

 

I mean, in a reasonable time, be able to migrate our animations to a canvas-based approach.

 

No need to say that I'm not experienced at all when it comes to animating graphics.

 

Thanks a lot, again...

[OSUblake]

Yes, it's possible. Look at Pixi.js and their gallery page. That's what most mobile games use, and it's very easy to use with GSAP.

 

And SVG is an image format, so you can use your same assets. You can also use Spine to do character animation.

http://pixijs.github.io/examples/#/spine/goblins.js

 

There's also a pixi plugin.

 

 

[Richacinas]

WOW.

 

Thank you so much for your answer. So, pretty much, what I should do is use Pixi.js as a renderer and keep all the logic I have with GSAP and snap for all my transforms and tweens, right?

 

I saw this link on another thread of this forum:

 

https://github.com/noprotocol/gsap-pixi-plugin

 

I'm not sure if this is what I would need.. I will try to connect my timelines with Pixi so I can render on a full screen canvas.

 

Thanks a lot

[OSUblake]

Most of your stuff should work the same. For morphing, like with the mouth animation, while possible, might work better as just a sprite animation. You probably won't notice the difference, and it will perform much better.

 

 You should look through all the examples here just to get a feel for what Pixi can do right out of the box. 

http://pixijs.github.io/examples/#/basics/basic.js

 

That plugin you linked to doesn't work correctly for some things. Use the one I linked to.

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/PixiPlugin.min.js

 

If you need any help, just ask or search around the forums. I have tons of demos posted.

[Richacinas]

Hello again!

 

I managed to integrate my TimelineMax with Pixi.js canvas and it works like a charm. However, there is now some challenges that I must overcome.

 

For example, I don't know how to have access to all my SVG groups so I can transform and move independent parts of my character. Should I use pixi-spine? I'm not sure about how to use it. Tried looking for an example of an atlas.json configuration but I found none.

 

Thank you very much in advance.

 

Ricardo

[OSUblake]

Hi @Richacinas

 

I wish I had some examples of Spine. I keep asking people to send me some. I wonder if we can summon @mspanish. She was working on game using spine.

 

So a little about Spine. Its software used to create skeletal animations. It costs a little bit of money, but there is a free alternative called DragonBones. The software will generate a texture atlas for you. One thing to note is that you will need convert your SVGs to png if you want to use Spine.

 

Once you have your animation, you can use Pixi's Spine plugin to load it.

https://github.com/pixijs/pixi-spine

 

If you don't want to use Spine, that's fine. To use SVG, you should separate the parts you want to use as individual SVG elements instead of groups. And make sure the SVG element has a width and height defined on it. I noticed you were using Webpack, and remember seeing a loader for that.

https://github.com/blunt1337/pixi-svg-loader

 

From there, use Pixi to convert your SVG into textures, and create sprites from them. You can add sprites to a container, which will be just like your group. And sprites can children, so you can add sprites to other sprites.

 

You can do morphing in Pixi as canvas can draw SVG paths, but the MorphSVGPlugin isn't currently setup for canvas, so it requires a little workaround.

See the Pen oWzVvb by osublake (@osublake) on CodePen

 

If you need to morph stuff, I would first look at using a mesh as it's much easier to just bend stuff.

See the Pen 3ccd225b73a7fb9aeffafbe8afac75f0 by osublake (@osublake) on CodePen

 

 

With meshes and filters, like these and these, you should be able to animate just about anything.

 

And Pixi has a bunch of other plugins you may be interested in, like sound, text, particles, and more filters. Take a look at all their projects.

https://github.com/pixijs

 

You should also check out KittyKatAttack to help get up to speed.

https://github.com/kittykatattack/learningPixi

 

[Richacinas]

I have been trying to make https://github.com/blunt1337/pixi-svg-loader work but it doesn't look like a solid option. The documentation is poor and up to know I couldn't make it work. Certainly, I think it would be faster for me and this is the option I prefer, as I'm not really a game designer, but a web one.

 

I opened an issue on that github so I'll see tomorrow if the creator can help me a little bit. Of course, I would share here all my experience and learnings.

 

I am very grateful for all your help, thanks a lot @OSUblake we'll be in touch!

 

Ricardo

[OSUblake]

Is your path correct?

 

I'd really like to see how this works. It basically eliminates everything I told you to do... separate everything into SVG elements, load SVG, create texture, create sprite, add to container, etc.

 

How do you currently get your SVG stuff into your app? Can you send me what you have?

[Richacinas]

Like this:

 

/*
    Loads the SVG into the DOM and creates tweens ready for playback
    @param {Object}   canvas
    @param {String}   svg
    @param {Array}    animations
    @param {Int}      duration 
    @param {Function} callback 
  */

  loadSVG: function(canvas, svgSrc, svgId, viewBox, callback) {
    var self = this;

    Snap.load(svgSrc, function(data) {
      // Place SVG nodes into DOM tree
      canvas.append(data);
      if (viewBox != null) {
        Snap(svgId).attr({viewBox:viewBox});
      }

      if (typeof callback === "function") {
        callback();
      }
    }); 
  }

 

 

I have my svg file in my project, not already embedded into my HTML. I did it this way so my Javascript is more modular and ready to run in different projects. 

 

I initialize the "class" that contains this function with some options and then I load the SVG. All the core code that runs the tweens is inspired by this component that a guy had on his github:

 

https://github.com/hellomichael/svg-animation/blob/master/svgAnimation.js

 

It is all pretty similar, but using GSAP for timelines and transforms and then Snap for morphs.

 

Cheers!

[Richacinas]

Wow, what an adventure it is being to make this work, hahaha!

 

I'll share everything about it as soon as it is finished. By now, I got my svg fully loaded into a stage with all the containers nicely organized... just not showing up when I try to render it..

 

This is being harder than taking the ring to Mordor.

 

Cheers

[Richacinas]

Just made it show up. It was an issue with the size of my sprites... got to play with that and make it show responsively to the screen!

[Richacinas]

Let me ask something else...

 

So, having a stage structure like the one you see attached:

 

Could I keep doing morphs on what used to be SVG groups, or am I getting something wrong? My guess is that I won't be able to do that anymore since now they are just.. sprites. For example, what we were doing was to morph all paths in grup ala_der_backup to ala_der_meneito_1, ala_der_meneito_2, and so on... creating an affect of flying for our character.

 

I guess we should do that just going from one Container to the next one, making them visible one by one or something like that?

 

Sorry for this obvious questions, as I said, I'm new to all this...

 

Thanks a lot,

 

Ricardo

 

 

[Richacinas]

What if I don't use Pixijs? is there a performant solution so I can draw my full SVG with all the transforms in it, into a canvas?

 

Thanks so much

[OSUblake]

Paper.js, Frabric.js, Konva.js, pretty much any canvas library, but Pixi is your best option for mobile. Its designed for this kind of stuff. and is by far the fastest as it uses WebGL.

 

What are you having problems with? I can't help without seeing some code. But you've never used it, so of course there is going to be a little learning curve. You've also designed everything using a workflow for SVG animations. 

 

Your SVGs needs a defined width and height or Pixi won't know what size to draw them at. And width and height are calculated based on scale.

console.log(sprite.width); // 300
console.log(sprite.width); // 600

sprite.scale.set(0.5);

console.log(sprite.width); // 150
console.log(sprite.height); // 300

 

To animate between your sprites, you change their texture. 

http://pixijs.github.io/examples/#/demos/texture-swap.js

 

You can use a timeline or make an animated sprite from a series of textures.

http://pixijs.github.io/examples/#/basics/spritesheet.js

 

There's a also a Pixi inspector for Chrome dev tools, allowing you to inspect/change stuff.

https://chrome.google.com/webstore/detail/pixi-inspector/aamddddknhcagpehecnhphigffljadon

 

[OSUblake]

If you're having problems transforming stuff, canvas has no transform origin, so you have to align stuff. I was just making that comparison with somebody else.

 

To do align stuff in pixi, try setting the anchor and pivot. This is the same as setting the xPercent/yPercent in an SVG to -50.

sprite.pivot.set(0.5);
sprite.anchor.set(0.5);

 

 

 

 

[Richacinas]

Thank you very much for all this information, it is really useful!

 

The Object I'm getting from pixi-svg-loader is great, and everything inside it keeps/has its position perfectly, so when I attach it to my stage it renders fine. The only problem I'm having is when I try to, for example, use AnimatedSprite from PixiJS in order to create an animation between textures and make my character "talk".

 

What is happening is that my textures are losing the original position and they are rendering on the top left corner of my Object. I inspect them with the great Chrome tool that you mentioned, but they don't have any position, they must have been rendered right at the spot and therefore don't keep a position inside the parent Container, right?

 

Maybe I should try with the texture swapping...