[]Laya怎么使用雪碧图(spritesheet)?

我的项目有很多小图片,之前是打包到swf里,一次加载,但使用Laya的资源转换工具后又变成了很多png,这样需要很多次加载请求,很影响体验,有没有办法使用图集呢?
已邀请:

WLDragon

赞同来自: cuixueying

关于这个问题就让我来回答吧#^_^#
因为Laya支持BitmapData的copyPixels方法,所以使用图集是肯定可以的。以下是我结合mornUI实现的解决方案:
1、使用ShoeBox工具生成图集
2、添加SpriteSheet类,稍微修改mornUI的AssetManager类
3、处理加载路径
通过上面这三个步骤可以让你的项目在flash和html5中轻松切换,无副作用。
以下是具体的方法(我的项目资源都是用mornUI打包的,所以看不懂以下讲解的同学请自学mornUI)
一、生成图集
(1)下载ShoeBox
(2)修改ShoeBox的设置,如下图
FileFormatLoop:\n\t"@ID":{"x":"@x", "y":"@y", "w":"@w", "h":"@h"},
FileFormatOuter:{@loop\n\t"":""\n}

shoeboxset.png

(3)把morn/assets里的资源分别拖到BoxSheet的SpriteSheet菜单上生成图集和配置文件
(4)在h5目录下添加与swf对应的资源目录并把图集和配置文件剪切进去,像下面这样子

path.png

二、添加SpriteSheet类
(1)把SpriteSheet类添加到项目中,看附件
(2)修改AssetManager,如下图所示,修改红框的两地方
/*[IF-FLASH]*/ return _domain.hasDefinition(name);
//[IF-SCRIPT] return SpriteSheet.hasDefinition(name) || _domain.hasDefinition(name);

//[IF-SCRIPT] var bmd:BitmapData = SpriteSheet.getBitmapData(name);
/*[IF-FLASH]*/ var bmd:BitmapData = _bmdMap[name];

assetmanager.png

三、处理加载路径
(1)像我这样子去掉.swf并设置SpriteSheet,因为我的h5项目是另建一个文档作为入口,所以没加宏
SpriteSheet.config(config.version, "/sheet", "assets/ui/");
var a:Array = config.assets;//["assets/ui/xxx.swf",...]
var b:Array = ;
for (var i:int = 0; i < a.length; i++) {
var s:String = a;
var u:String = s.substr(0, s.length - 4);//去掉.swf后缀
var o1:Object = { url:u + "/sheet.js?v=" + config.version, type:ResLoader.TXT, size:1};
var o2:Object = { url:u + "/sheet.png?v=" + config.version, type:ResLoader.BMD, size:1};
b.push(o1);
b.push(o2);
}
App.loader.loadAssets(b, new Handler(onLoadAssetsComplete), new Handler(onProgress));
好了,经过这些处理你就可以在项目中直接使用图集了,获取图片的方法跟mornUI一样,如果你是使用mornUI的话,就可以直接运行你的h5项目了。
我的项目《三国时代》就是使用Laya、mornUI和图集的例子
且慢,你这家伙写那么多东西,在最后加个链接,是软文来的吧!→_→被你看出来了,《三国时代》是我的第一款html5作品,使用行为树实现智能NPC,有兴趣的同学可以玩玩,说不好你会被电脑虐哭的 ^_^
手机可以扫一扫,推荐使用QQ浏览器

二维码.png

 
因为一个用户只能回复一次,所以接在后面随便提个小tips,Laya不支持ProgressEvent,但是可以使用mornUI粗略地实现加载进度,方法就是在加载的资源上填上size,像我上面修改路径那里那样,然后在LoaderManager中加一行代码
//[IF-SCRIPT] loadAssetsProgress(0, 0);

loadermanager.png

 

firmware

赞同来自:

同求。。。估计是要先在flash项目里面改成那种方式?

要回复问题请先

商务合作
商务合作