青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 8（登陆界面）

继上一次介绍了《神奇的六边形》的完整游戏开发流程后（可点击这里查看），这次将为大家介绍另外一款魔性游戏《跳跃的方块》的完整开发流程。

          （点击图片可进入游戏体验）

因内容太多，为方便大家阅读，所以分多次来讲解。

若要一次性查看所有文档，也可点击这里。

接上回（《跳跃的方块》Part 7）

五. 界面控制

界面间的切换逻辑

使用一个类来专门负责各个不同界面间切换的逻辑。新建脚本UIManager.js，并将其加载到UIRoot上，内容如下：

var UIManager = qc.defineBehaviour('qc.JumpingBrick.UIManager', qc.Behaviour, function() {
    var self = this;
    JumpingBrick.uiManager = self;
}, {
    welcome: qc.Serializer.NODE,
    logining: qc.Serializer.NODE,
    gamePanel: qc.Serializer.NODE,
    gameOver: qc.Serializer.NODE,
    announcement: qc.Serializer.NODE,
    crop: qc.Serializer.NODE
});

UIManager.Welcome = 0;
UIManager.Logining = 1;
UIManager.Game = 2;
UIManager.GameOver = 3;
UIManager.Announcement = 4;

UIManager.prototype.awake = function() {
    this.switchStateTo(UIManager.Welcome);
};

/**
 * 切换状态
 */
UIManager.prototype.switchStateTo = function(state) {
    var self = this;
    JumpingBrick.game.time.frameRate = 30;
    self.welcome.visible = state === UIManager.Welcome;
    if (self.welcome.visible) {
        JumpingBrick.data.logout();
        JumpingBrick.data.buildShareContent(-1);
    }
    self.logining.visible = state === UIManager.Logining;
    self.gamePanel.visible = state === UIManager.Game;
    if (self.gamePanel.visible) {
        JumpingBrick.gameControl.switchState(qc.JumpingBrick.GameControl.STATE_MANUEL);
        JumpingBrick.gameControl.restoreGameState();
        JumpingBrick.gameControl.resetFPS();
        // 缩小Logo
        qc.Tween.playGroupForward(self.crop, 1);
    }
    else {
        // 还原Logo
        qc.Tween.playGroupReverse(self.crop, 1);
    }

    self.gameOver.visible = state === UIManager.GameOver;
    if (self.gameOver.visible) {
        JumpingBrick.gameOver.refresh();
    }
    self.announcement.visible = state === UIManager.Announcement;
    if (self.announcement.visible) {
        self.announcement.getScript('qc.JumpingBrick.Announcement').updateRank();
    }
};

功能界面

游戏界面已经在前面完成，这里还需要以下界面：

• 登陆界面
• 登陆等待界面
• 结算界面
• 排行榜界面
• 界面管理

（一）登陆界面

登陆界面的设计如下图： 

 

为了保证实现效果，有几点需要注意：

1. 所有的显示内容，应该是基于水平中线布局。
2. 因为要求在微信中打开游戏时，隐藏快速登录的按钮，所以将两个按钮置于一个TableLayout中，让其自适应布局来调整位置。

控制脚本

创建登陆界面的控制脚本：Welcome.js。内容如下：

var Welcome = qc.defineBehaviour('qc.JumpingBrick.Welcome', qc.Behaviour, function() {

}, {
    quickLogin: qc.Serializer.NODE,
    wechatLogin: qc.Serializer.NODE
});

Welcome.prototype.awake = function() {
    var self = this;

    self.quickLogin && self.addListener(self.quickLogin.onClick, self.doQuickLogin, self);
    self.wechatLogin && self.addListener(self.wechatLogin.onClick, self.doWechatLogin, self);
};

Welcome.prototype.update = function() {
    var self = this;
    if (self.quickLogin.visible && JumpingBrick.data.isWeChat()) {
        self.quickLogin.visible = false;
        self.quickLogin.parent.getScript('qc.TableLayout').relayout();
    }
};

// 快速登陆
Welcome.prototype.doQuickLogin = function() {
    JumpingBrick.data.quickLogin();
};

// 微信登陆
Welcome.prototype.doWechatLogin = function() {
    JumpingBrick.data.wechatLogin();
};

 

构建登录界面

创建登录界面的根节点welcome，便于对界面进行整体控制。并将Welcome脚本加载到welcome节点上，关联快速登陆和微信登陆按钮。

下次将继续介绍“登陆等待界面”，敬请期待！

其他相关链接

开源免费的HTML5游戏引擎——青瓷引擎(QICI Engine) 1.0正式版发布了！

JS开发HTML5游戏《神奇的六边形》（一）

青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 1