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

sequence

What about the last time you wanted to make a web game? After PixiJs article (I), continue to update this article

What is piXI and how to use it? This time it is about the motion state of the Sprite object we create

Is how to keep your Sprite in motion, become an animated Sprite

Reference article (well written, relatively clear) :

Blog.csdn.net/FE_dev/arti…

Blog.csdn.net/FE_dev/arti…

See what it looks like in advance

The text start

Prepare the material

Before the article has also said that Sprite diagram, this animation Sprite is also mainly used to make

The picture used this time is still fromLove to the netIt’s still a Pokemon seriesWho else can’t fly?Download the flightless monster and put it in my public folder

Create a scenario

First, create the scene. Pixi is essential. The key method to use is pixi.application

Don’t blink, create scene code (written with vue component)

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

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

export default {
    name:'animation'.components: {},
    props: {},
    data() {
        return {
            loader: null.app:null.player: null}; },created() {},
    mounted() {
        this.initState();
    },
    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}}};</script>
<style scoped>
</style>
Copy the code

So the stage has been set up, and I’m going to put the sprites in this box

Animation sprites in PIxi

Although the best way to make animated sprites is to use spriteutilities.js, that’s the focus of this article!

The official explanation: pixijs. Download/release/doc…

Define a method to generate elf: first the pixi. Js calls spriteUtilities already. Don’t need pixi extras. AnimatedSprite, direct pixi. AnimatedSprite can

setTexture (texture) {
  // console.log(texture)
  let sprite = new pixi.AnimatedSprite(texture);
  return sprite;
},
Copy the code

First take a look at the downloaded Sprite image size, because the image is 44, so the size of each small graphics is84 x 81

Start creating sprites:

mounted() {
    this.initState();
    this.players();
},
Copy the code

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(() = >{
    let textures = TextureCache['jujin'];

    // The first texture uses frame
    let texture0 = new Texture(textures);
    texture0.frame = new Rectangle(0.0.84.81);
    let texture1 = new Texture(textures);
    texture1.frame = new Rectangle(84.0.84.81);
    let texture2 = new Texture(textures);
    texture2.frame = new Rectangle(84*2.0.84.81);
    let texture3 = new Texture(textures);
    texture3.frame = new Rectangle(84*3.0.84.81);
    // Create the texture array. This is what the first line of the image looks like
    let textureArray = [ texture0, texture1, texture2, texture3 ];
    console.log(textureArray)
    // The Sprite generation method above
    player = this.setTexture(textureArray);
    stage.addChild(player);
    // Set the speed of the animation Sprite
    player.animationSpeed=0.08; player.play(); })},Copy the code

Effect:

However, this method is cumbersome, if you want to do all 16 actions, you need to use the Frame to cut 16 times, and it is not convenient to control the Sprite action with the keyboard afterwards

spriteUtilities.js

Easier and more intuitive way to create and use Pixi sprites, as well as add a state machine and animation player. It can be fun to use with Pixi.

GitHub repository: github.com/kittykatatt…

Since spriteutilities.js may not have been maintained for a long time, some parts of it will need to be adapted

Code changes:

if (renderingEngine.ParticleContainer && renderingEngine.Sprite) {
  this.renderer = "pixi";
  this.Container = renderingEngine.Container;
  this.ParticleContainer = renderingEngine.ParticleContainer;
  this.TextureCache = renderingEngine.utils.TextureCache;
  this.Texture = renderingEngine.Texture;
  this.Rectangle = renderingEngine.Rectangle;
  this.MovieClip = renderingEngine.AnimatedSprite;
  this.BitmapText = renderingEngine.BitmapText;
  this.Sprite = renderingEngine.Sprite;
  this.TilingSprite = renderingEngine.TilingSprite;
  this.Graphics = renderingEngine.Graphics;
  this.Text = renderingEngine.Text;

  //An array to store all the shaking sprites
  this.shakingSprites = [];
}
Copy the code

Modify the previous players method

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(); })},Copy the code

---

Broken — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — Chapter — — — — —