【PixiJS】星型パーティクルをつくる

ゲームは見た目が命！！

いつもより多く出しております⭐️ pic.twitter.com/6Zp38PildQ

— いんわん＠月収743円 (@inwan78) July 3, 2021

かどうかはわかりませんが、パンチのある演出がある方が遊んでもらえる可能性は高くなると思います。

というわけでハデハデな星型パーティクルを作ってみましょう。

難しいところはググります

星型なんて算数ができない私にできるわけがないのでその辺はググって頭のいい人に頼ります。

今回はこちらのサイトの星型のプログラムをパクっ..参考にさせていただきました。

星型以外にもいろんな形のプログラムが公開されているので余裕のある方は違う形にも挑戦してみてください。

▷ https://levelup.gitconnected.com/advanced-drawing-with-pixi-js-cd3fddc1d69e

そして出来上がったのがこちらでございます。

function createStarTexture(points, outerRadius, innerRadius){
  if(points < 3){
    points = 3;//3未満だと勝手に3にする
  }
  let step = (Math.PI * 2) / points;//角度
  let halfStep = step / 2;
  const data = [];
  let dx, dy;
    
  for (let n = 1; n <= points; ++n) {
    dx = Math.cos(step * n - halfStep) * innerRadius;
    dy = Math.sin(step * n - halfStep) * innerRadius;
    data.push(dx, dy);
    dx = Math.cos(step * n) * outerRadius;
    dy = Math.sin(step * n) * outerRadius;
    data.push(dx, dy);
  }
  
  //グラフィックを作る
  const g = new PIXI.Graphics();
  g.beginFill(0xFFFFFF);
  g.drawPolygon(data);
  g.endFill();
  g.x = g.width * 0.5;
  g.y = g.height * 0.5;

  //グラフィックをテクスチャーに
  const texture = PIXI.RenderTexture.create({width: g.width, height: g.height});
  core.app.renderer.render(g, texture);
  
  return texture;
}

関数の使い方

この関数は星型のテクスチャーを作ってくれる関数です。できたテクスチャーはSpriteのテクスチャーに入れてすぐ使えます。

引数のpointsは頂点の数、outerRadiusは外側の半径、innerRadiusは内側の半径です。外側の半径と内側の半径に交互に頂点が作られて図形ができる感じです。ちなみにouterRadiusの方が値がinnerRadiusより小さくても問題は無いです。

色はtintで変更

上の関数では白色に作っています。

この関数で色を指定してもいいんですがゲームで使う場合は必要な時に毎回テクスチャーを作っていると処理の負担になるので先に必要な数だけ用意して使うときに色だけ好きに変えた方が負担が少なくなって良いです。

ということで色はtintプロパティで変えます。tintについてはこちらの記事に少し書いてます。
▷ https://qiita.com/inwan78/items/16fe173b5a099e9d6835

おまけ

★pixi.jsの基本的な使い方の記事
▷ 【PixiJS入門】基本的な使い方まとめ