澳门精品一级,在线视频第一页

游戲中Sprite精靈是在屏幕中能夠被控制的顯示對(duì)象，如果屏幕中的顯示對(duì)象不能被控制那就只是一個(gè)節(jié)點(diǎn)。準(zhǔn)確來(lái)說(shuō)，Sprite精靈是一個(gè)能夠通過(guò)改變自身屬性，比如角度、位置、伸縮、顏色等，變?yōu)榭煽貏?dòng)畫(huà)的2D圖像。

結(jié)構(gòu)	描述
Package	`laya.display.Sprite`
Class	`Laya.Sprite`
Inheritance	`Sprite / Node / EventDispatcher / Object`

Sprite是基礎(chǔ)的顯示圖形的顯示列表節(jié)點(diǎn)，LayaAir引擎核心顯示類(lèi)只有一個(gè)Sprite類(lèi)，Sprite會(huì)針對(duì)不同情況自動(dòng)渲染優(yōu)化。Laya.Sprite類(lèi)位于Core核心類(lèi)庫(kù)中，是laya.display.Sprite類(lèi)封裝后形成的。

創(chuàng)建精靈對(duì)象實(shí)例

let sprite = new Laya.Sprite();

屬性	描述
`autoSize:boolean=false`	指定是否自動(dòng)計(jì)算寬高尺寸，默認(rèn)為`false`。
`hitTestPrior:boolean = false`	指定鼠標(biāo)事件檢測(cè)是否優(yōu)先檢測(cè)自身
`mouseThrough:boolean = false`	鼠標(biāo)事件與當(dāng)前對(duì)象的碰撞檢測(cè)是否可以穿透

autoSize:boolean = true;

精靈的寬高默認(rèn)為0，不會(huì)隨著繪制內(nèi)容的變化而變化，如果想要根據(jù)繪制內(nèi)容獲取寬高，可以設(shè)置autoSize屬性為true，或通過(guò)getBounds()方法獲取，不過(guò)開(kāi)啟autoSize后會(huì)影響性能。

getBounds():Rectangle

Sprite默認(rèn)沒(méi)有寬高，可通過(guò)getBounds()獲取本對(duì)象在父容器坐標(biāo)系中的矩形顯示區(qū)域，也可手工設(shè)置autoSize = true，指定自動(dòng)計(jì)算寬高尺寸，然后再獲取精靈的寬高。

Sprite的寬高一般用于碰撞檢測(cè)和排版，并不影響顯示圖片大小，如需更改顯示圖像大小，可使用縮放屬性scaleX、scaleY，scale。

Sprite默認(rèn)不接收鼠標(biāo)事件

Sprite默認(rèn)不接收鼠標(biāo)事件，即mouseEnabled = false。只要對(duì)其監(jiān)聽(tīng)任意鼠標(biāo)事件，都會(huì)自動(dòng)打開(kāi)自己以及所有父對(duì)象的mouseEnabled = true，因此無(wú)需手工設(shè)置mouseEnabled屬性。

容器

Sprite是容器類(lèi)，能夠作為其它顯示對(duì)象的容器，用來(lái)添加多個(gè)子節(jié)點(diǎn)。

class Test {
    constructor() {
        Laya.init(Laya.Browser.width, Laya.Browser.height, Laya.WebGL);
        this.onInit();
    }
    initStage(){
        Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
        Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
        Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
        Laya.stage.bgColor = "#000000";
    }
    onInit(){
        this.ATLAS_PATH = "./res/atlas/avatar.atlas";
        Laya.loader.load(this.ATLAS_PATH, Laya.Handler.create(this, function(){
            // Sprite容器類(lèi)作為其它顯示對(duì)象的容器，用來(lái)添加多個(gè)子節(jié)點(diǎn)。
            let container = new Laya.Sprite();
            // 容器添加子節(jié)點(diǎn)
            let sprite;
            for(let i=1; i<5; i++){
                sprite = new Laya.Sprite().loadImage(`avatar/avatar${i}.png`);
                sprite.pivot(55, 72).pos(Math.cos(Math.PI/2*i)*150, Math.sin(Math.PI/2*i)*150);
                container.addChild(sprite);
            }
            // 通過(guò)控制容器改變自身以及子級(jí)外觀
            container.pos(Laya.stage.width/2, Laya.stage.height/2);
            Laya.stage.addChild(container);
        }));
    }
}
//啟動(dòng)
new Test();

加載圖片 loadImage

方法	描述
`loadImage(url:string, complete?:Handler):Sprite`	加載并顯示單張圖片，相當(dāng)于加載圖片后設(shè)置紋理`texture`屬性。

圖片的顯示是游戲開(kāi)發(fā)的基礎(chǔ)，LayaAir中提供兩種方式用于顯示圖片分別是Sprite.loadImage和Graphics.drawTexture方法。

/**
* 加載并顯示一個(gè)圖片。
* 相當(dāng)于加載圖片后，設(shè)置texture屬性。
* 注意：2.0改動(dòng)：多次調(diào)用，只會(huì)顯示一個(gè)圖片（1.0會(huì)顯示多個(gè)圖片）,x,y,width,height參數(shù)取消。
* @param url       圖片地址。
* @param complete  （可選）加載完成回調(diào)。
* @return  返回精靈對(duì)象本身。
*/
loadImage(url: string, complete?: Handler): Sprite;

直接加載外部圖片并獲取精靈紋理圖片的信息

class Test {
    constructor() {
        Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);
        this.initStage();
        this.run();
    }
    initStage(){
        Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
        Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
        Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
        Laya.stage.bgColor = "#000000";
    }
    run(){
        this.createSprite("res/image/bomb.png");
    }
    createSprite(url){
        this.sprite = new Laya.Sprite();
        // 加載并顯示一個(gè)圖片
        this.sprite.loadImage(url, Laya.Handler.create(this, this.onLoadedImage, [url]));
        this.sprite.pos(Laya.stage.width >> 1, Laya.stage.height >> 1);
        // 添加到舞臺(tái)
        Laya.stage.addChild(this.sprite);
    }
    //加載圖片完畢后觸發(fā)
    onLoadedImage(url){
        //獲取加載的紋理圖片
        this.texture = Laya.loader.getRes(url);
        console.log(this.texture, this.texture.width, this.texture.height);//61 55
        //設(shè)置
    }
}
//啟動(dòng)
new Test();

從緩沖區(qū)讀取圖片

class Test {
    constructor() {
        Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);
        this.initStage();
        this.loadAssets();
    }
    initStage(){
        Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
        Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
        Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
        Laya.stage.bgColor = "#000000";
    }
    loadAssets(){
        this.AVATAR_PATH = "./res/atlas/avatar.png";
        this.CARD_PATH = "./res/atlas/card.png";

        let assets = [];
        assets.push(this.AVATAR_PATH);
        assets.push(this.CARD_PATH);

        Laya.loader.load(assets, Laya.Handler.create(this, this.onAssetsLoaded));
    }
    onAssetsLoaded(isLoaded){
        if(isLoaded){
            this.sprite = new Laya.Sprite();
            //清空繪制
            this.sprite.graphics.clear();
            //獲得新的圖片資源重新繪制
            this.sprite.loadImage(this.AVATAR_PATH);
            //設(shè)置精靈的軸心點(diǎn)會(huì)影響對(duì)象位置，縮放，旋轉(zhuǎn)
            this.sprite.pivot(0, 0);
            //設(shè)置精靈的坐標(biāo)值
            this.sprite.pos((Laya.stage.width - this.sprite.width)/2, (Laya.stage.height - this.sprite.height)/2);
            //let texture = Laya.loader.getRes(this.AVATAR_PATH);
            console.log(this.sprite.pivotX, this.sprite.pivotY);//0 0
            //向舞臺(tái)中添加精靈
            Laya.stage.addChild(this.sprite);
        }
    }
}
//啟動(dòng)
new Test();

顯示圖集中的一張圖片則圖集必須先被加載

繪圖對(duì)象 Graphics

Sprite精靈的graphics存取器是Graphics類(lèi)的一個(gè)繪圖對(duì)象

