热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part10(排行榜界面&界面管理)...

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

青瓷引擎之纯Javascript打造HTML5游戏第二弹——《跳跃的方块》Part 10(排行榜界面&界面管理)...

          (点击图片可进入游戏体验)

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

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

 

接上回(《跳跃的方块》Part 9

 

(四)排行榜界面

排行榜榜单元素

排行榜的榜单也是一个TableView,所以我们先建立一个榜单元素的控制脚本:RankItem.js。

 1 // define a user behaviour
 2 var RankItem = qc.defineBehaviour('qc.JumpingBrick.RankItem', qc.Behaviour, function() {
 3     // need this behaviour schedule in editor
 4     //this.runInEditor = true;
 5 }, {
 6     positionImg : qc.Serializer.NODE,
 7     positionText : qc.Serializer.NODE,
 8     nameText : qc.Serializer.NODE,
 9     score : qc.Serializer.NODE,
10     head : qc.Serializer.NODE,
11     headBack : qc.Serializer.NODE,
12     scoreBack : qc.Serializer.NODE
13 });
14 
15 RankItem._position = [
16     'first.png',
17     'second.png',
18     'third.png'
19 ];
20 
21 RankItem._textTint = [
22     0xffb16742,
23     0xff2899a7,
24     0xffa5b471,
25     0xff876712
26 ];
27 
28 RankItem._headBack = [
29     'list_head_org.png',
30     'list_head_blu.png',
31     'list_head_green.png',
32     'list_head_yel.png'
33 ];
34 
35 RankItem._infoBack = [
36     'list_bak_org.png',
37     'list_bak_blu.png',
38     'list_bak_green.png',
39     'list_bak_yel.png'
40 ];
41 
42 // Awake is called when the script instance is being loaded.
43 RankItem.prototype.awake = function() {
44 
45 };
46 
47 RankItem.prototype.revoke = function() {
48     var self = this;
49     if (self.headKey) {
50         // 清理资源
51         self.game.assets.unload(self.headKey);
52         self.headKey = null;
53     }
54 };
55 
56 // Update is called every frame, if the behaviour is enabled.
57 RankItem.prototype.refreshData = function(index, data, cache) {
58     // 更新信息
59     var self = this;
60     self.headBack.frame = RankItem._headBack[index <4 ? (index - 1) : 3];
61     self.scoreBack.frame = RankItem._infoBack[index <4 ? (index - 1) : 3];
62     if (index <4) {
63         self.positionImg.visible = true;
64         self.positionImg.frame = RankItem._position[index - 1];
65         self.positionText.visible = false;
66         self.nameText.stroke = new qc.Color(RankItem._textTint[index - 1]);
67         self.score.stroke = new qc.Color(RankItem._textTint[index - 1]);
68     }
69     else {
70         self.positionImg.visible = false;
71         self.positionText.visible = true;
72         self.positionText.text = index.toString();
73         self.nameText.stroke = new qc.Color(RankItem._textTint[3]);
74         self.score.stroke = new qc.Color(RankItem._textTint[3]);
75     }
76 
77     // 载入头像
78     // 获取64 * 64的头像尺寸
79     if (data.headurl) {
80         if (self.headKey) {
81             // 清理资源
82             self.game.assets.unload(self.headKey);
83         }
84         self.headKey = data.headurl;
85         self.game.assets.loadTexture(self.headKey, data.headurl + '64', function(assets) {
86             self.head.texture = assets;
87             if (cache) {
88                 cache.dirty = true;
89             }
90         });        
91     }
92     self.nameText.text = data.name;
93     self.score.text = data.score.toString();
94 };

 

创建榜单预制:sort_score.bin。并和脚本进行关联:

青瓷引擎之纯Javascript打造HTML5游戏第二弹——《跳跃的方块》Part 10(排行榜界面&界面管理)... 

 

 其中mask使用Pixel模式,使用自己的本身图片的透明通道作为子节点的透明通道,设置如下:

 青瓷引擎之纯Javascript打造HTML5游戏第二弹——《跳跃的方块》Part 10(排行榜界面&界面管理)...

排行榜界面

  • 管理脚本 使用ViewTable来管理榜单节点,需要提供TableViewAdapter来提供数据。创建一个Announcement.js,用来提供数据并管理界面。内容如下:
  1 /**
  2  * 排行榜界面
  3  */
  4 var Announcement = qc.defineBehaviour('qc.JumpingBrick.Announcement', com.qici.extraUI.TableViewAdapter, function() {
  5 
  6 }, {
  7     closeButton: qc.Serializer.NODE,
  8     showPanel : qc.Serializer.NODE,
  9     myDesc : qc.Serializer.NODE,
 10     myPosition : qc.Serializer.NODE,
 11     myHeadPanel : qc.Serializer.NODE,
 12     myHead : qc.Serializer.NODE,
 13     myName : qc.Serializer.NODE,
 14     myScore : qc.Serializer.NODE
 15 });
 16 
 17 Announcement.prototype.awake = function() {
 18     var self = this,
 19         data = JumpingBrick.data;
 20     self.addListener(self.closeButton.onClick, self.returnToGameOver, self);
 21     self.addListener(self.gameObject.onClick, self.returnToGameOver, self);
 22     self.addListener(self.showPanel.onClick, function() {}, self);
 23     self.addListener(data.onRankUpdate, self.receiveRankData, self);
 24 };
 25 
 26 /**
 27  * 返回游戏结算界面
 28  */
 29 Announcement.prototype.returnToGameOver = function() {
 30     var self = this;
 31     if (self.headKey) {
 32         self.game.assets.unload(self.headKey);
 33     }
 34     JumpingBrick.uiManager.switchStateTo(qc.JumpingBrick.UIManager.GameOver);
 35 };
 36 
 37 // 请求排行榜数据
 38 Announcement.prototype.updateRank = function() {
 39     var data = JumpingBrick.data;
 40     data.queryRank();
 41 };
 42 
 43 /**
 44  * 收到排行榜数据
 45  */
 46 Announcement.prototype.receiveRankData = function(data) {
 47     var self = this;
 48     // 更新自己的信息
 49     var selfData = data.selfRank;
 50     if (!selfData) {
 51         self.myPosition.text = '请登录游戏后查看';
 52         self.myHeadPanel.visible = false;
 53         self.myName.visible = false;
 54         self.myScore.visible = false;
 55         self.myDesc.visible = false;
 56     }
 57     else {
 58         self.myPosition.text = selfData.ranking ? selfData.ranking.toString() : '未上榜';
 59         self.myHeadPanel.visible = true;
 60         self.myDesc.visible = true;
 61 
 62         // 获取64 * 64的头像尺寸
 63         if (selfData.headurl) {
 64             if (self.headKey) {
 65                 self.game.assets.unload(self.headKey);
 66             }
 67             self.headKey = selfData.headurl;
 68             self.game.assets.loadTexture(self.headKey, selfData.headurl + '64', function(assets) {
 69                 self.myHead.texture = assets;
 70             });        
 71         }
 72         self.myName.text = selfData.name;
 73         self.myScore.text = selfData.scorers.toString();
 74     }
 75 
 76     var rankTop = data.rankTop;
 77     self.rankTop = rankTop;
 78 
 79     self.dispatchDataChange();
 80 };
 81 
 82 
 83 /**
 84  * 获取表格大小,x、y同时只能有一个为Infinity
 85  */
 86 Announcement.prototype.getTableSize = function() {
 87     return { x: 1, y: this.rankTop ? this.rankTop.length : 0 };
 88 };
 89 
 90 /**
 91  * 根据在Table中的点返回对应的单元格
 92  * @param  {number} x - x轴坐标
 93  * @param  {number} y - y轴坐标
 94  */
 95 Announcement.prototype.findCellWithPos = function(x, y) {
 96     return {
 97         x: Math.floor(x / 540),
 98         y: Math.floor(y / 90)
 99     };
100 };
101 
102 /**
103  * 获取节点的显示位置
104  */
105 Announcement.prototype.getCellRect = function(col, row) {
106     return new qc.Rectangle(col * 540, row * 90, 540, 90);
107 };
108 
109 /**
110  * 节点处于不可见时,回收节点,
111  * @param  {qc.Node} cell - 节点
112  * @param  {number} col - 所在列
113  * @param  {number} row - 所在行
114  */
115 Announcement.prototype.revokeCell = function(cell, col, row) {
116     cell.getScript('qc.JumpingBrick.RankItem').revoke();
117 };
118 
119 /**
120  * 节点处于可见时,创建节点,
121  * @param  {qc.Node} cell - 节点
122  * @param  {number} col - 所在列
123  * @param  {number} row - 所在行
124  */
125 Announcement.prototype.createCell = function(cell, col, row) {
126     if (this.rankTop) {
127         cell.getScript('qc.JumpingBrick.RankItem').refreshData(row + 1, this.rankTop[row]);
128     }
129 };

 

  • 排行榜根节点 排行榜界面是一个固定大小的窗口,如果还是按游戏的方式以高度为准,可能在有些设备上就会超出屏幕区域。 所以,为了排行榜,需要再建立一个UIRoot,命名为announcement,Manual Type类型为Expand,建议的宽高还是设计使用的(640, 960)。 如图所示:

青瓷引擎之纯Javascript打造HTML5游戏第二弹——《跳跃的方块》Part 10(排行榜界面&界面管理)...

 

 为了适应屏幕旋转,还是需要为announcement节点添加一个锁屏的组件。如图所示:

青瓷引擎之纯Javascript打造HTML5游戏第二弹——《跳跃的方块》Part 10(排行榜界面&界面管理)...

 

  • 界面展示及脚本关联 在锁屏组件下开始拼界面,并将Announcement.js加到announcement节点上。如图所示: 

 青瓷引擎之纯Javascript打造HTML5游戏第二弹——《跳跃的方块》Part 10(排行榜界面&界面管理)...

其中tableView的脚本挂载scrollView节点上,配置如下:

青瓷引擎之纯Javascript打造HTML5游戏第二弹——《跳跃的方块》Part 10(排行榜界面&界面管理)... 

 

五)界面管理

