第10話太郎「迷子って言うな！」 #JavaScript

核心を突かれると、みんな怒るよね

今回はthree.jsの描画をPhaserのフレームワークに載せてみます。

まずは、htmlはこんな感じ。gameというdivタグのところに、描画されます。

index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>あれ</title>
</head>
<body>
  <div id="game"></div>
  <script src="js/three.min.js"></script>
  <script src="js/phaser.min.js"></script>
  <script src="js/poge.js"></script>
</body>
</html>

まずは、ゲームオブジェクトを作成します。第5引数は状態(State)オブジェクトを設定します。この状態オブジェクトって、一般的なゲームフレームワークで言うシーンみたいなもんですよね？（１週間ぐらいしか使ってないので、よくわかってないｗ

hehehe.js

var state = {
  preload : function() {},
  create  : function() {},
};

複数の状態オブジェクトを作って、遷移していけばいいはず。
が、今回は簡単にコールバック関数だけ列挙しておきますｗ

poge.js

var game = new Phaser.Game(
  mazeScreen.width, mazeScreen.height, Phaser.AUTO, 'game',
  { preload: preload, create: create, update: update, render: render }
);

function preload() {
}

function create() {
}

function update() {
}

function render () {
}

preloadが最初にコールされて、その処理が終わるとcreateがコールされます。なので、preloadでは、一般的に、リソースの読み込みとか準備するわけです。今回は、preloadの中で、threeのオブジェクトを作成します。そして、Phaserで作成したtextureオブジェクト上に、Threeで描画し、このtextureをSpriteとして登録して貼り付けます。これで、最終的にはPhaserがSpriteとして描画してくれます。

poge.js

function preload() {
  // Threeオブジェクトの作成など（第8話参照）
  //
  // ThreeのRenderer作成
  renderer = new THREE.WebGLRenderer({antialias: true});
  // サイズを指定して
  renderer.setSize( mazeScreen.width, mazeScreen.height );
  // Canvasを取得して
  var canvas = renderer.domElement;
  // CanvasからTextureを作成
  baseTexture = new PIXI.BaseTexture(canvas);
  texture = new PIXI.Texture(baseTexture);
  textureFrame = new Phaser.Frame(0, 0, 0, mazeScreen.width, mazeScreen.height, 'poge');
  // Textureをスプライトとして追加
  var sprite = game.add.sprite(0, 0, texture, textureFrame);
}

そして、更新処理(update)で行動などによる描画の変化を与えてやり、描画処理(render)でThreeを描画すればいい。

poge.js

function render() {
  // Threeをtextureに描画する
  renderer.render(scene, camera);
  // Phaserでtextureを更新する
  game.renderer.updateTexture(baseTexture);
}

物語は佳境に入ってきました。太郎と次郎は無事に脱出できるのか？ｗ

第10話 太郎「迷子って言うな！」

第10話太郎「迷子って言うな！」