本文实践自 Ray Wenderlich、Tony Dahbura 的文章《 How to Use Animations and Sprite Sheets in Cocos2D 2.X 》,文中使用Cocos2D,我在这里使用Cocos2D-x 2.1.2进行学习和移植。在这篇文章,将会学习到如何创建一个简单的熊行走动画,如何使用精灵表单,如何改变熊行走的方向等等。
步骤如下:
1.新建Xcode工程,工程名为" AnimBear ";
2.下载本游戏所需的资源;


这些图像的尺寸是最大分辨率所需的尺寸,将以这些图像来创建不同分辨率所需的尺寸。

3.下载Texture Packer工具,当前为3.1.2版本。拖动资源图片文件到Texture Packer的右边窗口,将会自动加载文件。左边窗口中的Geometry面板,调整Max size为4096x4096,因为默认尺寸不够满足大小。完成之后,如下图所示:

添加精灵:

选择的保存位置为桌面,这样方便查找。

之后点击save。

点击publish就OK了。这样资源做完了。之后将资源导入工程。

创建XCode下的cocos2d-x工程

3.一个简单的动画。打开HelloWorldScene.h文件,添加如下代码:
//变量_bearMoving用来判断精灵是否正在移动中bool _bearMoving;//创建精灵对象CC_SYNTHESIZE_RETAIN(cocos2d::CCSprite*, _bear, Bear);//行走的动作,只是动画效果CC_SYNTHESIZE_RETAIN(cocos2d::CCAction*, _walkAction, WalkAction);//移动的动作,只是精灵移动CC_SYNTHESIZE_RETAIN(cocos2d::CCAction*, _moveAction, MoveAction);//构造函数HelloWorld();

打开HelloWorldScene.cpp文件,在构造函数里面,添加如下代码:

1
2
3
4
5
6
7
HelloWorld::HelloWorld()
{
    _bear = NULL;
    _walkAction = NULL;
    _moveAction = NULL;
    _bearMoving = false;
}
修改init函数,为如下代码: 
bool HelloWorld::init()
{bool pRet = false;do {CC_BREAK_IF(!CCLayer::init());//1)Cache the sprite frames and texture/*①.缓存精灵帧和纹理。调用CCSpriteFrameCache的addSpriteFramesWithFile方法,传入之前生成的属性列表文件名称。这个方法做了如下事情:从属性列表文件的元数据部分,取出textureFileName的值,作为纹理文件的文件名,在这里为AnimBear.png,载入文件到CCTextureCache纹理缓存中。注意,这里会根据设定的资源搜索路径来自动寻找正确的文件。解析属性列表文件,使用CCSpriteFrame对象来内部地跟踪所有精灵的信息。*/CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile("AnimBear.plist");//2)Create a sprite batch node/*②.创建一个精灵批处理节点。创建CCSpriteBatchNode对象,传入了精灵表单图像名称。精灵表单的工作方式如下:创建CCSpriteBatchNode对象,传入包含所有精灵的图像文件的名称,将这个对象添加到场景里面。现在,任何时候创建来自这个精灵表单的精灵,都应当将这个精灵添加到这个CCSpriteBatchNode对象里。只要精灵是来自这个精灵表单的,那么就会正常工作,否则会报错。CCSpriteBatchNode代码智能地将CCSprite孩子对象在一次的OpenGL ES调用中进行绘制,而不是多次调用,而这会使得速度快得多。*/CCSpriteBatchNode* spriteSheet = CCSpriteBatchNode::create("AnimBear-hd.pvr.ccz");this->addChild(spriteSheet);//3) Gather the list of frames/*③.采集帧列表。为了创建帧列表,需要简单地遍历图片的名称(它们被命名为Bear1.png -> Bear8.png,这是一个惯例),然后,从CCSpriteFrameCache里寻找指定名称的精灵帧。请记住,这些应该已经在缓存中,因为之前调用了addSpriteFramesWithFile方法。*/CCArray *walkAnimFrames = CCArray::create();for (int i = 1; i <= 8; ++i){CCSpriteFrame* walkFrame = CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName(CCString::createWithFormat("bear%d.png", i)->getCString());walkAnimFrames->addObject(walkFrame);}//4) Create the animation object/*④.创建动画对象。通过传入精灵帧列表,创建CCAnimation对象,并指定动画的播放速度。这里使用0.1秒作为帧之间的延迟时间。*/CCAnimation *walkAnim = CCAnimation::createWithSpriteFrames(walkAnimFrames, 0.1f);//5) Create the sprite and run the animation action/*.⑤创建精灵和运行动画动作。以某一帧来创建精灵(即熊),放置在屏幕中心。*/CCSize winSize = CCDirector::sharedDirector()->getWinSize();this->setBear(CCSprite::createWithSpriteFrameName("bear1.png"));this->getBear()->setPosition(ccp(winSize.width / 2, winSize.height / 2));//传入CCAnimation对象,创建CCAnimate对象,。this->setWalkAction(CCRepeatForever::create(CCAnimate::create(walkAnim)));//并让熊运行这个动作this->getBear()->runAction(this->getWalkAction());//最后,将熊添加到精灵表单里。注意,如果没有添加到精灵表单里,而是添加到层里的话,就不会得到性能的优化。spriteSheet->addChild(this->getBear());pRet = true;} while (0);return pRet;
}

编译运行,可以看到熊愉快地漫步在屏幕上,如下图所示:

4.更改熊行走的方向。通过触摸屏幕,来控制熊的移动。
HelloWorldScene.h添加如下代码
//注册手势的方法void registerWithTouchDispatcher();//触摸开始bool ccTouchBegan(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent);//触摸结束void ccTouchEnded(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent);//精灵移动结束void bearMoveEnded();

打开HelloWorldScene.cpp文件,在init函数里面,注释掉代码this->getBear()->runAction(this->getWalkAction());,这样一开始熊就不会移动。然后在代码最后添加如下代码: 
1
this->setTouchEnabled(true);
添加如下方法: 
void HelloWorld::registerWithTouchDispatcher()
{CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this, 0, true);
}bool HelloWorld::ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent)
{return true;
}void HelloWorld::ccTouchEnded(CCTouch *pTouch, CCEvent *pEvent)
{//1) Determine the touch location//①确定触摸位置。就是获取触摸点的坐标CCPoint touchLocation = this->convertTouchToNodeSpace(pTouch);//2) Set the desired velocity//设置期望的速度。设置熊的移动速度。CCSize screenSize = CCDirector::sharedDirector()->getWinSize();float bearVelocity = screenSize.width / 3.0f;//3) Figure out the amount moved in X anf Y//计算在x轴和y轴上的移动距离。CCPoint moveDifference = ccpSub(touchLocation, this->getBear()->getPosition());//4) Figure out the actual length moved//4)计算移动的真实长度。float distanceToMove = ccpLength(moveDifference);//5) Figure out how long it will take to move//6)计算移动的所需时间。float moveDuration = distanceToMove / bearVelocity;//6) Flip the animation if necessary//如有必须的话,则翻转动画。通过移动距离的x轴来判断熊是向左还是向右移动。只需设置水平翻转,运行的动画也会跟着翻转。if (moveDifference.x < 0){this->getBear()->setFlipX(false);}else{this->getBear()->setFlipX(true);}//7) Run the appropriate actions//运行适当的动作。首先,停止现有的移动动作,因为可能半途改变熊的目的地。接着,如果已经在移动了,就继续保持行走动作。最后,创建移动动作,指定移动的位置、移动的时间,和一个动作完成时的回调,这个回调用来停止行走动作。变量_bearMoving用来判断是否正在移动中。this->getBear()->stopAction(this->getMoveAction());if (!_bearMoving){this->getBear()->runAction(this->getWalkAction());}this->setMoveAction(CCSequence::create(CCMoveTo::create(moveDuration, touchLocation),CCCallFunc::create(this, callfunc_selector(HelloWorld::bearMoveEnded)),NULL));this->getBear()->runAction(this->getMoveAction());_bearMoving = true;
}void HelloWorld::bearMoveEnded()
{//动作结束后执行this->getBear()->stopAction(this->getWalkAction());_bearMoving = false;
}
编译运行,触摸屏幕来移动熊,如下图所示:

参考资料:
1.http://www.raywenderlich.com/32045/how-to-use-animations-and-sprite-sheets-in-cocos2d-2-x
2.http://www.codeandweb.com/texturepacker/documentation
非常感谢以上资料,本例子源代码附加资源下载地址:http://download.csdn.net/detail/akof1314/5914987
iOS版下载地址:http://vdisk.weibo.com/s/BDn59yfnBUMKQ  
如文章存在错误之处,欢迎指出,以便改正。