存取器	描述
`graphics`	繪圖對(duì)象，封裝了繪制位圖和矢量圖的接口，Sprite所有的繪圖操作都是通過(guò)Graphics來(lái)實(shí)現(xiàn)的。

Graphics對(duì)象是比Sprite更為輕量級(jí)的對(duì)象，合理使用能提高性能，比如將大量的節(jié)點(diǎn)繪圖調(diào)整為一個(gè)節(jié)點(diǎn)的Graphics命令集合，能減少大量節(jié)點(diǎn)創(chuàng)建的消耗。

結(jié)構(gòu)	描述
Package	`laya.display.Graphics`
Inheritance	`Graphics`

LayaAir通過(guò)Graphics類(lèi)提供了繪制矢量圖形的各種接口方法

方法	描述
alpha(value:number):AlphaCmd	用于設(shè)置繪圖對(duì)象的透明度
clear(recoverCmds?:boolean):void	清除繪制命令
destroy():void	銷(xiāo)毀繪圖對(duì)象

繪圖方法	描述
draw9Grid()	繪制九宮格
drawCircle()	繪制圓形
drawCurves()	繪制曲線
drawImage()	繪制圖片
drawLine()	繪制單線條
drawLines()	繪制多線條
drawPath()	繪制路徑
drawPie()	繪制扇形
drawPoly()	繪制多邊形
drawRect()	繪制矩形
drawTexture()	繪制紋理，相比drawImage功能更為強(qiáng)大，性能更差。
drawTextures()	批量繪制紋理
drawTriangles()	繪制三角形

繪制紋理 drawTexture

使用Laya加載器加載圖片完成后繪制紋理

//初始化引擎
const canvas = Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);
//舞臺(tái)設(shè)置
Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;//設(shè)置舞臺(tái)水平居中
Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;//設(shè)置舞臺(tái)垂直居中
Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;//設(shè)置舞臺(tái)縮放模式為顯示所有
Laya.stage.bgColor = "#000000";//設(shè)置舞臺(tái)背景顏色為黑色

//圖片路徑
const imgPath = "./res/atlas/avatar.png";
//使用加載器加載圖片
Laya.loader.load(imgPath, Laya.Handler.create(this, ()=>{
    //舞臺(tái)添加精靈節(jié)點(diǎn)
    let sprite = new Laya.Sprite();
    Laya.stage.addChild(sprite);
    //精靈設(shè)置紋理并居中顯示
    const res = Laya.loader.getRes(imgPath);
    const x = (Laya.stage.width-res.width)>>1;
    const y = (Laya.stage.height-res.height)>>1; 
    sprite.graphics.drawTexture(res, x, y);
}));

Graphics.drawTexture用于繪制紋理

graphics
get graphics():Graphics
set graphics(value: Graphics):void

繪圖對(duì)象，封裝了繪制位圖和矢量圖的接口，Sprite所有的繪圖操作都是通過(guò)Graphics來(lái)實(shí)現(xiàn)的。

/**
 * 繪制紋理
 * 相比drawImage功能更為強(qiáng)大，性能會(huì)差一些。
 * @param texture:Texture 紋理
 * @param x:Number (default=0) 可選，X軸偏移量
 * @param y:Number (default=0) 可選，Y軸偏移量
 * @param width:Number (default=0) 可選，寬度
 * @param height:Number (default=0) 可選，高度
 * @param matrix:Matrix (default=null) 可選，矩陣信息
 * @param alpha:Number (default=1) 可選，透明度
 * @param color:String (default=null) 可選，顏色濾鏡
 * @param blendMode:String (default=null) 可選，混合模式
*/
drawTexture(
  texture:Texture, 
  x:Number=0, 
  y:Number=0, 
  width:Number=0, 
  height:Number=0, 
  matrix:Matrix=null, 
  alpha:Number=1, 
  color:String=null, 
  blendMode:String=null
):DrawTextureCmd

