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,
});
版权声明:
作者:wuhou123
链接:https://wuhou.fun/450.html
来源:前端网
文章版权归作者所有,未经允许请勿转载。
THE END
0
二维码
海报
pixi弹道抛射动画实现
前言
根据最新的pixi 6.0版本,基于此基础上研究小游戏动画
pixi 6.0版本动画帧
import towerJSON from '@/assets/tower.json';
const uiTexture = this.load……

文章目录
关闭
共有 0 条评论