fis-spriter-hilosprite
针对Hilo的基于FIS的csssprites,由fis-spriter-csssprites 修改而来,具体说明请访问原项目了解
特性
结合Hilo使用图片的实际情况,对原有csssprites插件进行改造,支持Hilo素材类中的图片分组合并、合并路径指定
query | 说明 |
---|---|
?__hilosprite | 标识图片要做合并 |
?__hilosprite=group | 标识图片合并到"group_(x|y|z).png" |
group
只支持“字母、数字、-、_”
配置
- 启用 fis-spriter-hilosprite 插件
fis;
- 其他设置,更多详细设置请参考fis-spriter-csssprites
fisconfig;// hilosprite插件主要针对js文件进行处理fis
to
参数可以为相对路径(相对当前css路径)、绝对路径(项目根路径)
spriteTo
作为文件的to设置,为最高优先匹配,与to
一样支持相对、绝对路径
代码效果
原来的csssprite主要针对css中的图片进行sprite处理;而Hilo开发过程中,素材一般通过assert类进行管理,一般通过指定图片src向loadqueue添加素材;
var resources = // 新手提示 id: 'hand' src: id: 'arrow' src: ;thisqueue;
然后在资源加载完毕时获取图片
thisgameImages = hand: thisqueuecontent arrow: thisqueuecontent
原来的csssprite插件无法针对该情况进行sprite处理,所以对hilosprite对csssprite做了改造,如下:
var resources = // 新手提示 id: 'hand' src: id: 'arrow' src: ;thisqueue;
获取图片
thisgameImages = hand: img: thisqueuecontent rect: thisqueuerect arrow: img: thisqueuecontent rect: thisqueuerect
主要是hilosprite插件一旦发现图片的src上带有__hilosprite=,就会进行sprite分组处理,然后给出该图片在sprite图片的区域,用rect属性来表示;
var resources = // 新手提示 id: 'hand' src: "/caractivity/games/static/images/newCar/snakeScene1_game-sprite_1_z_98da4ba.png" rect: 0 400 125 82 id: 'arrow' src: "/caractivity/games/static/images/newCar/snakeScene1_game-sprite_1_z_98da4ba.png" rect: 466 0 38 85;