Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

今回は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

tkymgr
いわゆるそんな感じでやってます。
https://clutch-eng.com
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした