読者です 読者をやめる 読者になる 読者になる

フニゲの開発日記

Electronとか...

Pixi.jsはじめました

Pixi.js

 Appleのリジェクトにウンザリしたというわけではないのだが、スマホのブラウザで動くゲームを作ることになって、いいフレームワークを探している。

 最終的にネイティブアプリにしてリリースする予定があるなら、今でもCocos2d-JSをおすすめするのだが、ブラウザがターゲットの場合は、現状のCocos2d-JSがベストとは言えない。WebGLの機能を十分に活かしたゲームが作れないからだ。分家のCocos2d-html5 V4も一応調べてみたけど、まだドキュメントも何も無い状態で、残念ながら使えない。

 本当にたくさんあるんだけど、あまり複雑なのは頭に入らないので、とりあえず簡単そうなPixi.js。

 Pixi.jsはロンドンのGoodBoy Digitalが開発している2D描画用のフレームワークで、前に書いたCreatureSpineなどのツールも対応しているし、開発も活発に行われているので、まあ間違いないと思う。

 使用法は、Githubからbinフォルダの中にあるpixi.js(またはpixi.min.js)をダウンロードしてきてindex.htmlの最初の方に追加するだけだ。(たぶんbower使うのが正式なんだと思う。なんかコンソールにエラーが出てるけど気にしない)


 公式のサンプルがわかりやすいので、上から順番にソースコード読みながら試していけば、概要はつかめると思う。

 ……とりあえず習うより慣れろだな。

f:id:funige:20150527065114p:plain

<!DOCTYPE HTML>
<html>
<head>
  <script src="pixi.js"></script>
</head>

<body>
  <script>
    var renderer = PIXI.autoDetectRenderer(800, 600);
    document.body.appendChild(renderer.view);

    var stage = new PIXI.Container();

    // 背景
    var bg = PIXI.Sprite.fromImage('res/bg.jpg');
    bg.width = 800;
    bg.height = 600;
    stage.addChild(bg);

    // 宇宙船
    var ship = PIXI.Sprite.fromImage('res/ship.png');
    ship.anchor.set(0.5);
    ship.position.x = 400;
    ship.position.y = 0; // Pixi.jsは左上が原点なのでy=0は上端
    stage.addChild(ship);

   // 隕石をたくさん飛ばす
    var enemies = [];
    for (var i = 0; i < 10; i++) {
      var enemy = PIXI.Sprite.fromImage('res/enemy.png');
      enemy.anchor.set(0.5);
      enemy.position.x = Math.random() * 800 + 800;
      enemy.position.y = Math.random() * 600;
      stage.addChild(enemy);
      enemies.push(enemy);
    }

    // 宇宙船がタップに反応するように
    stage.interactive = true;
    stage.on('mousedown', function (event) { event.target.touched = true; })
    stage.on('mouseup', function (event) { event.target.touched = false; })
    stage.on('touchstart', function (event) { event.target.touched = true; })
    stage.on('touchend', function (event) { event.target.touched = false; })

    // animate()をタイマーで定期的に呼ぶことでシーンを動かす。
    animate();

    function animate() {
      requestAnimationFrame(animate);

      // 隕石の移動 
      for (var i = 0; i < enemies.length; i++) {
        var enemy = enemies[i];
        enemy.position.x -= 5;
        if (enemy.position.x < 0) {
          enemy.position.x += 800;
        }
      }

      // 宇宙船の移動 
      if (stage.touched) {
        ship.position.y -= 3; // 上昇
      } else {
        ship.position.y += 3; // 下降 
      }

      renderer.render(stage);
   }

  </script>
</body>
</html>

サンプル

 スマホブラウザゲームの市場は今も昔も残念な感じだが、そろそろWebGLが普通に使えるようになって、ここからが面白いところだと思う。

広告を非表示にする