游戏界面制作---旋转的地球

 

做游戏的都希望玩家能够被自己的游戏吸引，所以一般进入游戏的第一个界面也就是首页，都会经过精心的设计，除了精美的画面外还要有一定数量的动画，这样才能更吸引玩家。

我最近参与的一款游戏也是在首页UI部分下足了功夫，但是传统上用太多复杂的动画的话会非常考验低配置机器的体验，就顺便研究了市面上流行的游戏设计。发现类似于转动的地球的动画元素被很多游戏用到，比如去年非常火的找你妹，还有一直排在排行榜上的捕鱼达人。如图：（渣图，请凑合看吧）

 

 

感觉这种看似简单的旋转能给人很好的视觉效果，配合精美的画工一定会让玩家流连忘返。（找你妹的风格我就不吐槽了···）

项目建立的时候cocostudio已经发布1.1版本了，经过对比，决定用它作为补充工具。基本做UI还算不错，虽然选型时用的版本偶尔崩溃，不过后来好很多，在升级到1.2又好了很多。我主要用的是UI编辑器，今天就利用这个编辑器讲下这种旋转地球的动画制作方法，东西简单，大家别见笑~（因为项目保密，我就不敢拿我的资源给大家搞了，就用捕鱼的吧，网上资源比较多~~）

首先这个界面分成了三个层，由下到上分别是：A:底图 B: 大气层  C:地球。

步骤：

1：先把这些图片弄到编辑器的渲染窗口中去。（我都用的是图片当做控件）

 

 

2：将所有的东西对准中心点（第二个十字形工具就是中心点对齐），当然像上面的找你妹中只显示一部分地球的就只需要对齐一部分图片即可。

 

3：切换到动画模式，选中B、C两层点击右键—》编辑动画

 

4：创建始末两帧，因为这个动画是一直循环的，所以只用始末两个关键帧就行了。这里注意下，我是先将两帧创建的很短，是为了便于编辑，改完属性后我会把后面的两个点往后拖动，我设置的大约在300，也就是30秒一完成这个动画。

 

5:给最后一个关键帧修改属性，分别选中四个关键帧（点那个小白点即可，两个图层要分别设置，点击也是要分开的，要么没法修改的哦~），接下来打开属性窗口（在菜单栏-）视图里找）分别修改两个图片的旋转角度。数值如下图。

 

 

OK，这样动画就已经完成了，勾选上“是否循环”点击“播放”就可以欣赏动画了~~

 

下图是程序中的效果：