0
Help us understand the problem. What are the problem?

posted at

updated at

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

ゲームは見た目が命!!

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

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

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

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

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

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

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

おまけ

p★pixi.jsを使ったゲームの作り方の記事書きました
JavaScriptゲームの作り方

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
Sign upLogin
0
Help us understand the problem. What are the problem?