ブラウゲームズ

◇appの基本形とローダー、スプライト作成

■フォルダ構成

index.html
│
├/images/
│└sprite.png
│└anim_sprite.png
│└anim.json
│
└/js/
├pixi.min.js
└app.js

ローダーを生成し、画像ファイルを読み込む。

読み込み完了後、setup関数にてスプライトを作成し、stageに配置。

 

[JS]

window.addEventListener('load', function() {

 /*
 *アプリケーションを作成
 */
  app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
  document.body.appendChild(app.view);

  /*
  * ローダーを生成し、ロード完了時、setup関数を呼ぶ
  */
  PIXI.loader
  .add('spriteid', 'images/sprite.png')
  .load(setup);
});


function setup(loader, resources) {

 /*
 *スプライトを作成、ステージに配置。
 */
  let sp = new PIXI.Sprite(resources.spriteid.texture);
  sp.anchor.x = 0.5;
  sp.x = 100;
  sp.y = 100;
  app.stage.addChild(sp);

　/*
　*フレーム毎の処理
　*/
  app.ticker.add(function(delta) {
      /*
     *ここに処理
     */
  });
}

[HTML]

<script src="js/pixi.min.js"></script>
<script src="js/app.js"></script>

 

 

◇スプライトシートの使い方（テクスチャアトラス）

敵がやられたときのアニメーションをスプライトシートで作成。

スプライトシートはいろいろな方法で作成できる。

• TexturePackerを使う（最も一般的な方法。有料ソフト1万円以下。）
• gulp.spritesmithを使う（無料。すでにgulp環境がある人はこれがいいかも。）
• adobe animate ccを使う（adobe ccをすでに使っている人向け。）

 

今回はadobe animate ccで作成。

＞＞スプライトシートに変換する方法

 

書き出されたjsonファイルとpngファイルを使用する。

[json参考]

{"frames": {

"anim00":
{
  "frame": {"x":0,"y":0,"w":32,"h":32},
  "rotated": false,
  "trimmed": false,
  "spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
  "sourceSize": {"w":32,"h":32}
},
"anim01":
{
  "frame": {"x":32,"y":0,"w":32,"h":32},
  "rotated": false,
  "trimmed": false,
  "spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
  "sourceSize": {"w":32,"h":32}
},
"anim02":
{
  "frame": {"x":0,"y":32,"w":32,"h":32},
  "rotated": false,
  "trimmed": false,
  "spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
  "sourceSize": {"w":32,"h":32}
},
"anim03":
{
  "frame": {"x":32,"y":32,"w":32,"h":32},
  "rotated": false,
  "trimmed": false,
  "spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
  "sourceSize": {"w":32,"h":32}
},
"anim04":
{
  "frame": {"x":0,"y":64,"w":32,"h":32},
  "rotated": false,
  "trimmed": false,
  "spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
  "sourceSize": {"w":32,"h":32}
}},
"meta": {
  "app": "Adobe Animate",
  "version": "18.0.1.115",
  "image": "anim_sprite.png",
  "format": "RGBA8888",
  "size": {"w":64,"h":128},
  "scale": "1"
}
}

 

[PNG参考]　pngはこんな感じ。

 

 

作ったファイルをPixiJSで読み込みアニメーションさせてみる。

window.addEventListener('load', function() {

 /*
 *アプリケーションを作成
 */
  app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
  document.body.appendChild(app.view);

 /*
  jsonファイルをローダーで読み込む。(PNGは読み込まなくていい)
 */
  PIXI.loader
  .add('anim', 'images/anim.json')
  .load(setup);
});

function setup(loader, resources) {

  let frames = [];
 
  /*
    jsonファイル内のframeidを指定して、枚数分読み込む。
  */
  for( let i = 0; i < 5; i++ ) {
    frames[i] = PIXI.Texture.fromFrame('anim0' + i);
  }

  /*
    すべてのフレームを読み込んだ配列変数から、AnimatedSpriteを作成する
  */
  let anim = new PIXI.extras.AnimatedSprite(frames);
  anim.x = 100;
  anim.y = 100;
  anim.anchor.set(0.5);
  anim.animationSpeed = 0.2;
  anim.play(); // アニメーションを再生する

  app.stage.addChild(anim);
}

 

 

◇簡易当たり判定

当たり判定には、containsPointを使う。

この判定は、ある1点がその領域内に入っているかを判定するもの。

先端の1点のみで判定されるので、弾のボディ部分が重なっても当たりにはならない。

今回は簡易的にこれでいいことにしよう。

しっかりと、判定するには、当たり判定を自分で作成した方がよさそうだ。

function tama_hit() {
  //tamaは、弾スプライト
  //enemyは、敵スプライト

  let pt = tama.position;
  
  if( enemy.containsPoint(pt) ) {
     //弾の中心点と敵スプライトが当たった
     //点数加算など処理
  } 
}

 

 

◇マウスポインタ一の取得

マウスポインターの位置を取得。

let mouseposition = app.renderer.plugins.interaction.mouse.global;
mouseposition.x //x座標
mouseposition.y //y座標

 

 

◇自機など追加して完成DEMO

完成DEMOはこちら»

 

サンプルファイルのダウンロード

inv_sample.zip