如题所述
第1èï¼ä»£ç æ§è¡åºæ¬åç
LayaAir
å¼ææ¯æAS3ãTypeScriptãJavaScriptä¸ç§è¯è¨å¼åï¼ç¶èæ 论æ¯éç¨åªç§å¼åè¯è¨ï¼æç»æ§è¡çé½æ¯JavaScript代ç ãææ
çå°çç»é¢é½æ¯éè¿å¼æç»å¶åºæ¥çï¼æ´æ°é¢çåå³äºå¼åè æå®çFPSï¼ä¾å¦æå®å¸§é¢ç为60FPSï¼åè¿è¡æ¶æ¯ä¸ªå¸§çæ§è¡æ¶é´ä¸ºå ååä¹ä¸ç§ï¼æ以帧é
è¶é«ï¼è§è§ä¸æè§è¶æµç ï¼60帧æ¯æ»¡å¸§ã
ç±äºå®é è¿è¡ç¯å¢æ¯å¨æµè§å¨ä¸ï¼å æ¤æ§è½è¿åå³äºJavaScript解éå¨çæçï¼æå®çFPS帧éå¨ä½æ§è½è§£éå¨ä¸å¯è½ä¸ä¼è¾¾å°ï¼æ以è¿é¨åä¸æ¯å¼åè è½å¤å³å®çï¼å¼åè è½ä½çæ¯å°½å¯è½éè¿ä¼åï¼å¨ä½ç«¯è®¾å¤æä½æ§è½æµè§å¨ä¸ï¼æåFPS帧éã
LayaAirå¼æå¨æ¯å¸§é½ä¼éç»ï¼å¨æ§è½ä¼åæ¶ï¼é¤äºå ³æ³¨æ¯å¸§æ§è¡é»è¾ä»£ç 带æ¥çCPUæ¶èï¼è¿éè¦æ³¨ææ¯å¸§è°ç¨ç»å¾æ令çæ°é以åGPUç纹çæ交次æ°ã
第2èï¼åºåæµè¯
LayaAirå¼æå ç½®çæ§è½ç»è®¡å·¥å ·å¯ç¨äºåºåæµè¯ï¼å®æ¶æ£æµå½åæ§è½ãå¼åè å¯ä»¥ä½¿ç¨laya.utils.Statç±»ï¼éè¿Stat.show() æ¾ç¤ºç»è®¡é¢æ¿ãå ·ä½ç¼å代ç å¦ä¸ä¾æ示ï¼
?
1
2
Stat.show(0,0); //AS3çé¢æ¿è°ç¨åæ³
Laya.Stat.show(0,0); //TSä¸JSçé¢æ¿è°ç¨åæ³
Canvas渲æçç»è®¡ä¿¡æ¯ï¼
WebGL渲æçç»è®¡ä¿¡æ¯ï¼
ç»è®¡åæ°çæä¹ï¼
FPSï¼
æ¯ç§åç°ç帧æ°(æ°åè¶é«è¶å¥½)ã
使ç¨canvas渲ææ¶ï¼æè¿°å段æ¾ç¤ºä¸ºFPS(Canvas)ï¼ä½¿ç¨WebGL渲ææ¶ï¼æè¿°å段æ¾ç¤ºä¸ºFPS(WebGL)ã
Spriteï¼
渲æèç¹æ°éï¼æ°åè¶ä½è¶å¥½ï¼ã
Spriteç»è®¡ææ渲æèç¹ï¼å æ¬å®¹å¨ï¼ï¼è¿ä¸ªæ°åç大å°ä¼å½±åå¼æèç¹éåï¼æ°æ®ç»ç»å渲æç次æ°ã
DrawCallï¼
DrawCallå¨canvasåWebGL渲æä¸ä»£è¡¨ä¸åçæä¹ï¼è¶å°è¶å¥½ï¼ã
Canvasä¸è¡¨ç¤ºæ¯å¸§çç»å¶æ¬¡æ°ï¼å æ¬å¾çãæåãç¢éå¾ãå°½ééå¶å¨100ä¹ä¸ã
WebGL
ä¸è¡¨ç¤ºæ¸²ææ交æ¹æ¬¡ï¼æ¯æ¬¡åå¤æ°æ®å¹¶éç¥GPU渲æç»å¶çè¿ç¨ç§°ä¸º1次DrawCallï¼å¨æ¯1次DrawCallä¸é¤äºå¨éç¥GPUç渲æä¸æ¯è¾èæ¶ä¹
å¤ï¼åæ¢æè´¨ä¸shaderä¹æ¯é常èæ¶çæä½ã DrawCallç次æ°æ¯å³å®æ§è½çéè¦ææ ï¼å°½ééå¶å¨100ä¹ä¸ã
Canvasï¼
ä¸ä¸ªæ°å¼ ââ æ¯å¸§éç»çç»å¸æ°é / ç¼åç±»å为ânormalâç±»åçç»å¸æ°é / ç¼åç±»å为âbitmapâç±»åçç»å¸æ°éâã
CurMemï¼ä» éWebGL渲æï¼è¡¨ç¤ºå åä¸æ¾åå ç¨ï¼è¶ä½è¶å¥½ï¼ã
Shaderï¼ä» éWebGL渲æï¼è¡¨ç¤ºæ¯å¸§Shaderæ交次æ°ã
æ 论æ¯Canvas模å¼è¿æ¯WebGL模å¼ï¼æ们é½éè¦éç¹å ³æ³¨DrawCallï¼Spriteï¼Canvasè¿ä¸ä¸ªåæ°ï¼ç¶åé对æ§å°è¿è¡ä¼åãï¼åè§âå¾å½¢æ¸²ææ§è½âï¼
第3èï¼å åä¼å
对象æ±
å¯¹è±¡æ± ï¼æ¶åå°ä¸æéå¤ä½¿ç¨å¯¹è±¡ãå¨åå§ååºç¨ç¨åºæé´å建ä¸å®æ°éç对象并å°å ¶åå¨å¨ä¸ä¸ªæ± ä¸ã对ä¸ä¸ªå¯¹è±¡å®ææä½åï¼å°è¯¥å¯¹è±¡æ¾åå°æ± ä¸ï¼å¨éè¦æ°å¯¹è±¡æ¶å¯ä»¥å¯¹å ¶è¿è¡æ£ç´¢ã
ç±äºå®ä¾å对象ææ¬å¾é«ï¼ä½¿ç¨å¯¹è±¡æ± éç¨å¯¹è±¡å¯åå°å®ä¾å对象çéæ±ãè¿å¯ä»¥åå°åå¾åæ¶å¨è¿è¡çæºä¼ï¼ä»èæé«ç¨åºçè¿è¡é度ã
以ä¸ä»£ç æ¼ç¤ºä½¿ç¨
Laya.utils.Poolï¼
?
1
2
3
4
5
6
7
8
9
10
11
12
ar SPRITE_SIGN = 'spriteSign';
var sprites = [];
function initialize()
{
for (var i = 0; i < 1000; i++)
{
var sp = Pool.getItemByClass(SPRITE_SIGN, Sprite)
sprites.push(sp);
Laya.stage.addChild(sp);
}
}
initialize();
å¨initializeä¸å建大å°ä¸º1000çå¯¹è±¡æ± ã
以ä¸ä»£ç å¨å½åå»é¼ æ æ¶ï¼å°å é¤æ¾ç¤ºå表ä¸çæææ¾ç¤ºå¯¹è±¡ï¼å¹¶å¨ä»¥åçå ¶ä»ä»»å¡ä¸éå¤ä½¿ç¨è¿äºå¯¹è±¡ï¼
?
1
2
3
4
5
6
7
8
9
10
Laya.stage.on("click", this, function()
{
var sp;
for(var i = 0, len = sprites.length; i < len; i++)
{
sp = sprites.pop();
Pool.recover(SPRITE_SIGN, sp);
Laya.stage.removeChild(sp);
}
});
è°ç¨Pool.recoveråï¼æå®ç对象ä¼è¢«åæ¶è³æ± å ã
使ç¨Handler.create
å¨å¼åè¿ç¨ä¸ï¼ä¼ç»å¸¸ä½¿ç¨Handleræ¥å®æå¼æ¥åè°ãHandler.create使ç¨äºå ç½®å¯¹è±¡æ± ç®¡çï¼å æ¤å¨ä½¿ç¨Handler对象æ¶åºä½¿ç¨Handler.createæ¥å建åè°å¤çå¨ã以ä¸ä»£ç 使ç¨Handler.createå建å è½½çåè°å¤çå¨ï¼
?
1
Laya.loader.load(urls, Handler.create(this, onAssetLoaded));
å¨ä¸é¢ç代ç ä¸ï¼åè°è¢«æ§è¡åHandlerå°ä¼è¢«å¯¹è±¡æ± æ¶åãæ¤æ¶ï¼èèå¦ä¸ä»£ç ä¼åçä»ä¹äºï¼
?
1
Laya.loader.load(urls, Handler.create(this, onAssetLoaded), Handler.create(this, onLoading));
å¨ä¸é¢ç代ç ä¸ï¼ä½¿ç¨Handler.createè¿åçå¤çå¨å¤çprogressäºä»¶ãæ¤æ¶çåè°æ§è¡ä¸æ¬¡ä¹åå°±è¢«å¯¹è±¡æ± åæ¶ï¼äºæ¯progressäºä»¶åªè§¦åäºä¸æ¬¡ï¼æ¤æ¶éè¦å°å个å为onceçåæ°è®¾ç½®ä¸ºfalseï¼
?
1
Laya.loader.load(urls, Handler.create(this, onAssetLoaded), Handler.create(this, onLoading, null, false));
éæ¾å å
JavaScriptè¿è¡æ¶æ æ³å¯å¨åå¾åæ¶å¨ãè¦ç¡®ä¿ä¸ä¸ªå¯¹è±¡è½å¤è¢«åæ¶ï¼è¯·å é¤å¯¹è¯¥å¯¹è±¡çææå¼ç¨ãSpriteæä¾çdestoryä¼å¸®å©è®¾ç½®å é¨å¼ç¨ä¸ºnullã
ä¾å¦ï¼ä»¥ä¸ä»£ç ç¡®ä¿å¯¹è±¡è½å¤è¢«ä½ä¸ºåå¾åæ¶ï¼
?
1
2
var sp = new Sprite();
sp.destroy();
å½å¯¹è±¡è®¾ç½®ä¸ºnullï¼ä¸ä¼ç«å³å°å ¶ä»å åä¸å é¤ãåªæç³»ç»è®¤ä¸ºå å足å¤ä½æ¶ï¼åå¾åæ¶å¨æä¼è¿è¡ãå ååé ï¼èä¸æ¯å¯¹è±¡å é¤ï¼ä¼è§¦ååå¾åæ¶ã
å
å¾åæ¶æé´å¯è½å ç¨å¤§éCPU并影åæ§è½ãéè¿éç¨å¯¹è±¡ï¼å°è¯éå¶ä½¿ç¨åå¾åæ¶ãæ¤å¤ï¼å°½å¯è½å°å¼ç¨è®¾ç½®ä¸ºnullï¼ä»¥ä¾¿åå¾åæ¶å¨ç¨è¾å°æ¶é´æ¥æ¥æ¾å¯¹
象ãææ¶ï¼æ¯å¦ä¸¤ä¸ªå¯¹è±¡ç¸äºå¼ç¨ï¼ï¼æ æ³åæ¶è®¾ç½®ä¸¤ä¸ªå¼ç¨ä¸ºnullï¼åå¾åæ¶å¨å°æ«ææ æ³è¢«è®¿é®å°ç对象ï¼å¹¶å°å ¶æ¸ é¤ï¼è¿ä¼æ¯å¼ç¨è®¡æ°æ´æ¶èæ§è½ã
èµæºå¸è½½
游æè¿è¡æ¶æ»ä¼å 载许å¤èµæºï¼è¿äºèµæºå¨ä½¿ç¨å®æååºåæ¶å¸è½½ï¼å¦åä¸ç´æ®çå¨å åä¸ã
ä¸ä¾æ¼ç¤ºå è½½èµæºå对æ¯èµæºå¸è½½ååå¸è½½åçèµæºç¶æï¼
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var assets = [];
assets.push("res/apes/monkey0.png");
assets.push("res/apes/monkey1.png");
assets.push("res/apes/monkey2.png");
assets.push("res/apes/monkey3.png");
Laya.loader.load(assets, Handler.create(this, onAssetsLoaded));
function onAssetsLoaded()
{
for(var i = 0, len = assets.length; i < len; ++i)
{
var asset = assets[i];
console.log(Laya.loader.getRes(asset));
Laya.loader.clearRes(asset);
console.log(Laya.loader.getRes(asset));
}
}
å ³äºæ»¤éãé®ç½©
å°è¯å°½éåå°ä½¿ç¨æ»¤éææãå°æ»¤éï¼BlurFilteråGlowFilterï¼åºç¨äºæ¾ç¤ºå¯¹è±¡æ¶ï¼è¿è¡æ¶å°å¨å åä¸åå»ºä¸¤å¼ ä½å¾ãå ¶ä¸æ¯ä¸ªä½å¾ç大å°ä¸æ¾ç¤ºå¯¹è±¡ç¸åãå°ç¬¬ä¸ä¸ªä½å¾å建为æ¾ç¤ºå¯¹è±¡çæ æ ¼åçæ¬ï¼ç¶åç¨äºçæåºç¨æ»¤éçå¦ä¸ä¸ªä½å¾ï¼
åºç¨æ»¤éæ¶å åä¸ç两个ä½å¾
å½ä¿®æ¹æ»¤éçæ个å±æ§æè æ¾ç¤ºå¯¹è±¡æ¶ï¼å åä¸ç两个ä½å¾é½å°æ´æ°ä»¥å建çæçä½å¾ï¼è¿ä¸¤ä¸ªä½å¾å¯è½ä¼å ç¨å¤§éå åãæ¤å¤ï¼æ¤è¿ç¨æ¶åCPU计ç®ï¼å¨ææ´æ°æ¶å°ä¼éä½æ§è½ï¼åè§âå¾å½¢æ¸²ææ§è½ â å ³äºcacheAsï¼ã
ColorFiterå¨Canvas渲æä¸éè¦è®¡ç®æ¯ä¸ªåç´ ç¹ï¼èå¨WebGLä¸çGPUæ¶èå¯ä»¥å¿½ç¥ä¸è®¡ã
æä½³çåæ³æ¯ï¼å°½å¯è½ä½¿ç¨å¾ååä½å·¥å ·å建çä½å¾æ¥æ¨¡æ滤éãé¿å å¨è¿è¡æ¶ä¸å建å¨æä½å¾ï¼å¯ä»¥å¸®å©åå°CPUæGPUè´è½½ãç¹å«æ¯ä¸å¼ åºç¨äºæ»¤é并ä¸ä¸ä¼å¨ä¿®æ¹çå¾åã
第4èï¼å¾å½¢æ¸²ææ§è½
ä¼åSprite
1.å°½éåå°ä¸å¿ è¦çå±æ¬¡åµå¥ï¼åå°Spriteæ°éã
2.éå¯è§åºåç对象尽éä»æ¾ç¤ºå表移é¤æè 设置visible=falseã
3.对äºå®¹å¨å æ大ééæå 容æè ä¸ç»å¸¸ååçå 容ï¼æ¯å¦æé®ï¼ï¼å¯ä»¥å¯¹æ´ä¸ªå®¹å¨è®¾ç½®cacheAså±æ§ï¼è½å¤§éåå°Spriteçæ°éï¼æ¾èæé«æ§è½ãå¦ææå¨æå 容ï¼æ好åéæå 容åå¼ï¼ä»¥ä¾¿åªç¼åéæå 容ã
4.Panelå ï¼ä¼é对panelåºåå¤çç´æ¥å对象ï¼å对象çå对象å¤æä¸äºï¼è¿è¡ä¸æ¸²æå¤çï¼è¶ åºpanelåºåçå对象æ¯ä¸äº§çæ¶èçã
ä¼åDrawCall
1.对å¤æéæå 容设置cacheAsï¼è½å¤§éåå°DrawCallï¼ä½¿ç¨å¥½cacheAsæ¯æ¸¸æä¼åçå ³é®ã
2.å°½éä¿è¯åå¾éçå¾ç渲æ顺åºæ¯æ¨ççï¼å¦æä¸åå¾é交å渲æï¼ä¼å¢å DrawCallæ°éã
3.å°½éä¿è¯åä¸ä¸ªé¢æ¿ä¸çææèµæºç¨ä¸ä¸ªå¾éï¼è¿æ ·è½åå°æ交æ¹æ¬¡ã
ä¼åCanvas
å¨å¯¹Canvasä¼åæ¶ï¼æ们éè¦æ³¨æï¼å¨ä»¥ä¸åºåä¸è¦ä½¿ç¨cacheAsï¼
1.对象é常ç®åï¼æ¯å¦ä¸ä¸ªåæè ä¸ä¸ªå¾çï¼è®¾ç½®cacheAs=bitmapä¸ä½ä¸æé«æ§è½ï¼åèä¼æ失æ§è½ã
2.容å¨å æç»å¸¸ååçå 容ï¼æ¯å¦å®¹å¨å æä¸ä¸ªå¨ç»æè å计æ¶ï¼å¦æå对è¿ä¸ªå®¹å¨è®¾ç½®cacheAs=bitmapï¼ä¼æ失æ§è½ã
å¯ä»¥éè¿æ¥çCanvasç»è®¡ä¿¡æ¯ç第ä¸ä¸ªå¼ï¼å¤ææ¯å¦ä¸ç´å¨å·æ°Canvasç¼åã
å ³äºcacheAs
设
ç½®cacheAså¯å°æ¾ç¤ºå¯¹è±¡ç¼å为éæå¾åï¼å½cacheAsæ¶ï¼å对象åçååï¼ä¼èªå¨éæ°ç¼åï¼åæ¶ä¹å¯ä»¥æå¨è°ç¨reCacheæ¹æ³æ´æ°ç¼åã
建议æä¸ç»å¸¸ååçå¤æå 容ï¼ç¼å为éæå¾åï¼è½æ大æé«æ¸²ææ§è½ï¼cacheAsæânoneâï¼ânormalâåâbitmapâä¸ä¸ªå¼å¯éã
é»è®¤ä¸ºânoneâï¼ä¸åä»»ä½ç¼åã
2.å½å¼ä¸ºânormalâæ¶ï¼canvasä¸è¿è¡ç»å¸ç¼åï¼webgl模å¼ä¸è¿è¡å½ä»¤ç¼åã
3.
å½å¼ä¸ºâbitmapâæ¶ï¼canvasä¸è¿è¡ä¾ç¶æ¯ç»å¸ç¼åï¼webGL模å¼ä¸ä½¿ç¨renderTargetç¼åãè¿ééè¦æ³¨æçæ¯ï¼webGLä¸
renderTargetç¼å模å¼æ2048大å°éå¶ï¼è¶ åº2048ä¼é¢å¤å¢å å åå¼éãå¦å¤ï¼ä¸æéç»æ¶å¼éä¹æ¯è¾å¤§ï¼ä½æ¯ä¼åå°drawcallï¼æ¸²
ææ§è½æé«ã webGLä¸å½ä»¤ç¼å模å¼åªä¼åå°èç¹éååå½ä»¤ç»ç»ï¼ä¸ä¼åå°drawcallï¼æ§è½ä¸çã
设置cacheAsåï¼è¿å¯ä»¥è®¾ç½®staticCache=true以é»æ¢èªå¨æ´æ°ç¼åï¼åæ¶å¯ä»¥æå¨è°ç¨reCacheæ¹æ³æ´æ°ç¼åã
cacheAs主è¦éè¿ä¸¤æ¹é¢æåæ§è½ãä¸æ¯åå°èç¹éåå顶ç¹è®¡ç®ï¼äºæ¯åå°drawCallãåç¨cacheAså°æ¯å¼æä¼åæ§è½çå©å¨ã
ä¸ä¾ç»å¶10000个ææ¬ï¼
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Laya.init(550, 400, Laya.WebGL);
Laya.Stat.show();
var textBox = new Laya.Sprite();
var text;
for (var i = 0; i < 10000; i++)
{
text = new Laya.Text();
text.text = (Math.random() * 100).toFixed(0);
text.color = "#CCCCCC";
text.x = Math.random() * 550;
text.y = Math.random() * 400;
textBox.addChild(text);
}
Laya.stage.addChild(textBox);
ä¸é¢æ¯ç¬è çµèä¸çè¿è¡æ¶æªå¾ï¼FPS稳å®äº52ä¸ä¸ã
å½æ们对æåæå¨ç容å¨è®¾ç½®ä¸ºcacheAsä¹åï¼å¦ä¸é¢çä¾åæ示ï¼æ§è½è·å¾è¾å¤§çæåï¼FPSè¾¾å°å°äº60帧ã
?
1
2
// â¦çç¥å ¶ä»ä»£ç ⦠var textBox = new Laya.Sprite();
textBox.cacheAs = "bitmap"; // â¦çç¥å ¶ä»ä»£ç â¦
æåæè¾¹
å¨è¿è¡æ¶ï¼è®¾ç½®äºæè¾¹çææ¬æ¯æ²¡ææè¾¹çææ¬å¤è°ç¨ä¸æ¬¡ç»å¾æ令ãæ¤æ¶ï¼ææ¬å¯¹CPUç使ç¨éåææ¬çæ°éææ£æ¯ãå æ¤ï¼å°½é使ç¨æ¿ä»£æ¹æ¡æ¥å®æåæ ·çéæ±ã
对äºå ä¹ä¸åå¨çææ¬å 容ï¼å¯ä»¥ä½¿ç¨cacheAséä½æ§è½æ¶èï¼åè§âå¾å½¢æ¸²ææ§è½ - å ³äºcacheAsâã
对äºå 容ç»å¸¸åå¨ï¼ä½æ¯ä½¿ç¨çå符æ°éè¾å°çææ¬åï¼å¯ä»¥éæ©ä½¿ç¨ä½å¾åä½ã
è·³è¿ææ¬æçï¼ç´æ¥æ¸²æ
大å¤æ°æ åµä¸ï¼å¾å¤ææ¬é½ä¸éè¦å¤æçæçï¼ä» ä» ç®åå°æ¾ç¤ºä¸è¡åã为äºè¿åè¿ä¸éæ±ï¼Textæä¾çå为changeTextçæ¹æ³å¯ä»¥ç´æ¥è·³è¿æçã
?
1
2
3
4
5
var text = new Text();
text.text = "text";
Laya.stage.addChild(text);
//åé¢åªæ¯æ´æ°æåå 容ï¼ä½¿ç¨changeTextè½æé«æ§è½
text.changeText("text changed.");
Text.changeTextä¼ç´æ¥ä¿®æ¹ç»å¾æ令ä¸è¯¥ææ¬ç»å¶çæåä¸æ¡æ令ï¼è¿ç§åé¢çç»å¾æ令ä¾æ§åå¨çè¡ä¸ºä¼å¯¼è´changeTextåªä½¿ç¨äºä»¥ä¸æ åµï¼
ææ¬å§ç»åªæä¸è¡ã
ææ¬çæ ·å¼å§ç»ä¸åï¼é¢è²ãç²ç»ãæä½ã对é½ççï¼ã
å³ä½¿å¦æ¤ï¼å®é ç¼ç¨ä¸ä¾æ§ä¼ç»å¸¸ä½¿ç¨å°è¿æ ·çéè¦ã
第5èï¼åå°CPU使ç¨é
åå°å¨æå±æ§æ¥æ¾
JavaScriptä¸ä»»ä½å¯¹è±¡é½æ¯å¨æçï¼ä½ å¯ä»¥ä»»æå°æ·»å å±æ§ãç¶èï¼å¨å¤§éçå±æ§éæ¥æ¾æå±æ§å¯è½å¾èæ¶ãå¦æéè¦é¢ç¹ä½¿ç¨æ个å±æ§å¼ï¼å¯ä»¥ä½¿ç¨å±é¨åéæ¥ä¿åå®ï¼
?
1
2
3
4
5
6
7
8
function foo()
{
var prop = target.prop;
// 使ç¨prop
process1(prop);
process2(prop);
process3(prop);
}
计æ¶å¨
LayaAiræä¾ä¸¤ç§è®¡æ¶å¨å¾ªç¯æ¥æ§è¡ä»£ç åã
Laya.timer.frameLoopæ§è¡é¢çä¾èµäºå¸§é¢çï¼å¯éè¿Stat.FPSæ¥çå½å帧é¢ã
Laya.timer.loopæ§è¡é¢çä¾èµäºåæ°æå®æ¶é´ã
å½ä¸ä¸ªå¯¹è±¡ççå½å¨æç»ææ¶ï¼è®°å¾æ¸ é¤å ¶å é¨çTimerï¼
?
1
2
3
4
5
6
Laya.timer.frameLoop(1, this, animateFrameRateBased);
Laya.stage.on("click", this, dispose);
function dispose()
{
Laya.timer.clear(this, animateFrameRateBased);
}
è·åæ¾ç¤ºå¯¹è±¡è¾¹ççåæ³
å¨ç¸å¯¹å¸å±ä¸ï¼å¾ç»å¸¸éè¦æ£ç¡®å°è·åæ¾ç¤ºå¯¹è±¡çè¾¹çãè·åæ¾ç¤ºå¯¹è±¡çè¾¹çä¹æå¤ç§åæ³ï¼èå ¶é´å·®å¼å¾æå¿ è¦ç¥éã
1.使ç¨getBounds/ getGraphicBoundsãã
?
1
2
3
4
var sp = new Sprite();
sp.graphics.drawRect(0, 0, 100, 100, "#FF0000");
var bounds = sp.getGraphicBounds();
Laya.stage.addChild(sp);
getBoundså¯ä»¥æ»¡è¶³å¤æ°å¤æ°éæ±ï¼ä½ç±äºå ¶éè¦è®¡ç®è¾¹çï¼ä¸éåé¢ç¹è°ç¨ã
2.设置容å¨çautoSize为trueã
?
1
2
3
4
var sp = new Sprite();
sp.autoSize = true;
sp.graphics.drawRect(0, 0, 100, 100, "#FF0000");
Laya.stage.addChild(sp);
ä¸è¿°ä»£ç å¯ä»¥å¨è¿è¡æ¶æ£ç¡®è·å宽é«ãautoSizeå¨è·å宽é«å¹¶ä¸æ¾ç¤ºå表çç¶æåçæ¹åæ¶ä¼éæ°è®¡ç®ï¼autoSizeéè¿getBoudns计ç®å®½é«ï¼ãæ以对æ¥æ大éå对象ç容å¨åºç¨autoSizeæ¯ä¸å¯åçãå¦æ设置äºsizeï¼autoSizeå°ä¸èµ·æã
使ç¨loadImageåè·å宽é«ï¼
?
1
2
3
4
5
6
var sp = new Sprite();
sp.loadImage("res/apes/monkey2.png", 0, 0, 0, 0, Handler.create(this, function()
{
console.log(sp.width, sp.height);
}));
Laya.stage.addChild(sp);
loadImageå¨å è½½å®æçåè°å½æ°è§¦åä¹åæå¯ä»¥æ£ç¡®è·å宽é«ã
3.ç´æ¥è°ç¨size设置ï¼
?
1
2
3
4
5
6
7
8
Laya.loader.load("res/apes/monkey2.png", Handler.create(this, function()
{
var texture = Laya.loader.getRes("res/apes/monkey2.png");
var sp = new Sprite();
sp.graphics.drawTexture(texture, 0, 0);
sp.size(texture.width, texture.height);
Laya.stage.addChild(sp);
}));
使ç¨Graphics.drawTexture并ä¸ä¼èªå¨è®¾ç½®å®¹å¨ç宽é«ï¼ä½æ¯å¯ä»¥ä½¿ç¨Textureç宽é«èµäºå®¹å¨ãæ¯åº¸ç½®çï¼è¿æ¯æé«æçæ¹å¼ã
注ï¼getGraphicsBoundsç¨äºè·åç¢éç»å¾å®½é«ã
æ ¹æ®æ´»å¨ç¶ææ¹å帧é¢
帧é¢æä¸ç§æ¨¡å¼ï¼Stage.FRAME_SLOWç»´æFPSå¨30ï¼Stage.FRAME_FASTç»´æFPSå¨60ï¼Stage.FRAME_MOUSEåéæ©æ§ç»´æFPSå¨30æ60帧ã
ææ¶å¹¶ä¸éè¦è®©æ¸¸æ以60FPSçéçæ§è¡ï¼å 为30FPSå·²ç»è½å¤æ»¡è¶³å¤æ°æ åµä¸äººç±»è§è§çååºï¼ä½æ¯é¼ æ 交äºæ¶ï¼30FPSå¯è½ä¼é æç»é¢çä¸è¿è´¯ï¼äºæ¯Stage.FRAME_MOUSEåºè¿èçã
ä¸ä¾å±ç¤ºä»¥Stage.FRAME_SLOWç帧çï¼å¨ç»å¸ä¸ç§»å¨é¼ æ ï¼ä½¿åçè·éé¼ æ 移å¨ï¼
?
1
2
3
4
5
6
7
8
9
10
11
12
Laya.init(Browser.width, Browser.height);
Stat.show();
Laya.stage.frameRate = Stage.FRAME_SLOW;
var sp = new Sprite();
sp.graphics.drawCircle(0, 0, 20, "#990000");
Laya.stage.addChild(sp);
Laya.stage.on(Event.MOUSE_MOVE, this, function()
{
sp.pos(Laya.stage.mouseX, Laya.stage.mouseY);
});
æ¤æ¶FPSæ¾ç¤º30ï¼å¹¶ä¸å¨é¼ æ 移å¨æ¶ï¼å¯ä»¥æè§å°åçä½ç½®çæ´æ°ä¸è¿è´¯ã设置Stage.frameRate为Stage.FRAME_MOUSEï¼
?
1
Laya.stage.frameRate = Stage.FRAME_MOUSE;
æ¤æ¶å¨é¼ æ 移å¨åFPSä¼æ¾ç¤º60ï¼å¹¶ä¸ç»é¢æµç 度æåãå¨é¼ æ éæ¢2ç§ä¸å¨åï¼FPSåä¼æ¢å¤å°30帧ã
使ç¨callLater
callLater使代ç å延è¿è³æ¬å¸§æ¸²æåæ§è¡ãå¦æå½åçæä½é¢ç¹æ¹åæ对象çç¶æï¼æ¤æ¶å¯ä»¥èè使ç¨callLaterï¼ä»¥åå°éå¤è®¡ç®ã
èèä¸ä¸ªå¾å½¢ï¼å¯¹å®è®¾ç½®ä»»ä½æ¹åå¤è§çå±æ§é½å°å¯¼è´å¾å½¢éç»ï¼
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var rotation = 0,
scale = 1,
position = 0;
function setRotation(value)
{
this.rotation = value;
update();
}
function setScale(value)
{
this.scale = value;
update();
}
function setPosition(value)
{
this.position = value;
update();
}
function update()
{
console.log('rotation: ' + this.rotation + '\tscale: ' + this.scale + '\tposition: ' + position);
}
è°ç¨ä»¥ä¸ä»£ç æ´æ¹ç¶æï¼
?
1
setRotation(90); setScale(2); setPosition(30);
æ§å¶å°çæå°ç»ææ¯
rotation: 90 scale: 1 position: 0
rotation: 90 scale: 2 position: 0
rotation: 90 scale: 2 position: 30
update被è°ç¨äºä¸æ¬¡ï¼å¹¶ä¸æåçç»ææ¯æ£ç¡®çï¼ä½æ¯åé¢ä¸¤æ¬¡è°ç¨é½æ¯ä¸éè¦çã
å°è¯å°ä¸å¤updateæ¹ä¸ºï¼
?
1
Laya.timer.callLater(this, update);
æ¤æ¶ï¼updateåªä¼è°ç¨ä¸æ¬¡ï¼å¹¶ä¸æ¯æ们æ³è¦çç»æã
å¾ç/å¾éå è½½
å¨å®æå¾ç/å¾éçå è½½ä¹åï¼å¼æå°±ä¼å¼å§å¤çå¾çèµæºãå¦æå è½½çæ¯ä¸å¼ å¾éï¼ä¼å¤çæ¯å¼ åå¾çãå¦æä¸æ¬¡æ§å¤ç大éçå¾çï¼è¿ä¸ªè¿ç¨å¯è½ä¼é æé¿æ¶é´çå¡é¡¿ã
å¨æ¸¸æçèµæºå è½½ä¸ï¼å¯ä»¥å°èµæºæç §å ³å¡ãåºæ¯çåç±»å è½½ãå¨åä¸æ¶é´å¤ççå¾çè¶å°ï¼å½æ¶ç游æååºé度ä¹ä¼æ´å¿«ãå¨èµæºä½¿ç¨å®æåï¼ä¹å¯ä»¥äºä»¥å¸è½½ï¼éæ¾å åã
第6èï¼å ¶ä»ä¼åçç¥
åå°ç²å使ç¨æ°éï¼å¨ç§»å¨å¹³å°Canvas模å¼ä¸ï¼å°½éä¸ç¨ç²åï¼
2.å¨Canvas模å¼ä¸ï¼å°½éåå°æ转ï¼ç¼©æ¾ï¼alphaçå±æ§ç使ç¨ï¼è¿äºå±æ§ä¼å¯¹æ§è½äº§çæ¶èãï¼å¨WebGL模å¼å¯ä»¥ä½¿ç¨ï¼ï¼
3.ä¸è¦å¨timeloopéé¢å建对象åå¤æ计ç®ï¼
4.å°½éåå°å¯¹å®¹å¨çautoSizeç使ç¨ï¼åå°getBounds()ç使ç¨ï¼å 为è¿äºè°ç¨ä¼äº§çè¾å¤è®¡ç®ï¼
5.å°½éå°ç¨try catchç使ç¨ï¼è¢«try catchçå½æ°æ§è¡ä¼åå¾éå¸¸æ ¢ï¼
LayaAir
å¼ææ¯æAS3ãTypeScriptãJavaScriptä¸ç§è¯è¨å¼åï¼ç¶èæ 论æ¯éç¨åªç§å¼åè¯è¨ï¼æç»æ§è¡çé½æ¯JavaScript代ç ãææ
çå°çç»é¢é½æ¯éè¿å¼æç»å¶åºæ¥çï¼æ´æ°é¢çåå³äºå¼åè æå®çFPSï¼ä¾å¦æå®å¸§é¢ç为60FPSï¼åè¿è¡æ¶æ¯ä¸ªå¸§çæ§è¡æ¶é´ä¸ºå ååä¹ä¸ç§ï¼æ以帧é
è¶é«ï¼è§è§ä¸æè§è¶æµç ï¼60帧æ¯æ»¡å¸§ã
ç±äºå®é è¿è¡ç¯å¢æ¯å¨æµè§å¨ä¸ï¼å æ¤æ§è½è¿åå³äºJavaScript解éå¨çæçï¼æå®çFPS帧éå¨ä½æ§è½è§£éå¨ä¸å¯è½ä¸ä¼è¾¾å°ï¼æ以è¿é¨åä¸æ¯å¼åè è½å¤å³å®çï¼å¼åè è½ä½çæ¯å°½å¯è½éè¿ä¼åï¼å¨ä½ç«¯è®¾å¤æä½æ§è½æµè§å¨ä¸ï¼æåFPS帧éã
LayaAirå¼æå¨æ¯å¸§é½ä¼éç»ï¼å¨æ§è½ä¼åæ¶ï¼é¤äºå ³æ³¨æ¯å¸§æ§è¡é»è¾ä»£ç 带æ¥çCPUæ¶èï¼è¿éè¦æ³¨ææ¯å¸§è°ç¨ç»å¾æ令çæ°é以åGPUç纹çæ交次æ°ã
第2èï¼åºåæµè¯
LayaAirå¼æå ç½®çæ§è½ç»è®¡å·¥å ·å¯ç¨äºåºåæµè¯ï¼å®æ¶æ£æµå½åæ§è½ãå¼åè å¯ä»¥ä½¿ç¨laya.utils.Statç±»ï¼éè¿Stat.show() æ¾ç¤ºç»è®¡é¢æ¿ãå ·ä½ç¼å代ç å¦ä¸ä¾æ示ï¼
?
1
2
Stat.show(0,0); //AS3çé¢æ¿è°ç¨åæ³
Laya.Stat.show(0,0); //TSä¸JSçé¢æ¿è°ç¨åæ³
Canvas渲æçç»è®¡ä¿¡æ¯ï¼
WebGL渲æçç»è®¡ä¿¡æ¯ï¼
ç»è®¡åæ°çæä¹ï¼
FPSï¼
æ¯ç§åç°ç帧æ°(æ°åè¶é«è¶å¥½)ã
使ç¨canvas渲ææ¶ï¼æè¿°å段æ¾ç¤ºä¸ºFPS(Canvas)ï¼ä½¿ç¨WebGL渲ææ¶ï¼æè¿°å段æ¾ç¤ºä¸ºFPS(WebGL)ã
Spriteï¼
渲æèç¹æ°éï¼æ°åè¶ä½è¶å¥½ï¼ã
Spriteç»è®¡ææ渲æèç¹ï¼å æ¬å®¹å¨ï¼ï¼è¿ä¸ªæ°åç大å°ä¼å½±åå¼æèç¹éåï¼æ°æ®ç»ç»å渲æç次æ°ã
DrawCallï¼
DrawCallå¨canvasåWebGL渲æä¸ä»£è¡¨ä¸åçæä¹ï¼è¶å°è¶å¥½ï¼ã
Canvasä¸è¡¨ç¤ºæ¯å¸§çç»å¶æ¬¡æ°ï¼å æ¬å¾çãæåãç¢éå¾ãå°½ééå¶å¨100ä¹ä¸ã
WebGL
ä¸è¡¨ç¤ºæ¸²ææ交æ¹æ¬¡ï¼æ¯æ¬¡åå¤æ°æ®å¹¶éç¥GPU渲æç»å¶çè¿ç¨ç§°ä¸º1次DrawCallï¼å¨æ¯1次DrawCallä¸é¤äºå¨éç¥GPUç渲æä¸æ¯è¾èæ¶ä¹
å¤ï¼åæ¢æè´¨ä¸shaderä¹æ¯é常èæ¶çæä½ã DrawCallç次æ°æ¯å³å®æ§è½çéè¦ææ ï¼å°½ééå¶å¨100ä¹ä¸ã
Canvasï¼
ä¸ä¸ªæ°å¼ ââ æ¯å¸§éç»çç»å¸æ°é / ç¼åç±»å为ânormalâç±»åçç»å¸æ°é / ç¼åç±»å为âbitmapâç±»åçç»å¸æ°éâã
CurMemï¼ä» éWebGL渲æï¼è¡¨ç¤ºå åä¸æ¾åå ç¨ï¼è¶ä½è¶å¥½ï¼ã
Shaderï¼ä» éWebGL渲æï¼è¡¨ç¤ºæ¯å¸§Shaderæ交次æ°ã
æ 论æ¯Canvas模å¼è¿æ¯WebGL模å¼ï¼æ们é½éè¦éç¹å ³æ³¨DrawCallï¼Spriteï¼Canvasè¿ä¸ä¸ªåæ°ï¼ç¶åé对æ§å°è¿è¡ä¼åãï¼åè§âå¾å½¢æ¸²ææ§è½âï¼
第3èï¼å åä¼å
对象æ±
å¯¹è±¡æ± ï¼æ¶åå°ä¸æéå¤ä½¿ç¨å¯¹è±¡ãå¨åå§ååºç¨ç¨åºæé´å建ä¸å®æ°éç对象并å°å ¶åå¨å¨ä¸ä¸ªæ± ä¸ã对ä¸ä¸ªå¯¹è±¡å®ææä½åï¼å°è¯¥å¯¹è±¡æ¾åå°æ± ä¸ï¼å¨éè¦æ°å¯¹è±¡æ¶å¯ä»¥å¯¹å ¶è¿è¡æ£ç´¢ã
ç±äºå®ä¾å对象ææ¬å¾é«ï¼ä½¿ç¨å¯¹è±¡æ± éç¨å¯¹è±¡å¯åå°å®ä¾å对象çéæ±ãè¿å¯ä»¥åå°åå¾åæ¶å¨è¿è¡çæºä¼ï¼ä»èæé«ç¨åºçè¿è¡é度ã
以ä¸ä»£ç æ¼ç¤ºä½¿ç¨
Laya.utils.Poolï¼
?
1
2
3
4
5
6
7
8
9
10
11
12
ar SPRITE_SIGN = 'spriteSign';
var sprites = [];
function initialize()
{
for (var i = 0; i < 1000; i++)
{
var sp = Pool.getItemByClass(SPRITE_SIGN, Sprite)
sprites.push(sp);
Laya.stage.addChild(sp);
}
}
initialize();
å¨initializeä¸å建大å°ä¸º1000çå¯¹è±¡æ± ã
以ä¸ä»£ç å¨å½åå»é¼ æ æ¶ï¼å°å é¤æ¾ç¤ºå表ä¸çæææ¾ç¤ºå¯¹è±¡ï¼å¹¶å¨ä»¥åçå ¶ä»ä»»å¡ä¸éå¤ä½¿ç¨è¿äºå¯¹è±¡ï¼
?
1
2
3
4
5
6
7
8
9
10
Laya.stage.on("click", this, function()
{
var sp;
for(var i = 0, len = sprites.length; i < len; i++)
{
sp = sprites.pop();
Pool.recover(SPRITE_SIGN, sp);
Laya.stage.removeChild(sp);
}
});
è°ç¨Pool.recoveråï¼æå®ç对象ä¼è¢«åæ¶è³æ± å ã
使ç¨Handler.create
å¨å¼åè¿ç¨ä¸ï¼ä¼ç»å¸¸ä½¿ç¨Handleræ¥å®æå¼æ¥åè°ãHandler.create使ç¨äºå ç½®å¯¹è±¡æ± ç®¡çï¼å æ¤å¨ä½¿ç¨Handler对象æ¶åºä½¿ç¨Handler.createæ¥å建åè°å¤çå¨ã以ä¸ä»£ç 使ç¨Handler.createå建å è½½çåè°å¤çå¨ï¼
?
1
Laya.loader.load(urls, Handler.create(this, onAssetLoaded));
å¨ä¸é¢ç代ç ä¸ï¼åè°è¢«æ§è¡åHandlerå°ä¼è¢«å¯¹è±¡æ± æ¶åãæ¤æ¶ï¼èèå¦ä¸ä»£ç ä¼åçä»ä¹äºï¼
?
1
Laya.loader.load(urls, Handler.create(this, onAssetLoaded), Handler.create(this, onLoading));
å¨ä¸é¢ç代ç ä¸ï¼ä½¿ç¨Handler.createè¿åçå¤çå¨å¤çprogressäºä»¶ãæ¤æ¶çåè°æ§è¡ä¸æ¬¡ä¹åå°±è¢«å¯¹è±¡æ± åæ¶ï¼äºæ¯progressäºä»¶åªè§¦åäºä¸æ¬¡ï¼æ¤æ¶éè¦å°å个å为onceçåæ°è®¾ç½®ä¸ºfalseï¼
?
1
Laya.loader.load(urls, Handler.create(this, onAssetLoaded), Handler.create(this, onLoading, null, false));
éæ¾å å
JavaScriptè¿è¡æ¶æ æ³å¯å¨åå¾åæ¶å¨ãè¦ç¡®ä¿ä¸ä¸ªå¯¹è±¡è½å¤è¢«åæ¶ï¼è¯·å é¤å¯¹è¯¥å¯¹è±¡çææå¼ç¨ãSpriteæä¾çdestoryä¼å¸®å©è®¾ç½®å é¨å¼ç¨ä¸ºnullã
ä¾å¦ï¼ä»¥ä¸ä»£ç ç¡®ä¿å¯¹è±¡è½å¤è¢«ä½ä¸ºåå¾åæ¶ï¼
?
1
2
var sp = new Sprite();
sp.destroy();
å½å¯¹è±¡è®¾ç½®ä¸ºnullï¼ä¸ä¼ç«å³å°å ¶ä»å åä¸å é¤ãåªæç³»ç»è®¤ä¸ºå å足å¤ä½æ¶ï¼åå¾åæ¶å¨æä¼è¿è¡ãå ååé ï¼èä¸æ¯å¯¹è±¡å é¤ï¼ä¼è§¦ååå¾åæ¶ã
å
å¾åæ¶æé´å¯è½å ç¨å¤§éCPU并影åæ§è½ãéè¿éç¨å¯¹è±¡ï¼å°è¯éå¶ä½¿ç¨åå¾åæ¶ãæ¤å¤ï¼å°½å¯è½å°å¼ç¨è®¾ç½®ä¸ºnullï¼ä»¥ä¾¿åå¾åæ¶å¨ç¨è¾å°æ¶é´æ¥æ¥æ¾å¯¹
象ãææ¶ï¼æ¯å¦ä¸¤ä¸ªå¯¹è±¡ç¸äºå¼ç¨ï¼ï¼æ æ³åæ¶è®¾ç½®ä¸¤ä¸ªå¼ç¨ä¸ºnullï¼åå¾åæ¶å¨å°æ«ææ æ³è¢«è®¿é®å°ç对象ï¼å¹¶å°å ¶æ¸ é¤ï¼è¿ä¼æ¯å¼ç¨è®¡æ°æ´æ¶èæ§è½ã
èµæºå¸è½½
游æè¿è¡æ¶æ»ä¼å 载许å¤èµæºï¼è¿äºèµæºå¨ä½¿ç¨å®æååºåæ¶å¸è½½ï¼å¦åä¸ç´æ®çå¨å åä¸ã
ä¸ä¾æ¼ç¤ºå è½½èµæºå对æ¯èµæºå¸è½½ååå¸è½½åçèµæºç¶æï¼
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var assets = [];
assets.push("res/apes/monkey0.png");
assets.push("res/apes/monkey1.png");
assets.push("res/apes/monkey2.png");
assets.push("res/apes/monkey3.png");
Laya.loader.load(assets, Handler.create(this, onAssetsLoaded));
function onAssetsLoaded()
{
for(var i = 0, len = assets.length; i < len; ++i)
{
var asset = assets[i];
console.log(Laya.loader.getRes(asset));
Laya.loader.clearRes(asset);
console.log(Laya.loader.getRes(asset));
}
}
å ³äºæ»¤éãé®ç½©
å°è¯å°½éåå°ä½¿ç¨æ»¤éææãå°æ»¤éï¼BlurFilteråGlowFilterï¼åºç¨äºæ¾ç¤ºå¯¹è±¡æ¶ï¼è¿è¡æ¶å°å¨å åä¸åå»ºä¸¤å¼ ä½å¾ãå ¶ä¸æ¯ä¸ªä½å¾ç大å°ä¸æ¾ç¤ºå¯¹è±¡ç¸åãå°ç¬¬ä¸ä¸ªä½å¾å建为æ¾ç¤ºå¯¹è±¡çæ æ ¼åçæ¬ï¼ç¶åç¨äºçæåºç¨æ»¤éçå¦ä¸ä¸ªä½å¾ï¼
åºç¨æ»¤éæ¶å åä¸ç两个ä½å¾
å½ä¿®æ¹æ»¤éçæ个å±æ§æè æ¾ç¤ºå¯¹è±¡æ¶ï¼å åä¸ç两个ä½å¾é½å°æ´æ°ä»¥å建çæçä½å¾ï¼è¿ä¸¤ä¸ªä½å¾å¯è½ä¼å ç¨å¤§éå åãæ¤å¤ï¼æ¤è¿ç¨æ¶åCPU计ç®ï¼å¨ææ´æ°æ¶å°ä¼éä½æ§è½ï¼åè§âå¾å½¢æ¸²ææ§è½ â å ³äºcacheAsï¼ã
ColorFiterå¨Canvas渲æä¸éè¦è®¡ç®æ¯ä¸ªåç´ ç¹ï¼èå¨WebGLä¸çGPUæ¶èå¯ä»¥å¿½ç¥ä¸è®¡ã
æä½³çåæ³æ¯ï¼å°½å¯è½ä½¿ç¨å¾ååä½å·¥å ·å建çä½å¾æ¥æ¨¡æ滤éãé¿å å¨è¿è¡æ¶ä¸å建å¨æä½å¾ï¼å¯ä»¥å¸®å©åå°CPUæGPUè´è½½ãç¹å«æ¯ä¸å¼ åºç¨äºæ»¤é并ä¸ä¸ä¼å¨ä¿®æ¹çå¾åã
第4èï¼å¾å½¢æ¸²ææ§è½
ä¼åSprite
1.å°½éåå°ä¸å¿ è¦çå±æ¬¡åµå¥ï¼åå°Spriteæ°éã
2.éå¯è§åºåç对象尽éä»æ¾ç¤ºå表移é¤æè 设置visible=falseã
3.对äºå®¹å¨å æ大ééæå 容æè ä¸ç»å¸¸ååçå 容ï¼æ¯å¦æé®ï¼ï¼å¯ä»¥å¯¹æ´ä¸ªå®¹å¨è®¾ç½®cacheAså±æ§ï¼è½å¤§éåå°Spriteçæ°éï¼æ¾èæé«æ§è½ãå¦ææå¨æå 容ï¼æ好åéæå 容åå¼ï¼ä»¥ä¾¿åªç¼åéæå 容ã
4.Panelå ï¼ä¼é对panelåºåå¤çç´æ¥å对象ï¼å对象çå对象å¤æä¸äºï¼è¿è¡ä¸æ¸²æå¤çï¼è¶ åºpanelåºåçå对象æ¯ä¸äº§çæ¶èçã
ä¼åDrawCall
1.对å¤æéæå 容设置cacheAsï¼è½å¤§éåå°DrawCallï¼ä½¿ç¨å¥½cacheAsæ¯æ¸¸æä¼åçå ³é®ã
2.å°½éä¿è¯åå¾éçå¾ç渲æ顺åºæ¯æ¨ççï¼å¦æä¸åå¾é交å渲æï¼ä¼å¢å DrawCallæ°éã
3.å°½éä¿è¯åä¸ä¸ªé¢æ¿ä¸çææèµæºç¨ä¸ä¸ªå¾éï¼è¿æ ·è½åå°æ交æ¹æ¬¡ã
ä¼åCanvas
å¨å¯¹Canvasä¼åæ¶ï¼æ们éè¦æ³¨æï¼å¨ä»¥ä¸åºåä¸è¦ä½¿ç¨cacheAsï¼
1.对象é常ç®åï¼æ¯å¦ä¸ä¸ªåæè ä¸ä¸ªå¾çï¼è®¾ç½®cacheAs=bitmapä¸ä½ä¸æé«æ§è½ï¼åèä¼æ失æ§è½ã
2.容å¨å æç»å¸¸ååçå 容ï¼æ¯å¦å®¹å¨å æä¸ä¸ªå¨ç»æè å计æ¶ï¼å¦æå对è¿ä¸ªå®¹å¨è®¾ç½®cacheAs=bitmapï¼ä¼æ失æ§è½ã
å¯ä»¥éè¿æ¥çCanvasç»è®¡ä¿¡æ¯ç第ä¸ä¸ªå¼ï¼å¤ææ¯å¦ä¸ç´å¨å·æ°Canvasç¼åã
å ³äºcacheAs
设
ç½®cacheAså¯å°æ¾ç¤ºå¯¹è±¡ç¼å为éæå¾åï¼å½cacheAsæ¶ï¼å对象åçååï¼ä¼èªå¨éæ°ç¼åï¼åæ¶ä¹å¯ä»¥æå¨è°ç¨reCacheæ¹æ³æ´æ°ç¼åã
建议æä¸ç»å¸¸ååçå¤æå 容ï¼ç¼å为éæå¾åï¼è½æ大æé«æ¸²ææ§è½ï¼cacheAsæânoneâï¼ânormalâåâbitmapâä¸ä¸ªå¼å¯éã
é»è®¤ä¸ºânoneâï¼ä¸åä»»ä½ç¼åã
2.å½å¼ä¸ºânormalâæ¶ï¼canvasä¸è¿è¡ç»å¸ç¼åï¼webgl模å¼ä¸è¿è¡å½ä»¤ç¼åã
3.
å½å¼ä¸ºâbitmapâæ¶ï¼canvasä¸è¿è¡ä¾ç¶æ¯ç»å¸ç¼åï¼webGL模å¼ä¸ä½¿ç¨renderTargetç¼åãè¿ééè¦æ³¨æçæ¯ï¼webGLä¸
renderTargetç¼å模å¼æ2048大å°éå¶ï¼è¶ åº2048ä¼é¢å¤å¢å å åå¼éãå¦å¤ï¼ä¸æéç»æ¶å¼éä¹æ¯è¾å¤§ï¼ä½æ¯ä¼åå°drawcallï¼æ¸²
ææ§è½æé«ã webGLä¸å½ä»¤ç¼å模å¼åªä¼åå°èç¹éååå½ä»¤ç»ç»ï¼ä¸ä¼åå°drawcallï¼æ§è½ä¸çã
设置cacheAsåï¼è¿å¯ä»¥è®¾ç½®staticCache=true以é»æ¢èªå¨æ´æ°ç¼åï¼åæ¶å¯ä»¥æå¨è°ç¨reCacheæ¹æ³æ´æ°ç¼åã
cacheAs主è¦éè¿ä¸¤æ¹é¢æåæ§è½ãä¸æ¯åå°èç¹éåå顶ç¹è®¡ç®ï¼äºæ¯åå°drawCallãåç¨cacheAså°æ¯å¼æä¼åæ§è½çå©å¨ã
ä¸ä¾ç»å¶10000个ææ¬ï¼
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Laya.init(550, 400, Laya.WebGL);
Laya.Stat.show();
var textBox = new Laya.Sprite();
var text;
for (var i = 0; i < 10000; i++)
{
text = new Laya.Text();
text.text = (Math.random() * 100).toFixed(0);
text.color = "#CCCCCC";
text.x = Math.random() * 550;
text.y = Math.random() * 400;
textBox.addChild(text);
}
Laya.stage.addChild(textBox);
ä¸é¢æ¯ç¬è çµèä¸çè¿è¡æ¶æªå¾ï¼FPS稳å®äº52ä¸ä¸ã
å½æ们对æåæå¨ç容å¨è®¾ç½®ä¸ºcacheAsä¹åï¼å¦ä¸é¢çä¾åæ示ï¼æ§è½è·å¾è¾å¤§çæåï¼FPSè¾¾å°å°äº60帧ã
?
1
2
// â¦çç¥å ¶ä»ä»£ç ⦠var textBox = new Laya.Sprite();
textBox.cacheAs = "bitmap"; // â¦çç¥å ¶ä»ä»£ç â¦
æåæè¾¹
å¨è¿è¡æ¶ï¼è®¾ç½®äºæè¾¹çææ¬æ¯æ²¡ææè¾¹çææ¬å¤è°ç¨ä¸æ¬¡ç»å¾æ令ãæ¤æ¶ï¼ææ¬å¯¹CPUç使ç¨éåææ¬çæ°éææ£æ¯ãå æ¤ï¼å°½é使ç¨æ¿ä»£æ¹æ¡æ¥å®æåæ ·çéæ±ã
对äºå ä¹ä¸åå¨çææ¬å 容ï¼å¯ä»¥ä½¿ç¨cacheAséä½æ§è½æ¶èï¼åè§âå¾å½¢æ¸²ææ§è½ - å ³äºcacheAsâã
对äºå 容ç»å¸¸åå¨ï¼ä½æ¯ä½¿ç¨çå符æ°éè¾å°çææ¬åï¼å¯ä»¥éæ©ä½¿ç¨ä½å¾åä½ã
è·³è¿ææ¬æçï¼ç´æ¥æ¸²æ
大å¤æ°æ åµä¸ï¼å¾å¤ææ¬é½ä¸éè¦å¤æçæçï¼ä» ä» ç®åå°æ¾ç¤ºä¸è¡åã为äºè¿åè¿ä¸éæ±ï¼Textæä¾çå为changeTextçæ¹æ³å¯ä»¥ç´æ¥è·³è¿æçã
?
1
2
3
4
5
var text = new Text();
text.text = "text";
Laya.stage.addChild(text);
//åé¢åªæ¯æ´æ°æåå 容ï¼ä½¿ç¨changeTextè½æé«æ§è½
text.changeText("text changed.");
Text.changeTextä¼ç´æ¥ä¿®æ¹ç»å¾æ令ä¸è¯¥ææ¬ç»å¶çæåä¸æ¡æ令ï¼è¿ç§åé¢çç»å¾æ令ä¾æ§åå¨çè¡ä¸ºä¼å¯¼è´changeTextåªä½¿ç¨äºä»¥ä¸æ åµï¼
ææ¬å§ç»åªæä¸è¡ã
ææ¬çæ ·å¼å§ç»ä¸åï¼é¢è²ãç²ç»ãæä½ã对é½ççï¼ã
å³ä½¿å¦æ¤ï¼å®é ç¼ç¨ä¸ä¾æ§ä¼ç»å¸¸ä½¿ç¨å°è¿æ ·çéè¦ã
第5èï¼åå°CPU使ç¨é
åå°å¨æå±æ§æ¥æ¾
JavaScriptä¸ä»»ä½å¯¹è±¡é½æ¯å¨æçï¼ä½ å¯ä»¥ä»»æå°æ·»å å±æ§ãç¶èï¼å¨å¤§éçå±æ§éæ¥æ¾æå±æ§å¯è½å¾èæ¶ãå¦æéè¦é¢ç¹ä½¿ç¨æ个å±æ§å¼ï¼å¯ä»¥ä½¿ç¨å±é¨åéæ¥ä¿åå®ï¼
?
1
2
3
4
5
6
7
8
function foo()
{
var prop = target.prop;
// 使ç¨prop
process1(prop);
process2(prop);
process3(prop);
}
计æ¶å¨
LayaAiræä¾ä¸¤ç§è®¡æ¶å¨å¾ªç¯æ¥æ§è¡ä»£ç åã
Laya.timer.frameLoopæ§è¡é¢çä¾èµäºå¸§é¢çï¼å¯éè¿Stat.FPSæ¥çå½å帧é¢ã
Laya.timer.loopæ§è¡é¢çä¾èµäºåæ°æå®æ¶é´ã
å½ä¸ä¸ªå¯¹è±¡ççå½å¨æç»ææ¶ï¼è®°å¾æ¸ é¤å ¶å é¨çTimerï¼
?
1
2
3
4
5
6
Laya.timer.frameLoop(1, this, animateFrameRateBased);
Laya.stage.on("click", this, dispose);
function dispose()
{
Laya.timer.clear(this, animateFrameRateBased);
}
è·åæ¾ç¤ºå¯¹è±¡è¾¹ççåæ³
å¨ç¸å¯¹å¸å±ä¸ï¼å¾ç»å¸¸éè¦æ£ç¡®å°è·åæ¾ç¤ºå¯¹è±¡çè¾¹çãè·åæ¾ç¤ºå¯¹è±¡çè¾¹çä¹æå¤ç§åæ³ï¼èå ¶é´å·®å¼å¾æå¿ è¦ç¥éã
1.使ç¨getBounds/ getGraphicBoundsãã
?
1
2
3
4
var sp = new Sprite();
sp.graphics.drawRect(0, 0, 100, 100, "#FF0000");
var bounds = sp.getGraphicBounds();
Laya.stage.addChild(sp);
getBoundså¯ä»¥æ»¡è¶³å¤æ°å¤æ°éæ±ï¼ä½ç±äºå ¶éè¦è®¡ç®è¾¹çï¼ä¸éåé¢ç¹è°ç¨ã
2.设置容å¨çautoSize为trueã
?
1
2
3
4
var sp = new Sprite();
sp.autoSize = true;
sp.graphics.drawRect(0, 0, 100, 100, "#FF0000");
Laya.stage.addChild(sp);
ä¸è¿°ä»£ç å¯ä»¥å¨è¿è¡æ¶æ£ç¡®è·å宽é«ãautoSizeå¨è·å宽é«å¹¶ä¸æ¾ç¤ºå表çç¶æåçæ¹åæ¶ä¼éæ°è®¡ç®ï¼autoSizeéè¿getBoudns计ç®å®½é«ï¼ãæ以对æ¥æ大éå对象ç容å¨åºç¨autoSizeæ¯ä¸å¯åçãå¦æ设置äºsizeï¼autoSizeå°ä¸èµ·æã
使ç¨loadImageåè·å宽é«ï¼
?
1
2
3
4
5
6
var sp = new Sprite();
sp.loadImage("res/apes/monkey2.png", 0, 0, 0, 0, Handler.create(this, function()
{
console.log(sp.width, sp.height);
}));
Laya.stage.addChild(sp);
loadImageå¨å è½½å®æçåè°å½æ°è§¦åä¹åæå¯ä»¥æ£ç¡®è·å宽é«ã
3.ç´æ¥è°ç¨size设置ï¼
?
1
2
3
4
5
6
7
8
Laya.loader.load("res/apes/monkey2.png", Handler.create(this, function()
{
var texture = Laya.loader.getRes("res/apes/monkey2.png");
var sp = new Sprite();
sp.graphics.drawTexture(texture, 0, 0);
sp.size(texture.width, texture.height);
Laya.stage.addChild(sp);
}));
使ç¨Graphics.drawTexture并ä¸ä¼èªå¨è®¾ç½®å®¹å¨ç宽é«ï¼ä½æ¯å¯ä»¥ä½¿ç¨Textureç宽é«èµäºå®¹å¨ãæ¯åº¸ç½®çï¼è¿æ¯æé«æçæ¹å¼ã
注ï¼getGraphicsBoundsç¨äºè·åç¢éç»å¾å®½é«ã
æ ¹æ®æ´»å¨ç¶ææ¹å帧é¢
帧é¢æä¸ç§æ¨¡å¼ï¼Stage.FRAME_SLOWç»´æFPSå¨30ï¼Stage.FRAME_FASTç»´æFPSå¨60ï¼Stage.FRAME_MOUSEåéæ©æ§ç»´æFPSå¨30æ60帧ã
ææ¶å¹¶ä¸éè¦è®©æ¸¸æ以60FPSçéçæ§è¡ï¼å 为30FPSå·²ç»è½å¤æ»¡è¶³å¤æ°æ åµä¸äººç±»è§è§çååºï¼ä½æ¯é¼ æ 交äºæ¶ï¼30FPSå¯è½ä¼é æç»é¢çä¸è¿è´¯ï¼äºæ¯Stage.FRAME_MOUSEåºè¿èçã
ä¸ä¾å±ç¤ºä»¥Stage.FRAME_SLOWç帧çï¼å¨ç»å¸ä¸ç§»å¨é¼ æ ï¼ä½¿åçè·éé¼ æ 移å¨ï¼
?
1
2
3
4
5
6
7
8
9
10
11
12
Laya.init(Browser.width, Browser.height);
Stat.show();
Laya.stage.frameRate = Stage.FRAME_SLOW;
var sp = new Sprite();
sp.graphics.drawCircle(0, 0, 20, "#990000");
Laya.stage.addChild(sp);
Laya.stage.on(Event.MOUSE_MOVE, this, function()
{
sp.pos(Laya.stage.mouseX, Laya.stage.mouseY);
});
æ¤æ¶FPSæ¾ç¤º30ï¼å¹¶ä¸å¨é¼ æ 移å¨æ¶ï¼å¯ä»¥æè§å°åçä½ç½®çæ´æ°ä¸è¿è´¯ã设置Stage.frameRate为Stage.FRAME_MOUSEï¼
?
1
Laya.stage.frameRate = Stage.FRAME_MOUSE;
æ¤æ¶å¨é¼ æ 移å¨åFPSä¼æ¾ç¤º60ï¼å¹¶ä¸ç»é¢æµç 度æåãå¨é¼ æ éæ¢2ç§ä¸å¨åï¼FPSåä¼æ¢å¤å°30帧ã
使ç¨callLater
callLater使代ç å延è¿è³æ¬å¸§æ¸²æåæ§è¡ãå¦æå½åçæä½é¢ç¹æ¹åæ对象çç¶æï¼æ¤æ¶å¯ä»¥èè使ç¨callLaterï¼ä»¥åå°éå¤è®¡ç®ã
èèä¸ä¸ªå¾å½¢ï¼å¯¹å®è®¾ç½®ä»»ä½æ¹åå¤è§çå±æ§é½å°å¯¼è´å¾å½¢éç»ï¼
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var rotation = 0,
scale = 1,
position = 0;
function setRotation(value)
{
this.rotation = value;
update();
}
function setScale(value)
{
this.scale = value;
update();
}
function setPosition(value)
{
this.position = value;
update();
}
function update()
{
console.log('rotation: ' + this.rotation + '\tscale: ' + this.scale + '\tposition: ' + position);
}
è°ç¨ä»¥ä¸ä»£ç æ´æ¹ç¶æï¼
?
1
setRotation(90); setScale(2); setPosition(30);
æ§å¶å°çæå°ç»ææ¯
rotation: 90 scale: 1 position: 0
rotation: 90 scale: 2 position: 0
rotation: 90 scale: 2 position: 30
update被è°ç¨äºä¸æ¬¡ï¼å¹¶ä¸æåçç»ææ¯æ£ç¡®çï¼ä½æ¯åé¢ä¸¤æ¬¡è°ç¨é½æ¯ä¸éè¦çã
å°è¯å°ä¸å¤updateæ¹ä¸ºï¼
?
1
Laya.timer.callLater(this, update);
æ¤æ¶ï¼updateåªä¼è°ç¨ä¸æ¬¡ï¼å¹¶ä¸æ¯æ们æ³è¦çç»æã
å¾ç/å¾éå è½½
å¨å®æå¾ç/å¾éçå è½½ä¹åï¼å¼æå°±ä¼å¼å§å¤çå¾çèµæºãå¦æå è½½çæ¯ä¸å¼ å¾éï¼ä¼å¤çæ¯å¼ åå¾çãå¦æä¸æ¬¡æ§å¤ç大éçå¾çï¼è¿ä¸ªè¿ç¨å¯è½ä¼é æé¿æ¶é´çå¡é¡¿ã
å¨æ¸¸æçèµæºå è½½ä¸ï¼å¯ä»¥å°èµæºæç §å ³å¡ãåºæ¯çåç±»å è½½ãå¨åä¸æ¶é´å¤ççå¾çè¶å°ï¼å½æ¶ç游æååºé度ä¹ä¼æ´å¿«ãå¨èµæºä½¿ç¨å®æåï¼ä¹å¯ä»¥äºä»¥å¸è½½ï¼éæ¾å åã
第6èï¼å ¶ä»ä¼åçç¥
åå°ç²å使ç¨æ°éï¼å¨ç§»å¨å¹³å°Canvas模å¼ä¸ï¼å°½éä¸ç¨ç²åï¼
2.å¨Canvas模å¼ä¸ï¼å°½éåå°æ转ï¼ç¼©æ¾ï¼alphaçå±æ§ç使ç¨ï¼è¿äºå±æ§ä¼å¯¹æ§è½äº§çæ¶èãï¼å¨WebGL模å¼å¯ä»¥ä½¿ç¨ï¼ï¼
3.ä¸è¦å¨timeloopéé¢å建对象åå¤æ计ç®ï¼
4.å°½éåå°å¯¹å®¹å¨çautoSizeç使ç¨ï¼åå°getBounds()ç使ç¨ï¼å 为è¿äºè°ç¨ä¼äº§çè¾å¤è®¡ç®ï¼
5.å°½éå°ç¨try catchç使ç¨ï¼è¢«try catchçå½æ°æ§è¡ä¼åå¾éå¸¸æ ¢ï¼
温馨提示:答案为网友推荐,仅供参考