cocosjs連連看的簡單介紹

本文目錄一覽：

• 1、如何使用Code IDE調試Cocos2d-JS開發的遊戲
• 2、cocos-js addanimation和setanimation的區別
• 3、cocos js 怎樣做出按鈕選中效果

如何使用Code IDE調試Cocos2d-JS開發的遊戲

運行、測試遊戲

1. 新建一個名為 CocosJSGame 的 Cocos JavaScript 工程

2. 點擊工具欄上的 debug 按鈕

3. 默認情況下腳本會運行在我們提供的 mac 版本預編譯 runtime 上。為了簡單起見，我們不對默認值進行任何改動。如果你想要在其他我們支持的目標平台上調試程序，可參考下文的「在其它目標平台上調試」

如何調試

斷點支持

可以在 javascript 腳本文件中增加斷點

當斷點被觸發時選擇 「Yes」 打開 Debug Perspective 透視圖，可以看到很多與調試相關的視圖，調用棧、變量和斷點等等。

支持 Step over, Step into, Step out 等調試方式。

代碼熱更新

想更改右下角的 close 按鈕的位置？closeItem.attr 方法是控制該按鈕的顯示位置的。

closeItem.attr({

x: size.width – 20,

y: 20,

anchorX: 0.5,

anchorY: 0.5

});

修改「x」上面的值，把”size.width-20″ 改成 “”size.width/2” 然後保持修改, 你會發現，在沒有重啟的情況下 close 按鈕的位置已經改變了，在屏幕底部的中間!

在其他目標平台上調試

通過工具欄上的打開 Debug Configurations 打開 Debug Configurations 頁面

在頁面的左側，選擇之前我們為你創建的名為CocosJSGame的configuration

在 iOS Simulator 上調試

選擇iOS Simulator單選項

選擇正確的runtime app

點擊 Debug 按鈕，預編譯的 runtime 會被自動安裝到模擬器中

在iOS設備上調試

首先，你需要一個 runtime IPA， 從 1.0.0-rc1 版本開始，你可以通過 Code IDE 自己編譯一個，然後安裝IPA到設備中

在 iOS 設備上啟動 runtime

在 “Debug Configuration” 界面選擇 Remote Debug 單選項

platform 選擇 “iOS”

將設備的 ip 地址填寫在 Device IP 上

最後點擊Debug按鈕

在 Android 設備上使用 ADB 模式調試

在 “Debug Configuration” 界面選擇 Android ADB Mode 單選項

選擇正確的 runtime apk

點擊Debug按鈕

IDE 會自動安裝配置中的 runtime apk 到你的連接設備上並啟動runtime開始調試

在 Android 設備上使用網絡模式調試

手動安裝 runtime 到你的設備上，它被存放在 CocosLuaGame/runtime/android 目錄中

手動啟動 runtime，停留在 waiting 頁面

在 “Debug Configuration” 界面選擇 Remote Debug 單選項

platform 選擇 “Android”

將設備的 ip 地址填寫在 Device IP 上

點擊Debug按鈕

如何調試C++

從 1.0.0-rc1 版本開始，支持使用 XCode/Visual Studio 調試 C++ 代碼的同時使用 Cocos Code IDE 調試 C++ 代碼。

以調試 Mac 為例：

如果你還沒有 C++ 代碼，那麼需要先添加（右擊工程，Cocos Tools-Add Native Codes Support…）

使用 Xcode 打開 frameworks/runtime-src/proj.ios_mac 工程，並啟動調試

回到 Cocos Code IDE，打開 “Debug Configuration” 頁面，選擇 Remote Debug 單選項

platfrom 選擇 「Mac」

Target IP 填寫 “127.0.0.1”

點擊Debug按鈕..

cocos-js addanimation和setanimation的區別

setAnimation是告訴該控件我待會要執行什麼動畫，而startAnimation告訴該控件，我要立馬執行該動畫

顧名思義。。set 設置 start開始

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)