簡単アニメーション！Pixi.jsを触ってみる！
〜（6）インタラクションに挑戦！(のつづき)〜

Pixi.jsはJavascriptで簡単にアニメーションが作れるライブラリです。

前回はPixi.jsのインタラクションに挑戦！ということで、まずは手始めにボタンをやってみよう！と始めたのですが、その手始めだけで力尽きてしまいました。
これでは、インタラクションに挑戦してるとはいえない寂しい状況なので、今回も引き続きPixi.jsを使って何か反応するものを作ってみたいと思います。

マウスの軌跡に反応させる

最初は、マウスの軌跡を追いかけるアレに挑戦してみます。

※注：こいつは追いかけてくれない。。。

すいません。。。またしても、意味の無い前振りをしてしまいました。
猫は面倒 なので、前から使ってる画像をマウスに群がらせるだけのもので許してください。

マウスを追いかける

state.getMousePosition()を使う

Pixi.jsのstageオブジェクトを見ると、ずばりstate.getMousePosition()というメソッドが用意されていて、現在のマウスカーソルの座標が取れるようです！

jQueryのmousemoveとかを使っても出来ますが、こちらの方が簡単です。
今回はアニメーション関数の中で使ってみました。

// アニメーション関数
function animate(){

  requestAnimFrame(animate); // 次の描画タイミングでanimateを呼び出す

  // マウス位置に合わせてコンテナを移動
  var point = stage.getMousePosition();
  container.position.x = point.x;
  container.position.y = point.y;

 :
 :
}

わお、簡単！
他に語ることの無いコーナーですので、あっさり次に進みますw

キーボードに反応させる

マウスの次はキーボードですね！（強引）

というわけで、コイツに反応するモノを作ってみましょう。
ここで「それでは簡単なシューティングーゲームを例に」とかやれればかっこいいのですが、もうぜんぜん作れる気がしないので、 テキストボックス で代用させていただきます。いや、これでも一応、キーボードに反応するので！ね？ちがう？いや、許してください！w

キーボードに反応するもの

下記のようなものです。

Pixi.jsじゃない要素に置いたテキストboxに何か文字入れる

リターンキーを押す。

Pixi.jsのtextオブジェクトを1つつくってアニメーションさせるこれを繰り返します。 (今回はリミッター処理が入ってないので、繰り返しすぎると、どんどんメモリ食うのでそのうちブラウザ落ちる気がします)

キーイベントの受け取り方はとても普通

念のため探してみたのですが、Pixi.jsにはsprite.keydownのようにオブジェクトにキーイベントをバインドさせる方法は用意されていないようです。

なので、キーイベントを拾う部分はjavascriptで普通に書くか、他のライブラリを使って書いていく必要があります。
たくさんのキーを使う場合は、こんなライブラリも便利そうです。

今回はリターンキーだけ取れれば良いのでjQueryを使うことにしました。

