pixijs寫發射炮彈拋物線特效

這是我們大炮的圖片以及觸發按鈕；

三角函數：
通過 鄰邊/斜邊 = cos(x); 對邊/斜邊 = sin(x);這是基本原理；當我們有角度和x方向假定固定變化後就可以來得到物體在y方向的變化，x,y的變化都確定即可以運行本動畫特效；

以下是實現的代碼，運行的環境是微信小遊戲+pixijs，尺寸是750*1334，已作初步的兼容處理；

/**
 * 遊戲主函數
 */
export default class Main {
    constructor() {
        this.core = core;
        this.scene = core.stage;
        this.scale = core.view.width/750;
        // 維護當前requestAnimationFrame的id
        this.bomb = null;
        this.start()

    }
    start(){
        core.loader
            .add("js/assets/atlas/tower.json")
            .load(this.init.bind(this));
    }

    
    init(){
        var tower = new PIXI.Sprite(PIXI.Texture.fromImage("tower.png"));
        tower.x = 200*this.scale;
        tower.y = 200*this.scale;
        this.scene.addChild(tower);

        var bomb = new PIXI.Sprite(PIXI.Texture.fromImage("bomb.png"));
        bomb.x = tower.x + 50*this.scale ;
        bomb.y = tower.y + 70*this.scale;
        bomb.anchor.set(0.5);
        this.scene.addChild(bomb);

    this.btn = new PIXI.Container();
    this.btn.x = 300*this.scale;
    this.btn.y = 400*this.scale;
    var bg = new PIXI.Sprite(PIXI.Texture.fromImage("btn_bg.png"));
    bg.scale.x = bg.scale.y = this.scale;
    //btn.interactive = true;
    //btn.visible = true;
    
    this.btn.addChild(bg);

    var starttxt = new PIXI.Text('開始', {  
        fontSize: 40*this.scale,
        fill:"0xffffff",
        fontFamily:["幼圓","Microsoft YaHei","黑體","sans-serif",],
        fontWeight: 'bold',
        letterSpacing:2
    });
    starttxt.x = (bg.width-starttxt.width)/2 ;
    starttxt.y = (bg.height-starttxt.height)/2;
    this.btn.addChild(starttxt);
    this.btn.scale.x = this.btn.scale.y = .6;
    this.scene.addChild(this.btn)
    this.btn.interactive = true;

    //core.ticker.add(this.update.bind(this))

    var nums = 0;
    var that = this;
    var animate = function(opt){
        var cos = Math.cos(opt.radian*Math.PI/180);//鄰邊比斜邊,60度的話等於1/2
        var sin = Math.sin(opt.radian*Math.PI/180);//對邊比斜邊,30度的話等於1/2
        var left = opt.rect.x;
        var top = opt.rect.y;
        if(opt.radian>-10){
            left+=opt.step;///x方向的變化先固定
            opt.radian-=1; //角度遞減1
            var a = left - opt.initLeft;//得到鄰邊即X的變化
            var c = (a/cos);//得到斜邊
            var b = (sin*c);//得到Y的變化；
            opt.rect.x = opt.initLeft+a;
            opt.rect.y = opt.initTop-b;
            opt.rect.rotation += 0.1;//炮彈自己的角度旋轉也可以不加加了效果更加真實一點
            //console.log(nums++)
            setTimeout(function(){
                animate(opt);
            },opt.step*2);
        }else{
            var frames = [];
            for(var i=1;i<11;i++){
                frames.push(PIXI.Texture.fromFrame('explosion_air_'+i+'.png'));
            }
            bomb.visible = false;

            that.scene.removeChild(that.scene.getChildByName('explosion'))
            var explosion = new PIXI.extras.AnimatedSprite(frames);
            explosion.name = 'explosion'
            explosion.x = bomb.x;
            explosion.y = bomb.y;
            explosion.play();
            explosion.anchor.set(0.5);
            explosion.loop = false;
            that.scene.addChild(explosion)

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

    this.btn.on('touchstart',()=>{
        bomb.visible = true;
        animate({
            step : 2+Math.floor(Math.random()*4),
            rect : bomb,
            radian : 75,
            initTop : bomb.y,
            initLeft : bomb.x
        });
    })
    

	 }



	}

本代碼所需要的資源文件：
tower.png

tower.json:

{“frames”: {

“bomb.png”:
{
“frame”: {“x”:426,“y”:270,“w”:29,“h”:26},
“rotated”: false,
“trimmed”: true,
“spriteSourceSize”: {“x”:7,“y”:4,“w”:29,“h”:26},
“sourceSize”: {“w”:36,“h”:36}
},
“btn_bg.png”:
{
“frame”: {“x”:313,“y”:298,“w”:182,“h”:94},
“rotated”: true,
“trimmed”: false,
“spriteSourceSize”: {“x”:0,“y”:0,“w”:182,“h”:94},
“sourceSize”: {“w”:182,“h”:94}
},
“explosion_air_1.png”:
{
“frame”: {“x”:409,“y”:410,“w”:50,“h”:44},
“rotated”: false,
“trimmed”: true,
“spriteSourceSize”: {“x”:64,“y”:69,“w”:50,“h”:44},
“sourceSize”: {“w”:176,“h”:176}
},
“explosion_air_2.png”:
{
“frame”: {“x”:426,“y”:167,“w”:101,“h”:76},
“rotated”: true,
“trimmed”: true,
“spriteSourceSize”: {“x”:35,“y”:51,“w”:101,“h”:76},
“sourceSize”: {“w”:176,“h”:176}
},
“explosion_air_3.png”:
{
“frame”: {“x”:202,“y”:340,“w”:132,“h”:109},
“rotated”: true,
“trimmed”: true,
“spriteSourceSize”: {“x”:19,“y”:33,“w”:132,“h”:109},
“sourceSize”: {“w”:176,“h”:176}
},
“explosion_air_4.png”:
{
“frame”: {“x”:275,“y”:167,“w”:149,“h”:129},
“rotated”: false,
“trimmed”: true,
“spriteSourceSize”: {“x”:10,“y”:26,“w”:149,“h”:129},
“sourceSize”: {“w”:176,“h”:176}
},
“explosion_air_5.png”:
{
“frame”: {“x”:355,“y”:1,“w”:164,“h”:150},
“rotated”: true,
“trimmed”: true,
“spriteSourceSize”: {“x”:3,“y”:14,“w”:164,“h”:150},
“sourceSize”: {“w”:176,“h”:176}
},
“explosion_air_6.png”:
{
“frame”: {“x”:1,“y”:1,“w”:175,“h”:159},
“rotated”: false,
“trimmed”: true,
“spriteSourceSize”: {“x”:0,“y”:10,“w”:175,“h”:159},
“sourceSize”: {“w”:176,“h”:176}
},
“explosion_air_7.png”:
{
“frame”: {“x”:1,“y”:162,“w”:176,“h”:157},
“rotated”: true,
“trimmed”: true,
“spriteSourceSize”: {“x”:0,“y”:10,“w”:176,“h”:157},
“sourceSize”: {“w”:176,“h”:176}
},
“explosion_air_8.png”:
{
“frame”: {“x”:178,“y”:1,“w”:175,“h”:156},
“rotated”: false,
“trimmed”: true,
“spriteSourceSize”: {“x”:1,“y”:10,“w”:175,“h”:156},
“sourceSize”: {“w”:176,“h”:176}
},
“explosion_air_9.png”:
{
“frame”: {“x”:160,“y”:167,“w”:171,“h”:113},
“rotated”: true,
“trimmed”: true,
“spriteSourceSize”: {“x”:4,“y”:8,“w”:171,“h”:113},
“sourceSize”: {“w”:176,“h”:176}
},
“explosion_air_10.png”:
{
“frame”: {“x”:409,“y”:298,“w”:110,“h”:93},
“rotated”: true,
“trimmed”: true,
“spriteSourceSize”: {“x”:28,“y”:22,“w”:110,“h”:93},
“sourceSize”: {“w”:176,“h”:176}
},
“tower.png”:
{
“frame”: {“x”:1,“y”:340,“w”:199,“h”:125},
“rotated”: false,
“trimmed”: true,
“spriteSourceSize”: {“x”:0,“y”:62,“w”:199,“h”:125},
“sourceSize”: {“w”:204,“h”:192}
}},
“animations”: {
“explosion_air”: [“explosion_air_1.png”,“explosion_air_2.png”,“explosion_air_3.png”,“explosion_air_4.png”,“explosion_air_5.png”,“explosion_air_6.png”,“explosion_air_7.png”,“explosion_air_8.png”,“explosion_air_9.png”,“explosion_air_10.png”]
},
“meta”: {
“app”: “https://www.codeandweb.com/texturepacker”,
“version”: “1.0”,
“image”: “tower.png”,
“format”: “RGBA8888”,
“size”: {“w”:506,“h”:481},
“scale”: “1”,
“smartupdate”: “$TexturePacker:SmartUpdate:3d6f6b7b8d2def9ec2c7eebd12652a14:052e6fde3992f59e3f94344b7270e149:61ba477405b402aa3a1e2d0616b55a7e$”
}
}