继上一次介绍了《神奇的六边形》的完整游戏开发流程后（可点击这里查看），这次将为大家介绍另外一款魔性游戏《跳跃的方块》的完整开发流程。
（点击图片可进入游戏体验）
因内容太多，为方便大家阅读，所以分多次来讲解。
若要一次性查看所有文档，也可点击这里。
接上回（《跳跃的方块》Part 7）
五. 界面控制
界面间的切换逻辑
使用一个类来专门负责各个不同界面间切换的逻辑。新建脚本UIManager.js，并将其加载到UIRoot上，内容如下：
1 var UIManager = qc.defineBehaviour('qc.JumpingBrick.UIManager', qc.Behaviour, function() { 2 var self = this; 3 JumpingBrick.uiManager = self; 4 }, { 5 welcome: qc.Serializer.NODE, 6 logining: qc.Serializer.NODE, 7 gamePanel: qc.Serializer.NODE, 8 gameOver: qc.Serializer.NODE, 9 announcement: qc.Serializer.NODE, 10 crop: qc.Serializer.NODE 11 }); 12 13 UIManager.Welcome = 0; 14 UIManager.Logining = 1; 15 UIManager.Game = 2; 16 UIManager.GameOver = 3; 17 UIManager.Announcement = 4; 18 19 UIManager.prototype.awake = function() { 20 this.switchStateTo(UIManager.Welcome); 21 }; 22 23 /** 24 * 切换状态 25 */ 26 UIManager.prototype.switchStateTo = function(state) { 27 var self = this; 28 JumpingBrick.game.time.frameRate = 30; 29 self.welcome.visible = state === UIManager.Welcome; 30 if (self.welcome.visible) { 31 JumpingBrick.data.logout(); 32 JumpingBrick.data.buildShareContent(-1); 33 } 34 self.logining.visible = state === UIManager.Logining; 35 self.gamePanel.visible = state === UIManager.Game; 36 if (self.gamePanel.visible) { 37 JumpingBrick.gameControl.switchState(qc.JumpingBrick.GameControl.STATE_MANUEL); 38 JumpingBrick.gameControl.restoreGameState(); 39 JumpingBrick.gameControl.resetFPS(); 40 // 缩小Logo 41 qc.Tween.playGroupForward(self.crop, 1); 42 } 43 else { 44 // 还原Logo 45 qc.Tween.playGroupReverse(self.crop, 1); 46 } 47 48 self.gameOver.visible = state === UIManager.GameOver; 49 if (self.gameOver.visible) { 50 JumpingBrick.gameOver.refresh(); 51 } 52 self.announcement.visible = state === UIManager.Announcement; 53 if (self.announcement.visible) { 54 self.announcement.getScript('qc.JumpingBrick.Announcement').updateRank(); 55 } 56 };
功能界面
游戏界面已经在前面完成，这里还需要以下界面：
- 登陆界面
- 登陆等待界面
- 结算界面
- 排行榜界面
- 界面管理
（一）登陆界面
登陆界面的设计如下图：
为了保证实现效果，有几点需要注意：
- 所有的显示内容，应该是基于水平中线布局。
- 因为要求在微信中打开游戏时，隐藏快速登录的按钮，所以将两个按钮置于一个TableLayout中，让其自适应布局来调整位置。
控制脚本
创建登陆界面的控制脚本：Welcome.js。内容如下：
1 var Welcome = qc.defineBehaviour('qc.JumpingBrick.Welcome', qc.Behaviour, function() { 2 3 }, { 4 quickLogin: qc.Serializer.NODE, 5 wechatLogin: qc.Serializer.NODE 6 }); 7 8 Welcome.prototype.awake = function() { 9 var self = this; 10 11 self.quickLogin && self.addListener(self.quickLogin.onClick, self.doQuickLogin, self); 12 self.wechatLogin && self.addListener(self.wechatLogin.onClick, self.doWechatLogin, self); 13 }; 14 15 Welcome.prototype.update = function() { 16 var self = this; 17 if (self.quickLogin.visible && JumpingBrick.data.isWeChat()) { 18 self.quickLogin.visible = false; 19 self.quickLogin.parent.getScript('qc.TableLayout').relayout(); 20 } 21 }; 22 23 // 快速登陆 24 Welcome.prototype.doQuickLogin = function() { 25 JumpingBrick.data.quickLogin(); 26 }; 27 28 // 微信登陆 29 Welcome.prototype.doWechatLogin = function() { 30 JumpingBrick.data.wechatLogin(); 31 };
构建登录界面
创建登录界面的根节点welcome，便于对界面进行整体控制。并将Welcome脚本加载到welcome节点上，关联快速登陆和微信登陆按钮。
下次将继续介绍“登陆等待界面”，敬请期待！
其他相关链接
开源免费的HTML5游戏引擎——青瓷引擎(QICI Engine) 1.0正式版发布了！
青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 1