$("#inputbox").keydown(function(ev){
  if(ev.keyCode == 13){  // enterキー

  　// ここでPixi.jsのtext.オブジェクトを作ってstage.addChild()する

  }
}

こんな感じでできます。これも簡単でしたね〜

ち〜ん

最後は、インタラクティブのまとめをかねて、反応して音が出るものを作ってみました。

昨日は天気も良かったので、子供と一緒に野外ロケも敢行！！やる気まんまんですw

野外ロケの様子w

で、出来たのがコレです。

野外ロケまでやった割には、前回のボタンのサンプルよりシンプルなものです。
。。。。見応えが無いのでコード全部載せておきます。

<script>
// ちーん音の読み込み
var chk = new Audio();
var path;
if(chk.canPlayType("audio/ogg") != ""){ // ogg (for chrome, firefox) 
  path = "audio/cheen.ogg";
}else{   // ogg対応してないブラウザはmp3で。(safariはこれでいけるが、それ以外は知らんw)
  path = "audio/cheen.mp3";
}
var sound = new Audio(path);
sound.src = path;
sound.load = "auto";

// ステージ・レンダラーを作ってDOMに配置
var width = 800;
var height = 500;
var stage = new PIXI.Stage(0x000000);
var renderer = PIXI.autoDetectRenderer(width, height);
document.getElementById("pixiview").appendChild(renderer.view);

// 背景スプライトの読み込み
var texture = PIXI.Texture.fromImage('img/field.jpg');
var background = new PIXI.Sprite(texture);
background.position.x = 0;
background.position.y = 0;
stage.addChild(background);

// ちーんスプライトの読み込み
var cheenTex = PIXI.Texture.fromImage('img/cheen.png');
var cheen = new PIXI.Sprite(cheenTex);
cheen.countMax = 360;
cheen.position.x = 407;
cheen.position.y = 392;
cheen.anchor.x = 0.5;
cheen.anchor.y = 0.5;
cheen.scale.x = 0.4;
cheen.scale.y = 0.4;
cheen.sw = false;
cheen.count = 0;   // sw=trueのときに数えるカウンタ。init.countMax回数える 
cheen.buttonMode = true;
cheen.setInteractive(true); // ボタンを有効にする
cheen.click = function(data){
  // ちーんのアニメ開始
  this.sw = true;

  // テキストも表示
  textShape.visible = true;

  // ちーん音を鳴らす
  sound.pause();
  sound.currentTime = 0;
  sound.volume = 0.2;
  sound.play();
}
stage.addChild(cheen);

// テキスト
var style = {font: "280px utsumin", fill:"#DDDDFF", align: "right"};
var textShape = new PIXI.Text("ち〜ん", style);
textShape.position.y = 400;
textShape.position.x = 400;
textShape.anchor.x = 0.5;
textShape.anchor.y = 0.5;
textShape.visible = false;
stage.addChild(textShape);

requestAnimFrame(animate); // 次の描画タイミングでanimateを呼び出す

// アニメーション関数
function animate(){
  requestAnimFrame(animate); // 次の描画タイミングでanimateを呼び出す

  // ボタン押してしばらくの間だけアニメーションさせる
  if(cheen.sw == true){
    cheen.scale.x += 0.015;
    cheen.scale.y += 0.015;
    cheen.rotation += 0.01;
    cheen.count ++;
    textShape.position.y -= 1.5;
    textShape.scale.x -= 0.003;
    textShape.scale.y -= 0.003;
    if(cheen.count > cheen.countMax){
      cheen.sw = false;
      cheen.count = 0;
      cheen.scale.x = 0.4;
      cheen.scale.y = 0.4;
      cheen.rotation = 0;
      textShape.visible = false;
      textShape.position.y = 400;
      textShape.scale.x = 1;
      textShape.scale.y = 1;
    }
  }
  renderer.render(stage);   // 描画する
}
</script>

チーン音はロケの中で野外録音したものです。
こんなもので良ければ好きに使って頂いてかまいませんので、どうぞ持っていってくださいw
ちーん音素材(ogg)
ちーん音素材(mp3)

まとめ

前回と2回にわたり、Pixi.jsを使ったインタラクションの入門編について書きました。
ポイントは3つです。

ボタンを作るときは、sprite.setInteractive(true)を忘れずに！
マウス座標は stage.getMousePosition()を使おう！
キーボードとか他の何かと連携するには、jQueryなどと組み合わせて使おう！

ゲーム作ってみたいですが、いつになったら作れるやらw

目標はこれだ！(Control Change Shooter)

曽我さんという日本人により開発中のものです。
たぶん、雷電とかより段違いに難易度が高いと思われるシューティングゲームですw

ぜんぜん遊べる自信はありませんが、なぜか今後の展開と完成が楽しみな作品です。
詳細はYoutubeを見てください。

はい。というわけで、次回は少しだけ応用編、「スマートフォンで使えるようにしてみる！」に挑戦してみたいと思います。
マルチタッチとか。

それでは次回もよろしくお願いします！

簡単アニメーション！Pixi.jsを触ってみる！（6）インタラクションに挑戦！(のつづき)

簡単アニメーション！Pixi.jsを触ってみる！〜（6）インタラクションに挑戦！(のつづき)〜

マウスの軌跡に反応させる

state.getMousePosition()を使う

キーボードに反応させる

キーイベントの受け取り方はとても普通

ち〜ん

まとめ

簡単アニメーション！Pixi.jsを触ってみる！
〜（6）インタラクションに挑戦！(のつづき)〜