class Test {
    constructor() {
        Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);
        this.onInit();
    }
    initStage(){
        Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
        Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
        Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
        Laya.stage.bgColor = "#000000";
    }
    onInit(){
        this.AVATAR_PATH = "./res/atlas/avatar.png";

        Laya.loader.load(this.AVATAR_PATH, Laya.Handler.create(this, function(){
            let texture = Laya.loader.getRes(this.AVATAR_PATH);

            let sprite = new Laya.Sprite();
            //使用Graphics.drawTexture繪制紋理
            sprite.graphics.drawTexture(texture);

            Laya.stage.addChild(sprite);
        }));
    }
}
//啟動(dòng)
new Test();

圖片顯示

例如：切換圖片，點(diǎn)擊撲克牌，隨機(jī)改變牌面值與花色。

poker

class Test {
    constructor() {
        Laya.init(Laya.Browser.width, Laya.Browser.height, Laya.WebGL);
        this.onInit();
    }
    initStage(){
        Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
        Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
        Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
        Laya.stage.bgColor = "#000000";
    }
    onInit(){
        let assets = [];
        assets.push({type:Laya.Loader.ATLAS, url:"res/atlas/poker.atlas"});
        Laya.loader.load(assets, Laya.Handler.create(this, this.onAssetsLoaded));
    }
    onAssetsLoaded(){
        this.sprite = new Laya.Sprite();
        Laya.stage.addChild(this.sprite);

        this.sprite.pivot(55, 72);
        this.sprite.pos(Laya.stage.width/2, Laya.stage.height/2);

        this.onSpriteClick();
        this.sprite.on(Laya.Event.CLICK, this, this.onSpriteClick);
    }
    onSpriteClick(){
        this.sprite.graphics.clear();

        let suit = Math.floor(Math.random()*4);//花色
        let rank = (Math.floor(Math.random()*12) + 1).toString(16);//牌值

        let url = `poker/0x${suit}${rank}.png`;
        console.log(url);
        let texture = Laya.loader.getRes(url);

        this.sprite.graphics.drawTexture(texture, 0, 0);
        this.sprite.size(texture.width, texture.height);
    }
}
//啟動(dòng)
new Test();

如果加載的圖片是多個(gè)圖片所合成的圖集文件，此時(shí)需要先引入圖片后將容器狀態(tài)修改為Clip切換類(lèi)型，即可使用圖片上的小圖。

軸心點(diǎn) pivot

項(xiàng)目	類(lèi)型	描述
`pivotX:Number`	存取器	軸心點(diǎn)X軸坐標(biāo)像素位置，默認(rèn)為0。
`pivotY:Number`	存取器	軸心點(diǎn)Y軸坐標(biāo)像素位置，默認(rèn)為0。
`pivot(x:Number, y:Number):Sprite`	方法	設(shè)置軸心點(diǎn)，相當(dāng)于分別設(shè)置`pivotX`和`pivotY`屬性。

什么是pivot軸心點(diǎn)呢？一個(gè)Sprite精靈對(duì)象默認(rèn)的軸心點(diǎn)位于自身的左上角，使用pos(x, y)設(shè)置Sprite精靈的位置時(shí)默認(rèn)是以左上角為基準(zhǔn)進(jìn)行定位的。

軸心點(diǎn)pivot和錨點(diǎn)anchor是同一個(gè)改變，都是基準(zhǔn)點(diǎn)，決定著圖片在舞臺(tái)的位置。軸心點(diǎn)以像素為單位，默認(rèn)XY坐標(biāo)為(0,0)表示圖片左上角作為基準(zhǔn)點(diǎn)。錨點(diǎn)則是以圖片的寬和高的倍數(shù)為單位，取值范圍是0~1。當(dāng)修改了Sprite對(duì)象設(shè)置默認(rèn)軸心點(diǎn)，對(duì)Sprite對(duì)象設(shè)置位置pos、縮放scale、旋轉(zhuǎn)rotation時(shí)，都是以軸心點(diǎn)為基準(zhǔn)，而并非默認(rèn)的Sprite對(duì)象左上角的坐標(biāo)值。