基本界面都已经做好,将这些界面节点同UIManager关联起来,设置如图所示:

青瓷引擎之纯Javascript打造HTML5游戏第二弹——《跳跃的方块》Part 10(排行榜界面&界面管理)... 

 

这样界面部分也就都完成了。

 

结束语

到这里,所有的游戏功能开发已经全部完成了。总体的开发思路和时间安排是这样:

  1. 从设计方案出发,提炼配置。
  2. 优先完成主体玩法,尽早进行玩法迭代。
  3. 再逐步完善数据处理和界面逻辑。

 

感谢各位坚持看到最后,《跳跃的方块》到此就分享完了。若对工程示例或引擎的使用有任何问题,请一定告诉我们,我们会不断努力,继续完善。以后还将陆续分享其他好游戏的开发经验,望大家继续关注,谢谢!

 

其他相关链接

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

JS开发HTML5游戏《神奇的六边形》(一)

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

 
 


推荐阅读
  • 本文详细介绍了 PHP 中对象的生命周期、内存管理和魔术方法的使用,包括对象的自动销毁、析构函数的作用以及各种魔术方法的具体应用场景。 ... [详细]
  • 本文介绍了在 Java 编程中遇到的一个常见错误:对象无法转换为 long 类型,并提供了详细的解决方案。 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • 思科IOS XE与ISE集成实现TACACS认证配置
    本文详细介绍了如何在思科IOS XE设备上配置TACACS认证,并通过ISE(Identity Services Engine)进行用户管理和授权。配置包括网络拓扑、设备设置和ISE端的具体步骤。 ... [详细]
  • 开机自启动的几种方式
    0x01快速自启动目录快速启动目录自启动方式源于Windows中的一个目录,这个目录一般叫启动或者Startup。位于该目录下的PE文件会在开机后进行自启动 ... [详细]
  • 第二十五天接口、多态
    1.java是面向对象的语言。设计模式:接口接口类是从java里衍生出来的,不是python原生支持的主要用于继承里多继承抽象类是python原生支持的主要用于继承里的单继承但是接 ... [详细]
  • 本文介绍了如何利用 `matplotlib` 库中的 `FuncAnimation` 类将 Python 中的动态图像保存为视频文件。通过详细解释 `FuncAnimation` 类的参数和方法,文章提供了多种实用技巧,帮助用户高效地生成高质量的动态图像视频。此外,还探讨了不同视频编码器的选择及其对输出文件质量的影响,为读者提供了全面的技术指导。 ... [详细]
  • 本文介绍了如何使用Python的Paramiko库批量更新多台服务器的登录密码。通过示例代码展示了具体实现方法,确保了操作的高效性和安全性。Paramiko库提供了强大的SSH2协议支持,使得远程服务器管理变得更加便捷。此外,文章还详细说明了代码的各个部分,帮助读者更好地理解和应用这一技术。 ... [详细]
  • 在PHP中如何正确调用JavaScript变量及定义PHP变量的方法详解 ... [详细]
  • 2.2 组件间父子通信机制详解
    2.2 组件间父子通信机制详解 ... [详细]
  • 实验九:使用SharedPreferences存储简单数据
    本实验旨在帮助学生理解和掌握使用SharedPreferences存储和读取简单数据的方法,包括程序参数和用户选项。 ... [详细]
  • Basic微分方程Whatis形如\(F(x,y,y',,y^{(n)})0\)求\(yf(x,y)\)阶:方程中导数的最高阶数解:yy(x)通解:\(yy(x,C ... [详细]
  • 本文详细介绍了 InfluxDB、collectd 和 Grafana 的安装与配置流程。首先,按照启动顺序依次安装并配置 InfluxDB、collectd 和 Grafana。InfluxDB 作为时序数据库,用于存储时间序列数据;collectd 负责数据的采集与传输;Grafana 则用于数据的可视化展示。文中提供了 collectd 的官方文档链接,便于用户参考和进一步了解其配置选项。通过本指南,读者可以轻松搭建一个高效的数据监控系统。 ... [详细]
  • 在什么情况下MySQL的可重复读隔离级别会导致幻读现象? ... [详细]
  • MySQL的查询执行流程涉及多个关键组件,包括连接器、查询缓存、分析器和优化器。在服务层,连接器负责建立与客户端的连接,查询缓存用于存储和检索常用查询结果,以提高性能。分析器则解析SQL语句,生成语法树,而优化器负责选择最优的查询执行计划。这一流程确保了MySQL能够高效地处理各种复杂的查询请求。 ... [详细]
author-avatar
msf6688
PHP小白,请大神 们多多关照!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有