文章目录
- image(x, y, texture [, frame]) [GameObjects.Image](http://www.zixuephp.com/manual/phaser3/name/Phaser.GameObjects.Image.html)
-
- rotation 此游戏对象的角度(以弧度表示)。
- frame :Phaser.Textures.Frame
- setInteractive( [hitArea] [, callback] [, dropZone]):
- once(event, fn [, context])
- setOrigin( [x] [, y])
- setPipeline(pipeline [, pipelineData] [, copyData])
- setTint( [topLeft] [, topRight] [, bottomLeft] [, bottomRight])
- setAngle( [degrees]) 设置这个游戏对象的角度。
- setFlipX(value) 设置此游戏对象的水平翻转状态。
- setFlipY(value) 设置此游戏对象的垂直翻转状态。
- texture :[Phaser.Textures.Texture|Phaser.Textures.CanvasTexture](http://www.zixuephp.com/manual/phaser3/name/Phaser.Textures.CanvasTexture.html)
- createBitmapMask( [renderable]) 创建并返回位图掩码。这个掩码可以被任何游戏对象使用,包括这个。
- setData/getData
- data
- setAlpha( [topLeft] [, topRight] [, bottomLeft] [, bottomRight])
- alphaTopLeft 从游戏对象左上角开始的 alpha 值。该值是从角到游戏对象中心的插值。
- alpha :number – 属性
- alphaBottomLeft :number – 属性
- alphaBottomRight :number – 属性
- alphaTopRight :number – 属性
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.
setOrigin( [x] [, y])
设置此游戏对象的原点。
这些值在 0 到 1 的范围内给出。
参数:
x 数字 <可选> 0.5 水平原点值。
y 数字 <可选>X 垂直原点值。如果未定义,它将被设置为 的值x。
返回值:
这个游戏对象实例。
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 数字 <可选>应用于游戏对象右下角的色调。
返回:
这个游戏对象实例。
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;