I said:
But in the end I worked on it a little bit more so go check it out it’s starting to take a nice shape.
Also I changed the project’s name from sifPlayer to easelSif. Now it uses the Createjs Suit.
https://github.com/haramanai/easelSif
P.S. When you have problems to render a file and you haven’t used something that it’s not supported. Then you can help the development of this project, by posting a sif with the problem.
Very interesting project!
Hopefully someone will continue development!
That’s awesome!
I wonder what’s the license that you used for the files. It would be great if they were uploaded to github in order to allow anyone fork them and work on its development.
Thanks anyway for the interesting seed for the Synfig to htlm5 parser!
-G
Thanks.
There is no license for the files. I mean that I have no idea how to use a license. Do I have to write on top of the files the open source notice? If this is the case a can make it what ever license the synfig community wands it to be.
TweenJS it’s an open source lib. My code it’s not bigger than 500 lines of code and it is not organized.
So from my perspective of view it doesn’t really needs any license. I never used github or anything similar so I am a little bit afraid that I will mess things up. Please do what ever you wish with the code and the files.
Also I wand to mention a big dilemma that I had before I start this project. Those where is this the right choice to use the html5 canvas to draw the sif file or is it a better choice to use the Raphael.js vector drawing library and have a final svg.
I believe that in a way I used the wrong method. The html5 canvas. Cause with Raphael.js we can double benefit from it cause the player will be and an svg exporter.
Hi.
I made some changes to the sif parser and player.
The player uses the new createjs.Tween lib (MIT license).
And the heirachy is now right.
Now it supports the layers PasteCanvas, rotation, translate, scale.
the scale layer and the scale param in PasteCanvas is wrong. Someone from the developers must explain to me how the scale in synfig is working. Cause in synfig scale 0 is scale 1 in html5 but 1 + synfig.scale in cairo does not much the synfig scale.
Remeber that it will draw only regions.
The linked verticies is not working so don’t link anything right now. I will try to fix this but it’s not in my priorities right now.
If you wand to test your sif file you will have to overwrite the test.sif with your uncompressed sif file.
Please people test this or submit some sif files.
I am planning to do and the Import layer ( image layer ) but cause I have to preload the imagies before I use them with html5 I have to plan this little bit better.
Also I have an idea how to make the outline layer. But I just postpone the implimentation.
If someone can help me with the license stuff it will be great. I have no idea how those things work. offcurse it will be an opensource.
Cool beans! Glad to see you’re continuing working on this.
Synfig scale is exponential, so:
exp(synfig_zoom)=html_scale
then exp(0.0)=1.0 as expected and negative values leads to zoom out as well as positive values leads to zoom in. Two consecutive scales in Synfig is just the sum of the values (signed values):
exp(zoom_a)=scale_a
exp(zoom_b)=scale_b
expo(zoom_a+zoom_b)=scale_a*scale_b
If I were you I would choose one of the Creative Commons licenses. It is very easy to select the one that fits your desires:
creativecommons.org/choose/
-G
I have fixed the zoom with Genete’s explenation . Thanks for the replie.
I also done and the import layer (image layer )
Keep in mind that I haven’t done the links. So the cut-out example that you can find in the wiki it’s not working.
Did you consider to publish your code in github?
The benefits of control the code modifications in a control version system are many and that way others can pull your work simply cloning the repository of your code.
Set up a github account and a git hub repository is pretty simple and for simple projects like yours is not difficult to handle.
-G
The cut-out animation is working now.
Genete I will try to create a github in the weekend.
Great!
So finally which was you decision for the license?
I still suggesting to use this one, that is very similar to the legal notice in the files:
creativecommons.org/licenses/by-sa/3.0/
-G
MIT. Cause I found many game developers to be afraid of the GNU. I just copied the text of the MIT license to the files.
I think I just fixed the links. By links I mean when you link a point with another point or controller with another controller. Link with controller and vector will throw an error. I think that I have a solution for this but I have to investigate more.
Now is the time to make some extended tests for the region layer. Please help with the test. Create something with only regions and no exports. My test was ok so I consider the region layer finished until someone finds a bug.
I will contineu with the stickman. I will try to make it work and add all the needed parts in the code to work with it.
Also I wand to know if you wand me to stop posting my progress here. I just don’t have anyone else to talk about synfig and the sifplayer. And of curse I don’t have facebook, tweeter or blog.
It is perfectly fine to continue posting your progresses here.
Keep it up! It will be a great advance for Synfig!
Cheers!
-G
No, of course we want you to continue here. Your progress is highly interesting for Synfig.
I’ve tested a bit. Region layers seems to work very well.
Linked vertices works well, couldn’t get exported>linked vertices to work.
Good thing that your player just ignores layers it can’t render, like outlines, blends etc. Much easier to create content for it then rather that if it just wouldn’t play at all if it encountered things it cant render.
Playback speed of scene is in my testfile too fast on this machine. Can this be limited to scene fps somehow? What if the scene is too complex to play in full speed? - drop frames?
I found you can use another sif by changing in sifplayer.js. Perhaps all user changeable settings, like source sif, size, and perhaps speed settings in the future could be all collected in one settings file?
Another small thing. For now it’s probably alright but for testing purposes and if more people will work on this it might be wise to include version numbering somewhere in the code. That way we can specify which version we test bugs against etc.
My test file:
https://dl.dropbox.com/u/2811229/TEMP/Synfig/moon.sif
Thanks for the test file.
It looks like you are using the version that I uploaded on this forum. The new version is on the github you can find the link on the first post of this topic. I constantly changing things as I am trying to figure out how things works. It is a trail and error thing. This is the reason I do not use any numerics for the versions I uploaded. Of curse you can see in the github the exac time I changed a file. Github also forces me to change and the message near the file anytime I change the file.
The new version uses the Ticker.js from the createjs.Easel. This way I have not to worry about the way the browser updates. You can change the fps to your liking by setting the frame rate of the ticker. For example createjs.Ticker.setFPS(30).
This version does not have the sifplayer.js but you can change the filename inside the sifPlayer.html.
The way that things are working right now we will lose frames if the machine is too slow ( or not very fast). There is a solution for this and I beleive that it is very easy too. We can prerender all the frames in images and then just draw the images at the given time. But then we will must have a loading screen or something like that. I can do it right now if you wand me to I am just breaking my head right now with the stickman. I believe that if I manage to run the stickman then we will have only the outline and the gradients to consider the sifplayer almost finished. The sad thing is that a complete future html5 sifplayer is very hard thing. In the end we will have to work with some limitations to be compartible.
Version controlling implies a little more of effort. In git you can create a branch for the testing code and when it is stable, merge it to the master (or stable) branch. This allows third parties to just clone the stable branch and so be sure on the kind of code he is testing.
So I suggest to make stable the current version and make your modifications in a unstable branch. This way you can periodically release new stable versions when the bugs found or the new features are fully fixed.
-G
I was thinking that I am double parsing the sif file. Right now I am parsing the sif file to create the json and then parse again the json to add the tweens. This is of curse the wrong way to do it. It is possible to tween the values the first time the program parse the sif file but this way we will lose the json. So the question is :
Do we wand to have a json equivalent version of the xml sif that it can translate back to the original xml? And this way to be able to use javascript to post manipulate the sif files.
Or just read and render the xml file?
If we keep the json equivalent we can find and use another library to do the work for us and then do the second parse to add the tweens. The main reason I like this approach more is that we will not have to worry If we have transferred all the data from the sif file. On the other hand of curse I will have to re-write everything but there will be a more stable and friendly environment.
Another thing about using a third party xml2json is that usually those converters are creating arrays for the paramas of the layer. My question here is if the params are always the same. For example in the region layer the amount param is the second param and the bline is the eleventh is there a possibility synfig to change the order?
The order of the parameters in the sif file is irrelevant. You must consider the parameter name to parse it properly. The amount parameter is the second one in all the Composite derived layers but it can be changed and the sif file will be parsed correctly. When Synfig loads a sif file, it doesn’t consider the order of the parameters. It just read the parameter name and look up if it is inside the vocabulary of the current layer being parsed. If it isn’t inside the layer’s vocabulary an error message is emitted. Also if the parameter is not found in the sif file, then the default value provided by the layer code is used.
For example:
this section of sif file:
<layer type="circle" active="true" version="0.1" desc="Circle074">
<param name="amount">
<real value="1.0000000000"/>
</param>
<param name="z_depth">
<real value="0.0000000000"/>
</param>
<param name="blend_method">
<integer value="0"/>
</param>
Is parsed and opened correctly by Synfig Studio as this section of sif file (which is the usual saved):
<layer type="circle" active="true" version="0.1" desc="Circle074">
<param name="z_depth">
<real value="0.0000000000"/>
</param>
<param name="amount">
<real value="1.0000000000"/>
</param>
<param name="blend_method">
<integer value="0"/>
</param>
Notice that amount and zdepth are twisted.
-G