phaser3のエフェクトためしてみよう

はじめに

本記事はプロもくチャット Adevent Calendar2023の21日目です

phaser3のエフェクトためしてみよう

こちらの方が詳しく説明してくれていました
https://qiita.com/laineus/items/1b3aeda72ef5f7b38402#%E3%83%93%E3%83%AB%E3%83%88%E3%82%A4%E3%83%B3fx

いろいろありますね

自分の手元で試してみよう

ってことでサンタさんとニコニコくんにエフェクトかけます

URL
https://babu-ch.github.io/phaser_fx_test/

ソース
https://github.com/babu-ch/phaser_fx_test/

使った画像素材はスイカゲームのときのニコニコとサンタさんです

このeffectsのargsを変えれば、それぞれのエフェクトの引数を変えられます（これもUIで変えれたら便利そうですよね？めんどい）
https://github.com/babu-ch/phaser_fx_test/blob/a2e9274ebb6ae64ec6a5f4c2c84ed4127c5f3f61/src/scenes/MyScene.ts#L6-L23

const effects:TEffect[] = [
    { name: "Barrel", args: [2] },
    { name: "Bloom", args: [0x00bfa5] },
    { name: "Blur", args: [1] },
    { name: "Bokeh", args: [0.5, 1, 0.2] },
    { name: "TiltShift", args: [] },
    { name: "Circle", args: [] },
    { name: "ColorMatrix", args: [] },
    { name: "Displacement", args: ['distort', 0.5, 0.5] },
    { name: "Glow", args: [0x00bfa5] },
    { name: "Gradient", args: [] },
    { name: "Pixelate", args: [] },
    { name: "Shadow", args: [] },
    { name: "Shine", args: [1, 1] },
    { name: "Vignette", args: [] },
    { name: "Wipe", args: [] },
    { name: "Reveal", args: [] }
]

使い方悪いのかうまく動いてないやつもあります　どんまい

じつは

phaserのexample見たほうがいい