这篇文章中,我们将做个简单的登录界面,实现这样的效果,无限滚动的背景,上面有两个小鸟在飞翔,一个登录按钮,按钮上面有两个人物在奔跑。

目前项目的整体效果如下图:

模仿天天酷跑(二)做个登录界面

OK~~~开始,第一步,我们先新建一个空工程,如下图: 

模仿天天酷跑(二)做个登录界面

接着我们新建几个文件夹,比如预设体、场景、纹理、动画、声音等,做好分类,如下图:

模仿天天酷跑(二)做个登录界面

我们把我们需要的资源放进去,一张背景图,还有人物跑动的图,小鸟的图,还有bgm背景音乐,但注意,从网上down的资源里只有大图,没有对应的plist文件,就无法计算切割大图里的各个小图。我们先用PS处理下大图,如下图:

模仿天天酷跑(二)做个登录界面

使用切片工具把大图切成各个小图,保存,然后我们用TP软件把各个小图合成大图跟对应的plist文件,如下图:

模仿天天酷跑(二)做个登录界面

导出格式我们选cocos2d-x,可以看到会生成一张纹理大图跟对应的plist文件,接下来我们把所需的资源都导到项目工程里,如下图:

模仿天天酷跑(二)做个登录界面

资源导入后,我们新建一个场景,叫Menu,点击Canvas,我们将设计分辨率改成1134*750,iphone6的分辨率,

模仿天天酷跑(二)做个登录界面

接下来我们需要加个背景,直接把背景纹理拖进去,用矩形变换工具等比例改变图的大小,就是放大,大小超出紫色框,紫色框就是我们可见的屏幕范围,如下图:

模仿天天酷跑(二)做个登录界面

但这样只是背景不动,体验会差点,所以我们做个背景无限滚动的效果。首先,我们新建一个空节点,叫bg,拖两张一样的背景图到bg里,分别叫bg1,bg2,调整位置,无缝连接在一起,如下图:

模仿天天酷跑(二)做个登录界面

然后我们给节点bg添加一个animation组件,并且新建一个动画clip,叫做menu_bg_loop_clip,把clip拖进animation组件中,Play On Load打钩,如下图:

模仿天天酷跑(二)做个登录界面

然后我们点击动画编辑器,打开左上角的开启编辑模式,点击属性列表的➕,我们选x,水平移动属性,加入关键帧,需要移动的位置,模式选loop,修改sample跟speed可以调整动画运行,速度如下图:

模仿天天酷跑(二)做个登录界面

不过感觉还是单调了点,我们加入两只飞翔的小鸟,这样的话,就感觉生动了许多。首先,我们加个一个精灵,叫birds1,给它加上两个动画组件,小鸟有两个动画,一个是自身扇翅膀的动画,一个是位移的动画,然后创建两个clip,分别叫birds_fly_clip,birds_move_clip,如下图:

模仿天天酷跑(二)做个登录界面

首先我们编辑鸟自身的动画,其实就是添加帧动画,属性列表添加spriteFrame,如下图:

模仿天天酷跑(二)做个登录界面

然后就是添加位移动画了,这个可以随便自己定义位置,第一个只鸟我们只是移动位置x,然后我们把鸟拖进Preb中,做成预设体,同理第二只鸟也是一样的操作,位移动画我们可以跟第一只鸟不一样,同样做成预设体,,如下图:

模仿天天酷跑(二)做个登录界面

然后我们添加一个button,如下图:

模仿天天酷跑(二)做个登录界面

接下来,我们在按钮上添加两个精灵,分别叫p1,p2,它们会做一个奔跑的动画,帧动画的添加从上同那样操作就可以,如下图:

模仿天天酷跑(二)做个登录界面

OK,差不多了,这样我们不用写一行代码,看看效果如何:

模仿天天酷跑(二)做个登录界面

我感觉还行,就是gif效果不好~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

分类:

技术点:

相关文章: