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 - 学习笔记

Egret - 学习笔记

二、springboot项目的简单使用之:定时任务

实现在spring boot中配置和使用定时器: 一、介绍定时任务的两个注解: @Scheduled @EnableScheduling使用。 要实现计划任务,首先通过在配置类注解...

盘点在H5小游戏里常用的动效制作套路

近年来,越来越多的自带绚丽动效的H5小游戏如雨后春笋一般冒出来,而也正是这些炫酷的交互动效,才能够成功地吸引住用户的眼球,让用户为此驻足。 而「动效制作」也伴随着H5的大热而火遍前端圈及设计界,...
  • yylurex
  • yylurex
  • 2017年05月08日 15:11
  • 268

HTML5游戏制作之路_06_egret文本及相关属性

一.创建文本 显示结果: 二.添加一些属性 三.绘制矩形并添加文字描边 /** * Created by 13641 on 2015/11/19. */ class Textt...

HTML5游戏制作之路_07_egret的声音播放的三种方式

/* 我目前使用的版本是egret2.5 */ egret支持的声音格式是mp3.获取资源的方式和之前的一样。 1. 使用URLLoader方式加载 /** * 这是使用URL方法加载...

HTML5游戏制作之路_08_egret对于声音的控制

/* egret版本:2.5 */ 一.点击发声 /** * 这是使用RES方法加载。 * Created by 13641 on 2015/11/19. */ class So...

HTML5游戏制作之路_03_egret的资源加载机制

/* 前一篇的链接: 使用的egret版本为2.5 */ h5支持矢量图(目测),自带的那个例子可以自由缩放,可以自适应(这让我很爽)。在egret里面叫bitmap(位图)实际上这个名称并不...

HTML5游戏制作之路_04_来做个动画吧

/* 使用的egret版本:2.5 编辑器采用webstrom */ 通过上一篇03成功可以加载资源,这一篇我们在上一篇的基础上,通过位图来搞一个动画。 如果想参看注释请回到上一篇。 直接...

HTML5游戏制作之路_09_2D骨骼动画工具DragonBone

/* 我目前使用的egret版本为2.5 */ DragonBone是制作动画或骨骼动画的工具,具体使用教程地址:DragonBone 很简单很暴力,省去了大量的时间。 我在这里主要介绍如何使用Dra...

HTML5游戏制作之路_02_剖析项目目录结构&&在浏览器中输出helloworld

/* 上一篇:h5游戏制作之路1 声明: 使用的egret游戏引擎版本为2.5. 编辑器用的webstrom */ 复习一下新建一个工程: 1.打开node.js的cmd 2....
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5游戏制作之路_06_egret关于精灵表单spritesheet
举报原因:
原因补充:

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