基于Cocos2D-x的数字电视epg实现

2016-09-27南京创维信息技术研究院有限公司何国敏周子安

电子世界 2016年16期

关键词：控件遥控器频道

南京创维信息技术研究院有限公司何国敏　周子安

南京创维信息技术研究院有限公司何国敏周子安

本文主要介绍使用Cocos2D-x实现数字电视epg展示功能。epg展示是用户观看所有电视节目的主要渠道，通过查看epg可实现电视节目预约观看功能，良好的epg展示风格和流畅的操作性极大的提高了用户体验。

Cocos2D-x epg；电视

0　引言

使用Cocos2D-x实现数字电视epg展示，开发迅速且移植方便，可快速应用于不同机型电视平台，减少代码的重复开发。实现效果经测试验证，UI运行稳定，操作流畅，大大提高了用户体验。后续可继续研究电视其他模块UI实现方法，完善整套电视UI系统。

Cocos2D引擎是一个由阿根廷人Ricardo Quesada为主要开发者的开源项目［1-2］，其主要特点是易于使用，高效，灵活，免费，跨平台支持。Cocos2D-x提供众多的控件方便开发者使用，可快速实现电视展示相关代码。常用的控件有图像控件（ImageView）、文本控件（Label）、按钮控件（Button）、表格控件（TableView）［3-4］。

数字电视epg展示是电视重要功能，通过epg展示，用户不仅可以快速查看所有电视节目，还可以方便的选择用户喜欢的节目观看，对于还没有播出的节目，更是可以直接预约观看。因此，epg展示效果及操作的流畅性直接影响用户体验。Cocos2D-x基于OpenGL ES进行图形渲染，从而让设备的GPU性能发挥到极致，UI动画效果以及操作流畅都能达到极佳。epg展示采用二维不定长表格展示，可同时显示多个台的节目信息，根据节目时长设置节目表格长度，可快速找到对应时间下所有节目。设计效果如图1所示。

图1　epg展示效果图

1　二维表格实现

为实现epg二维表格设计，选用Cocos2D-x 3.10版本自有控件TableView为基类，由于此控件为一维表格，需要在此基类上实现二维表格GridView类。将原来TableView的表格位置变量_vCellsPositions由原来的std：：vector＜float＞修改为std：：vector＜cocos2d：：Vec2＞型，新的类型可描述每个表格的起始位置坐标（x，y）信息。修改TableView头文件，将修将更新表格位置信息方法（_updateCellPositions）、坐标值与表格索引值转换等方法（__indexFromOffset、_indexFromOffset、__offsetFromIndex、_offsetFromIndex）改为虚方法，由GridView类继承重新实现以满足二维表格绘制。_updateCellPositions方法新实现代码如图2所示，_updateCellPositions方法是实现二维表格的关键，将表格的坐标信息记录至vector变量_vCellsPositions内，表格绘制时取出使用。增加表格滚动方法cocos2d：：Vec2 scrollToIndex（int idx），实现遥控器交互时滚动到当前焦点表格。

图2　表格位置信息方法更新代码实现

2　epg展示实现

根据epg效果设计，epg展示主要分为时间表头实现，频道名称表头实现，epg内容表格实现。遥控器交互时，时间表头和频道名称表头一直显示，并根据epg内容的显示滚动而滚动。时间表头采用横向TableView实现，频道名称表头采用纵向TableView实现，epg内容采用双向滚动GridView实现。当用户遥控器进入epg界面，获取从当前台及之后的六个台从当前时间开始的所有节目内容，根据每个节目时长更新epg内容表格GridView各个表格的位置坐标信息，调用GridView的reloadData方法即可绘制当前页epg内容。使用遥控器上下左右键可更新表格内容。左右键可更新不同时间点节目显示，当用户按遥控器左右键后，epg不在表格显示范围时，可调用GridView的scrollToIndex方法滚动表格更新显示，同时联动时间表头和频道名称表头滚动。上下键可更新不同频道的节目显示，当用户按遥控器上下键后，重新获取新增频道节目内容，并调用GridView的_updateCellPositions方法更新新增epg内容表格的位置坐标信息，然后调用scrollToIndex方法滚动表格更新显示。