當(dāng)玩家購(gòu)買(mǎi)道具的時(shí)候，一個(gè)個(gè)買(mǎi)可能會(huì)比較麻煩，用數(shù)字調(diào)節(jié)框的話玩家一次性就可以買(mǎi)好幾十個(gè)了(錢(qián)夠的話)。

運(yùn)行效果如下：

Cocos Creator版本：2.2.0

公號(hào)"All Codes"后臺(tái)回復(fù)"數(shù)字調(diào)節(jié)框"，獲取該項(xiàng)目完整文件。

創(chuàng)建節(jié)點(diǎn)

以下是層級(jí)管理器截圖：

bg就是一個(gè)Sprite類型節(jié)點(diǎn)，作為屏幕背景，不用管。

SpinBox是一個(gè)Layout類型節(jié)點(diǎn)，用來(lái)布局輸入框和按鈕，方向?yàn)樗?#xff0c;Resize Mode為CONTAINER。

editbox節(jié)點(diǎn)就是編輯器自帶的輸入框(筆者將PLACEHOLDER_LABEL給刪除了)，這里給

buttons也是一個(gè)Layout類型節(jié)點(diǎn)，用來(lái)布局up和down兩個(gè)按鈕，方向?yàn)榇怪?#xff0c;Resize Mode為CONTAINER。

up和down是兩個(gè)按鈕(Label節(jié)點(diǎn)已被刪除)，分別用來(lái)調(diào)高和調(diào)低數(shù)字。

給輸入框和調(diào)高調(diào)低按鈕加上背景圖片后，場(chǎng)景編輯器顯示如下：

編寫(xiě)腳本

在資源管理器中創(chuàng)建一個(gè)名為SpinBox.js的腳本文件，將其掛到SpinBox節(jié)點(diǎn)上。

在properties中添加如下屬性：

// SpinBox.js

筆者的想法是開(kāi)發(fā)者能夠自己設(shè)置調(diào)節(jié)框所允許的最大最小值：

不過(guò)筆者這里將輸入框最大允許輸入的字符個(gè)數(shù)設(shè)為了2，也就是說(shuō)最大值也就是99了。當(dāng)然大家可以按照自身情況進(jìn)行修改：

輸入框一開(kāi)始應(yīng)該顯示最小值：

// SpinBox.js

因?yàn)檩斎肟蛳碌腡EXT_LABEL節(jié)點(diǎn)默認(rèn)是不可見(jiàn)的，所以這里要對(duì)該節(jié)點(diǎn)先進(jìn)行顯示。

以下是調(diào)高和調(diào)低按鈕的事件函數(shù)：

// SpinBox.js

• 如果玩家按下調(diào)高按鈕，那么首先判斷該按鈕是否超出最大值，是的話則無(wú)效，否則數(shù)字加1。
• 如果玩家按下調(diào)低按鈕，那么首先判斷該按鈕是否超出最小值，是的話則無(wú)效，否則數(shù)字減1。

最后是輸入框的兩個(gè)事件函數(shù)：

// SpinBox.js

輸入框允許玩家輸入任何文本，所以我們應(yīng)該對(duì)文本進(jìn)行過(guò)濾。

• 當(dāng)輸入開(kāi)始時(shí)(當(dāng)玩家點(diǎn)擊輸入框)，我們將當(dāng)前輸入框的文本保存在this.temp中。
• 輸入結(jié)束后(按下回車(chē)或者觸摸屏幕其他地方)，我們首先判斷玩家輸入的是不是數(shù)字。如果不是，則將文本還原為之前的樣子；如果是數(shù)字，那么判斷是否超出了最大值和最小值，超出的話就將文本直接設(shè)置為最大最小值。

記得在屬性檢查器中添加這兩個(gè)函數(shù)：

以上代碼只是筆者對(duì)數(shù)字調(diào)節(jié)框功能的一種想法，大家當(dāng)然可以自行修改，做出自己想要的功能。

今天教程就到這，希望大家有所收獲~

總結(jié)

以上是生活随笔為你收集整理的cocoscreator editbox 只允许数字_《Cocos Creator游戏实战》做一个数字调节框的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。