HTML5 canvas player.

General Synfig general discussion
21

yop,

Great job haramanai !

Even if, actually, sifplayer is “limited”, it’s really impressive and a so fantastic tool for all software who use the sif file format !
I feelt that synfig was a kind of flash “app’killer”, now, linked to html5 it’s even certainly obvious.

From my test point of view :

  • in Encapsulated layer, zoom is supported but not focal parameter (see zoom layer in my test.sif)
  • in Region Layer, if during animation somes vertex are suppress, animation is lossed (see arbol-transo-vertex layer)

TestFile :
online “demo” (or not)
test.sif
I have used sifplayer commit version 561ea7934a

Nota : in my case, sifplayer work well in local, but why not online ? [SOLVED 23/10/12]

see(:ya;

22

Sorry guys for the delayed response but I haven’t much free time.
d.j.a.y thanks for the test files. I will see what I can do… Also whats the problem you encountered on-line?
Right now I am in the process to find a solution to generalize the sifjson. This will result to rewrite the tweener and the renderer so I will try to document the code to be easier for any one who wands to participate to read and modify the code.

23

d.j.a.y looks like that there is no xml file (test.sif) in the sif online demo. The test.sif file must be in the same domain with the page. Or there some server restriction.

24

New version of the sifPlayer.
Lot of changes in the design of the player.
Now the src looks the way it is supposed to look.
The sifjson is removed from the project.

The new version is more object oriented and I think it will be much easier to be modified.
Don’t expect stickman to run as I haven’t added the strech layer yet.
Now all the layers have a file. for example the region layer is in the src/region.js.
When you add a new layer for example stretch layer in the src just follow the the way the other layers are created and name the file stretch.js then add the javascript in the sifPlayer.html and the player will automatically run your layer.

Some things are missing but if you look in the src you will see that it is much easier now to add new futures.

I need instructions of how things work. for example the stretch layer and the focus param.

Now I think every one can contribute…

25

Which kind of information do you need?
-G

26

For example in the stickman i find stretch layer like this.
As I undestand this the x min value is epsilon and max infinite. Is the reciprocal something that can hapen only to this kind of layer or I have to check all the params for the possibility of a reciprocal?

                    <layer type="stretch" active="true" version="0.1" desc="compensator-elbow2" group="(stk)-stretches">
                      <param name="amount">
                        <composite type="vector">
                          <x>
                            <reciprocal type="real" link=":(stk)-elbow2-r">
                              <epsilon>
                                <real value="0.0000010000"/>
                              </epsilon>
                              <infinite>
                                <real value="999999.0000000000"/>
                              </infinite>
                            </reciprocal>
                          </x>
                          <y>
                            <real value="1.0000000000"/>
                          </y>
                        </composite>
                      </param>
                      <param name="center">
                        <vector>
                          <x>0.0000000000</x>
                          <y>0.0000000000</y>
                        </vector>
                      </param>
                    </layer>

Also in a outline layer I found an entry that looks like this

                    <entry>
                      <greyed type="bline_point">
                        <link>
                          <bline_point>
                            <vertex>
                              <vector>
                                <x>0.0000000000</x>
                                <y>0.0000000000</y>
                              </vector>
                            </vertex>
                            <t1>
                              <vector>
                                <x>0.0000000000</x>
                                <y>0.0000000000</y>
                              </vector>
                            </t1>
                            <width>
                              <real value="1.0000000000"/>
                            </width>
                            <origin>
                              <real value="0.5000000000"/>
                            </origin>
                          </bline_point>
                        </link>
                      </greyed>
                    </entry>

I have to check for this and for the region? Can I over pass this by creating a point that have t1.theta = 0 and t1.radius = 0?

Also the param focus… what is doing?

At last if reciprocal is one type of the values. Is there anymore like this?

Thanks.

27

:smiley: Happy to see your progress! I’m definitely going to use this for some project!

Later we’ll need some kind of player control, like loop playback etc.

Perhaps we could use canvas metadata to introduce some very basic interactivity, like buttons for replay and such?
Maybe it is possible to store custom object data somehow to use for further interactivity?

28

I thought about those things and this is the main reason I am using createjs.Tweenjs. If you go in the sifPlayer.html and write after the var so line
so.timeline.loop = true;

you will get the loop you wand.

Go check the createjs.Tweenjs api documentation for more.

Also for interactivity we may use the desc to describe the way the object will behave.

My problem is the stickman. Without stickman there is no proper sifplayer.

29

Regarding to reciprocal and greyed, please consider that any parameter can be converted to one of the convertible types:
wiki.synfig.org/wiki/Convert

So if a layer expects a real value, it can be any of the coverted values to real.

Please see loadcanvas.cpp for reference on how it is parsed. The subparameters and its types is defined in each class derived from Linkable_ValueNode:

download.tuxfamily.org/synfig/ap … eNode.html

-G

30

Thanks Genete this is what I wanted. Too many things in there.

31

some server restriction —> i have renamed test.sif in test.xml and now the bug works online
Yep we found a new entry for sifplayer Q&A :wink:

see(ya!)

32

I was hopping to come here and say: Yeah stickman is supported! But as soon I was on a zoom layer that uses logarithm for amount and stretch with epsilon and infinity I decided that I have to remove those layers from the stickman and create something like stickman lite to work on it.
So…
Yeah stickman lite is supported!

d.j.a.y please donwload the new version from github the focus is added.

Keep in mind that the sifplayer.js in the build folder have some problems. So use the example of the first folder that is loading all the files.

33

It is awesome to see your development commits on github. Great work! I hope it becomes the Synfig killer complement to make it more popular.
Cheers!

34

I just putted support for the google closure compiler. This way we can make builds that will result to a much smaller version of the sifplayer. So now you can find a all in one version of sifPlayer inside the build folder.

I also re-added the MIT license note.

Go check it out. The sifplayer.min.js file inside the build folder right now is 13.3kb .

It’s time for testing guys…

35

Hi haramanai,
Is it possible to scale the animation based on the browser’s window size?

Regarding to tests. Can you please write a small recipe for completely dumb users to explain how to do the test with simple files. It should be added to the README file or some sort of instructions in the repository.

Thanks!
-G

36

Hi Genete.
This is an external problem of the sifPlayer.
The example renders the sif file to the size of the canvas that is created in the body of the html file.
So to change the size of the canvas you must change the line that reads,

I havent tried before to change the canvas size with javascript to give you a way to do it easier. I will se what I can do for this.

the only thing that really needs documentation is the sifPlayer.SifObject constructor.

In SifObject.js writes.

/**

  • @class SifObject
  • @constructor
  • @param {XmlDocument} xmlDoc The xml document that represents the synfig animation
  • @param {CanvasRenderingContext2D} } ctx The canvas 2D context object to draw into.
  • @param {Number} x The x of the SifObject
  • @param {Number} y The y of the SifObject
  • @param {Number} width The width of the SifObject
  • @param {Number} height The height of the SifObject
  • @param {String} sifPath The path of the sif.xml this is needed for import layer
    **/
37

As was mentioned by rylleman the speed was very fast. I think I fixed it.
I also added the circle layer.

I also wand to say that sifplayer is not completed but I don’t know how to continue the development. What I mean is that the way I use synfig I do not have any problems with the current state of the sifplayer but an advanced user may use futures that I am not even aware of. I think that the best way to continue this is to report problems and upload sif files that have the problem to help me fix it or impliment it. If you get a strange big alert ussualy this means that you reached a problem.

Keep in mind that outlines are not implimented.
Also the values that use epsilon and logarith are not implimented and will not in the near future.

38

But what should I do to test your sifplayer?
I have a sif(z) file. And now what?
Please give us a step by step recipe :slight_smile:
-G

39

The sif file must be uncompressed. If it is compressed you will have .sifz. Uncompress that and add to the new file .sif or .xml.
Then you get this file to the dir of the sifPlayer.html.
Let’s say that you have r.xml

in the sifPlayer.html you will find a line that reads :
var xmlDoc = loadXML(‘assets/test.sif’);
change that to :
var xmlDoc = loadXML(‘r.xml’);

and save.

run the sifPlayer.html and you will have you file rendered.

Also keep in mind that some browsers will not let you to load a file from your local computer. You will get an error and you will see nothing.
You will better use firefox when you are testing. Cause firefox let’s you do this.

I made some changes to the sifplayer and the SifObject constructor is now
/**

  • @class SifObject
  • @constructor
  • @param {XmlDocument} xmlDoc The xml document that represents the synfig animation
  • @param {Number} x The x of the SifObject
  • @param {Number} y The y of the SifObject
  • @param {Number} width The width of the SifObject
  • @param {Number} height The height of the SifObject
  • @param {String} sifPath The path of the sif.xml this is needed for import layer
    **/
    in the sifPlayer.html is used in a line that reads:
    var so = new sifPlayer.SifObject(xmlDoc, 0, 0, canvas.width, canvas.height, ‘assets/’);

the last param is the location of your sif file. This is needed for the import layer. If you followed the instructions I just said and your sif uses imagies you must change that line to:
var so = new sifPlayer.SifObject(xmlDoc, 0, 0, canvas.width, canvas.height, ‘’);

40

Done / And yep, focus work !

Humm … seem’s they are a clip duration problem.
Is it because i have taken the sif player from the build directory?

héhé…stickman is coming :wink:

see(:ya!