码迷,mamicode.com
首页 > Web开发 > 详细

Cocos2d-JS中使用CocosStudio资源——设置界面

时间:2015-05-06 13:17:35      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:cocos2d   cocos2djs   cocostudio   slider   setting   

在本篇博客中,我们将通过一个在Cocos2d-JS中使用从CocosStudio导出的设置界面资源的例子,来简要介绍以下内容:Slider控件的使用。

一、CocosStudio准备

第一步:从官网下载相应的示例,setting。效果图如下:

技术分享

第二步:修改其中的一些控件的名称,方便寻找获取,如:

将Music那个滑动条的控件名字改为musicSlider,从而方便查找。
类似的修改还可以有:Continue按钮,Sound滑动条等。

第三步:发布资源。注意发布设置中应该将数据格式改为JSON格式,发布位置你可以选择Cocos Code IDE中所创建的项目的res文件夹即可,当然,也可以另选其他文件夹。具体发布设置如下图:

技术分享

二、Cocos Code IDE操作

第一步:创建Cocos2d-JS项目,并将Cocos Studio发布的资源res,拷贝到项目的res文件夹下或直接发布到项目的res文件夹下。

PS:创建项目的时候,分辨率默认640 x 960就可以了,方向选择竖向。

第二步:修改project.json文件,在modules中添加cocostudio。在jsList中添加SettingScene.js和resource.js。具体代码如下:

{
  "project_type": "javascript",
  "debugMode": 1,
  "showFPS": true,
  "frameRate": 60,
  "id": "gameCanvas",
  "renderMode": 0,
  "engineDir": "frameworks/cocos2d-html5",
  "modules": [
    "cocos2d",
    "cocostudio"
  ],
  "jsList": [
    "src/resource.js",
    "src/SettingScene.js"
  ]
}

第三步:在resource.js文件中指定所需的各种资源,以备后期加载使用。具体代码如下:

var res = {
//      png13:"res/Setting/DnE10.png",
//      png15:"res/Setting/Star026.png",
//      png16:"res/Setting/Star026_2.png",
//      png14:"res/Setting/DnE15.png",
//      png7:"res/Setting/BaS07.png",
//      png8:"res/Setting/BaS08.png",
//      png9:"res/Setting/BaS09.png",
//      png10:"res/Setting/BaS10.png",
//      png11:"res/Setting/BaS11.png",
//      png12:"res/Setting/BaS17.png",
//      png17:"res/Setting/pvpangle03.png",
//      png18:"res/Setting/pvpangle04.png",
//      png19:"res/Setting/pvpangle05.png",
//      png20:"res/Setting/pvpangle06.png",
//      png21:"res/Setting/PvPMsgBoard.png",
//      png22:"res/DifficultySelection/DS16.png",
        login_json:"res/Setting.json",
};

var g_resources = [];
for (var i in res) {
    g_resources.push(res[i]);
}

PS:如果你不需要单独使用那些PNG资源文件,完全可以只加载JSON文件就可以了,这样的话,非常方便快捷。

第四步:非常非常重要的一步,你需要修改main.js文件,将其中的:cc.view.setDesignResolutionSize(960,640,cc.ResolutionPolicy.SHOW_ALL);改为cc.view.setDesignResolutionSize(640, 960, cc.ResolutionPolicy.SHOW_ALL);

虽然,我们选择的方向是竖向,但是不知道为什么,当创建项目的时候宽高还是为960,640。而,竖向的时候宽高应该为640,960。所以,要进行相应的修改才能正常运行。如果你想看不该的效果,可以尝试一下,会有惊喜哦。

main.js的具体代码如下:

cc.game.onStart = function(){
    cc.view.adjustViewPort(true);
    cc.view.setDesignResolutionSize(640, 960, cc.ResolutionPolicy.SHOW_ALL);
    cc.view.resizeWithBrowserSize(true);
    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new SettingScene());
    }, this);
};
cc.game.run();

三、使用CocosStudio资源

走到这里,终于到我们的重头戏(SettingScene.js)了,下面,我们将要来学习如何获取CocosStudio中导出的资源等。

第一步:加载setting界面的JSON资源分析,并获取settingscene对象。将settingscene对象加入到layer中。具体代码如下:

        //加载setting界面的JSON资源分析,并获取settingscene对象。
        settingScene = ccs.load(res.setting_json).node;
        //将settingscene对象加入到layer中。
        this.addChild(settingScene);

第二步:从settingScene中查找相应的控件对象,Slider控件,具体代码如下:

musicSlider = ccui.helper.seekWidgetByName(settingScene, "musicSlider");

第三步:添加事件监听,方法类似,具体代码如下:

musicSlider.addCCSEventListener(this.sliderStateChange);

第四步:定义相应监听事件的具体处理信息,具体代码如下:

Slider控件触发的事件处理

sliderStateChange:function(sender,type){
        switch(type){
        case ccui.Slider.EVENT_PERCENT_CHANGED:
            cc.log("musicSlider percent : " + sender.getPercent());
            break;
        default:
            break;
        }
    }

代码简介:

上面的代码都有注释,也都很简单。这里就简单介绍一下:对于Slider的每次滑动即状态改变,都会触发事件EVENT_PERCENT_CHANGED。如果你要实时调整游戏的音量等一些效果的话,可以在捕获该事件之后根据percent的值进行相应的调整和处理。

四、运行效果

到这里,对于setting界面的分析和使用就介绍完毕了。你可以运行一下。我的部分运行效果如下:

技术分享

五、补充说明

SettingScene.js的完整源码如下:

var SettingLayer = cc.Layer.extend({
    musicSlider:null,
    soundSlider:null,
    ctor:function(){
        this._super();
        //加载Setting界面的JSON资源分析,并获取settingScene对象。
        settingScene = ccs.load(res.setting_json).node;
        //将settingScene对象加入到layer中。
        this.addChild(settingScene);
        //从settingScene中获取控件并注册监听事件。
        musicSlider = ccui.helper.seekWidgetByName(settingScene, "musicSlider");
        musicSlider.addCCSEventListener(this.sliderStateChange);
    },
    sliderStateChange:function(sender,type){
        switch(type){
        case ccui.Slider.EVENT_PERCENT_CHANGED:
            cc.log("musicSlider percent : " + sender.getPercent());
            break;
        default:
            break;
        }
    }
});

var SettingScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new SettingLayer();
        this.addChild(layer);
    }
});

PS:由于本次教程内容较为简单,没有提供完整工程就行下载。如果需要完整工程,请去:http://blog.csdn.net/qiumengchen12/article/details/45485893
里面有下载链接,经过简单修改,即可使用。

Cocos2d-JS中使用CocosStudio资源——设置界面

标签:cocos2d   cocos2djs   cocostudio   slider   setting   

原文地址:http://blog.csdn.net/qiumengchen12/article/details/45534019

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!