Joysticks in Synfig (Controller Plugin)

[rodolforg]

@veermetri05

(Try adding a waypoint and Synfig will crash, even though we are just adding a waypoint for the controller’s exported value, it just crashes)

Wut? It shouldn’t happen! Argh. I’ll try to check it, but not now…

[veermetri05]

@rodolforg Thanks for the suggestion, I tried to figure out what causes the crash. Initially, I thought it is because of nested calculations (which are heavy), but it has nothing to do with it.

I thought the crash might cause because of the boolean logic that I am creating in the file, but I tried to recreate the logic in another file, it has nothing to do with it. So as @rodolforg suggested to use the Active Layer Depth Parameter which is an Integer than the string Active Layer Name Parameter. I applied the same logic and it didn’t crash. And also the rendering was slow when using the Active Layer Name parameter (string), but now it is fast.

@rodolforg

Wut? It shouldn’t happen! Argh. I’ll try to check it, but not now…

I think this problem is related to the usage of String. No crash occurs when did with Integer.

demoFix.sif (66.0 KB)
Here is the same thing using Active Layer Depth Parameter.

[Darkspace_be]

Hi,
Yes, I meant using your plugin together with a standard switch controller that controls the drawings in a switch layer. I made a head with a combination of a switch control that controls the mouth switch layer and a whole bunch of nested joysticks made with your plugin. For example: one controller for the entire face, one that only affects the pupils, one that opens and closes the eyes, one for the hair and so on. It works perfectly. The only thing that I would like to be able to do is to add something to an existing joystick controller.
Greetz!

[veermetri05]

Controller Plugin development

(If you ever wondered why there is the option to convert a color to scale, this is its use)
Now next thing I will work is Switch Templates.

ToDo:

1. Create switch template (to switch images or shapes in switch layer with controller)
2. Create slider
3. Create multiple controller/slider without requirement to re-run the plugin again and again
4. Feature to Unbind the controller and get the waypoints again (so that mistakes can be fixed)
5. Bind multiple layer or group to existing/new controller (by providing a ID for controller)
6. Controller for exported values

[ktim]

Great contribution @veermetri05 this plugin, I am yet to try it out but from the look of things, it will indeed make work easier. You asked about any ideas;
-what if you also include a number on each side of that black dotted box to indicate the position to guide the user instead of just knowing that one starts from middle then up then that side etc
-you should also think about possibility of a user linking that controller to another another one so that when a user moves one controller the other(s) move too
[just a quick one; why is the number limited to five positions?]

[veermetri05]

@ktim

what if you also include a number on each side of that black dotted box to indicate the position to guide the user instead of just knowing that one starts from middle then up then that side etc

The black dotted box (border) of the controller is created after you run the plugin. You first create 5 poses then run the plugin, the controller is created after you run the plugin.

@ktim

you should also think about possibility of a user linking that controller to another another one so that when a user moves one controller the other(s) move too

Yeah, I don’t think that this is neccessary, if someone is thinking of connecting one controller to other controllers, it’s not useful. For example, you have a controller for eyes, and you have a controller for head rotation. So if you want to connect them, then why do you even have to create 2 controllers in the first place. You can just create one common controller for that. Even if this would have any usage (maybe it does but I am not aware), you can create waypoints for the first controller and then run the plugin and you will have a controller for controlling the controller (this is not yet implemented, this will work once creating controllers for exported values is supported) .

@ktim

[just a quick one; why is the number limited to five positions?]

The feature of creating a controller (joystick) is limited to 5 positions. This is based on poses of the head, right, left, up, down, normal (looking into the camera). And the goal of the plugin is to easily create a controller which will reduce the work.

If you add more than 5 positions how is it supposed to work, for now, we can decide the position for a controller and head movement of the character.
Also note that you can combine more than one plugins to create anything, example one controller for eyes, one for face, one for facial expression, one for eyebrows. This plugin primarily created for purpose of animating character rig. You can also use it anywhere you want.

