如何访问 Phaser Texture 的 ImageData答案

【问题标题】：How to access a Phaser Texture's ImageData如何访问 Phaser Texture 的 ImageData
【发布时间】：2021-11-05 18:37:34
【问题描述】：

如何访问 Phaser Texture 实例的原始 ImageData？

我已经预加载了一张图片：

thisScene.load.image('my-image', '/path/to/image.jpg')

我已经创建了该纹理的 Image GameObject：

let myImg = new Phaser.GameObjects.Image(thisScene, 0, 0, 'my-image')

现在我想要原始的ImageData，“Uint8ClampedArray 表示一维数组，其中包含 RGBA 顺序的数据，整数值介于 0 和 255（含）之间。”

我知道我可以通过将图像复制到新的 Phaser CanvasTexture 中来获取它，如下所示：

let originalTextureSrcImg = thisScene.textures.get('my-image').getSourceImage()

let newTexture = thisScene.textures.createCanvas(
  'copy-of-image',
  originalTextureSrcImg.width, originalTextureSrcImg.height
)

let context = newTexture.getSourceImage().getContext('2d')

context.drawImage(
  originalTextureSrcImg,
  0, 0
)

let imageData = context.getImageData(
  0, 0,
  originalTextureSrcImg.width, originalTextureSrcImg.height
)

但这有两个缺点：

看起来很粗糙，效率低下，而且
如果我想反复且经常（在运行时）执行此操作，我需要发明一些方案来保留其中一些我并不真正感兴趣的中间对象。

The documentation（它有多少令人惊讶地可怕），说Texture 的.texture 有一个.source 属性，它是Phaser.Textures.TextureSource 项目的数组，其中“包含实际的图像（或画布）数据”，但该措辞具有欺骗性：它只是对 Phaser 自己的中间 Texture 和 Canvas 对象的重复引用：它似乎在任何地方都没有包含正确的ImageData，这使得它毫无价值我的目的。

我正在寻找最有效和最干净的 Phaser 惯用方法来访问 Phaser 纹理的 ImageData（以读写方式），这是我自然会拥有的访问方式。

【问题讨论】：

为什么不使用 WebGL，Unity？

标签： html5-canvas phaser-framework getimagedata

【解决方案1】：

注意：对于文档，请尝试使用notes of phaser 3，它更清晰更易于理解。有关 Phaser 3 的更多问题，请尝试html5 game devs 论坛，他们有一个更活跃的 Phaser 3 社区

你可以使用加载纹理

var rt = scene.add.renderTexture(x, y, undefined, undefined, key, frame);

然后您可以使用

粘贴到游戏对象上

rt.draw(gameObject, x, y);

或一组使用

rt.draw(group, x, y);

查看here的完整文档

【讨论】：