preface

Recently, due to my work, I had access to Cocos Creator, so I also recorded what I learned one by one here, so that I could easily replay it in the future.

Action system

Introduction to motion System

The action system can complete various actions such as displacement, scaling and rotation of nodes in a certain time.

It is important to note that the motion system does not replace the animation system. The motion system provides an API interface for programmers, while the animation system is designed in the editor.

At the same time, they serve different usage scenarios. Motion systems are better for simple deformation and displacement animations, while animation systems are much more powerful. Artists can use editors to create complex animations that support various properties, including motion tracks and gentle movements.

The dynamic system

Introduction to slow motion system

Cc. tween can ease any property of an object, similar to cc.Action. But cc.tween is much cleaner and easier to use than cc.Action, because cc.tween provides chain-creation methods that can operate on any object and ease any property of the object.

Chain API

Each CC.tween API generates an action internally and adds the action to an internal queue. After the API is called, it returns an instance of itself, so that the code can be organized by chain calls.

To (1, {scale: 2}) // when the first action is executed, the scale is 2. To (1, {scale: 2}). Start (); // Call start to start cc.tweenCopy the code

Set the easing property

Cc.tween provides two apis for setting properties:

cc.tween(node)
  .to(1, {scale: 2})      // node.scale === 2
  .by(1, {scale: 2})      // node.scale === 4 (2 + 2)
  .start()
Copy the code

Supports easing any property of any object

let obj = { a: 0 }
cc.tween(obj)
  .to(1, { a: 100 })
  .start()
Copy the code

Execute multiple properties simultaneously

To (1, {scale: 2, position: cc.v2(100, 100), rotation: 90 }) .start()Copy the code

easing

Use easing to make it more vivid, and cc.tween offers a variety of ways to use it for different situations.

// Pass in the easing name and use the built-in easing function cc.tween().to(1, {scale: 2}, {easing: 'tween(). To (1, {scale: 2}, {t => t*t; }) // Use easing only for a single attribute // Value must be used with easing or progress cc.tween().to(1, {scale: 2, position: {value: cc.v3(100, 100, 100), easing: 'sineOutIn' } })Copy the code

For details of the Easing type, see the API documentation.

Custom progress

The custom progress function has more control over easing than easing does.

Progress cc.tween().to(1, {scale: 2, rotation: 90}, {progress: (start, end, current, ratio) => { return start + (end - start) * ratio; }}) progress cc.tween().to(1, {scale: 2, position: {value: cc.v3(), progress: (start, end, current, t) => {// Start. Lerp (end, t, current); }}})Copy the code

Copy the slow

The clone function copies the current cache and takes a target as an argument.

Let tween = cc.tween().to(4, {scale: Clone (cc.find('Canvas/cocos')).start()Copy the code

Insert other buffers into the queue

You can create some fixed buffers beforehand, and then reduce code by combining them to form new buffers.

let scale = cc.tween().to(1, { scale: 2 }) let rotate = cc.tween().to(1, { rotation: 90}) let move = cc.tween().to(1, { position: cc.v3(100, 100, Rotate cc.tween(this.node).then(scale).then(rotate) // Rotate cc.tween(this.node).then(scale).then(move)Copy the code

Parallel execution of easing

Cc. tween performs chained execution in sequence mode, but may need to execute multiple queues in parallel at the same time when writing complex slow operation. Cc. tween provides a parallel interface to meet this requirement.

let t = cc.tween; T (this.node) // Parallel (t ().to(1, {scale: 2}), t().to(2, {position: cc.v2(100, 100) }) ) .call(() => { console.log('All tweens finished.') }) .start()Copy the code

The callback

cc.tween(this.node) .to(2, { rotation: 90}) .to(1, { scale: .call(() => {cc.log('This is a callback')}).start()Copy the code

repeat

The repeat/repeatForever function takes the previous action as its object. But if an argument provides another action or tween, the repeat/repeatForever function will use the action or tween as its object.

cc.tween(this.node) .by(1, { scale: }) // repeat the previous by 10 times.repeat(10) // finally node.scale === 11.start () // cc.tween(this.node).repeat(10, Cc.tween().by(1, {scale: 1})).start() // Repeat cc.tween(this.node).by(1, {scale: 1}).repeatforever ().start()Copy the code

Delay the

Cc.tween(this.node) // delay 1s.delay(1).to(1, {scale: 2}).start()Copy the code

Use a timer

Cocos Creator provides a convenient timer for components, which ADAPTS to component-based usage. Here’s how it works:

First, create a variable that points to a component named Component.

Start a timer

Component.schedule (function() {// This refers to Component this.dosomething (); }, 5);Copy the code

The above timer will run every 5s.

More flexible timers

// Time interval in seconds var interval = 5; Var repeat = 3; Var delay = 10; Component.schedule (function() {// This refers to Component this.dosomething (); }, interval, repeat, delay);Copy the code

The timer above will start after 10 seconds and perform 3 + 1 callbacks every 5 seconds.

A timer that only executes once (shortcut)

Component.scheduleonce (function() {// This points to component this.dosomething (); }, 2);Copy the code

The timer above will execute a callback after two seconds and then stop.

Cancel timer

Developers can use the callback function itself to cancel the timer:

this.count = 0; This.callback = function () {if (this.count === 5) {this.unschedule(this.callback); } this.doSomething(); this.count++; } component.schedule(this.callback, 1);Copy the code

Note: When the component’s timer calls the callback, it specifies this as the component itself, so you can use this directly in the callback.

Here are all the timer functions in Component:

Schedule: Start a timer

ScheduleOnce: Starts a timer that is executed only once

Unschedule: Cancels a timer

UnscheduleAllCallbacks: Cancel all timers for this component

Detailed descriptions of these apis can be found in the Component API documentation.

In addition, if you need to execute a function per frame, add the Update function directly to Component. This function will be called per frame by default, as described in the lifecycle documentation.

Note: Cc.node does not include timer apis