Laya2.x Game Engine Introduction series (iii) : Common animation development

What ways does the Laya engine provide for animation?

To begin with, let’s review the way animation is implemented in H5 development if you want to make an animation.

Gif: the simplest animation implementation, do not need to develop intervention only need designers to provide resources, only suitable for repeated playback does not need to control the animation playback speed of animation;
CSS3 Keyframes: it is the most commonly used way to achieve animation in H5, by controlling the picture of each frame to achieve complex animation, without considering the premise of performance, this animation is suitable for most animation scenes;
CSS3 Transition: You can control the CSS properties of a Dom element to achieve the Transition effect. This animation is generally used to avoid CSS properties changing too hard.
Video: At present, there are many H5 activities that try to directly use video as the main means of animation, and play different videos in response to the user’s behavior through JS to achieve the effect of interaction with the user. This kind of animation implementation method is suitable for super complex animation that cannot be realized by code.
JS animation: in the above way to achieve animation can not be achieved, only through THE JS method to achieve, which includes two cases: 1, through JS control animation process or CONTROL Dom slow; 2. Use JS to control Canvas or WebGL to draw animation, which is suitable for most complex animation scenes;

After reviewing some of the ways in which animations are implemented in H5, let’s take a look at what the Laya game engine provides us with to implement animations.

Atlas animation: here atlas animation is a new concept in game development, the effect is similar to the CSS Keyframes animation we mentioned before, you can simply understand as atlas ≈ Sprite map, the difference between the two is that the atlas is also a configuration table of the corresponding position of each picture;
Slow animation: It’s similar to the CSS Transition that I mentioned earlier, but it’s really just the end result. It’s similar to the way that Laya provides a slow animation that is controlled by code, More like $(selector).animate() in JQuery, tween.to (), tween.from () in tween.js, Laya.tween. from() and laya.tween. to() functions are provided to control the gradual transition of elements from state A to state B;
Timeline animation: It is one of the most commonly used features in Laya game development, and beginners can think of it as a collection of slow animation and atlas animation. LayaIDE also provides a timeline animation editor, which can quickly achieve image replacement, displacement, gradient, zoom and other animation effects by editing every key frame on the timeline;
Dynamic effect template: it abstracts the animation effect based on the timeline animation into an effect template, and then attaches the effect to other UI components, so that components can realize the existing animation effect without coding;
Bone animation: a special model animation effect in the game. In the model, there is a skeleton structure composed of interconnected bones, which can be animated by changing the orientation and position of the bones. Laya currently supports two kinds of bone animation, Spine and DragonBone animation.

Currently, only GIFs in H5 are not supported in Laya game engine, other animation methods are available in Laya games. Below is a comparison animation from the Spirit Artist

How should we use these animations?

Now that we’ve looked at the ways the game provides to implement animations, how can we use them

1. Atlas animation

The gallery animation itself plays the gallery resource directly. We mentioned earlier that the gallery resource is actually a Sprite image with an image location information table. Now let’s see what the actual gallery resource looks like.

The following figure shows the atlas resources specifically used by us, blink.atlas (location information of each image resource) and blink. PNG (Sprite image synthesized by each image frame).

Blink. atlas: Record the position of each image in the Sprite image, as follows:

{"frames": {"lz_01.png": {"frame": {"h":604."idx":0."w":650."x":0."y":0},"sourceSize": {"h":667."w":720},"spriteSourceSize": {"x":15."y":23}},"lz_03.png": {"frame": {"h":625."idx":0."w":667."x":651."y":0},"sourceSize": {"h":667."w":720},"spriteSourceSize": {"x":42."y":25}},"lz_05.png": {"frame": {"h":619."idx":0."w":623."x":0."y":605},"sourceSize": {"h":667."w":720},"spriteSourceSize": {"x":63."y":13}},"lz_07.png": {"frame": {"h":617."idx":0."w":670."x":624."y":626},"sourceSize": {"h":667."w":720},"spriteSourceSize": {"x":20."y":24}},"lz_09.png": {"frame": {"h":618."idx":0."w":688."x":1295."y":626},"sourceSize": {"h":667."w":720},"spriteSourceSize": {"x":13."y":30}},"lz_11.png": {"frame": {"h":617."idx":0."w":671."x":0."y":1244},"sourceSize": {"h":667."w":720},"spriteSourceSize": {"x":35."y":7}},"lz_13.png": {"frame": {"h":615."idx":0."w":676."x":1319."y":0},"sourceSize": {"h":667."w":720},"spriteSourceSize": {"x":35."y":13}},"lz_15.png": {"frame": {"h":642."idx":0."w":613."x":672."y":1244},"sourceSize": {"h":667."w":720},"spriteSourceSize": {"x":71."y":0}},"lz_17.png": {"frame": {"h":614."idx":0."w":702."x":1286."y":1245},"sourceSize": {"h":667."w":720},"spriteSourceSize": {"x":10."y":18}},"lz_19.png": {"frame": {"h":598."idx":0."w":614."x":1984."y":616},"sourceSize": {"h":667."w":720},"spriteSourceSize": {"x":98."y":24}},"lz_21.png": {"frame": {"h":613."idx":0."w":621."x":1996."y":0},"sourceSize": {"h":667."w":720},"spriteSourceSize": {"x":79."y":25}},"lz_23.png": {"frame": {"h":551."idx":0."w":602."x":1989."y":1215},"sourceSize": {"h":667."w":720},"spriteSourceSize": {"x":53."y":46}}},"meta": {"image":"blink.png"."prefix":"lamp/blink/"}}
Copy the code

