iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 30
1
Modern Web

菜雞用Canvas/Pixi動動動動動起來系列 第 30

【Day30】Pixi-ParticleContainer+結語

  • 分享至 

  • xImage
  •  

PIXI.ParticleContainer

今天介紹用PIXI.ParticleContainer做粒子動畫

動動看

    const app = new PIXI.Application();
    document.body.appendChild(app.view);
    let particle = new PIXI.ParticleContainer(10000,{
            position:true,
            rotation: true
        }
    )
    app.stage.addChild(particle)

let animate = []
for (let i = 0; i < 100; i++)
{
    let me = PIXI.Sprite.from("./me.png");
    me.anchor.set(0.5)
    particle.addChild(me)
    animate.push(me)
}
app.ticker.add(delta=>{
    for (let i = 0; i < 100; i++)
{
    sprite=animate[i]
    sprite.x=Math.random()*app.screen.width* delta
    sprite.y=Math.random()*app.screen.height* delta
    sprite.rotation-=0.01 * delta
}
})

成果畫面:

要看更多PIXI.ParticleContainer屬性可以看官網的介紹

結語

到後面幾天開始去新公司上班我都不知道我在寫什麼,有時候一知半解還是硬著頭皮寫出來,可能有很多錯QQ
希望之後有空再回來review一次,謝謝前公司同事找我參加,要不然我自己參加可能早就中途放棄了,耶~終於可以早點睡覺了~

~如有疑問或是錯誤,歡迎不吝指教~

參考來源
[1]http://pixijs.download/release/docs/PIXI.ParticleContainer.html
[2]https://pixijs.io/examples/#/demos-basic/particle-container.js


上一篇
【Day29】Pixi-AnimatedSprite
系列文
菜雞用Canvas/Pixi動動動動動起來30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
angelliya00
iT邦新手 4 級 ‧ 2020-10-13 13:23:19

恭喜 www
剛好我正在寫另一個粒子的
歡迎來玩 ._./

好喔/images/emoticon/emoticon41.gif

我要留言

立即登入留言