This is the seventh day of my participation in the More text Challenge. For details, see more text Challenge

sequence

Haven’t recorded a blog for a long time, originally thought May 1 to write, the result was too busy

This is the sequel to the previous episodebroken “What if I Want to Make a Web game? PixiJs ii

The text start

The effect achieved in the last article is that animated sprites appear, but they are not yet combined with keyboard walking

After the animation Sprite is generated, you can add the state attribute for the Sprite, because the Sprite is composed of 4×4 Sprite diagram, so according to the Sprite diagram analysis, the Sprite can be divided into four states, are down, left, right, up.

The state of the genie can be simply understood through the Chinese: Pixi.js Chinese

Also see this article: blog.csdn.net/FE_dev/arti…

In the Sprite diagram, there are actually four static states and four dynamic states

• The static state of a Sprite defines four positions for the Sprite when it is not moving
• The animation state of a Sprite defines four sequences of actions as the Sprite moves

The following uses states to define these states

// Set a states object literal property
jujin.states = {
	down: 0.left: 4.right: 8.up: 12.walkDown: [0.3].walkLeft: [4.7].walkRight: [8.11].walkUp: [12.15]};Copy the code

Use sprite.show(sprite.states. Static state); You can display only the static state of the Sprite using sprite.playanimation (sprite.States). Action state); Statement can display only a Sprite action state

For example, use the following code to test:

// Set a states object literal property
jujin.states = {
    down: 0.left: 4.right: 8.up: 12.walkDown: [0.3].walkLeft: [4.7].walkRight: [8.11].walkUp: [12.15]};// jujin.show(jujin.states.left);
jujin.playAnimation(jujin.states.walkUp);
Copy the code

Effect:

Now we have finished the action effect of the genie

The next step is to add keyboard events to the method about keyboard movement. I use the Keyboard method provided by Chinese

This method listens for and captures keyboard events. It’s also easy to use: let keyObject = Keyboard (keyValue); You can define press and release methods for the Keyboard object

keyObject.press = () = > {
  //key object pressed
};
keyObject.release = () = > {
  //key object released
};
Copy the code

Remove the event listener keyObject.unsubscribe() with the unsubscribe method;

Here is the Keyboard method code

// Keyboard function
function keyboard(value) {
  let key = {};
  key.value = value;
  key.isDown = false;
  key.isUp = true;
  key.press = undefined;
  key.release = undefined;
  //The `downHandler`
  key.downHandler = event= > {
    if (event.key === key.value) {
      if (key.isUp && key.press) key.press();
      key.isDown = true;
      key.isUp = false; event.preventDefault(); }};//The `upHandler`
  key.upHandler = event= > {
    if (event.key === key.value) {
      if (key.isDown && key.release) key.release();
      key.isDown = false;
      key.isUp = true; event.preventDefault(); }};//Attach event listeners
  const downListener = key.downHandler.bind(key);
  const upListener = key.upHandler.bind(key);
  
  window.addEventListener(
    "keydown", downListener, false
  );
  window.addEventListener(
    "keyup", upListener, false
  );
  
  // Detach event listeners
  key.unsubscribe = () = > {
    window.removeEventListener("keydown", downListener);
    window.removeEventListener("keyup", upListener);
  };
  
  return key;
}
Copy the code

Next, we need to add one more key judgment method, keyMove, using ASDW control:

this.keyMove(jujin)
Copy the code

// Keyboard control movement
keyMove(person) {
    let left = keyboard('a'), up = keyboard('w'), right = keyboard('d'), down = keyboard('s');
    left.press = () = > {
        // Press the button to use the action state
        person.playAnimation(person.states.walkLeft);
        person.vx = -2;
        person.vy = 0;
    };
    left.release = () = > {
    	// Stop the action
        person.stopAnimation();
        // Use the static state each time the key is raised
        person.show(person.states.left);
        person.vx = 0;
        person.vy = 0;
    };
    right.press = () = > {
        person.playAnimation(person.states.walkRight);
        person.vx = 2;
        person.vy = 0;
    };
    right.release = () = > {
        person.stopAnimation();
        person.show(person.states.right);
        person.vx = 0;
        person.vy = 0;
    };
    up.press = () = > {
        person.playAnimation(person.states.walkUp);
        // person.show(person.states.up);
        person.vx = 0;
        person.vy = -2;
    };
    up.release = () = > {
        person.stopAnimation();
        person.show(person.states.up);
        person.vx = 0;
        person.vy = 0;
    };
    down.press = () = > {
        person.playAnimation(person.states.walkDown);
        // person.show(person.states.down);
        person.vx = 0;
        person.vy = 2;
    };
    down.release = () = > {
        person.stopAnimation();
        person.show(person.states.down);
        person.vx = 0;
        person.vy = 0;
    };
},
Copy the code

By the way, remember to add Sprite movement when using

this.app.ticker.add(() = > this.gameLoop(jujin ));
Copy the code

gameLoop(person){
    person.x += person.vx;
    person.y += person.vy;
},
Copy the code

After this operation, you can achieve keyboard control Sprite movement effect

The complete code is as follows:

<template>
    <div id="animation"></div>
</template>

<script>
import * as pixi from 'pixi.js'

