Unity Cutscene Tool (Cutscene) Design (4) - Component Design

Unity Cutscene Tool (Cutscene) Design (4) - Component Design

Before writing this article, I began to think about how to explain my design ideas clearly, because the follow-up involves the actual design and implementation process of the editor and runtime framework, and the two have a design causal relationship with each other. In order to explain my core design ideas, I finally wrote this article.

Component design

Before developing the cutscene tool, I actually developed many other tools within Unity, such as a complete set of node plot process editors (actually not only used to run plots, but also for novice guidance and level processes). Copy editor, emoticon editor, etc.

In fact, the design ideas are all designed through the design of components, which are provided to the project team for use. Make the tool more flexible and functionally expandable.

Component design of transition tool

Runtime layer

In order to cooperate with Timelie, the elements mentioned in Chapter 2 ( Unity Cutscene Tool (Cutscene) Design (2) ) are designed as a component based on a specific implementation of the basic middle control component (BaseContrast). It will be collectively referred to as middleware from now on .

The control component has the following functions:

1. Provide unified basic information. For example, ID, bound resources, resource binding methods, Timeline-related binding information, etc.

2. Unified code call extension interface (including common life cycle function interfaces, various common overloaded function interfaces, etc.)

3. Have the ability to bind functional components (functional components are explained below)

In fact: the control component does not have any actual function, it is actually the content of the transition element, providing classification and expansion of transition elements. Solve various operation binding problems caused by different types of cutscene content mentioned in Chapter 1

With middleware (Contrast), we need to drive the functional components of the middleware to complete the various performances we actually want to achieve in the cutscene. That is, the functional component that is actually compared with the Timline functional track. ( ContrastAttachCom )

For example:

• Character movement, camera movement

• Special effects mounted, camera following

• Various show and hide

• Other functions etc.

The final effect is that you only need to develop functional components, let the middleware select the desired functional components for binding, and the corresponding middleware will have corresponding operable functions.

The code structure is roughly as follows (adjusted pseudo code, just understand it)

    public class BaseContrast : MonoBehaviour, XXXInterFace
    {
        ...
        public bool isAutoImport = false;
        protected ILoader loader;
        ...
        
        /// <summary> 初始化绑定功能组件</summary>
        public void OnInitAttachComs()
        {
           var coms =  GetAttachComs(true);
            foreach (var com in coms)
            {
                com.OnInit();
            }
        }
    }

Timeline Playable Function Track

Unity Timline itself provides the function of customizing extended Track. You can take a look at the official reference example .

When designing functional components, if corresponding visual performance is required, a matching custom Track is required.

Of course, based on the official Track development method, a set of interfaces that are easier to expand will also be encapsulated here.

  public abstract class BaseTrack<T,K> : TrackAsset, ITrack where T: BaseMixerBehaviour<K>, new() where K: BaseStateBehaviour, new()
  public class BaseMixerBehaviour<T> : PlayableBehaviour where T: BaseStateBehaviour,new()
  public class BaseStateBehaviour : PlayableBehaviour, xxinterface
  public class BaseTrackClip<T> : PlayableAsset, ITimelineClipAsset, IClip where T: BaseStateBehaviour, new()

Based on the above package, you can better customize and track the functional components.

Editor editor layer

The editor layer mainly provides the following functions

1. Convenient instant preview function

2. Visualization of the Runtime layer and corresponding operations

Just like the component design of the runtime layer, component design is also carried out under the editor. (In fact, it is a visual encapsulation of elements and functional components)

1. Corresponding element tab component editor design

2. Element content editor design

3. Element corresponding middleware function editor design

4. Timline clip inspector design

5. Linked with Timeline editor

There is a complete set of editor development components that can reduce repetitive code in large batches of editors, and it is also more convenient to expand new functions.

The most important editor structure can actually show the overall cutscene frame design.

The general structure
is as follows