(Note that the controller is supposed to create interpolation between poses, it’s not like a switch layer which would just change it, so if you place the controller anywhere within its border it would have its face in that direction. I am still working on the switch layer, and also thinking of providing n number of poses for the switch layer but I don’t think there is any need for more than 5 poses for a normal controller)

The limitation of the joystick controller is you are required to create 5 poses, even if you don’t want to. This can be overcome by the use of a slider (still not implemented). Sliders can interpolate between two values or one (the other will be zero in this case). Also, you can use multiple slider.

You can try the plugin it would give you more ideas and understand it’s usage.

[KonstantinDmitriev]

@veermetri05

I will submit PR once I implement the above features and test it more.

I think it is already will be very useful addition at current status.

@veermetri05

Create a controller for selective groups or layers.

Maybe filter layers by particular suffix?
I.e. if group’s name ends with " [controller]", then this group and all layers inside will be parsed by plugin to create controllers.

[rodolforg]

@rodolforg

Wut? It shouldn’t happen! Argh. I’ll try to check it, but not now…

Reported here: Crash when editing nested valuenode_switch'es · Issue #2250 · synfig/synfig · GitHub

[veermetri05]

switchTemplatePlugin.zip (5.3 KB)

An update on the plugin,

I have created a switch template plugin, which will be useful to create a control switch layer.
(Note: I will soon merge these plugins into one main plugin ‘The Controller Plugin’)

It is not easy as the joystick plugin to use, but definitely will make your work easier

To begin put all your images/layers in one group, and then rename the layer in format as switchTemplate_anyName. Example (switchTemplate_face, switchTemplate_demotesting).

And then run the plugin.

After you run the plugin, controllers would be created for each group (which have a name in format switchTemplate_anyName) and they will also have exported canvases. (Exported Canvas names are random with id for now, in a later version they will use the name provided by the user)

In exported canvas, you can see the same layers as were in the group, and the exported canvas would be cropped to be a square shape.

Now you can go to exported canvas and move the layers according to you where you want them to be with respect to the controller.

And when you move the controller in the parent canvas or root canvas, it will be effective.

This is hard to understand by just reading. I will try to make a video to explain this process.

Till now you can understand by this demo file.

starterOut.sif (115.1 KB)

Open the file, and try moving the controller. The switch layers active item will change in response to the controller. So if you move the controller to the top area it will become white.

Now go to the exported canvas (switchTemplate7310) and you can see that the top position is represented by the white rectangle. Now try changing their position (move their origin), such that the white is at the bottom and blue is at the top.

Now if you go to the parent/root canvas (starterOut.sif) you can see that when the controller is in the top area the blue rectangle is shown. Hope this gives the basic understanding of how the plugin works.

Quick Steps:

1. Create a group and name it in the format of switchTemplate_anyName (switchTemplate_demo)
2. Run the plugin
3. Go the exported canvas generated by the plugin, and move the layers to where you want them to appear with respect to the controller
4. Move your controller and everything must be good.

@veermetri05

ToDo:

1. Create switch template (to switch images or shapes in switch layer with controller)
2. Create slider
3. Create multiple controller/slider without requirement to re-run the plugin again and again
4. Feature to Unbind the controller and get the waypoints again (so that mistakes can be fixed)
5. Bind multiple layer or group to existing/new controller (by providing a ID for controller)
6. Controller for exported values

Edit:
Here’s the video,

Switch Template Demo

[veermetri05]

Slider demo with Controller Plugin
Sliders are useful to interpolate between poses or 2 values.

https://imgur.com/XyOP5gJ.gif

Here’s the plugin (please use it and report any problem, this will help improve the plugin faster and have fewer issues)

sliderPlugin.zip (5.5 KB)

To create a slider:

1. Create keyframes.

2. Add waypoints on the keyframes.
   a. If a parameter has waypoints on all the keyframes then it will be connected to the slider.
   b. Extra waypoints (in between keyframes) are ignored and if a parameter doesn’t have waypoints on all keyframes that parameter is ignored.(This might change in future)

