(NO.00004)iOS实现打砖块游戏(二):实现游戏主界面动画
2015-11-28 11:24
405 查看
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处.
如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;)
一个内容不错的游戏也要一个好的包装.玩家进入游戏时第一眼看到的是将是游戏的主界面,如何生动的展示一个具有吸引力的界面就是本篇的主题.当然这里无法和商业游戏的主界面相比的,只是展示一下不用写什么代码,也可以把主界面做的比较活泼.
![](https://oscdn.geek-share.com/Uploads/Images/Content/201511/a80d88f11b71a9d139160b7c4d22f2d2)
按照以下布局,从控件库中将对应控件拖入场景,效果如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201511/5e5f8149f45dd85fcd22969fb3a5994a)
从上到下依次有4个元素,分别是:游戏名,版本号,开始按钮和小标题.下面我们看如何让它们生动起来 ;)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201511/f598e0d4a52ef4d5b8e82c7163b93d9d)
分别设置游戏名标签的Position和Skew(扭曲)动画如下所示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201511/e1e4d15554bc169f4308b7d2f8a65f12)
然后在对应合适的时间点,分别设置好后面3个元素的动画,依次为:Visible,Position和Opacity:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201511/22828394203bea071a83738de3964267)
我们可以播放并不断调整效果,最终的效果如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201511/a98085331a93e57e33c05577260a774f)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201511/b99b0ac143295a8b691461486a79ccef)
时长也设置为5秒,我们设置好游戏名和小标题标签的渐变色效果,同时将线性渐变改为非线性渐变:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201511/6452a283906374601286eaaf7876df82)
完成效果如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201511/2a26489205112b7a02a4e6a4d1a0255a)
现在发布项目,打开Xcode,编译运行app,主界面效果显示如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201511/819dd9d6862f7ee8977d03e336fb4baf)
就这样一个简单的主界面动画效果完成了,我们还没有写一行代码哦 ;)
如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;)
一个内容不错的游戏也要一个好的包装.玩家进入游戏时第一眼看到的是将是游戏的主界面,如何生动的展示一个具有吸引力的界面就是本篇的主题.当然这里无法和商业游戏的主界面相比的,只是展示一下不用写什么代码,也可以把主界面做的比较活泼.
在主界面上添加静态元素
打开SpriteBuilder中的MainScene.ccb文件,将原有控件统统删掉,这时场景变得黑漆漆的一片.不要紧,我们马上给它加一个可爱的背景图案,将bg.png拖入场景中:按照以下布局,从控件库中将对应控件拖入场景,效果如下:
从上到下依次有4个元素,分别是:游戏名,版本号,开始按钮和小标题.下面我们看如何让它们生动起来 ;)
动画效果一:元素归位
首先将默认的Timeline时长设置为5秒,启用自动播放:分别设置游戏名标签的Position和Skew(扭曲)动画如下所示:
然后在对应合适的时间点,分别设置好后面3个元素的动画,依次为:Visible,Position和Opacity:
我们可以播放并不断调整效果,最终的效果如下:
动画效果二:元素变色
新建一个动画集名称为Color Loop:时长也设置为5秒,我们设置好游戏名和小标题标签的渐变色效果,同时将线性渐变改为非线性渐变:
完成效果如下:
现在发布项目,打开Xcode,编译运行app,主界面效果显示如下:
就这样一个简单的主界面动画效果完成了,我们还没有写一行代码哦 ;)
相关文章推荐
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 我是运营,我没有假期
- 不可修补的 iOS 漏洞可能导致 iPhone 4s 到 iPhone X 永久越狱
- iOS 12.4 系统遭黑客破解,漏洞危及数百万用户
- 每日安全资讯:NSO,一家专业入侵 iPhone 的神秘公司
- 每个 Linux 游戏玩家都绝不想要的恼人体验
- [转][源代码]Comex公布JailbreakMe 3.0源代码
- 在 Fedora 上使用 Steam play 和 Proton 来玩 Windows 游戏
- Steam 让我们在 Linux 上玩 Windows 的游戏更加容易
- 如何使用 Steam Play 在 Linux 上玩仅限 Windows 的游戏
- 新一代iPad适配应用之游戏篇
- VB实现的《QQ美女找茬游戏》作弊器实例
- C#实现洗牌游戏实例
- C#实现的算24点游戏算法实例分析
- C#实现简单的井字游戏实例
- C++编写简单的打靶游戏
- C++实现基于控制台界面的吃豆子游戏
- 纯javascript实现的小游戏《Flappy Pig》实例