カラフルな星型パーティクルをつくる

ゲームは見た目が命!!

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

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

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

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

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

星型以外にもいろんな形のプログラムが公開されていて面白いです。

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

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についてはこちらの記事を読んでください。

 

pixi.jsでenchant.jsみたいにさっくりブラウザゲームが作れる簡易ゲームエンジンを作ってみたので興味ある方は見てみてください(‘ω’)ノ

◇ Posted by いんわん