cocosjs基礎（Cocojs）

本文目錄一覽：

• 1、cocos js 怎麼創建一個文本輸入框
• 2、cocos js 怎樣做出按鈕選中效果
• 3、想學cocoscreator，請教學習路線，先要學cocos2d-js嗎

cocos js 怎麼創建一個文本輸入框

1.新建工程。

2.複製下面代碼到工程裏面去。

var textField = new cc.TextFieldTTF(“click here for input”,

TEXT_INPUT_FONT_NAME,

TEXT_INPUT_FONT_SIZE);

this.addChild(textField);

textField.x = winSize.width / 2;

textField.y = winSize.height / 2;

TEXT_INPUT_FONT_NAME –字體

TEXT_INPUT_FONT_SIZE —字體

3.測試運行，OK。

cocos js 怎樣做出按鈕選中效果

cocos js 做出按鈕選中效果示例：

一，首先使用cocos新建一個Cocos2d-js的新項目，然後再cocostudio中創建一個場景，在場景中添加三個按鈕分別設置三態的圖片

二，打開編輯器，實現代碼如下：

var HelloWorldLayer = cc.Layer.extend({

ctor:function () {

this._super();

//導入cocostudio中拼好的界面

mainscene = ccs.load(res.MainScene_json).node;

this.addChild(mainscene);

this.teamButton = ccui.helper.seekWidgetByName(mainscene,”Button_0″);

var btn2 = ccui.helper.seekWidgetByName(mainscene,”Button_1″);

var btn3 = ccui.helper.seekWidgetByName(mainscene,”Button_2″);

//先默認設置一個按鈕為選中狀態   this.teamButton.setBrightStyle(ccui.Widget.BRIGHT_STYLE_HIGH_LIGHT);

this.teamButton.setEnabled(false);

var teamInfo = this.teamButton;

this.teamButton.addTouchEventListener(this.selectedBtn1,this);

btn2.addTouchEventListener(this.selectedBtn2,this);

btn3.addTouchEventListener(this.selectedBtn3,this);

return true;

},

selectedBtn1: function (sender, type) {

if(type == ccui.Widget.TOUCH_ENDED){

this.callBack(sender);

cc.log(“==========商店界面”);

}

},

selectedBtn2: function (sender, type) {

if(type == ccui.Widget.TOUCH_ENDED){

this.callBack(sender);

cc.log(“==========卡牌界面”);

}

},

selectedBtn3: function (sender, type) {

if(type == ccui.Widget.TOUCH_ENDED){

this.callBack(sender);

cc.log(“==========戰鬥界面”);

}

},

callBack: function (sender) {

if (this.teamButton == sender){

return;

}else{

this.teamButton.setBrightStyle(ccui.Widget.BRIGHT_STYLE_NORMAL);

this.teamButton.setEnabled(true);

sender.setBrightStyle(ccui.Widget.BRIGHT_STYLE_HIGH_LIGHT);

sender.setEnabled(false);

this.teamButton = sender;

}

},

});

var HelloWorldScene = cc.Scene.extend({

onEnter:function () {

this._super();

var layer = new HelloWorldLayer();

this.addChild(layer);

}

});

三，運行就可以查看界面，點擊不同的按鈕顯示不同的輸出結果

[Log] ==========商店界面 (CCDebugger.js, line 331)

[Log] ==========卡牌界面 (CCDebugger.js, line 331)

[Log] ==========戰鬥界面 (CCDebugger.js, line 331)

想學cocoscreator，請教學習路線，先要學cocos2d-js嗎

不用學習cocos2d-js，直接學習creator的開發模式就可以了，因為現在官方主推也是creator，但是前提是需要會js。

js基礎會了以後，然後看官方文檔知道ide如何使用、編寫腳本，後面就是看官方demo熟悉api，自己根據想做的遊戲嘗試做一些demo了。