phaser3 之 this.add.add.image

image(x, y, texture [, frame]) GameObjects.Image

参数: frame: string | number

var myimg = this.add.image(70, 530, 'down').setInteractive();

rotation 此游戏对象的角度（以弧度表示）。

如果想设置度数，可以使用 angle。

myimg.rotation = 180;
myimg.angle = 180 * Math.PI / 180;

frame :Phaser.Textures.Frame

此游戏对象用于渲染的纹理框架。

 this.load.spritesheet('button', 'assets/ui/flixel-button.png', { frameWidth: 80, frameHeight: 20 });
 const btn = this.add.image(10,100, 'button', 0).setOrigin(0).setScale(2).setInteractive();
 btn.frame = btn.scene.textures.getFrame('button', frame);

setInteractive( [hitArea] [, callback] [, dropZone]):

Input游戏对象的输入控制
将此游戏对象传递给输入管理器以启用它以进行输入。

var myimg = this.add.image(70, 530, 'down').setInteractive();
myimg.setInteractive( [shape] [, callback] [, dropZone]); // 将此游戏对象传递给输入管理器以启用它以进行输入

var downButton = this.add.image(70, 530, 'down').setInteractive();
downButton.on('pointerdown', function (event) { ... });

once(event, fn [, context])

为给定事件添加一次性侦听器。
参数：
event string | symbol 名称。
fn function 监听器功能。
context * <可选>这个 调用侦听器的上下文。
返回值：
this.

类型
Phaser.GameObjects.Image

setOrigin( [x] [, y])

设置此游戏对象的原点。
这些值在 0 到 1 的范围内给出。

参数：
x 数字 <可选> 0.5 水平原点值。
y 数字 <可选>X 垂直原点值。如果未定义，它将被设置为 的值x。

返回值：
这个游戏对象实例。

类型
Phaser.GameObjects.Image

 var robot = this.add.image(300, 200, 'robot').setOrigin(0.2,0.2); // 设置游戏实例20%,20%的点为游戏实例的原点,这个原点在世界中的位置是300,200

setPipeline(pipeline [, pipelineData] [, copyData])

设置此游戏对象的主 WebGL 管道。
pipelineData如果给出参数，还设置属性。
管道和后管道共享相同的管道数据对象。
参数：
pipeline string | Phaser.Renderer.WebGL.WebGLPipeline 管道的基于字符串的名称，或要设置的管道实例。
pipelineData object <可选>可选的管道数据对象，它被深度复制到pipelineData这个游戏对象的属性中。
copyData bool <可选>
默认:true 管道数据对象是否应该被深度复制到pipelineData这个游戏对象的属性中？如果false它将通过引用设置。

返回：
这个游戏对象实例。
Phaser.GameObjects.Image

setTint( [topLeft] [, topRight] [, bottomLeft] [, bottomRight])

在此游戏对象上设置附加色调。设置颜色

色调的工作原理是从游戏对象纹理中获取像素颜色值，然后将其乘以色调的颜色值。您可以提供任何一种颜色值，在这种情况下，整个游戏对象将被着色为该颜色。或者您可以为每个角提供颜色。颜色在游戏对象的范围内混合在一起。

要修改设置后的色调颜色，请使用新值再次调用此方法或使用该 tint属性一次设置所有颜色。或者，使用性质tintTopLeft，tintTopRight, tintBottomLeft andtintBottomRight`独立设置的角落颜色值。

删除色调调用clearTint。

要将其从附加色调转换为基于填充的色调，请将属性设置tintFill为true。

参数：
topLeft 数字 <可选> 0xffffff 应用于游戏对象左上角的色调。如果没有给定其他值，则均匀应用此值，为整个游戏对象着色。
topRight 数字 <可选>应用于游戏对象右上角的色调。
bottomLeft 数字 <可选>应用于游戏对象左下角的色调。
bottomRight 数字 <可选>应用于游戏对象右下角的色调。

返回：
这个游戏对象实例。

类型
Phaser.GameObjects.Image

img.setTint(0xF90619,0xff6600,0x00a0e9,0x1C225D);

var img = this.add.image(300, 300, 'megaset');
//框架中存储了自定义数据（请参见下面的JSON），我们可以使用这些数据对其着色：
img.setTint(img.frame.customData.tint);
img.clearTint();清除与此游戏对象关联的所有色调值。立即将颜色值设置回 0xffffff 并将色调类型设置为“additive”，这会导致纹理没有明显变化。

setAngle( [degrees]) 设置这个游戏对象的角度。

img.setAngle(20);

setFlipX(value) 设置此游戏对象的水平翻转状态。

水平翻转的游戏对象将在水平轴上反转呈现。翻转总是从纹理的中间发生，不会影响缩放值。如果这个游戏对象有一个物理身体，它不会改变身体。这只是一个渲染切换。
参数：
value 布尔值 翻转状态。false对于没有翻转，或被true翻转。

setFlipY(value) 设置此游戏对象的垂直翻转状态。

this.add.image(1920, 1080, 'bg').setOrigin(0).setFlipX(true).setFlipY(true);

texture :Phaser.Textures.Texture|Phaser.Textures.CanvasTexture

source < Phaser.Textures.TextureSource >

TextureSource 实例的数组。这些是此纹理独有的，包含实际的图像（或画布）数据。

this.image.texture.source[0].width / 2;

createBitmapMask( [renderable]) 创建并返回位图掩码。这个掩码可以被任何游戏对象使用，包括这个。

注意：位图蒙版仅适用于 WebGL。几何遮罩适用于 WebGL 和 Canvas。
要创建遮罩，您需要传入对可渲染游戏对象的引用。可渲染游戏对象是一种使用纹理进行渲染的对象，例如图像、精灵、渲染纹理或位图文本。
如果你不提供可渲染对象，而这个游戏对象有纹理，它会使用自己作为对象。这意味着您可以调用此方法从任何可渲染的游戏对象创建位图蒙版。

renderable: Phaser.GameObjects.GameObject <可选>
使用纹理的可渲染游戏对象，例如 Sprite。

const elephantLayer = this.add.layer();
const splat = this.make.image({ x: 400, y: 300, key: 'splat' }, false);
const mask = splat.createBitmapMask();

elephantLayer.setMask(mask);

setData/getData

values

const img = this.add.image(300, 300, 'gem');
img.setData('name', 'Red Gem Stone');
img.setData('age', 18);

img.getData('name')
img.data.values.age++

data

set/get

query

const img = this.add.image(300, 300, 'gem');
img.setDataEnabled();
img.data.set('hehe_1', 'Red Gem Stonehehe_1');
img.data.set('hehe_2', 'Red Gem Stonehehe_2');
img.data.set('age', 18);

img.data.get('name');
img.data.query(/^hehe/); // hehe开头的都会查询出来

setAlpha( [topLeft] [, topRight] [, bottomLeft] [, bottomRight])

const face = this.add.image(400, 300, 'face');
const sea = this.add.image(400, 300, 'turkey');

//  top left, top right, bottom left, bottom right
sea.setAlpha(1, 1, 0, 0);

alphaTopLeft 从游戏对象左上角开始的 alpha 值。该值是从角到游戏对象中心的插值。

sea.alphaTopLeft = 0;

alpha :number - 属性

alphaBottomLeft :number - 属性

alphaBottomRight :number - 属性

alphaTopRight :number - 属性