PNG: a collection of images corresponding to all frames (here is the original image, which can be downloaded as a demo). The contents are as follows:

The overall use process is also very simple, after loading atlas resources, directly play

/** * create an animation instance * 2, load an atlas resource *.atlas * 3, add to the stage * 4, play an animation */
 
// Create an animation instance
let animation = new Laya.Animation();
// Load the atlas resource blink.atlas, the engine will find the image resource blink. PNG according to the atlas file
animation.loadAtlas('animation/blink.atlas'.new Laya.Handler(this.(a)= > {
    // After loading, add the animation to the stage and start playing
    this.addChild(animation);
    // Play an infinite loop
    animation.play()
}));
Copy the code

The specific effects are as follows:

2. Slow animation

Slow animation is an important means to improve game experience. Laya engine encapsulates slow animation very well, exposing only two classes: slow animation Laya.Tween and speed Laya.Ease, through which slow animation can be quickly realized. Let’s look at how to make a block move and change color:

/** * Set the style attribute of the element to be moved */
 
// Add elements to the stage and set the size and position
let $box = new Laya.Box();
$box.size(100.100).pos(0.0);
$box.bgColor = 'red';
this.addChild($box)

// Use slow animation to control the position and size of $box; The entire animation takes 2 seconds
Laya.Tween.to($box, {
    width: 200,
    height: 200,
    x: 300,
    y: 700
}, 2000, Laya.Ease.linearInOut, Laya.Handler.create(this.(a)= > {
    // The operation after the slow animation ends
    Laya.Tween.to($box, {
        width: 100,
        height: 100,
        x: 0,
        y: 0
    }, 2000);
}));
Copy the code

The specific effects are as follows:

3. Timeline animation

Laya provides two ways to realize the timeline animation, one is to use the IDE editing mode to create the timeline animation, the other is to use code to create the timeline animation directly. Let’s look at how to move and resize a block:

1. The steps to create a timeline animation through edit mode are as follows:

(a) Right-click the scene directory on the left and create a new timeline animation file

(b) Drag the picture into the scene, click “Animation Editing Mode”, set the key frame properties, modify the picture size and x and Y properties

(c) Click the corresponding frame on the timeline to add the desired attribute. Repeat several times to add multiple key frames

(d) Drag the generated timeline animation *.ani into the scene and recompile to see the effect

2. Create a timeline animation in code:

/** * Use the timeline animation process: * 1. Set the style of each frame for the element to be moved */

// Add elements to the stage and set the size and position
let $box = new Laya.Box();
$box.size(100.100).pos(0.0);
$box.bgColor = 'blue';
this.addChild($box)

// Create a timeline animation
let timeline = new Laya.TimeLine();
timeline
    // The first sequence of the timeline animation
    .to($box, {
        width: 200,
        height: 200,
        x: 300,
        y: 700
    }, 2000)
    // Second sequence of timeline animation
    .to($box, {
        width: 100,
        height: 100,
        x: 0,
        y: 0
    }, 2000);
timeline.play();
Copy the code

The specific effects are as follows:

4. Dynamic template

Animation template can be understood as an abstraction of time animation effect, similar to @keyframes defined in CSS3. The same animation can be performed by adding the keyframes to the corresponding DOM. Currently active templates can only be created in IDE edit mode. The steps are as follows:

(a) Right click the scene directory on the left to create a dynamic template

(b) Drag and drop to add pictures

(d) Edit the keyframe and add a shaking animation effect, similar to the previous operation when editing the timeline animation

(e) Create a new image component in the new scene and add the dynamic effect template shake.efc just implemented to the image component

The specific effects are as follows:

5. Bone animation

The use of bone animation is more complicated than other animations, because it needs to first use Laya’s built-in UI resource conversion tool to convert existing design resources into resources that Laya engine knows (texture set *.png, keel resource information *.sk). At present, there are two main tools for animation of keel on the market: DragonBone and Spine. Spine is a paid software, DragonBone is free, in order to facilitate your own operation, we use DragonBones as a demo tool. Use steps:

(a) Download the DragonBones tool

(b) Open the DragonBone tool and select an example of a skeleton animation. If you have your own keel animation resource, you can use it.

(d) Create a new Laya2D project using the IDE and place the exported files in the root directory of the project

