pixi弹道抛射动画实现

前言

根据最新的pixi 6.0版本，基于此基础上研究小游戏动画

pixi 6.0版本动画帧

import towerJSON from '@/assets/tower.json';
const uiTexture = this.loader.resources['tower'].texture.baseTexture;
const uiSheet = new PIXI.Spritesheet(uiTexture, towerJSON);

// 动画序列帧
this.animations = uiSheet.animations;

// 弹道结束后播放动画帧
                const explosion = new PIXI.AnimatedSprite(
                    this.animations['explosion_air']
                );

                explosion.name = 'explosion';
                explosion.x = this.bomb.x;
                explosion.y = this.bomb.y;
                explosion.play();
                explosion.anchor.set(0.5);
                explosion.loop = false;

弹道抛射

animate(opt) {
            var cos = Math.cos((opt.radian * Math.PI) / 180);
            var sin = Math.sin((opt.radian * Math.PI) / 180);
            var left = opt.rect.x;
            if (opt.radian > -2) {
                left += opt.step;
                opt.radian -= 1;
                var a = left - opt.initLeft;
                var c = a / cos;
                var b = sin * c;
                opt.rect.x = opt.initLeft + a;
                opt.rect.y = opt.initTop - b;
                opt.rect.rotation += 0.1;
                this.timer = setTimeout(() => {
                    this.animate(opt);
                }, 15);
            } else {
                // 结束消除
                clearTimeout(this.timer);
                this.timer = null;
                this.bomb.visible = false;
                console.log(
                    '结束',
                    this.bomb.x,
                    this.bomb.y,
                    opt.radian,
                    this.timer
                );

                // 弹道结束后播放动画帧
                const explosion = new PIXI.AnimatedSprite(
                    this.animations['explosion_air']
                );

                explosion.name = 'explosion';
                explosion.x = this.bomb.x;
                explosion.y = this.bomb.y;
                explosion.play();
                explosion.anchor.set(0.5);
                explosion.loop = false;
                this.readyScene.uiCont.addChild(explosion);

                // 动画结束清除
                explosion.onComplete = () => {
                    this.readyScene.uiCont.removeChild(
                        this.readyScene.uiCont.getChildByName('explosion')
                    );
                };

                this.bomb.x = opt.initLeft;
                this.bomb.y = opt.initTop;
            }
        }

鼠标定位

const mouse = this.app.renderer.plugins.interaction.mouse;
const cursorPosition = mouse.global;

鼠标方向和瞄准

根据两点算角度

// style
cursor: url("./assets/crosshairs.png") 16 16, auto;

// angle
const mouse = this.app.renderer.plugins.interaction.mouse;
    const cursorPosition = mouse.global;
    let angle = Math.atan2(
      cursorPosition.y - this.player.position.y,
      cursorPosition.x - this.player.position.x
    ) +
      Math.PI / 2;
    this.rotation = angle;

触发抛射开关

this.bomb.visible = true;
            if (this.timer) return;
            this.animate({
                step: 12,
                rect: this.bomb,
                radian: 38,
                initTop: this.bomb.y,
                initLeft: this.bomb.x,
            });