Cocos2d-x 3.x plist+png 做动画

***************************************转载请注明出处:http://blog.csdn.net/lttree******************************************

前言:

这次的东西,其实是在做完2048后,我有个Flash想用。

就像,天天系列,开头会有 ”提米“ 的叫声+动画, 是不是感觉很带感。

之前,做第一个游戏的时候,有做一套78帧的Flash,

但是当时不会用,现在正好拿过来用了,嘿嘿~

正文:

这次例子,就拿我这几天想做的 FlappyBird 的小鸟为例吧:

1.首先,我们先来做需要的资源,

这个有三个层次(目前我知道的)

① 加载每个图片

② 把所有图片压缩到一张图片中,然后分割取出。

③借助于plist文件与png共同取出图片。

前两种,比较简单,而且效率不是很高,我就直接用这三者最好的,plist+png

其实,plist一般是用在mac上的,

在windows制作plist可以用 TexturePacker,

(可以在这里下载:https://www.codeandweb.com/texturepacker/download )

非常方便的一个工具,

安装完毕,打开,需要选择你的引擎,当然我们选择的是cocos2d的:

打开以后,会出现如下界面:

这个工具的使用细节,我不是很懂= =。

详细的可以问问度娘。

我只知道,点上面那个按钮,添加,你所需要压缩在PNG里的图片:

这个技巧不需要我多说了吧:

按住Ctrl 可以单个多选,

按住Shift可以连续多选。

选出图片,并把他们加入进来。

如果没有图片,拿下面的凑合一下吧:

然后点击 左上角 的File按钮:

然后,在下拉的菜单中,选  Public sprite sheet ,然后就选择存放 PNG和PLIST的目录:

先是plist目录,然后是PNG目录,最好两个文件名是一样的。

接着,就会给你输出出来了:

OK,你就可以到存放的地方看你所生成的两个文件了。

2.接下来就是Cocos2d-x  中调用部分了。

把两个文件(plist和png) 复制到Resource 里面,

在VS2012 中 右键点击Resource 文件夹,添加->现有项,将两者添加进来。

这里,我就直接在HelloWorld界面,放小鸟飞行动画了。

在HelloWorldScene.cpp的Init函数中加入,如下代码:

// ①创建缓存,将图片读取进来
	CCSpriteFrameCache * cache = CCSpriteFrameCache::sharedSpriteFrameCache();
	cache -> addSpriteFramesWithFile("hero_bird.plist");

	// ②创建第一帧,设置位置,加入到当前场景
	CCSprite *sp = CCSprite::createWithSpriteFrameName("bird_hero_01.png");
	sp -> setPosition(Point(visibleSize.width/3,visibleSize.height/2));
	this -> addChild( sp );

	// ③创建集合,存每一张图片
	Vector< SpriteFrame* > sfme = Vector< SpriteFrame* >::Vector();
	char str[20] = {0};
	for( int i = 1 ; i < 4 ; ++i )
	{
		// ④ 获取图片名字,加入到集合中
		sprintf(str,"bird_hero_%02d.png",i);
		SpriteFrame *fname = cache -> spriteFrameByName( str );
		sfme.pushBack( fname );
	}
    // ⑤ 创建动画,设置播放速度
	CCAnimation *animation = CCAnimation::createWithSpriteFrames( sfme , 0.1f );
	sp -> runAction ( CCRepeatForever::create(CCAnimate::create(animation )));

来解释一下:

前面①、② 无需多说,

③,这个以前用CCArray或者Array,

现在不行了,反正我是3.0和3.2都不能用Array,会在⑤

createWithSpriteFrames出问题,

因为追到这个函数定义,可以发现:

Animation* Animation::createWithSpriteFrames(const Vector<SpriteFrame*>& frames, float delay/* = 0.0f*/, unsigned int loops/* = 1*/)
{
    Animation *animation = new Animation();
    animation->initWithSpriteFrames(frames, delay, loops);
    animation->autorelease();

    return animation;
}

它的第一个参数必须为:

const Vector<SpriteFrame*>& frames

这点就要和  之前版本不同,要注意一下。

然后是 ④

这个获取图片名字,为什么是:

sprintf(str,"bird_hero_%02d.png",i);
呢?

因为%02d,可以保证,取i后,不够的用0补足,

比如,如果是%d,

当i等于1, 获取的名字是: bird_hero_1

而%02d,获取名字是: bird_hero_01

Ok,运行一下,就可以发现小鸟在飞翔啦~

PS:如何作为一个开场动画呢?

我的方法就是在上述代码后,加一句计划任务,

多长时间后的跳转:

this->scheduleOnce(schedule_selector(InkmooFlash::jumpToMain), 4);

这样,算好播放一帧多久,总共多少帧,就可以做成开场动画啦~。~

***************************************转载请注明出处:http://blog.csdn.net/lttree******************************************

时间: 2024-10-06 00:16:32

Cocos2d-x 3.x plist+png 做动画的相关文章

让CALayer的shadowPath跟随bounds一起做动画改变-b

在iOS开发中,我们经常需要给视图添加阴影效果,最简单的方法就是通过设置CALayer的shadowColor.shadowOpacity.shadowOffset和shadowRadius这几个属性可以很方便的为 UIView 添加阴影效果.但是如果单用这几个属性会导致离屏渲染(Offscreen Rendering),而且CoreAnimation在每一帧绘制阴影的时候都需要递归遍历所有sublayer的alpha通道从而精确的计算出阴影的轮廓,这是非常消耗性能的,从而导致了动画的卡顿. 为

沿着贝塞尔曲线做动画

效果图如下: 源码: // // RootViewController.m // // Copyright (c) 2014年 Y.X. All rights reserved. // #import "RootViewController.h" #import "YXGCD.h" @interface RootViewController () @property (nonatomic, strong) GCDTimer *timer; @end @impleme

transition和animation做动画(css动画二)

前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! translate:平移:是transform的一个属性: transform:变形:是一个静态属性,可以改变元素的形状或位置,做出2d或3d效果: transition:过渡,转变:使css属性值在一段时间内平滑的变化,需要有触发条件(如hover等),是animation的简化版: animation:动画:可以设置多帧效果,然后把它们组合变换,按动画效果展示出来: 1. transition 过渡

用杯赛尔曲线(做动画和绘图)

1. 用被塞尔曲线做动画 效果:位置沿着贝瑟尔曲线位置移动,尺寸由大到小,透明度从完全可见过渡到彻底透明. 至于在DrawRect里面绘制贝塞尔曲线,可以直接百度,没有什么难点的. - (void)clickButton:(id)sender { UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:btn.center]; [path addCurveToPoint:btn.center controlPoint1:

使用requestAnimationFrame做动画效果二

3月是个好日子,渐渐地开始忙起来了,我做事还是不够细心,加上感冒,没精神,今天差点又出事了,做过的事情还是要检查一遍才行,哎呀. 使用requestAnimationFrame做动画,我做了很久,终于在二月底完工了,中间绕了不少弯路,先把domo放出来: 要实行的功能显而易见,一开始我粗糙地不考虑性能,不使用requestAnimationFrame,已经做出来了,但是觉得不好,于是进行了进一步改进.采用对象的方法,先生成10个粉色的小方块,隐藏起来,然后利用requestAnimationFr

做动画的一大接口 requestAnimationFrame

要实现动画效果,可以有以下几种实现: 1.setInterval setTimeout 2.css3 transition 3.requestAnimationFrame requestAnimationFrame是浏览器自带的api,传入参数为动画效果的执行函数. 因为是浏览器自带的函数,所以执行动画的频率和浏览器显示频率是一致的(目前大部分浏览器显示频率为16.7ms,即1000/60ms),并且在切换到别的tab页之后,也就是页面没被激活时是不执行动画的.和setInterval setT

解决在圆形内做动画而不超出圆外的解决办法

注意:此次动画的目的是在圆内做动画,而动画效果不会超出圆的范围外 在制作这个效果的时候,我一开始想到的就是以下的做法: CSS: .circle{width: 200px;height: 200px;border-radius: 200px;background: rgba(0,0,0,0.5);overflow: hidden;position: absolute;} .text{position: absolute;top: 0;left: 0;-webkit-transform:trans

动态创建的元素怎么做动画

要做动画,一般都是要获取元素的一些基本属性,比如宽,高,颜色等 但是对于动态创建的元素,是不能获取这些属性的 只有插入到dom中,经过渲染才能获取这些属性 但是一旦插入到dom当中,先获取在改变就会有跳动的效果 为了避免这种情况,有两种解决方案 一种是将元素设置绝对定位,获取之后然后在放到正确位置,这种情况一般用在弹出框的居中显示中 一种是将元素设置成visibility:hidden;overflow:hidden;height:0; 然后获取scorllHeight,scrollWidth

UIImageView做动画

UIImageView *_dogImageView = [[UIImageView alloc] init]; _dogImageView.frame = CGRectMake(0, 100, 300, 200); [self.view addSubview:_dogImageView]; NSMutableArray* imageArray = [[NSMutableArray alloc] init]; for (int i = 1; i <= 20; ++i) {    NSString