cocos2d-x2.1.2精灵表单与表单编辑器相关推荐

  1. JavaScript 表单与表单验证

    JavaScript 表单 JavaScript 表单验证 HTML 表单验证可以通过 JavaScript 来完成. 以下实例代码用于判断表单字段(fname)值是否存在,如果存在,则弹出信息,否则 ...

  2. R语言使用compareGroups包绘制单因素分析表实战:基于survival包的colon数据集

    R语言使用compareGroups包绘制单因素分析表实战:基于survival包的colon数据集 目录 R语言使用compareGroups包绘制单因素分析表实战:基于survival包的colo ...

  3. autojs遍历当前页面所有控件_HTML5表单和表单控件的使用

    哈喽大家好,我是作者"未来",本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高手哦! 志同道合的小伙伴跟我一起学习交流哦! 第一阶段 HT ...

  4. element 修改表单值后表单验证无效_javascript自学记录:表单脚本1

    第14章 表单脚本 14.1 表单的基础知识 ​获得表单元素: // 取得id为form_1的元素var form = document.getElementById("form_1&quo ...

  5. php ci 表单校验,表单验证 - CodeIgniter 中文手册|用户手册|用户指南|Wiki文档

    表单验证详解 CodeIgniter 提供了一个全面的表单验证和数据预处理类以帮助缩减你所写的代码. 概述 在解释 CodeIgniter 的数据验证处理之前,让我们先描述一下一般的情况: 一个表单显 ...

  6. db2查询字段备注_通过逐浪数据精灵管理sqlserver数据表备注以及字段说明

    通过逐浪数据精灵管理sqlserver的数据表备注以及字段说明备注(附脚本方法) 基本介绍 逐浪数据精灵,是由逐浪软件团队提供的生成态产品,可以快速的方便的管理数据表,目前对商业用户开放. 管理数据库 ...

  7. access表怎么生成表结构_数据结构——单链表讲解

    单链表 单链表的创建分为头插入法和尾插入法两种,两者并无本质上的不同,都是利用指针指向下一个结点元素的方式进行逐个创建,只不过使用头插入法最终得到的结果是逆序的. 1.单链表概念&设计 单链表 ...

  8. 物理机存放mysql实例原则_MySQL优化笔记(四)--表的设计与优化(单表、多表)...

    前面讲了SQL优化以及索引的使用.设计优化了,那么接下来就到表的设计与优化啦!!!真实地去设计优化单表结构以及讲述多表设计基本原则(结合真实的生产环境的取舍来讲述). 文章结构:(1)单表设计与优化: ...

  9. html表单自动提交表单提交表单数据类型,表单

    表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域:包含了文本框.密码框.隐藏域.多行文本框. ...

  10. 线性表之顺序表与单链表的区别及优缺点

    这里比较的是基于C语言实现的顺序表与单链表,与其他语言的实现可能会有差异,但我相信语言是相通的,它们的实现机制应该也差不多. 1.What 什么是顺序表和单链表 ①顺序表: 顺序表是在计算机内存中以数 ...

最新文章

  1. DataWorks V2使用PyUdf
  2. QT的QDesignerWidgetBoxInterface类的使用
  3. python基础之运算符
  4. spark 应用程序性能优化:12 个优化方法
  5. 常用JQuery插件整理
  6. Leetcode--122. 买卖股票的最佳时机Ⅱ
  7. 区块链开发(四)Nodejs下载安装
  8. 自定义 Yasnippet 模板
  9. switchhosts 文件下载
  10. 计算机如何驱动无线网络,笔记本电脑无线网卡驱动怎么安装?
  11. PCWorld评10大科技产品:IBM超级计算机上榜
  12. Altium Designer 9 学习笔记(一)基础操作
  13. DGL官方教程--图注意力网络(GAT)
  14. Java游戏脚本实现
  15. 钉钉考勤接口调用与OA系统数据对接
  16. 【巨杉数据库SequoiaDB】巨杉再获企业级认可,分布式数据库领跑“一亿中流”
  17. python实现windows ie代理切换
  18. 2个人怎么一起玩军旗游戏_让我们一起玩:建立游戏社区
  19. [原创]浅谈我们应招聘应届毕业生做测试吗?
  20. msconfig设置最大内存导致电脑无法启动解决方法

热门文章

  1. 量化投资与数据分析一: 如何用PYTHON下载WIND数据并转化成dataframe格式 分享
  2. mining.subscribe与initiate_stratum函数
  3. 【单片机】用定时器以间隔500ms在8位数码管上依次显示0、1、2、3、...C、D、E、F,重复
  4. 前端实现旗帜飘动效果系列 (Ⅰ):dom+css实现
  5. CentOS8 yum/dnf 配置国内源
  6. 第三周java实验报告
  7. 笔记本电脑安装CentOS7
  8. 处理Elasticsearch集群yellow和red状态
  9. 虚拟化原理 内存虚拟化 Intel EPT
  10. Gboard键盘词库导入方法