JS-lufylegend game animation-character movement

JS-lufylegend game animation-character movement catalog

---

Preface

• Animation is the most basic part of the game

• Using LAnimationclass and loop time, you can easily realize the playback of a group of animations

• Prepare a photo containing the actions of the task

  

---

Import library

• lufylegendOfficial website
• Development suggestions:<script src="./lufylegend-1.10.1.min.js">
• Study suggestions:<script src="./lufylegend-1.10.1.js"></script>

---

manual

1. Import library
2. create<div>
3. Use initfunction to initialize work

---

Function analysis

• init(speed, divid, width, height, completeFuc, type)

  • speed: Game speed setting
  • divid: canvasIncoming this divinternal
  • width,height: Game width and height
  • completeFunc: After the game is initialized, call this function

• LAnimation(layer,data,list)

  • layer: LSpriteObject
  • data: LBitmapDataObject
  • list: A two-dimensional array of coordinates

• Array passedLGlobal.divideCoordinate(width,height,row,col)

  • width,height:Width Height
  • row,col: Number of rows, number of columns
  • This function will split the width and height passed in according to the number of rows and columns to obtain a two-dimensional array
  • For example, the picture is 256x256, split codeLGlobal.divideCoordinate(256,256,4,4)

 <div id="legend">Loading...</div>
    <script>

        init(50, "legend", 500, 350, () => {
     
     
            let loader = new LLoader();
            loader.addEventListener(LEvent.COMPLETE, event => {
     
     
                let bitmapdata = new LBitmapData(loader.content, 0,0,64,64);
                let list = LGlobal.divideCoordinate(287,287,4,4)
                
                let layer = new LSprite();
                addChild(layer);

                let anime = new LAnimation(layer, bitmapdata, list);
                layer.addEventListener(LEvent.ENTER_FRAME, () => {
     
     
                    anime.onframe();
                });
            });
            loader.load("animation.png", "bitmapData");
            
        });
    </script>

---

Code explanation

• When the character moves, it actually plays the first row of pictures in a loop one by one

• LAnimationKind onframe(): Add 1 to the column number of the picture being played, and play it in a loop event, and it becomes an animation

• To realize the loop playback of all pictures, you need to usesetAction

• setAction(rowIndex, colIndex): You can change the row number and column number of the picture

  • rowIndex: Array row number
  • colIndex: Array column number

---

Mobile sports

    <div id="legend">Loading...</div>
    <script>

        init(50, "legend", 500, 350, () => {
     
     
            let loader = new LLoader();
            loader.addEventListener(LEvent.COMPLETE, event => {
     
     
                let bitmapdata = new LBitmapData(loader.content, 0,0,64,64);
                let list = LGlobal.divideCoordinate(287,287,4,4)
                
                let layer = new LSprite();
                addChild(layer);

                let anime = new LAnimation(layer, bitmapdata, list);
                layer.addEventListener(LEvent.ENTER_FRAME, () => {
     
     
                    let action = anime.getAction();
                    switch(action[0]) {
     
     
                        case 0:
                            layer.y += 5;
                            if(layer.y >= 200)  anime.setAction(2);
                            break;
                        case 1:
                            layer.x -= 5;
                            if(layer.x <= 0)    anime.setAction(0);
                            break;
                        case 2:
                            layer.x += 5;
                            if(layer.x >= 200)  anime.setAction(3);
                            break;
                        case 3:
                            layer.y -= 5;
                            if(layer.y <= 0)    anime.setAction(1);
                            break;
                    }
                    anime.onframe();
                });
            });
            loader.load("animation.png", "bitmapData");
            
        });
    </script>

---

Code explanation

• getActionGet the row number and column number of the currently playing animation, the return is an array
• $[1,2,3,4]$ represents the 4 directions of "down, left, right, and up" respectively, and then move, and change the direction of movement according to the position reached
• layer.y += 5: Control the rhythm and pace of image movement
• layer.y >= 350 - 287/2: It controls the moving space, and the biggest formula is:

$CAn-VASa\; highdegree\; of-\frac{The\; wholebodyof\; FIGisa\; highdegree\; of}{Dividedintoarownumber}\times SingleaFIGatCAn-VASsignificantlyshownthehighdegree\; of\times 2$

---