Quick Cocos2d x 觸控機制詳解

2021-06-28 08:00:09 字數 2222 閱讀 4461

cocos2d-x 原本的觸控機制存在一些限制,在使用中需要開發者做不少額外的處理。而且 cocos2d-x 的觸控事件是按照目標的優先順序來分派的,而不是按照目標的顯示層級來分派。

針對這個問題,quick-cocos2d-x 提出了自己的一套觸控機制。本文詳細介紹了這套新機制的實現原理和用法。

以下內容適用於 quick-cocos2d-x 2.2.1-rc 版本,新版觸控機制請參考新文件

我們知道 cocos2d-x 裡,整個遊戲的畫面是由一系列的 ccscene, ccnode, ccsprite, cclayer, ccmenu, ccmenuitem 等物件構成的。而所有這些物件都是從 ccnode 這個類繼承而來。我們可以將 ccnode 稱為 顯示節點 。

乙個遊戲畫面就是許多顯示節點構成的一棵 樹 ,如下圖:

在這棵樹里,ccnode 所處的垂直位置就是它們的 顯示層級 。越往上的 ccnode,其顯示層級就越高。從畫面表現上來說,下面的層是背景,上面的層是建築,那麼建築就會擋住一部分背景。

在 cocos2d-x 裡,只有 cclayer 物件才能接受觸控事件。而 cclayer 總是響應整個螢幕範圍內的觸控,這就要求開發者在拿到觸控事件後,再做進一步的處理。

例如有乙個需求是在玩家觸控螢幕上的方塊時,人物角色做乙個動作。那麼使用 cclayer 接受到觸控事件後,開發者需要自行判斷觸控位置是否在方塊之內。當螢幕上有很多東西需要響應玩家互動時,程式結構就開始變得複雜了。

所以 quick-cocos2d-x 允許開發者將任何乙個 ccnode 設定為接受觸控事件。並且觸控事件一開始只會出現在這個 ccnode 的 觸控區域 內。

這裡的觸控區域,就是乙個 ccnode 及其所有子 ccnode 顯示內容佔據的螢幕空間。要注意的是這個螢幕空間包含了的透明部分。下圖中,節點 a 是乙個 ccsprite 物件,它的觸控區域就是大小;而節點 b 是乙個 ccnode 物件,其中包含了三個 ccsprite 物件,那麼節點 b 的觸控區域就是三個 ccsprite 物件觸控區域的合集。

為了簡化實現,觸控區域都是乙個矩形,所以節點 b 的觸控區域實際上是乙個「包含三個 ccsprite 物件觸控區域合集的矩形」,可以參考上圖中的紅色邊框線。

現在,我們知道了顯示層級、觸控區域,那麼要讓任何 ccnode 都可以接受觸控事件就變得很簡單了:

由乙個管理者負責登記所有需要接受觸控事件的 ccnode

管理者響應全螢幕的觸控

觸控開始的時候,管理者對已經登記的 ccnode 按照顯示層級進行排序,然後依次檢查觸控位置是否在它們的觸控區域內。如果是,則將觸控事件傳遞給相應的 ccnode 物件。並且將這個 ccnode 物件記錄到乙個列表裡。這個列表稱為 可觸控節點列表。

觸控事件持續發生時,管理者將觸控事件傳送給列表中每乙個 ccnode 物件。

觸控事件結束時,管理者傳送事件給列表中的物件,然後清理列表,準備開始下一次觸控響應。

在目前的實現裡,這個管理者的角色,我們交給了 ccscene。

上面的流程為了描述方便,做了不少簡化,下面我們會用**來完整展示 quick-cocos2d-x 的觸控事件處理。

api 列表:

1

2

3

4

5

6

7

8

9

-- 建立乙個顯示物件

local sprite = display.newsprite("button.png")

-- 啟用觸控

sprite:settouchenabled(true)

-- 設定處理函式

sprite:addtoucheventlistener(function(event, x, y, prevx, prevy)

print(event, x, y, prevx, prevy)

returntrue-- 返回true表示這個 ccnode 在觸控開始後接受後續的事件

end)

QUICK COCOS2DX建立新專案

建立新專案之前,確保已經正確設定了quick cocos2dx root環境變數 啟動 終端 應用程式,然後進入需要放置新專案的目錄 cd desktop執行create project.sh命令,並指定專案的 package name quick cocos2dx root bin create ...

quick cocos2d x的Image使用方法

image的使用方法相對簡單。quick cocos2d x中可以指定該image是否使用9宮圖來進行渲染。不使用9宮格的image建立 local img cc.ui.uiimage.new test.png 使用9宮格的image建立 local img cc.ui.uiimage.new te...

quick cocos2d x建立工程

quick cocos2d x就不多說了。我是最近才了解到有這個專案的。了解後馬上從git上下了乙份zip的包。解壓後看到bin目錄裡有create project.bat檔案,肯定是用來建立專案用的。但是執行後無任何反應,開啟cmd再執行一次發現是缺少php執行環境所致。於是在下了乙份php的zi...