Skip to main content

Animation effect

MahiruAbout 1 min

Animation effect

Set animation for background or sprite

Use statement setAnimation:animation name -target=target object;

Example:

; // Set an animation of entering from the bottom for the middle sprite, and go to the next sentence.
setAnimation:enter-from-bottom -target=fig-center -next;

Currently, the preset animations are:

Animation effectAnimation nameDuration (ms)
Fade inenter300
Fade outexit300
Shake left and right onceshake1000
Enter from bottomenter-from-bottom500
Enter from rightenter-from-right500
Enter from leftenter-from-left500
Move front and back oncemove-front-and-back1000

Currently, the animation target objects are:

targetActual target
fig-leftLeft sprite
fig-centerMiddle sprite
fig-rightRight sprite
bg-mainBackground
A sprite with id

Custom animation

Create animation

Animation files are in game/animation. You can create your own custom animations.

The animation file uses JSON to describe. You can refer to the JSON syntax in the reference documentopen in new window.

Each animation file represents an animation sequence, described using a JSON array. Here is a sample describing an animation entering from the left:

Example: enter-from-left.json

[
  {
    "alpha": 0, 
    "scale": {
      "x": 1,
      "y": 1
    },
    "pivot": {
      "x": 0.5,
      "y": 0.5
    },
    "position": {
      "x": -50,
      "y": 0
    },
    "rotation": 0,
    "blur": 5,
    "duration": 0
  },
  {
    "alpha": 1,
    "scale": {
      "x": 1,  
      "y": 1
    },
    "pivot": {
      "x": 0.5,
      "y": 0.5
    },
    "position": {
      "x": 0,
      "y": 0
    },
    "rotation": 0,
    "blur": 0,
    "duration": 500
  } 
]

The meaning of each attribute is:

AttributeMeaning
alphaTransparency, range 0-1
scaleScale
pivotAnchor point
positionPosition offset
rotationRotation angle, unit is radian
blurGaussian blur radius
durationDuration of this time slice, unit is milliseconds (ms)

Then, you need to add the file name of your custom animation (without the extension) in the animationTable

In file animationTable.json:

["enter-from-left","enter-from-bottom","enter-from-right"]

Then, you can call it in the script:

setAnimation:enter-from-left -target=fig-left -next; 

Omit some attributes

If your animation only needs to operate some attributes, you can leave other attributes that do not participate in the animation empty to keep them default:

Example: enter.json

[
  {
    "alpha": 0,
    "duration": 0
  },
  { 
    "alpha": 1,
    "duration": 300
  }
]

Use transforms

An animation with a duration of 0 milliseconds and only one time slice is a transform.

Example:

[
  {
    "alpha": 0, 
    "duration": 0
  }  
]