关闭

HTML5游戏制作之路_06_egret关于精灵表单spritesheet

标签: html5egret游戏制作
881人阅读 评论(0) 收藏 举报
分类:

/*

采用位图的版本:2.5

采用的编辑器webstrom

*/

精灵表单就是将很多图片合成在一张图片中,然后 我们可以获取其中的任何一张图,这样做可以加快游戏的图片加载,类似于unity‘中的图集,形成打图集的习惯。

一.制作图集

在html5游戏里面获取图集,需要获取两个:

1.图集本身,即一张png,这个png里面有很多图片

2.对于这个大png的json描述文件。

我们如何获取这两个呢?egret为我们提供了一个工具,可以在egret引擎中下载,叫texture manager。


这里有几个小图标,我们通过texturmerger工具打成图集



我们点击到处,选择我们的工程目录的asset文件夹。


我们发现多了两个文件,一个json一个是图集。打开json


这个图集的所有信息一览无余。

二.使用图集

遵循上一节的套路,先获取资源(这里是一个png一个json)到一个Resource路径下的json里面,配置“resources”和“groups”:


然后通过ts代码来使用。

<pre style="background-color:#0c1021;color:#f8f8f8;font-family:'Source Code Pro';font-size:12.0pt;"><span style="color:#aeaeae;">/**
</span><span style="color:#aeaeae;"> * Created by 13641 on 2015/11/19.
</span><span style="color:#aeaeae;"> */
</span><span style="color:#aeaeae;">
</span><span style="color:#fbde2d;">class </span><span style="color:#ff6400;">SpriteSheet </span><span style="color:#fbde2d;">extends </span><span style="color:#ff6400;">egret</span>.DisplayObjectContainer{
    <span style="color:#fbde2d;">private </span><span style="color:#ff6400;">logo</span><span style="color:#fbde2d;">:</span><span style="color:#ff6400;">egret</span>.Bitmap;
    <span style="color:#fbde2d;">public constructor</span>() {
        <span style="color:#fbde2d;">super</span>();
        <span style="color:#fbde2d;">this</span>.<span style="color:#979748;">addEventListener</span>(<span style="color:#ff6400;">egret</span>.Event.<span style="font-style:italic;">ADDED_TO_STAGE</span>, <span style="color:#fbde2d;">this</span>.<span style="color:#979748;">MainClass</span>, <span style="color:#fbde2d;">this</span>);
    }
    <span style="color:#fbde2d;">public </span><span style="color:#979748;">MainClass</span>()<span style="color:#fbde2d;">:void</span>{
        <span style="color:#aeaeae;">//</span><span style="color:#aeaeae;font-family:'宋体';">调用
</span><span style="color:#aeaeae;font-family:'宋体';">        </span><span style="color:#fbde2d;">this</span>.<span style="color:#979748;">loadResources</span>();
    }

    <span style="color:#aeaeae;">/**
</span><span style="color:#aeaeae;">     * </span><span style="color:#aeaeae;font-family:'宋体';">资源加载方法
</span><span style="color:#aeaeae;font-family:'宋体';">     </span><span style="color:#aeaeae;">*/
</span><span style="color:#aeaeae;">    </span><span style="color:#fbde2d;">private </span><span style="color:#979748;">loadResources</span>()<span style="color:#fbde2d;">:void</span>{
        <span style="color:#ff6400;">RES</span>.<span style="color:#ff6400;">addEventListener</span>(<span style="color:#ff6400;">RES</span>.ResourceEvent.<span style="font-style:italic;">GROUP_COMPLETE</span>,<span style="color:#fbde2d;">this</span>.<span style="color:#979748;">onRemoveFromStage</span>,<span style="color:#fbde2d;">this</span>);
        <span style="color:#ff6400;">RES</span>.<span style="color:#ff6400;">addEventListener</span>(<span style="color:#ff6400;">RES</span>.ResourceEvent.<span style="font-style:italic;">GROUP_LOAD_ERROR</span>,<span style="color:#fbde2d;">this</span>.<span style="color:#979748;">loadErr</span>,<span style="color:#fbde2d;">this</span>);
        <span style="color:#ff6400;">RES</span>.<span style="color:#ff6400;">loadConfig</span>(<span style="color:#61ce3c;">"resource/default.res.json"</span>,<span style="color:#61ce3c;">"resource/"</span>);
        <span style="color:#ff6400;">RES</span>.<span style="color:#ff6400;">loadGroup</span>(<span style="color:#61ce3c;">"sheet"</span>);
    }

    <span style="color:#fbde2d;">private </span><span style="color:#979748;">loadErr</span>(<span style="color:#ff6400;">event</span><span style="color:#fbde2d;">:</span><span style="color:#ff6400;">RES</span>.ResourceEvent)<span style="color:#fbde2d;">:void</span>{
        <span style="color:#ff6400;">alert</span>(<span style="color:#61ce3c;">" cuole +  "</span><span style="color:#fbde2d;">+</span><span style="color:#ff6400;">event</span>.<span style="color:#979748;">toString</span>());
    }
    <span style="color:#aeaeae;">/**
</span><span style="color:#aeaeae;">     * </span><span style="color:#aeaeae;font-family:'宋体';">定义回调函数,资源加载完成后加载图片
</span><span style="color:#aeaeae;font-family:'宋体';">     </span><span style="color:#aeaeae;">* @param event :</span><span style="color:#aeaeae;font-family:'宋体';">回调函数事件
</span><span style="color:#aeaeae;font-family:'宋体';">     </span><span style="color:#aeaeae;">*/
</span><span style="color:#aeaeae;">    </span><span style="color:#fbde2d;">private </span><span style="color:#979748;">onRemoveFromStage</span>(<span style="color:#ff6400;">event</span><span style="color:#fbde2d;">:</span><span style="color:#ff6400;">RES</span>.ResourceEvent)<span style="color:#fbde2d;">:void</span>{
        <span style="color:#fbde2d;">this</span>.<span style="color:#ff6400;">logo </span><span style="color:#fbde2d;">= new </span><span style="color:#ff6400;">egret</span>.Bitmap();
        <span style="color:#aeaeae;">/*
</span><span style="color:#aeaeae;">        * !!!</span><span style="color:#aeaeae;font-family:'宋体';">注意这里的调用方式,</span><span style="color:#aeaeae;">group</span><span style="color:#aeaeae;font-family:'宋体';">中</span><span style="color:#aeaeae;">   key.</span><span style="color:#aeaeae;font-family:'宋体';">图片名称</span><span style="color:#aeaeae;">
</span><span style="color:#aeaeae;">        * */
</span><span style="color:#aeaeae;">        </span><span style="color:#fbde2d;">this</span>.<span style="color:#ff6400;">logo</span>.<span style="color:#ff6400;">texture </span><span style="color:#fbde2d;">= </span><span style="color:#ff6400;">RES</span>.<span style="color:#ff6400;">getRes</span>(<span style="color:#61ce3c;">"iconsDesc.0"</span>);
        <span style="color:#fbde2d;">this</span>.<span style="color:#979748;">addChild</span>(<span style="color:#fbde2d;">this</span>.<span style="color:#ff6400;">logo</span>);
        <span style="color:#aeaeae;">//</span><span style="color:#aeaeae;font-family:'宋体';">调用动画函数
</span><span style="color:#aeaeae;font-family:'宋体';">        </span><span style="color:#aeaeae;">//this.bitmapAnimaiton();
</span><span style="color:#aeaeae;">    </span>}

    <span style="color:#fbde2d;">private </span><span style="color:#979748;">bitmapAnimaiton</span>()<span style="color:#fbde2d;">:void</span>{
        <span style="color:#aeaeae;">//Tween</span><span style="color:#aeaeae;font-family:'宋体';">这个类有大量的动画,继承自事件分发
</span><span style="color:#aeaeae;font-family:'宋体';">        </span><span style="color:#fbde2d;">var </span><span style="color:#64a2a2;">mytween </span><span style="color:#fbde2d;">= </span><span style="color:#ff6400;">egret</span>.Tween.<span style="color:#ff6400;">get</span>(<span style="color:#fbde2d;">this</span>.<span style="color:#ff6400;">logo</span>);
        <span style="color:#aeaeae;">//</span><span style="color:#aeaeae;font-family:'宋体';">位图在</span><span style="color:#aeaeae;">500</span><span style="color:#aeaeae;font-family:'宋体';">毫秒内,移动到</span><span style="color:#aeaeae;">(280,0)</span><span style="color:#aeaeae;font-family:'宋体';">的位置
</span><span style="color:#aeaeae;font-family:'宋体';">        </span><span style="color:#64a2a2;">mytween</span>.<span style="color:#979748;">to</span>({<span style="color:#ff6400;">x</span><span style="color:#fbde2d;">:</span><span style="color:#d8fa3c;">280</span>,<span style="color:#ff6400;">y</span><span style="color:#fbde2d;">:</span><span style="color:#d8fa3c;">0</span>},<span style="color:#d8fa3c;">500</span>).<span style="color:#979748;">to</span>({<span style="color:#ff6400;">x</span><span style="color:#fbde2d;">:</span><span style="color:#d8fa3c;">280</span>,<span style="color:#ff6400;">y</span><span style="color:#fbde2d;">:</span><span style="color:#d8fa3c;">300</span>},<span style="color:#d8fa3c;">500</span>).<span style="color:#979748;">to</span>({<span style="color:#ff6400;">x</span><span style="color:#fbde2d;">:</span><span style="color:#d8fa3c;">0</span>,<span style="color:#ff6400;">y</span><span style="color:#fbde2d;">:</span><span style="color:#d8fa3c;">300</span>},<span style="color:#d8fa3c;">500</span>).<span style="color:#979748;">to</span>({<span style="color:#ff6400;">x</span><span style="color:#fbde2d;">:</span><span style="color:#d8fa3c;">0</span>,<span style="color:#ff6400;">y</span><span style="color:#fbde2d;">:</span><span style="color:#d8fa3c;">0</span>},<span style="color:#d8fa3c;">500</span>);
        <span style="color:#aeaeae;">//</span><span style="color:#aeaeae;font-family:'宋体';">当上面动画全部结束,我们会再次执行这个动画,当然我们也可以调用别的动画函数
</span><span style="color:#aeaeae;font-family:'宋体';">        </span><span style="color:#64a2a2;">mytween</span>.<span style="color:#979748;">call</span>(<span style="color:#fbde2d;">this</span>.<span style="color:#979748;">bitmapAnimaiton</span>,<span style="color:#fbde2d;">this</span>);
    }
}



结果成功:


这一节介绍了sprite表单即spritesheet的用法,下一节介绍moveclip(动画片段的使用),先去睡觉呵呵大。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:39401次
    • 积分:1061
    • 等级:
    • 排名:千里之外
    • 原创:67篇
    • 转载:8篇
    • 译文:0篇
    • 评论:9条
    最新评论