// Keyboard function
function keyboard(value) {
  let key = {};
  key.value = value;
  key.isDown = false;
  key.isUp = true;
  key.press = undefined;
  key.release = undefined;
  //The `downHandler`
  key.downHandler = event= > {
    if (event.key === key.value) {
      if (key.isUp && key.press) key.press();
      key.isDown = true;
      key.isUp = false; event.preventDefault(); }};//The `upHandler`
  key.upHandler = event= > {
    if (event.key === key.value) {
      if (key.isDown && key.release) key.release();
      key.isDown = false;
      key.isUp = true; event.preventDefault(); }};//Attach event listeners
  const downListener = key.downHandler.bind(key);
  const upListener = key.upHandler.bind(key);
  
  window.addEventListener(
    "keydown", downListener, false
  );
  window.addEventListener(
    "keyup", upListener, false
  );
  
  // Detach event listeners
  key.unsubscribe = () = > {
    window.removeEventListener("keydown", downListener);
    window.removeEventListener("keyup", upListener);
  };
  
  return key;
}

export default {
    name:'animation'.components: {},
    props: {},
    data() {
        return {
            loader: null.app:null.player: null}; },created() {},
    mounted() {
        this.initState();
        this.players();
    },
    watch: {},
    computed: {},
    methods: {
        initState() {
            this.loader = new pixi.Loader();
            //Create a Pixi Application creates a Pixi Application
            this.app = new pixi.Application({
                width: 735.// default: 800 width
                height: 640.// default: 600 height
                antialias: true.// default: false antialiasing
                transparent: true.// default: false transparency
                resolution: 1 ,      // default: 1
                backgroundAlpha: 1   // Set the background color opacity. 0 is transparent
            });
          // There is no need to set the background color because it is already transparent
            this.app.renderer.backgroundColor = 0x000000;  
            document.getElementById('animation').appendChild(this.app.view)
            this.app.renderer.view.style.display = "block";  
            this.app.renderer.view.style.marginLeft = "30px";  // Set the canvas left margin
            this.app.renderer.autoResize = true;  
            this.app.renderer.view.style.border = "1px dashed black";  // Set the border
        },
        players() {
            let stage = this.app.stage, Container = pixi.Container, Graphics = pixi.Graphics, player = this.player, TextureCache = pixi.utils.TextureCache,
                Texture = pixi.Texture, Rectangle = pixi.Rectangle, AnimatedSprite = pixi.AnimatedSprite;
            / * * * * * * * * * * * * * * * * * * * load texture map, create the elves, and add the elves to the stage stage * * * * * * * * * * * * * * * * * * * /
            let jujinPng = './baoke/an3.png'
            this.loader.add([{name:'jujin'.url: jujinPng}]).load(() = >{
                / / use SpriteUtilities
                let animate = new SpriteUtilities(pixi);
                // console.log(animate)
                // create texture array to change Sprite diagram into texture array 66,48
                let frames = animate.filmstrip(jujinPng, 84.81);
                // Create the texture array using only part of the Sprite diagram
                / / let frames = the animate. Frames (jujinPng, [[0, 0], [66, 0], [132, 0], [198, 0]], 66, 48);
                // console.log(frames)
                let jujin = animate.sprite(frames);  // Use SpriteUtilities to create sprites
                // let jujin = this.setTexture(frames); // Create sprites using the previous method
                stage.addChild(jujin);
                jujin.animationSpeed=0.08;
                jujin.vx = 0;
                jujin.vy = 0;
                // jujin.play();
                
                // Set a states object literal property
                jujin.states = {
                    down: 0.left: 4.right: 8.up: 12.walkDown: [0.3].walkLeft: [4.7].walkRight: [8.11].walkUp: [12.15]};this.keyMove(jujin)
                this.app.ticker.add(() = > this.gameLoop(jujin )); })},// Keyboard control movement
        keyMove(person) {
            let left = keyboard('a'), up = keyboard('w'), right = keyboard('d'), down = keyboard('s');
            left.press = () = > {
                // person.show(person.states.left);
                person.playAnimation(person.states.walkLeft);
                person.vx = -2;
                person.vy = 0;
            };
            left.release = () = > {
                person.stopAnimation();
                person.show(person.states.left);
                person.vx = 0;
                person.vy = 0;
            };
            right.press = () = > {
                person.playAnimation(person.states.walkRight);
                person.vx = 2;
                person.vy = 0;
            };
            right.release = () = > {
                person.stopAnimation();
                person.show(person.states.right);
                person.vx = 0;
                person.vy = 0;
            };
            up.press = () = > {
                person.playAnimation(person.states.walkUp);
                // person.show(person.states.up);
                person.vx = 0;
                person.vy = -2;
            };
            up.release = () = > {
                person.stopAnimation();
                person.show(person.states.up);
                person.vx = 0;
                person.vy = 0;
            };
            down.press = () = > {
                person.playAnimation(person.states.walkDown);
                // person.show(person.states.down);
                person.vx = 0;
                person.vy = 2;
            };
            down.release = () = > {
                person.stopAnimation();
                person.show(person.states.down);
                person.vx = 0;
                person.vy = 0;
            };
        },
        gameLoop(person){
            person.x += person.vx;
            person.y += person.vy;
        },
        setTexture (texture) {
            // console.log(texture)
            let sprite = new pixi.AnimatedSprite(texture);
            returnsprite; ,}}};</script>
<style scoped>
</style>

Copy the code