分享:Graphics下cmds命令流的使用!

      Graphics类下的cmds是一个命令流,存储了所有绘制命令。为了节省sprite创建,我们可以在同一个sprite下绘制多个纹理,通过cmds我们就可以有效的对众多纹理进行各项信息的设置,包括纹理替换、宽高设置、位置设置等
     举个例子:
代码展示:
package
{
import laya.display.Sprite;
import laya.maths.Matrix;
import laya.net.Loader;
import laya.resource.Texture;
import laya.utils.Browser;
import laya.utils.Handler;
import laya.webgl.WebGL;

public class GraCmdsDemo
{
public function GraCmdsDemo()
{
//初始化舞台
Laya.init(Browser.width,Browser.height,WebGL);
//预加载资源
Laya.loader.load(['apes/monkey0.png','apes/monkey1.png','apes/monkey2.png','apes/monkey3.png'],Handler.create(this,onLoaded));
}

private function onLoaded():void
{
//获取纹理
var texture1:Texture=Loader.getRes('apes/monkey0.png') as Texture;
var texture2:Texture=Loader.getRes('apes/monkey1.png') as Texture;
var texture3:Texture=Loader.getRes('apes/monkey2.png') as Texture;
var texture4:Texture=Loader.getRes('apes/monkey3.png') as Texture;
//绘制纹理
var box:Sprite=new Sprite();
Laya.stage.addChild(box);
box.graphics.drawTexture(texture1,50,50,0,0,new Matrix(),0.5);
box.graphics.drawTexture(texture2,200,50,0,0,new Matrix(),0.5);
box.graphics.drawTexture(texture3,350,50,0,0,new Matrix(),0.5);
box.graphics.drawTexture(texture4,500,50,0,0,new Matrix(),0.5);
//获取cmds信息
trace(box.graphics.cmds);
}
}
}

发布效果展示:
555.png

 
cmds命令流展示:
777.png

 
 
下面我们来根据cmds输出的数据,来改变下ape的位置,让他们按照上下左右的顺序依次排列
代码展示:
package
{
import laya.display.Sprite;
import laya.maths.Matrix;
import laya.net.Loader;
import laya.resource.Texture;
import laya.utils.Browser;
import laya.utils.Handler;
import laya.webgl.WebGL;

public class GraCmdsDemo
{
public function GraCmdsDemo()
{
//初始化舞台
Laya.init(Browser.width,Browser.height,WebGL);
//预加载资源
Laya.loader.load(['apes/monkey0.png','apes/monkey1.png','apes/monkey2.png','apes/monkey3.png'],Handler.create(this,onLoaded));
}

private function onLoaded():void
{
//获取纹理
var texture1:Texture=Loader.getRes('apes/monkey0.png') as Texture;
var texture2:Texture=Loader.getRes('apes/monkey1.png') as Texture;
var texture3:Texture=Loader.getRes('apes/monkey2.png') as Texture;
var texture4:Texture=Loader.getRes('apes/monkey3.png') as Texture;
//绘制纹理
var box:Sprite=new Sprite();
Laya.stage.addChild(box);
box.graphics.drawTexture(texture1,50,50,0,0,new Matrix(),0.5);
box.graphics.drawTexture(texture2,200,50,0,0,new Matrix(),0.5);
box.graphics.drawTexture(texture3,350,50,0,0,new Matrix(),0.5);
box.graphics.drawTexture(texture4,500,50,0,0,new Matrix(),0.5);
//获取cmds信息
trace(box.graphics.cmds);
var arr:Array=box.graphics.cmds;
//改变ape的位置信息
arr[0][1]=200;
arr[0][2]=50;
arr[1][1]=350;
arr[1][2]=200;
arr[2][1]=200;
arr[2][2]=350;
arr[3][1]=50;
arr[3][2]=200;
//改变ape的纹理显示
// arr[0][0]=texture4;


}
}
}
效果展示:

888.png

 
附上代码示例,请下载参考学习!
已邀请:

ohkei - as3、as2、h5

赞同来自: ljy328803417

使用arr[0].on() 加鼠标点击事件,可以吗?
使用Tween.to(arr[0],...) 加补间动画,可以吗?

zeorro

赞同来自:

niubility

蓝天航喏

赞同来自:

@cuixueying,改变纹理了的数据后,纹理没有立即刷新而是等了大概10秒才生效,请问有什么解决方案吗?

要回复问题请先

商务合作
商务合作