Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What are the problem?

pixi.jsでカラフルなパーティクルを作る

pixi.jsでカラフルなパーティクルをサクッと作れる方法です。
使っているpixi.jsのバージョンはv5です。
afdsafaf.gif
↑のゲームはこれ ▷ おしっこ忍者

Graphicで白のパーティクルを作る

とりあえずGraphicで白のパーティクルを作を作ります。

const gr = new PIXI.Graphics();
gr.beginFill(0xffffff);
gr.drawCircle(4, 4, 4);
gr.endFill();

const particle = new PIXI.Sprite();
particle.texture = graphicsToTexture(gr);
container.addChild(particle);

function graphicsToTexture(graphics: PIXI.Graphics){
  const texture = PIXI.RenderTexture.create({width: graphics.width, height: graphics.height});
  core.app.renderer.render(graphics, texture);//お使いの環境に合わせてください
  return texture;
}

色を用意

ランダムで色を変えたいので色を用意します。
pico-8っぽい16色とHTMLの基本の16色を用意しました。どちらかを使えば程よい感じにカラフルになってくれると思います。
白黒グレーを使わない場合はその色だけ消してください。

//pico-8で使われている16色(前2つに白黒を置いてます)
const pico8pallet = [0xFFF1E8, 0x000000, 0x1D2B53, 0x7E2553, 0x008751, 0xAB5236, 0x5F574F, 0xC2C3C7, 0xFF004D, 0xFFA300, 0xFFEC27, 0x00E436, 0x29ADFF, 0x83769C, 0xFF77A8, 0xFFCCAA];

//HTML基本の16色(前4つに白黒グレーを置いてます)
const html16Pallet = [0xFFFFFF, 0xC0C0C0, 0x808080, 0x000000, 0xff0000, 0x800000, 0xffff00, 0x808000, 0x00FF00, 0x008000, 0x00ffff, 0x008080, 0x0000ff, 0x000080, 0xFF00FF, 0x800080];

tintで色を変える

pixi.jsにはtintという色を加える(であってる?)機能があります。元の画像の色とtintで足した色で合成されるので最初に白で画像を作っておけば何色にでも変えることができます。

particle.tint = pico8pallet[Math.floor(Math.random() * 16)];

終わりに

以上のような感じでやれば簡単にカラフルなパーティクルを作ることができると思います。
tintで色を変えられるので、たくさん必要な場合は最初に白で大量に作っておいて必要な時にtintで色を変えるという感じで使いまわせば多少負担を減らすことができるんじゃないかと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What are the problem?