游戏开发引擎—Coos2d-JS中使用Cocos Studio资源04：关卡选择界面.doc

游戏开发引擎—Cocos2d-JS中使用Cocos Studio资源04：关卡选择界面 本文检索关键词：游戏引擎，游戏开发引擎，cocos引擎html5游戏开发 一、Cocos Studio准备 第一步：从官网下载相应的示例，LevelSelection。效果图如下： 第二步：修改其中的一些控件的名称，方便寻找获取，如： 由于官网给的例子中的控件名字有的较复杂，所以可以按照自己的想法进行修改。 第三步：发布资源。注意发布设置中应该将数据格式改为JSON格式，发布位置你可以选择Cocos Code IDE中所创建的项目的res文件夹即可，当然，也可以另选其他文件夹。具体发布设置如下图： 二、Cocos Code IDE操作 第一步：创建Cocos2d-JS项目，并将Cocos Studio发布的资源res，拷贝到项目的res文件夹下或直接发布到项目的res文件夹下。 PS:创建项目的时候，分辨率默认640*960就可以了，方向选择竖向。 第二步：修改project.json文件，在modules中添加cocostudio。在jsList中添加LevelSelectionScene.js和resource.js。具体代码如下： 1 2 3 4 5 6 7 8 9 10 11 { ??????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/LevelSelectionScene.js] ??} 第三步：在resource.js文件中指定所需的各种资源，以备后期加载使用。具体代码如下： 1 2 3 4 var?res?=?{ ????????level_selection_json:res/LevelSelection.json};var?g_resources?=?[];for?(var?i?in?res)?{ ????g_resources.push(res[i]); } 第四步：非常非常重要的一步，你需要修改main.js文件，将其中的： 1 cc.view.setDesignResolutionSize(960,640,cc.ResolutionPolicy.SHOW_ALL); 改为 1 cc.view.setDesignResolutionSize(640,?960,?cc.ResolutionPolicy.SHOW_ALL); 虽然，我们选择的方向是竖向，但是不知道为什么，当创建项目的时候宽高还是为960,640。而，竖向的时候宽高应该为640,960。所以，要进行相应的修改才能正常运行。如果你想看不该的效果，可以尝试一下，会有惊喜哦。 main.js的具体代码如下： 三、使用Cocos Studio资源 走到这里，终于到我们的重头戏（LevelSelectionScene.js）了，下面，我们将要来学习如何获取Cocos Studio中导出的资源等。 第一步：加载LevelSelection界面的JSON资源分析，并获取levelSelectionScene对象。将levelSelectionScene对象加入到layer中。具体代码如下： 1 2 3 4 //加载levelSelection界面的JSON资源分析，并获取levelSelectionScene对象。 levelSelectionScene?=?ccs.load(res.level_selection_json).node; //将levelSelectionScene对象加入到layer中。 this.addChild(levelSelectionScene); 第二步：从loginScene中查找相应的控件对象，包括button控件，Text控件，PageView控件等，查找方法相似。具体代码如下： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 //startButton控件 startButton?=?ccui.helper.seekWidgetByName(levelSelectionScene,?Button_Enter); ? //leftButton控件，负责向左切换关卡。 leftButton?=?ccui.helper.seekWidgetByN