HTML5 canvas player.


Finished the timeloop layer. Please test the dev branch.
The test.sif and the test_crow.sif are examples of the timeloop layer.

d.j.a.y you may upload them if you wand. Thanks for the support again.

P.S. As you may have found out. sifPlayer is slow… cause vector drawing in html5 canvas it’s not ready for real time drawing.


Just uploaded to the master the new version. I named it 0.21 with no reason.
The new things are the sifPlayer.img.getCanvasArray function that will give you an array of images for every frame.
And the sifPlayer.img.playSif function that it uses the getCanvasArray to prerender and then play the animation at the given fps.

Let me share my thoughts…
At this point the community must step up. We must show to the net what we can do. Don’t do it for sifPlayer but for Synfig.
Get synfig out to the wild world of net. And let it lead.
Don’t say but we wand bones or audio cause it’s the community’s job to show the potentials and achievements of the softwares.
Especially when this software is open source(free).

And please don’t say SVG. Say hello to the Cairo lib.

As for me I am going to try and do some optimizations to the sifPlayer. I am going to give every layer an html5 canvas. This way I am going to ‘cache’ the not moving splines. Those things will not speed up the zoom in zoom out frame rate, especially in this case we will get a slow down. Cause all the changes are going to be extra code in the loop.

Also I wand to point out that I am reaching my limitations again. What I mean is, this is how far I can get the player. I can write some more conversions or add support to the polygon and the rectangle layer. I may even find and use a lib for the raster side of things. But in the end this is it.


again, great job with the player! The walk.sif file I added worked with the previous version, but the legs perform strange things in the new version. Also for some reason I only manage to get some animation when I use the player in the build folder. All the others like the prerender and the renderplay give a blanc in Firefox when I try to play my own sif files. Also when I change them back to play your example with the bird I get a blanc too. Could be an offline or local problem cos I did not check it online yet.
walk.sif (733 KB)


Thanks darkspace65. About the legs : I overlooked the way I handled the active parameter. Just fixed it. And uploaded it.
About the build. I moved the html file out of the build folder cause I usually forget to update. Now the sifPlayer uses the build version and sifPlayer_test is for checking the code changes.

About the blank when using the build and prerender I have to check this out a little bit more.

Edit: About your animation. Have you thought to use the timeloop layer?


Thx haramanai for the quick fix. Yes, I will use the timeloop layer to complete the walkcycle and add a moving background.


just donwload 0.21,

haramanai << ooooh, what an impressive (in term on work you put one it…)
introduction new “sifplayer.html” and “prerender.html” give!


, you have also surpass the precedent :slight_smile:
I can’t do more (term of time) for siplayer than maintain the demopage + report bug,

About, involved people, did you (or think about it) post/publish infos about it in another part of the world than synfig community ?
i can help on that posting a kind of presentation+call to

DemoPageNews migration to v0.21 ++
In the path to update the demo page,
need to take a look to it than just copy the right files at the right place…
cause of this new .js for example, will inform when done.
UpdateNews#1 : 99% converted from “sifPlayer.html” - still in local - canvas(?) always appear near full browser size, but can resize the animation. i have not quickly found a way to have my canvas(z) to desired size (trying : (1) change .sif project size to desired size (2) to play with canvas.height/width - sifPlayer.helper.setCanvasToWindowSize - so.height/width )
UpdateNews#2 : 99% converted from “sifPlayer.html” - online - always appear near full browser size…
UpdateNews#3 : 99.5% converted from “sifPlayer.html” - still in local - better but not good play/pause (cause high cpu usage on pause but i did’nt read the code really never!) - resized but glitch (fullsize->resize) one time per canvas - plane.sif must should/could arrive soon on the ring.
UpdateNews#4 : 99.5% converted from “sifPlayer.html” - online - plane.sif not arrive so quick i expect … any idea of what i have missed ?

“GeneralCall about sifplayer another’ demopage”
If you want i host some of your compositions to display the beauty of siplayer, be free to ask :wink:
(please test them in local before think about)



Can you play the MorenvaProject Sif File in it?


d.j.a.y. If you wand your canvas to maintain it’s size you must not use the function sifPlayer.helper.setCanvasToWindowSize cause this function resizes the canvas to fit the window size.
The sifObject have a width and height properties that you can change them at any time to your desired values.
so.width = canvas.width;
so.height = canvas.height;
This way it will fill your canvas. I used the function inside the looper.tick method to resize every time the canvas to the window size and then draw the so to the new size with correct aspect ratio.
In the case of your test page you must give the width and heigth of you canvas to the sifObject in the main body of the main function. Then just set the canvas.height to 0 in the loop. The reason that we set the height of the canvas to 0 in the tick method is to clean the canvas. So afterwards we have to set it again to the actual height that is stored in the sifobject.
Hope I helped. I will do a easy to use function as I did for the prerender example. I just have to finish something else first.
Thanks for your support.

I don’t think it can play the MorenvaProject cause it uses the link of the files that I haven’t implemented yet. Also I think that MorenvaProject uses the raster size of synfig that it is not implemented.


post updated / demo page also > after plane will play , i will do report (not move) all the stuff in my page to github



I’ve added SifPlayer to the Scripts & Tools page -
Keep up the awesome work!


Thanks Zelgadis, thats great.
Unfortunately I have no progress to report.
I made some test for speed up but it will need big rewrite of the code to implement them.
And the time is limited…


I have an idea why not make this a plugin for media goblin under GNU AGPLv3
Aka add the ability to run sif files in media goblin.


Long time no see…
I have bad news and good news.
First with the bad news.
I encountered several problems as I was trying to add cache and interactions for the sifPlayer.
After some thinking I decided to abandon sifPlayer.
The good new are that I want cache and interactions so I decided to try and modify the sifPlayer and make it run under easeljs.
And I almost did it. It’s up and running with all the futures of sifPlayer except gradients ( I will do it later on, but gradients are too heavy in general) and imagies ( I have a bug that I haven’t found out yet ).

So I present you an almost new html5 player for synfig : easelsif.
You can find it in github.
The real good news with easelSif are that now the layers and the sifObject are easeljs objects.
This means that we have all the interactions of easeljs. Like mouseover, mousedown, click and more.

I thing that is a good way to go.
All future development are going to be for easelSif.



Exciting news!


I still get the NaN Origin Error when I try to play my banner animation with the last version of sifplayer and with the new Easelsif.


You mean the one that we had in our previous discussion?
The problem was that you had linked files. I haven’t done anything about that yet.
I will try to implement it.

Edit : Just checked the our previous discussion. The problem must been from the linked files. The solution is to fit all the files in a single file. I will try to make a python plugin for this. Something like ‘merge all linked files’ I think it is easy to be created.


That would be a great help not only regarding your html5-player but for using Synfig imports in general.
There are actually no way in Synfig to do independent imports from other files. They all becomes linked to the original. See this thread regarding this issue. An merge linked script could solve some of this issue.


I don’t recall importing any files from another sif into the banner animation, but I did copy the character layer. You have one character layer with a repeated walkcycle using a time loop layer and one character layer without a time loop layer that falls into the pit. Maybe the character layer and its copy are linked giving the formentioned error.


Oh …that news who invalidate the supa sifplayer demo page … :wink: Mr sifplayer is dead welcome aboard and long life to Mr easelSif !


Sorry about that! But I think It’s better to have separated projects.
So if someone want’ s to experiment or to write a synfig renderer in plain html5 canvas drawing, sifPlayer can be a good starting point or reference.

The truth is that I don’t know how the file changes with imports. Thanks for the link.

Looks like that synfig takes care even the copy paste function.