Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

@tkymgr

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

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

今回は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)オブジェクトを設定します。この状態オブジェクトって、一般的なゲームフレームワークで言うシーンみたいなもんですよね?(1週間ぐらいしか使ってないので、よくわかってないw

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

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

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);
}

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

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