(e) Convert keel animation resources into resources available to the engine through the tools provided by the IDE

*.png and *.sk files will be generated in the directory, and the files will be placed in the project’s resource file laya/ Assets /dragonBone (the dragonBone file is created for you, you can call it another name).

(g) In edit mode, press F9 to add the checkbox of class library laya.ani.js

(h) Modify SRC /script/ gameui.ts directly in the initialization project, modify to the following code, recompile to see the effect

import { ui } from ". /.. /ui/layaMaxUI";

export default class GameUI extends ui.test.TestSceneUI {
    onEnable(): void {
        /** * Create keel animation template * 2, load keel resources * 3, create keel animation instance through the template * 4, play keel animation */

        // Create an animation template for subsequent reuse of animation scenes
        let templet = new Laya.Templet();
        // Load the keel resource
        templet.loadAni('dragonBone/Dragon_1.sk');
        // Handle the load completion event
        templet.on(Laya.Event.COMPLETE, this.(a)= > {
            // Create an animation instance from the template
            // 0, use template buffered data, template buffered data, do not allow modification
            // 1, use the animation's own buffer, each animation will have its own buffer, quite expensive memory (memory overhead, low computing overhead, support reloading)
            // 2, use dynamic mode, to real-time to draw (low memory overhead, high computing overhead, support reload, not recommended)
            let skeleton = templet.buildArmature(1);
            skeleton.pos(200.500);
            this.addChild(skeleton);
            // Play the animation
            skeleton.play(0.true); }); }}Copy the code

The specific effects are as follows:

Common animation optimization strategies

Basically any animations can be realized through the timeline animation or atlas of animation, is merely the needs of the implementation of atlas size and is appropriate for the difference, the difference between a fast game itself has strict control on the inclusion size, fast game master bag limit of 10 MB, if according to the designer to provide animation resources used directly, There is a high probability that the package will soon exceed the limit. Here are a few common strategies for animation optimization:

Compress each image resource in the image set and crop the blank area of the image
Removes duplicate images from atlas animations
Adjust the playback rate of animation and delete animation pictures by skipping frames
Try to reduce complex atlas animation to multiple simple atlas animation or slow animation, reduce pure atlas animation as far as possible
When animating the actions of game characters, consider using skeletal animations

The above optimization strategy is mainly from the perspective of how to reduce the size of animation resources. Laya engine itself to animation to do a lot of their own optimization, to ensure that we can out of the box, interested in understanding Laya engine, you can view the source code.

Laya2.x game engine introduction series

The author has been deeply involved in an OPPO fast game project (similar to micro games on wechat) since May, 19. From scratch, I have finally entered the door of H5 game development. There aren’t many tutorials on how to make fast games with Laya, so I decided to write down all the holes I’ve stepped on, solved, and learned over the past few months so that other students can avoid them in advance.

The LayA2.x Game Engine Primer series is expected to write the following articles documenting how to develop and ship a fast game from scratch:

Laya2.x Game Engine Introduction Series 1: Hello World
Laya2.x Game Engine Introduction Series (ii) : UI interface development
Laya2.x Game Engine Introduction series (iii) : Common animation development
Laya2.x Game engine introduction series (4) : Pixel level restore text
Laya2.x Game Engine Introduction Series (5) : The Soul of the game – Script
Laya2.x Game Engine Introduction Series (6) : Pictures cure all Diseases
Laya2.x Game Engine Introduction Series (7) : Data Communication
Laya2.x Game Engine Introduction Series (8) : 2D physics World
Laya2.x Game Engine Introduction Series (9) : Game debugging
Laya2.x Game Engine Introduction Series (10) : Project Engineering
Laya2.x Game Engine Introduction Series (11) : Game performance Optimization
Laya2.x Game Engine Introduction Series (12) : FAQ

At the same time, Laya2 currently engine code through TypeScript refactoring, if you have any questions in writing code can directly find the answer in GitHub source code, the author will also write some articles about Laya2 source code parsing, interested friends can pay attention to.

This is the first time to try to write a complete teaching article, if there is any mistake or not rigorous place, please be sure to give correction, thank you very much!

About me

I am a modefeelings code porter, will update 1 to 2 front-end related articles every week, interested in the old iron can scan the following TWO-DIMENSIONAL code attention or direct wechat search front-end cram school attention.

Mastering the front end is difficult, let’s make up the lesson together!

Laya2.x Game Engine Introduction series (iii) : Common animation development

What ways does the Laya engine provide for animation?

How should we use these animations?

1. Atlas animation

2. Slow animation

3. Timeline animation

4. Dynamic template

5. Bone animation

Common animation optimization strategies

Laya2.x game engine introduction series

About me

Related Posts

Hand in hand to teach you to build fire safety answer mini procedures – answer results page

Do programmers who indent Spaces earn more?

Lightweight, efficient and independent open-source JS plug-ins and libraries are recommended