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

原创 2015年11月19日 03:32:37

/*

采用位图的版本: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(动画片段的使用),先去睡觉呵呵大。

版权声明:本文为博主原创文章,未经博主允许不得转载。

Egret的帧动画的使用

对于习惯了cocos引擎的小伙伴,对于白鹭的帧动画我想应该会不是很容易理解。在cocos中假如我们需要添加一个动画,只需要准备好plist文件,在程序中利用for循环给plist文件中的资源添加到动画...
  • wzyezqxl
  • wzyezqxl
  • 2016年09月22日 15:39
  • 2531

[Egret学习笔记 二]MovieClip的使用

使用一个MovieClip需要两个文件,1纹理,2JSON文件 1.借助Egret荣誉出品 Texture Merger 工具。此时我使用的是一个Gif图片,工具则会导出一张合并序列图的图片...
  • rcjjian
  • rcjjian
  • 2015年04月06日 13:20
  • 3039

egret学习日记2图像绘制及高级图像

图像的绘制用到了Graphics 类 Graphics 类包含一组可用来创建矢量形状的方法。支持绘制的显示对象包括 Sprite 和 Shape 对象。这些类中的每一个类都包括 graphics...
  • halfbean
  • halfbean
  • 2017年07月03日 16:24
  • 352

javascript表单验证

js验证表单大全 1. 长度限制 function test() { if(document.a.b.value.length>50) { alert("不能超过50个字符!"); ...
  • shipeng22022
  • shipeng22022
  • 2013年01月18日 13:22
  • 1780

Egret 学习笔记

1.纹理集实际上就是将一些零碎的小图放到一张大图当中。游戏中也经常使用到纹理集。使用纹理集的好处很多,我们通过将大量的图片拼合为一张图片从而减少网络请求,原先加载数次的图片资源现在加载一次即可。同时,...
  • dylan_lwb_
  • dylan_lwb_
  • 2017年07月25日 17:16
  • 966

SpriteSheet(精灵表单)的作用

Spritesheet(精灵表单),可以把它看作是一张巨大的图片,里面放着许许多多的Sprite(图片)。与spritesheet对应的,还有一个plist文件,这个文件指定了每个独立的sprite在...
  • jkan2001
  • jkan2001
  • 2014年04月18日 21:13
  • 1665

cocos2d-x学习笔记(16)--spritesheet(精灵表单)

cocos2d-x学习笔记(16)--spritesheet(精灵表单) 本文出自http://www.wenbanana.com稻草人博客,欢迎访问! 在讲这次的内容前,我们需要做一些“课前...
  • wen294299195
  • wen294299195
  • 2012年08月25日 15:08
  • 5260

js表单内容验证

/* 用途:校验ip地址的格式 输入:strIP:ip地址 返回:如果通过验证返回true,否则返回false; */ function isIP(strIP) { if (isNull(st...
  • dofun333
  • dofun333
  • 2017年12月15日 17:29
  • 83

前端组件库大合集

本文包含搭建web app常用的样式/组件等收集列表(移动优先),推荐mark!
  • qq_34838643
  • qq_34838643
  • 2018年01月24日 17:43
  • 53

如何使用Createjs来编写HTML5游戏(三)使用EaselJS中的制作Sprite类制作

动画的制作原理据说是由于人的视觉残留效应,连续播放一系列的静止图片,即可获得一段动画,每张图片可以称作动画的一帧,在EaselJS中,提供了一个Sprites类,可以用来创建动画。创建Sprite同创...
  • lanix516
  • lanix516
  • 2015年08月05日 19:47
  • 4338
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5游戏制作之路_06_egret关于精灵表单spritesheet
举报原因:
原因补充:

(最多只允许输入30个字)