改變軸心點(diǎn)pivot可以控制旋轉(zhuǎn)和縮放的中心
軸心點(diǎn)pivot會(huì)影響對(duì)象位置、縮放中心、旋轉(zhuǎn)中心
精靈的pivot()用于設(shè)置軸心點(diǎn)，相當(dāng)于分別設(shè)置精靈的pivotX和pivotY屬性。

// 設(shè)置軸心點(diǎn)，相當(dāng)于分別設(shè)置pivotX和pivotY屬性。
pivot(pivotX:Number, pivotY:Number):Sprite

// 軸心點(diǎn)X軸位置，單位像素默認(rèn)為0。
pivotX:Number

//軸心點(diǎn)Y軸位置，單位像素默認(rèn)為0.
pivotY:Number

例如：以精靈對(duì)象默認(rèn)左上角為軸心點(diǎn)進(jìn)行旋轉(zhuǎn)

旋轉(zhuǎn)圖片前首先必須明確圖片的軸心點(diǎn)pivot，精靈的默認(rèn)軸心點(diǎn)是自己的左上角，比如使用pos(x,y)設(shè)置定位時(shí)默認(rèn)是以精靈的左上角作為參考點(diǎn)的。

//初始化引擎
const canvas = Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);
//舞臺(tái)設(shè)置
Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;//設(shè)置舞臺(tái)水平居中
Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;//設(shè)置舞臺(tái)垂直居中
Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;//設(shè)置舞臺(tái)縮放模式為顯示所有
Laya.stage.bgColor = "#000000";//設(shè)置舞臺(tái)背景顏色為黑色

//創(chuàng)建精靈
let sprite = new Laya.Sprite();
//圖片路徑
const imgPath = "./res/atlas/avatar.png";
//精靈加載圖片
sprite.loadImage(imgPath);
//設(shè)置圖片旋轉(zhuǎn)
//設(shè)置幀動(dòng)畫(huà)，每隔1幀的時(shí)間執(zhí)行回調(diào)函數(shù)
Laya.timer.frameLoop(1, this, ()=>{
    //設(shè)置精靈的旋轉(zhuǎn)角度
    sprite.rotation += 0.5;
});

//舞臺(tái)添加節(jié)點(diǎn)
Laya.stage.addChild(sprite);

例如：以精靈對(duì)象自身的中心點(diǎn)為軸心點(diǎn)進(jìn)行旋轉(zhuǎn)

class Test {
    constructor() {
        Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);
        this.onInit();
    }
    initStage(){
        Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
        Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
        Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
        Laya.stage.bgColor = "#000000";
    }
    onInit(){
        this.sprite = new Laya.Sprite();
        //清空繪制
        this.sprite.graphics.clear();
        //繪制有邊框的填充矩形
        this.sprite.graphics.drawRect(0, 0, 100, 100, "#CCFF00", "#FF0000", 5);
        //設(shè)置精靈對(duì)象相對(duì)于父容器的水平坐標(biāo)值
        this.sprite.x = 200;
        //設(shè)置精靈對(duì)象相對(duì)于父容器的垂直坐標(biāo)值
        this.sprite.y = 200;
        //設(shè)置精靈對(duì)象的寬高
        this.sprite.width = 100;
        this.sprite.height = 100;
        //設(shè)置精靈對(duì)象水平軸心點(diǎn)坐標(biāo)
        this.sprite.pivotX = 50;
        //設(shè)置精靈對(duì)象垂直軸心點(diǎn)坐標(biāo)
        this.sprite.pivotY = 50;
        //向舞臺(tái)中添加精靈
        Laya.stage.addChild(this.sprite);

        this.sprite.on(Laya.Event.CLICK, this, this.onSpriteClick);
    }
    onSpriteClick(){
        this.sprite.rotation += 5;
    }
}
//啟動(dòng)
new Test();

例如：從外部加載圖片后，將圖片放置到舞臺(tái)中央位置，并以圖片中心為圓心進(jìn)行旋轉(zhuǎn)。

