2 Phaser中加载文字、图片、声音和视频

效果展示

关键技术点

• 资源加载添加在preload()里，资源使用添加在create()里
• 使用this.load.image加载图片、this.load.audio加载音频、this.load.video加载视频
• 使用this.add.image使用图片、this.add.text添加文字、this.sound.add添加音频、this.add.video添加视频
• 使用music.loop = true;设置音频循环播放、video.setLoop(true);设置视频循环播放
• 使用this.add.image显示图片，位置以图片中心点为原点

其中scene有3个函数：preload、create、update。

• preload：是在create函数前调用的，一般用于资源的加载；
• create：preload完成后，就会调用到这函数，这个函数一般用于构造界面，关联玩家键盘，游戏大部分逻辑事件等等等；
• update：会按周期进行调用，一般用于键盘控制玩家，玩家坐标更新等。

部分主要文件代码

BootScene.js

import { Scene } from 'phaser'
import sky from '@/game/assets/sky.png'
import thudMp3 from '@/game/assets/thud.mp3'
import thudOgg from '@/game/assets/thud.ogg'
import trailer from '@/game/assets/trailer.mp4'

export default class BootScene extends Scene {
  constructor () {
    super({ key: 'BootScene' });
  }

  preload () {
    // 加载图片
    this.load.image("sky", sky)
    // 加载音频
    this.load.audio("thud", [thudMp3, thudOgg])
    // 加载视频
    this.load.video("trailer", trailer)
  }

  create () {    
    this.scene.start('PlayScene')
  }
}

PlayScene.js

import { Scene } from 'phaser'

export default class PlayScene extends Scene {
  constructor () {
    super({ key: 'PlayScene' })
  }

  create () {
    // 添加图片
    this.add.image(400, 300, 'sky')
    // 添加文字
    this.showMsg = this.add.text(16, 16, 'Hello Phaser!',
        { fontSize: '32px', fill: '#fff' });
    // 添加声音
    let music = this.sound.add('thud')
    // 设置循环播放
    music.loop = true;
    // 播放声音
    music.play();
    // 添加视频
    let video = this.add.video(0, 0, "trailer")
    // 设置循环播放
    video.setLoop(true)
    // 播放视频
    video.play();
  }

  update () {
  }
}

本节完整代码下载地址

https://github.com/biwow/phaser3/tree/main/code/2