3. Considering each keyframe as a pose, sliders are created based on the number of keyframes. (If you have 5 keyframes 4 sliders would be created, the first is considered as initial pose)

4. Slider’s have the name sliderController{numb}_keyframeNum where numb is a random number in 1000-9999 and keyframeNum is the frame at which the keyframe was located.(Keyframes aren’t deleted)

(Works with vector, real, angle, color I haven't implemented rest (same goes for joystick controller), I don't think they are important. If required we can implement that later )

@veermetri05

ToDo:

1. Create switch template (to switch images or shapes in switch layer with controller)
2. Create slider
3. Create multiple controller/slider without requirement to re-run the plugin again and again
4. Feature to Unbind the controller and get the waypoints again (so that mistakes can be fixed)
5. Bind multiple layer or group to existing/new controller (by providing a ID for controller)
6. Controller for exported values

I will merge them and move to the next steps.
When merged you can create joystick, switchTemplate, slider by giving prefix to the group layer (for example, joystick_myjoystickController, switchTemplate_demoName, slider_colorSlider, etc)

Hopefully, the next remaining steps would be easy and I would complete them soon.

[Khemardi]

I think we need constraints in Synfig, it would be nice to control the minimum and maximum value of an object so it doesn’t go out of a specified area. I’ll test this out.

[Khemardi]

I get this error when I try to run it.

Here are the steps to recreate the error:

1. I created a circle using the circle tool
2. with animate on I created keyframes and added waypoints on frames (0,24,48,72,96).
3. I saved the project
4. Then I ran the create slider plugin

[veermetri05]

@Khemardi thanks for reporting with proper instruction to reproduce the issue.

It occurred because I didn’t consider that the keyframe can be on “1s”, I assumed that it would be on either something like “1f” or “2s 10f”

This is fixed (updated fix for fps issue)
sliderPlugin.zip (5.6 KB)

Has anyone tried switchTemplates, they are useful if your character is drawn as raster graphics. Also, it is not limited to 5 poses, it will create a controller with a switch layer, so you can literally use it to animate anything that you want to switch and have a nice visual guide for it. These features in the plugin can be used for anything, be creativity

[Khemardi]

It creates four slider controller folders and also I don’t see anything to control the object. Maybe I’m doing something wrong?

[veermetri05]

Nothing is wrong, I have already mentioned

@veermetri05

• Considering each keyframe as a pose, sliders are created based on the number of keyframes. (If you have 5 keyframes 5 sliders would be created)

It seems that you have four keyframes
Edit: Sorry, my mistake, if you have 5 keyframes, 4 sliders are created the first keyframe is ignored and considered as the initial pose

@Khemardi

I don’t see anything to control the object

It is there but we can’t see it😅, the controller is in white color and your background is also white, change the background color of your canvas or change the color of the “Pointer” Region Layer which is in the “Pointer” group within the “sliderController” groups.

I think I should add a black outline so that it can visible in white backgrounds.

[Khemardi]

lol, yea maybe add a black outline. Ok so now another issue; the object doesn’t move when I move the slider

[veermetri05]

Share the files, please.
2 files before running the plugin and after running the plugin.

Also, make sure the waypoints are on all the keyframes (this is compulsory), if you have 5 keyframes there must be 5 waypoints on the keyframes otherwise it will ignore that parameter.

Check this demo

Demo for Slider

[Khemardi]

[veermetri05]

multiController.sifz (41.0 KB)
A little demo for multiple controller. Not so good face rig (I am so bad at characters design and animation)

Details

Face controller by joystick, a switchTemplate controlled by a joystick, and the circle is controlled by the slider.

You can follow some tutorials like this, and create awesome rigs with the tool

For now, my idea is to take the groups with names and create controllers based on them.

Example,

joysitck_faceRig
switchTemplate_rectangleGroup
slider_circle