class Test {
    constructor() {
        Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);
        this.initStage();
        this.initComponent();
    }
    initStage(){
        Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
        Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
        Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
        Laya.stage.bgColor = "#000000";
    }
    initComponent(){
        this.createSprite();
        Laya.timer.frameLoop(1, this, this.onFrameLoop);
    }
    onFrameLoop(){
        this.sprite.rotation += 2;
    }
    createSprite(){
        this.sprite = new Laya.Sprite();
        Laya.stage.addChild(this.sprite);

        const url = "res/image/npc.png";
        this.sprite.loadImage(url, Laya.Handler.create(this, function(){
            let res = Laya.loader.getRes(url);
            this.sprite.pivot(res.width/2, res.height/2);
            this.sprite.pos(Laya.stage.width>>1, Laya.stage.height>>1);
        }));
    }
}
//啟動(dòng)
new Test();

軸心點(diǎn)旋轉(zhuǎn)

旋轉(zhuǎn)縮放 rotation

項(xiàng)目	類(lèi)型	描述
`rotation:number`	存取器	旋轉(zhuǎn)角度，默認(rèn)為0，以角度為單位。
`scaleX:number`	存取器	X軸縮放值，默認(rèn)為1，設(shè)置為負(fù)數(shù)可實(shí)現(xiàn)水平反轉(zhuǎn)。
`scaleY:number`	存取器	Y軸縮放值，默認(rèn)為1，設(shè)置為負(fù)數(shù)可實(shí)現(xiàn)垂直反轉(zhuǎn)。

class Test {
    constructor() {
        Laya.init(Laya.Browser.width, Laya.Browser.height, Laya.WebGL);
        this.onInit();
    }
    initStage(){
        Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
        Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
        Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
        Laya.stage.bgColor = "#000000";
    }
    onInit(){
        this.sprite = new Laya.Sprite();
        Laya.stage.addChild(this.sprite);

        this.sprite.loadImage("res/image/npc.png");
        this.sprite.pivot(55, 72);
        this.sprite.x = Laya.stage.width / 2;
        this.sprite.y = Laya.stage.height / 2;

        this.scale = 0;
        Laya.timer.frameLoop(1, this, this.onFrameLoop);
    }
    onFrameLoop(){
        this.sprite.rotation += 2;
        this.scale += 0.02;
        this.sprite.scale(Math.sin(this.scale), Math.sin(this.scale));
    }
}
//啟動(dòng)
new Test();

設(shè)置遮罩 mask

存取器	描述
mask	根據(jù)對(duì)象（支持位圖和矢量圖）的形狀進(jìn)行遮罩顯示，遮罩對(duì)象坐標(biāo)系是相對(duì)于遮罩對(duì)象本身的。

public function get mask():Sprite
public function set mask(value:Sprite):void

LayaAir的遮罩可以設(shè)置一個(gè)對(duì)象，支持位圖和矢量圖，然后根據(jù)對(duì)象狀態(tài)進(jìn)行遮罩顯示。遮罩對(duì)象坐標(biāo)系時(shí)相對(duì)遮罩對(duì)象本身的，和Flash機(jī)制不同。

設(shè)置遮罩

class Test {
    constructor() {
        Laya.init(Laya.Browser.width, Laya.Browser.height, Laya.WebGL);
        this.initStage();
        this.init();
    }
    initStage(){
        Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
        Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
        Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
        Laya.stage.bgColor = "#000000";
    }
    init(){
        this.ASSETS_NPC = {type:Laya.Loader.IMAGE, url:"res/image/npc.png"};
        this.ASSETS_HALL = {type:Laya.Loader.IMAGE, url:"res/image/hall.png"};

        let assets = [];
        assets.push(this.ASSETS_NPC);
        assets.push(this.ASSETS_HALL);
        Laya.loader.load(assets, Laya.Handler.create(this, this.onAssetsLoaded));
    }
    onAssetsLoaded(){
        //創(chuàng)建精靈
        this.bg = new Laya.Sprite();
        //獲取圖片資源
        let texture = Laya.loader.getRes(this.ASSETS_HALL.url);
        //繪制紋理
        this.bg.graphics.drawTexture(texture);
        this.bg.pos(0, 0);
        //添加到舞臺(tái)
        Laya.stage.addChild(this.bg);

        //創(chuàng)建遮罩
        this.mask = new Laya.Sprite();
        this.radius = 100;        
        this.mask.graphics.drawCircle(0, 0, this.radius, "#FFFFFF");
        this.mask.pos(Laya.stage.width/2, Laya.stage.height/2);

        //圖片添加遮罩
        this.bg.mask = this.mask;

        //添加移動(dòng)事件
        Laya.stage.on(Laya.Event.MOUSE_MOVE, this, function(){
            this.mask.x = Laya.stage.mouseX;
            this.mask.y = Laya.stage.mouseY;
        });
    }
}
//啟動(dòng)
new Test();

