This of phaser3 add. add. image

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

Parameters : frame: string | number

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

rotation The angle of this GameObject （ In radians ）.

If you want to set the degree , have access to angle.

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

frame :Phaser.Textures.Frame

The texture frame this GameObject uses for rendering .

 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 Input control of game object
Pass this GameObject to the input manager to enable it for input .

var myimg = this.add.image(70, 530, 'down').setInteractive();
myimg.setInteractive( [shape] [, callback] [, dropZone]); //  Pass this GameObject to the input manager to enable it for input 

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

once(event, fn [, context])

Add a one-time listener for a given event .
Parameters ：
event string | symbol name .
fn function Monitor function .
context * < Optional > This The context in which the listener is invoked .
Return value ：
this.

type
Phaser.GameObjects.Image

setOrigin( [x] [, y])

Set the origin of this GameObject .
These values are in 0 To 1 Within the scope of .

Parameters ：
x Numbers < Optional > 0.5 Horizontal origin value .
y Numbers < Optional >X Vertical origin value . If not defined , It will be set to Value x.

Return value ：
This GameObject instance .

type
Phaser.GameObjects.Image

 var robot = this.add.image(300, 200, 'robot').setOrigin(0.2,0.2); //  Set up game instances 20%,20% The point of is the origin of the game instance , The position of this origin in the world is 300,200

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

Set the master of this GameObject WebGL The Conduit .
pipelineData If parameters are given , Also set properties .
The pipe and the back pipe share the same pipe data object .
Parameters ：
pipeline string | Phaser.Renderer.WebGL.WebGLPipeline String based name of the pipe , Or the pipe instance to be set .
pipelineData object < Optional > Optional pipeline data objects , It is deeply copied to pipelineData In the properties of this game object .
copyData bool < Optional >
Default :true Whether the pipeline data object should be deeply copied to pipelineData In the properties of this game object ？ If false It will set... By reference .

return ：
This GameObject instance .
Phaser.GameObjects.Image

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

Set additional tones on this GameObject . Set the color

Hue works by getting pixel color values from the game object texture , Then multiply it by the color value of the hue . You can provide any color value , under these circumstances , The entire GameObject will be shaded to that color . Or you can provide color for each corner . The colors blend together within the range of the game object .

To modify the set hue color , Call this method again with the new value or use the tint Property to set all colors at once . perhaps , Nature of use tintTopLeft,tintTopRight, tintBottomLeft andtintBottomRight` Independently set corner color value .

Delete tone call clearTint.

To convert it from an additional tone to a fill based tone , Please set the property tintFill by true.

Parameters ：
topLeft Numbers < Optional > 0xffffff Hue applied to the upper left corner of the GameObject . If no other value is given , Then the value is applied uniformly , Coloring the entire GameObject .
topRight Numbers < Optional > The hue applied to the upper right corner of the GameObject .
bottomLeft Numbers < Optional > The hue applied to the lower left corner of the GameObject .
bottomRight Numbers < Optional > The hue applied to the lower right corner of the GameObject .

return ：
This GameObject instance .

type
Phaser.GameObjects.Image

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

var img = this.add.image(300, 300, 'megaset');
// The framework stores custom data （ See below JSON）, We can use this data to color it ：
img.setTint(img.frame.customData.tint);
img.clearTint(); Clear all hue values associated with this GameObject . Immediately set the color value back to  0xffffff  And set the tone type to “additive”, This will result in no significant change in texture .

setAngle( [degrees]) Set the angle of this GameObject .

img.setAngle(20);

setFlipX(value) Set the horizontal flip state of this GameObject .

Horizontally flipped GameObjects will be inverted on the horizontal axis . Flipping always happens in the middle of the texture , Does not affect the scaling value . If the game object has a physical body , It doesn't change the body . This is just a render switch .
Parameters ：
value Boolean value Flip state .false For no flip , Or be true Flip .

setFlipY(value) Set the vertical flip state of this GameObject .

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

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

source < Phaser.Textures.TextureSource >

TextureSource An array of instances . These are unique to this texture , Contains the actual image （ Or canvas ） data .

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

createBitmapMask( [renderable]) Create and return bitmap mask . This mask can be used by any GameObject , Including this .

Be careful ： Bitmap masks are only available for WebGL. Geometric masks apply to WebGL and Canvas.
To create a mask , You need to pass in a reference to a renderable game object . A renderable game object is an object that uses textures to render , Such as images 、 spirit 、 Render texture or bitmap text .
If you don't provide renderable objects , And this GameObject has a texture , It uses itself as an object . This means that you can call this method to create a bitmap mask from any renderable GameObject .

renderable: Phaser.GameObjects.GameObject < Optional >
Renderable game objects using textures , for example 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 The first one will be found 

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 Starting from the upper left corner of the GameObject alpha value . This value is the interpolation from the corner to the center of the GameObject .

sea.alphaTopLeft = 0;

alpha :number - attribute

alphaBottomLeft :number - attribute

alphaBottomRight :number - attribute

alphaTopRight :number - attribute