If you want to connect multiple layer to one then, you can do something like

joystick_id2_faceRig
joystick_id2_eyes

Or

slider_id3_circle
slider_id3_rectangleColor

Note: This will be the name of group/layer, and the id must be unique irrespective of type of controller you are going to connect.

And nesting wouldn’t be supported, this means that

joystick_faceRig
----> joystick_eyeRig

wouldn’t work. Explained later

I am merging them together, one thing I would want to know from you people is that, do you think that nesting should be supported or is it that important.

Do you need nested support to create controller ?

• Yes
• No
• Doesn’t matter

Explained later:
Why?

For example, a user wants a joystick and slider for items within a group,

So joystick needs 5 waypoints on any animated parameter, otherwise it will ignore them, and the slider needs all waypoints on the keyframes, but sometimes it may be a thing that the user wants to control an item with slider and joystick at the same time, this is completely possible to do by animating and re-running the plugin more than once. But if the user wants to do everything at the same time (create joystick and slider, there isn’t enough information to decide what the user wants).

So let’s say that the user has the following group:

joystick_faceRig
--->joystick_eyeRig

So they need two joysticks one to control the faceRig and eyeRig, one thing I can think of a solution is to ignore the groups which are children (at any inner level of the parent) of the group which has a prefix of “joystick_” and then later construct the joysticks. So basically create the joystick for parents first and go in and create for children.

This solution will work for joysticks, but now let’s think for a case in which,

joystick_faceRig
---->joystick_eyeRig
-------->slider_eye

Let’s assume that the slider_eye is a slider that will control the color of the eye, of course, the slider_eye layer will have waypoints on keyframe (keyframes can be anywhere), so when constructing joysick_eyeRig, ignoring the content of slider_eye would be a good choice, we will leave them undisturbed and later connect them to a slider. But just think that users also have animated the slider_eye position (origin parameter) and they want to control it by joystick, that’s why it is in joystick_eyeRig, so now we have uncertainty to decide what waypoint user wants to be controlled by the slider and what waypoints the user wants to be controlled by the joystick. Even if we apply any solution users may require to run the plugin more than once, and running the plugin more than once also feels easier for the user.

Another solution can be to give an order of priority for controller example,

1. joystick
2. slider

So now joystick is always given more priority, it may suppress slider, or vice versa if the order is different. This seems easy to understand and implement too. But not always a good choice.

Another way is to force users to put everything on keyframes (or continuous frames), and we can get what waypoints to consider based on what keyframe a waypoint is this would also be easy.

So if they have nested

joystick_faceRig
---->joystick_eyeRig
-------->slider_eye

Then anything that would be connected to joystick_faceRig will be on the first 5 keyframes (or frames) and then anything that they want to connect to joystick_eyeRig will be on the next 5 keyframes (or frames) and anything that they want to connect to the slider would be on next keyframes,
so

joystick_faceRig = 1-5
joystick_eyeRig = 6-10
slider_eye = 11-n (n because this is how slider's work, generated based on number of keyframes)

we can work around for slider, to limit it to certain keyframes by taking group names like slider_2_eye, so this means that in the previous example it would be 11-13 keyframes used to connect to the slider. I think this solution is good for me, also for users, it’s predictable and understandable to expect the proper result, the only thing is that the user needs to create or make sure that waypoints are in the proper position based on keyframes (or frames).

What do you think must be done? Suggest me any other ways or better ideas to implement them.

[veermetri05]

Okay, so only 2 people voted (+ 1 me). And they have chosen doesn’t matter. But I think it would be good to implement the last approach

@veermetri05

Another way is to force users to put everything on keyframes (or continuous frames), and we can get what waypoints to consider based on what keyframe a waypoint is this would also be easy.

So now hopefully any plugins don’t cause any issue anymore. You can try them and get them individually for now. I am currently back to animating and there would be no improvements for this plugin for a while (you can improve it if you would like to). Try plugins and report issues.