12.3. Various animation settings

12.3.1. Set number of frames and FPS

Determine the length of the animation first. By default it is 60 and FPS is also 60. Please set two places of the figure in the Animation tab of the ribbon bar as you like.

prop_left

prop_right

Project setting screen

Ribbon bar

FPS (frames per second)

maximum number of frames


Frame indicated by FPS and Frame in this application are not the same. Frame in this application is just an array for data management.

Warning

Changing FPS will recalculate FPS / 6000.0 and automatically update the duration of all keyframes. Any manually set intervals will also change, so make sure you really want to change the FPS.


12.3.2. Set default interval

In an animation project, the interval between reaching the content of the frame is determined in seconds. By default, the calculation result of FPS / 6000.0 is set.

You can change this to any number of seconds.

  1. Open the project settings screen.

  2. Enter the default duration on the Project information tab. (0.0001 to 99.9999 seconds)

  3. If you want to recalculate all the currently registered keyframe intervals, press the Recalculate button.

../_images/proper_h.png

By specifying it here, subsequent keyframe registrations will be registered based on the number of seconds after the change.

If you register more than one frame apart, the frame interval will be the number of seconds adjusted based on the calculation result of default interval * number of frames apart .

Hint

If you want to set the interval for each keyframe, please refer to Registering and setting keyframes … “Setting the keyframe interval” below.

Warning

Pressing the Recalculate button will automatically update the duration of all keyframes. All manually set intervals will also be changed, so do not press if you want to target only the keyframes after the change.

12.3.3. Set WebGL screen size

Set the screen size of WebGL as necessary. The default depends on the size of the window. Specify the screen size in the Screen tab of the ribbon bar.

../_images/proper_2.png

If you specify a screen size that exceeds the window size of the current app, a scroll bar will be displayed.
If you press the Original size button, the screen size will return to fit the window size.

Also, please note that if the ratio is different, the expected view from the main camera and Camera object will change when the screen size is changed.

Relation between window size and WebGL screen size

There are two meanings in this application: window size change and WebGL screen size change.

Change window size:

This is a change to the app window itself. The width and height after subtracting the ribbon bar, left and right panels, and timeline panel will be the final size of the WebGL screen. If the WebGL screen size is the initial state of the app, the WebGL screen will automatically resize according to the window size.

WebGL screen size change:
The size can be changed regardless of the application window. Scrollbars will appear if the WebGL screen size is significantly larger. If you have changed the WebGL screen size manually even once, it will not change automatically even if you change the window size.
If you restore it to original size, it will be automatically resized again.

12.3.3.1. navigation window

It is troublesome to scroll when the screen size changes. If you use this in such a case, you can expect to improve operability because you can scroll while grasping the whole.

  1. Press the Navigation button in the Screens tab of the ribbon bar.

../_images/general_scr02.png

  1. A small navigation window will appear inside the main app window.

../_images/screen_naviwin.png

  1. A red frame is displayed as the currently displayed range on the navigation preview screen.

  2. If the resolution of the WebGL screen is larger than the display area, clicking or dragging the red frame anywhere will scroll the WebGL screen accordingly.

Hint

You can also Resize and Reset Camera from within the navigation window.


12.3.4. Assign Cast to Role

An animation project has a timeline for each role. Roles are usually assigned automatically when loading a cast (avatar object). Here’s how to assign a cast to a specific role.

By assigning a cast to a role, the animation data on the role can be played with that cast.

Timing when casts (avatars/objects) and roles are linked
  • When loading a new VRoid/VRM or each object

  • When changed later on the role setting screen

  • When opening a saved project


12.3.4.1. Assign Casts to Roles Later

As a case, you want to replace an animation that has been registered once with a cast of the same type that is read later.

  1. Click Settings from the Animation tab of the ribbon bar.

../_images/proper_3.png

  1. Open the Manage Roles tab.

../_images/proper_4.png

  1. Click the row of the role you want to assign the cast to.

../_images/proper_5.png

  1. A pop-up dialog will open, select the desired cast and press the SET button.

../_images/proper_6.png

Note

Select None to make the role uncast.

  1. Observe that the cast is automatically unassigned from its original role.

../_images/proper_7.png

The display will also switch on the animation timeline.

../_images/proper_8.png

Top: Timeline for later assigned roles

Bottom: Timeline of the original role


Cast unassigned roles and timelines remain intact and are not deleted.


12.3.5. Delete role

Delete the role. Delete roles that are no longer needed in your animation project. This operation also removes the actual object that is the cast assigned to the role.
To delete only the cast (object), right-click the object list and delete it.
  1. Click Settings from the Animation tab of the ribbon bar.

../_images/proper_3.png

  1. Open the Manage Roles tab.

  2. Check the radio button to the left of the role you want to remove, and click Remove Role on the toolbar.

../_images/proper_9.png

  1. A confirmation message will be displayed, so press the OK button.

Warning

  • Deleting a role like this deletes both the role and the cast(object).

  • cannot delete Stage.

The same thing can be done by right-clicking on the object list and selecting Delete both this object and role .

../_images/proper_a.png

12.3.6. Delete empty timelines all at once

If you repeatedly assign casts (objects) to roles, there may be a relatively large number of timelines (roles) with no objects assigned or no keyframes registered.

  1. Click Settings on the Animation tab of the ribbon bar.

  2. Click Delete Empty Timeline on the toolbar.

../_images/proper_e.png

  1. A confirmation message will be displayed, so press the OK button.

../_images/proper_f.png

A confirmation message will be displayed, so press the OK button.

1. キーフレームが一つも登録されていない
2. タイムライン(ロール)にオブジェクトが割り当てられていない

Warning

SystemEffect, BGM, SE, Stage cannot be separated from roles, so they are not included.


12.3.7. Change role title

You can enter a title for the role for clarity. It is usually set as an initial value as follows.

VRM:

VRM meta information title

Non-VRM:

Sequential number by type name + date and time

Because of this specification, roles and casts are automatically assigned if the VRM title is the same as the role title.
When changed, the VRM will not be automatically assigned, but it can be managed with an easy-to-understand role name in the animation project.
  1. Click Settings from the Animation tab of the ribbon bar.

../_images/proper_3.png

  1. Open the Manage Roles tab.

../_images/proper_b.png

  1. Find the row where you want to edit the role title and click on the role.

../_images/proper_c.png

  1. A pop-up dialog will appear. Enter a new name and press the SET button.

../_images/proper_d.png

Confirming the entry also changes the role title display on the timeline.


12.3.8. Reload all roles

HTML and Unity’s WebGL are not always perfectly linked. If there is a discrepancy between the role data and display on the HTML side and WebGL side, the display is updated by reloading.

  1. Click Settings on the Animation tab of the ribbon bar.

../_images/proper_3.png

  1. Open the Manage Roles tab.

  2. Click Refresh on the toolbar.

../_images/proper_g.png