Phaser3.50 examples Audio、Cache 笔记

Published by 雪夜不下雪 on 共 3498 个字

这里记录的是 Phaser3.50 示例中的 Audio 和 Cache 部分 api 的用法。详情还是看 Phaser api 文档比较好。

Audio

Audio Sprite

class AudioSprite extends Phaser.Scene {
  constructor() {
    super()
  }

  preload() {
    this.load.baseURL = globalConfig.baseUrl
    this.load.image('title', 'assets/pics/catastrophi.png')
    this.load.spritesheet('button', 'assets/ui/flixel-button.png', {
      frameWidth: 80,
      frameHeight: 20
    })
    this.load.bitmapFont('nokia', 'assets/fonts/bitmap/nokia16black.png', 'assets/fonts/bitmap/nokia16black.xml')
    this.load.audioSprite('sfx', 'assets/audio/SoundEffects/fx_mixdown.json', [
      'assets/audio/SoundEffects/fx_mixdown.ogg',
      'assets/audio/SoundEffects/fx_mixdown.mp3'
    ])
  }

  create() {
    this.add.image(400, 300, 'title')
    const spritemap = this.cache.json.get('sfx').spritemap

    let i = 0
    for (let spriteName in spritemap) {
      if (!spritemap.hasOwnProperty(spriteName)) {
        continue
      }

      this.makeButton(spriteName, 680, 115 + i * 40)
      i++
    }

    this.input.on('gameobjectover', function(pointer, button) {
      this.setButtonFrame(button, 0)
    }, this)

    this.input.on('gameobjectout', function(pointer, button) {
      this.setButtonFrame(button, 1)
    }, this)

    this.input.on('gameobjectdown', function(pointer, button) {
      this.sound.playAudioSprite('sfx', button.name)
      this.setButtonFrame(button, 2)
    }, this)

    this.input.on('gameobjectup', function(pointer, button) {
      this.setButtonFrame(button, 0)
    }, this)
  }

  makeButton(name, x, y) {
    const button = this.add.image(x, y, 'button', 1).setInteractive()
    button.name = name
    button.setScale(2, 1.5)

    const text = this.add.bitmapText(x - 40, y - 8, 'nokia', name, 16)
    text.x += (button.width - text.width) / 2
  }

  setButtonFrame(button, frame) {
    button.frame = button.scene.textures.getFrame('button', frame)
  }
}

const config = {
  type: Phaser.AUTO,
  parent: 'demo',
  width: 800,
  height: 600,
  scene: [AudioSprite],
  pixelArt: true,
  audio: {
    disableWebAudio: true
  }
}

const game = new Phaser.Game(config)

this.load.bitmapFont(key [, textureURL] [, fontDataURL] [, textureXhrSettings] [, fontDataXhrSettings])

加载基于 xml 的点阵字体（bitmap font）。

点阵字体是把每一个字符都分成16×16或24×24个点，然后用每个点的虚实来表示字符的轮廓。点阵字体也叫位图字体，其中每个字形都以一组二维像素信息表示。点阵字体不需要矢量计算，但是缩放模糊。

this.load.audioSprite(key, jsonURL [, audioURL] [, audioConfig] [, audioXhrSettings] [, jsonXhrSettings])

加载基于 json 文件的音频文件。这段音频是多个音频合成的，音频的分割描述在 json 文件里。比如：

{
  "resources": [
    "./assets/audio/SoundEffects/fx_mixdown.ogg",
    "./assets/audio/SoundEffects/fx_mixdown.mp3"
  ],
  "spritemap": {
    "alien death": {
      "start": 1, // 秒
      "end": 2,
      "loop": false
    },
    "boss hit": {
      "start": 3,
      "end": 3.5,
      "loop": false
    },
  }
}

如果 json 文件里 resources 指定了音频资源，方法里可以不写 audioURL 参数。

this.cache.json.get(‘sfx’).spritemap

文件加载器（file loader）会将加载的文件放到全局缓存里。这里从缓存里获取 xfs 指向的 json 文件（对象），取得 spritemap 属性。

this.sound.playAudioSprite(key, spriteName [, config])

将一段音频添加到音频管理器并播放，结束后自动销毁。

参数说明
key音频资源
spriteName音频片段名称
config音频配置对象。

this.add.bitmapText(x, y, font [, text] [, size] [, align])

创建点阵文字并添加到场景。

Phaser.Textures.TextureManager.getFrame(key [, frame])

获取指定纹理的指定帧

Basic Playback And Events

示例中长长的链式调用吓到我了~~~

this.load.audio(key [, urls] [, config] [, xhrSettings])

添加音频。

this.sound.pauseOnBlur( = true/false)

当游戏失焦的时候是否停止播放。比如切换到其他标签页或者应用。

this.sound.addAudioSprite(key [, config])

添加 audio sprite 到音频管理器。

Loop Delay

Phaser.Sound.BaseSound.addMarker(marker)

向当前声音中添加标记。标记由名称、开始时间、持续时间和可选配置对象表示。这允许您将多个声音捆绑到一个音频文件中，并使用标记在它们之间跳转以进行播放。

marker 可以代替 audio sprite 的 json 文件。可用多个 marker 对 this.load.audio() 方式添加的音频标记。

也可以在播放的时候传入 marker 达到播放 audio sprite 的作用。比如：this.sound.play(key, marker)

配置项说明
name音频标记的唯一识别
start音频播放开始位置。秒。可选
duration音频标记播放持续时间。秒。可选
config音频配置

Cache

Json File

this.load.json(key [, url] [, dataKey] [, xhrSettings])

加载 json 文件。

this.cache.json.get(key)

Text File

this.load.text(key [, url] [, xhrSettings])

加载 txt 文本。

this.cache.txt.get(key)

Xml File

this.load.xml(key [, url] [, xhrSettings])

加载 xml 文件。

this.cache.xml.get(key)

获取到的对象是 DOM。可以使用 data.getElementsByTagName(name) 之类的方法。