当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Phaser3 游戏开发（一）

Phaser3 游戏开发（一）

2020年07月28日  | 移动技术网IT编程  | 我要评论

（一）开发环境搭建

主要技术栈 vue-cli

1. 先下载好 vue-cli，启动好之后运行

2. 安装 phaser （fei ze 飞者 平舌）

npm i phaser

3. 小例子代码；vue 与 phaser 相结合

<template>
  <div>
    
  </div>
</template>

<script>
import Phaser from 'phaser'
class PhaserGame extends Phaser.Scene {
  create () {
    // this 是PhaserGame PhaserGame继承Phaser.Scene中的所有方法
    // 比如load add 等
      this.add.image(400, 300, 'sky');
      var particles = this.add.particles('red');
      var emitter = particles.createEmitter({
        speed: 100,
        scale: { start: 1, end: 0 },
        blendMode: 'ADD'
      });
      var logo = this.physics.add.image(400, 100, 'logo');
      logo.setVelocity(100, 200);
      logo.setBounce(1, 1);
      logo.setCollideWorldBounds(true);
      emitter.startFollow(logo);
    }
    preload () {
      // 加载游戏图片
      this.load.setBaseURL('http://labs.phaser.io'); // 素材域名前缀
      this.load.image('sky', 'assets/skies/space3.png'); // http://labs.phaser.io/assets/skies/space3.png 图片地址
      this.load.image('logo', 'assets/sprites/phaser3-logo.png');
      this.load.image('red', 'assets/particles/red.png');
    }
}
export default {
  data () {
    return {
      game: null,
      config: {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        physics: {
          default: 'arcade',
          arcade: {
            gravity: { y: 200 }
          }
        },
        scene: [PhaserGame] // PhaserGame 封装成一个类了
      }
    }
  },
  created () {
    this.game = new Phaser.Game(this.config)
  }
}
</script>

<style>

</style>

 

本文地址：https://blog.csdn.net/Luckyzhoufangbing/article/details/107609509

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网