2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

MonacaでPlayCanvasを動かしてみるまで

Posted at

Monaca+PlayCanvasで3D表示および音なるまでやってみました

Monacaとは

一言で言えば、ハイブリッドアプリ開発環境です
詳しくは
https://ja.monaca.io/
を見てください

PlayCanvasとは

HTML5ゲームエンジンです
https://playcanvas.jp/
WebブラウザでUnityにちょっと似てるUIで作成していくことができますが、エンジン部分がGitHubで公開されています
https://github.com/playcanvas/engine

導入

Monaca環境でプロジェクト作成(今回はなぜかVueテンプレート利用)

PlayCanvasのエンジン部分のソースを落とす

playcanvas-stable.min.jsをsrcフォルダにアップ

ついでに鳴らしたい音をwww直下にアップロード(今回はfanfare.mp3っていうフリー素材利用)

playcanvas-stable.min.jsのソースをいじる

18行目付近にあるこの部分をコメントアウト

playcanvas-stable.min.js
//  window = _window || window;
//  navigator = _navigator || navigator;

app.vueを編集

app.vue
<template>
    <v-ons-page>
      <v-ons-toolbar>
        <div class="center">{{ title }}</div>
        <div class="right">
          <v-ons-toolbar-button>
            <v-ons-icon icon="ion-navicon, material: md-menu"></v-ons-icon>
          </v-ons-toolbar-button>
        </div>
      </v-ons-toolbar>
      <div style="text-align: center; padding-top:10px">Hello World!</div>
      <p style="text-align: center">
        <v-ons-button @click="alert">Click Me!</v-ons-button>
      </p>
      <canvas ref='application'></canvas>
    </v-ons-page>
</template>
<script>
  import pc from 'playcanvas-stable.min.js';
  export default{
    data() {
      return {
        title: 'My app'
      };
    },
    methods: {
      alert() {
        this.$ons.notification.alert('This is an Onsen UI alert notification test.');
      }
    },
    mounted: function() {
      // create a PlayCanvas application
      let canvas = this.$refs.application;
      console.log(canvas);
      let app = new pc.Application(canvas, { });
      app.start();

      // fill the available space at full resolution
      app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
      app.setCanvasResolution(pc.RESOLUTION_AUTO);

      // ensure canvas is resized when window changes size
      window.addEventListener('resize', function() {
          app.resizeCanvas();
      });

      // create box entity
      let cube = new pc.Entity('cube');
      cube.addComponent('model', {
          type: 'box'
      });

      // create camera entity
      let camera = new pc.Entity('camera');
      camera.addComponent('camera', {
          clearColor: new pc.Color(0.1, 0.1, 0.1)
      });

      // create directional light entity
      let light = new pc.Entity('light');
      light.addComponent('light');

      // add to hierarchy
      app.root.addChild(cube);
      app.root.addChild(camera);
      app.root.addChild(light);

      // set up initial positions and orientations
      camera.setPosition(0, 0, 3);
      light.setEulerAngles(45, 0, 0);

      // audio
      let asset = {
          url: "fanfare.mp3",
          type: "audio"
      };
      app.assets.loadFromUrl(asset.url, asset.type, function (err, asset) {
        let audioEntity = new pc.Entity();
        audioEntity.addComponent('sound');
        audioEntity.addComponent("audiolistener");
        // add footsteps slot
        audioEntity.sound.addSlot('footsteps', {
            asset: asset,
            pitch: 1.7,
            loop: true,
            autoPlay: true
        });
        app.root.addChild(audioEntity);
      });

      // register a global update event
      app.on('update', function (deltaTime) {
          cube.rotate(10 * deltaTime, 20 * deltaTime, 30 * deltaTime);
      });
    },
  };
</script>

結果

image.png

MonacaDebuggerでも動くのを確認

※Androidしか持ってないのでAndroidでのみ確認はしました

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?