南京創(chuàng)維信息技術(shù)研究院有限公司 何國(guó)敏　周子安

基于Cocos2D-x的數(shù)字電視epg實(shí)現(xiàn)

南京創(chuàng)維信息技術(shù)研究院有限公司 何國(guó)敏周子安

本文主要介紹使用Cocos2D-x實(shí)現(xiàn)數(shù)字電視epg展示功能。epg展示是用戶觀看所有電視節(jié)目的主要渠道，通過(guò)查看epg可實(shí)現(xiàn)電視節(jié)目預(yù)約觀看功能，良好的epg展示風(fēng)格和流暢的操作性極大的提高了用戶體驗(yàn)。

Cocos2D-x epg；電視

0　引言

使用Cocos2D-x實(shí)現(xiàn)數(shù)字電視epg展示，開(kāi)發(fā)迅速且移植方便，可快速應(yīng)用于不同機(jī)型電視平臺(tái)，減少代碼的重復(fù)開(kāi)發(fā)。實(shí)現(xiàn)效果經(jīng)測(cè)試驗(yàn)證，UI運(yùn)行穩(wěn)定，操作流暢，大大提高了用戶體驗(yàn)。后續(xù)可繼續(xù)研究電視其他模塊UI實(shí)現(xiàn)方法，完善整套電視UI系統(tǒng)。

Cocos2D引擎是一個(gè)由阿根廷人Ricardo Quesada為主要開(kāi)發(fā)者的開(kāi)源項(xiàng)目［1-2］，其主要特點(diǎn)是易于使用，高效，靈活，免費(fèi)，跨平臺(tái)支持。Cocos2D-x提供眾多的控件方便開(kāi)發(fā)者使用，可快速實(shí)現(xiàn)電視展示相關(guān)代碼。常用的控件有圖像控件（ImageView）、文本控件（Label）、按鈕控件（Button）、表格控件（TableView）［3-4］。

數(shù)字電視epg展示是電視重要功能，通過(guò)epg展示，用戶不僅可以快速查看所有電視節(jié)目，還可以方便的選擇用戶喜歡的節(jié)目觀看，對(duì)于還沒(méi)有播出的節(jié)目，更是可以直接預(yù)約觀看。因此，epg展示效果及操作的流暢性直接影響用戶體驗(yàn)。Cocos2D-x基于OpenGL ES進(jìn)行圖形渲染，從而讓設(shè)備的GPU性能發(fā)揮到極致，UI動(dòng)畫效果以及操作流暢都能達(dá)到極佳。epg展示采用二維不定長(zhǎng)表格展示，可同時(shí)顯示多個(gè)臺(tái)的節(jié)目信息，根據(jù)節(jié)目時(shí)長(zhǎng)設(shè)置節(jié)目表格長(zhǎng)度，可快速找到對(duì)應(yīng)時(shí)間下所有節(jié)目。設(shè)計(jì)效果如圖1所示。

圖1　epg展示效果圖

1　二維表格實(shí)現(xiàn)

為實(shí)現(xiàn)epg二維表格設(shè)計(jì)，選用Cocos2D-x 3.10版本自有控件TableView為基類，由于此控件為一維表格，需要在此基類上實(shí)現(xiàn)二維表格GridView類。將原來(lái)TableView的表格位置變量_vCellsPositions由原來(lái)的std：：vector＜float＞修改為std：：vector＜cocos2d：：Vec2＞型，新的類型可描述每個(gè)表格的起始位置坐標(biāo)（x，y）信息。修改TableView頭文件，將修將更新表格位置信息方法（_updateCellPositions）、坐標(biāo)值與表格索引值轉(zhuǎn)換等方法（__indexFromOffset、_indexFromOffset、__offsetFromIndex、_offsetFromIndex）改為虛方法，由GridView類繼承重新實(shí)現(xiàn)以滿足二維表格繪制。_updateCellPositions方法新實(shí)現(xiàn)代碼如圖2所示，_updateCellPositions方法是實(shí)現(xiàn)二維表格的關(guān)鍵，將表格的坐標(biāo)信息記錄至vector變量_vCellsPositions內(nèi)，表格繪制時(shí)取出使用。增加表格滾動(dòng)方法cocos2d：：Vec2 scrollToIndex（int idx），實(shí)現(xiàn)遙控器交互時(shí)滾動(dòng)到當(dāng)前焦點(diǎn)表格。

圖2　表格位置信息方法更新代碼實(shí)現(xiàn)

2　epg展示實(shí)現(xiàn)

根據(jù)epg效果設(shè)計(jì)，epg展示主要分為時(shí)間表頭實(shí)現(xiàn)，頻道名稱表頭實(shí)現(xiàn)，epg內(nèi)容表格實(shí)現(xiàn)。遙控器交互時(shí)，時(shí)間表頭和頻道名稱表頭一直顯示，并根據(jù)epg內(nèi)容的顯示滾動(dòng)而滾動(dòng)。時(shí)間表頭采用橫向TableView實(shí)現(xiàn)，頻道名稱表頭采用縱向TableView實(shí)現(xiàn)，epg內(nèi)容采用雙向滾動(dòng)GridView實(shí)現(xiàn)。當(dāng)用戶遙控器進(jìn)入epg界面，獲取從當(dāng)前臺(tái)及之后的六個(gè)臺(tái)從當(dāng)前時(shí)間開(kāi)始的所有節(jié)目?jī)?nèi)容，根據(jù)每個(gè)節(jié)目時(shí)長(zhǎng)更新epg內(nèi)容表格GridView各個(gè)表格的位置坐標(biāo)信息，調(diào)用GridView的reloadData方法即可繪制當(dāng)前頁(yè)epg內(nèi)容。使用遙控器上下左右鍵可更新表格內(nèi)容。左右鍵可更新不同時(shí)間點(diǎn)節(jié)目顯示，當(dāng)用戶按遙控器左右鍵后，epg不在表格顯示范圍時(shí)，可調(diào)用GridView的scrollToIndex方法滾動(dòng)表格更新顯示，同時(shí)聯(lián)動(dòng)時(shí)間表頭和頻道名稱表頭滾動(dòng)。上下鍵可更新不同頻道的節(jié)目顯示，當(dāng)用戶按遙控器上下鍵后，重新獲取新增頻道節(jié)目?jī)?nèi)容，并調(diào)用GridView的_updateCellPositions方法更新新增epg內(nèi)容表格的位置坐標(biāo)信息，然后調(diào)用scrollToIndex方法滾動(dòng)表格更新顯示。

3　結(jié)束語(yǔ)

［1］霍常偉.基于Cocos2D-x引擎的移動(dòng)游戲UI系統(tǒng)設(shè)計(jì)及應(yīng)用［D］.北京交通大學(xué)，2012.

［2］滿碩泉.Cocos2D-x權(quán)威指南［M］.機(jī)械工業(yè)出版社，2013.

［3］劉劍卓.Cocos2D-x游戲開(kāi)發(fā)技術(shù)精解［M］.人民郵電出版社，2013.

［4］馮立鵬.Cocos2-x入門經(jīng)典［M］.人民郵電出版社，2014.