緩存

存取器	描述
cacheAs	用于指定顯示對(duì)象是否緩存為靜態(tài)圖像

/*
* 指定顯示對(duì)象是否緩存為靜態(tài)圖像，cacheAs時(shí)，子對(duì)象發(fā)生變化，會(huì)自動(dòng)重新緩存，同時(shí)也可以手動(dòng)調(diào)用reCache方法更新緩存。
* 建議把不經(jīng)常變化的“復(fù)雜內(nèi)容”緩存為靜態(tài)圖像，能極大提高渲染性能。cacheAs有"none"，"normal"和"bitmap"三個(gè)值可選。
* 默認(rèn)為"none"，不做任何緩存。
* 當(dāng)值為"normal"時(shí)，canvas模式下進(jìn)行畫(huà)布緩存，webgl模式下進(jìn)行命令緩存。
* 當(dāng)值為"bitmap"時(shí)，canvas模式下進(jìn)行依然是畫(huà)布緩存，webgl模式下使用renderTarget緩存。
* webgl下renderTarget緩存模式缺點(diǎn)：會(huì)額外創(chuàng)建renderTarget對(duì)象，增加內(nèi)存開(kāi)銷(xiāo)，緩存面積有最大2048限制，不斷重繪時(shí)會(huì)增加CPU開(kāi)銷(xiāo)。優(yōu)點(diǎn)：大幅減少drawcall，渲染性能最高。
* webgl下命令緩存模式缺點(diǎn)：只會(huì)減少節(jié)點(diǎn)遍歷及命令組織，不會(huì)減少drawcall數(shù)，性能中等。優(yōu)點(diǎn)：沒(méi)有額外內(nèi)存開(kāi)銷(xiāo)，無(wú)需renderTarget支持。
*/
cacheAs:string;

緩存為靜態(tài)圖片，將多個(gè)顯示對(duì)象緩存成靜態(tài)圖像可大幅提升渲染效率。

//初始化引擎
const canvas = Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);
//舞臺(tái)設(shè)置
Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;//設(shè)置舞臺(tái)水平居中
Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;//設(shè)置舞臺(tái)垂直居中
Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;//設(shè)置舞臺(tái)縮放模式為顯示所有
Laya.stage.bgColor = "#000000";//設(shè)置舞臺(tái)背景顏色為黑色

let sprite = new Laya.Sprite();
Laya.stage.addChild(sprite);

let text;
for(let i=0; i<100; i++){
    text = new Laya.Text();
    sprite.addChild(text);

    text.fontSize = 20;
    text.text = (Math.random() * 1000).toFixed(0);
    text.color = "#ccc";
    text.rotation = Math.random() * 360;
    text.x = Math.random() * Laya.stage.width;
    text.y = Math.random() * Laya.stage.height;
}
sprite.cacheAs = "bitmap";

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Laya Sprite

Laya Sprite

容器

加載圖片 loadImage

繪圖對(duì)象 Graphics

繪制紋理 drawTexture

軸心點(diǎn) pivot

旋轉(zhuǎn)縮放 rotation

設(shè)置遮罩 mask

緩存

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Laya Sprite

容器

加載圖片 loadImage

繪圖對(duì)象 Graphics

繪制紋理 drawTexture

軸心點(diǎn) pivot

旋轉(zhuǎn)縮放 rotation

設(shè)置遮罩 mask

緩存

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av