cocos2d-js 如何通过一个url获得图片 添加给精灵

var HelloWorldLayer = cc.Layer.extend({

ctor:function () {

this._super()

var size = cc.director.getWinSize()

var bg = new cc.Sprite(res.background_png)

bg.x = size.width/2

bg.y = size.height/2

this.addChild(bg)

// 开始精灵

var startSpriteNormal = new cc.Sprite(res.start_up_png) ①

var startSpriteSelected = new cc.Sprite(res.start_down_png) ②

var startMenuItem = new cc.MenuItemSprite(

startSpriteNormal,

startSpriteSelected,

this.menuItemStartCallback, this) ③

startMenuItem.x = 700 ④

startMenuItem.y = size.height - 170 ⑤

// 设置图片菜单

var settingMenuItem = new cc.MenuItemImage(

res.setting_up_png,

res.setting_down_png,

this.menuItemSettingCallback, this) ⑥

settingMenuItem.x = 480

settingMenuItem.y = size.height - 400

// 帮助图片菜单

var helpMenuItem = new cc.MenuItemImage(

res.help_up_png,

res.help_down_png,

this.menuItemHelpCallback, this) ⑦

helpMenuItem.x = 860

helpMenuItem.y = size.height - 480

var mu = new cc.Menu(startMenuItem, settingMenuItem, helpMenuItem)⑧

mu.x = 0

mu.y = 0

this.addChild(mu)

},

menuItemStartCallback:function (sender) {

cc.log("menuItemStartCallback!")

},

menuItemSettingCallback:function (sender) {

cc.log("menuItemSettingCallback!")

},

menuItemHelpCallback:function (sender) {

cc.log("menuItemHelpCallback!")

}

})

需求分析

五个界面基本上就是整个宣传页的全部内容，通过滑动这几个页面可以看出，我们要实现这个页面，大致需要完成下面几项内容：

1.实现上述五个页面的切换。

2.实现5个页面的入场和出场动画。

3.添加背景音乐

4.屏幕适配

5.添加微信分享的API

接下来，我们一项一项给大家介绍，完整的代码可以在这里进行下载：

/cms/uploads/soft/141023/4196-141023154059.zip

开发环境与新建项目

如果没用过Cocos2d-JS的朋友们，可以到cocos官网上去下载，此处我们用的是3.0final，或者，我们可以下载Lite版本的Cocos2d-JS，lite版本可以很方便的根据需求去下载所需要的模块，可以很大的减少代码的体积，可在此下载，我们需要用到的模块有core?actions?menuprogress-timer，在该页面中选择Customized Version然后勾选上述几个模块，并点击下载。

此处我们使用cocos 命令行来创建新的工程

$cd cocos2d-js/tools/cocos2d-console/bin $./cocos new weChat -l js --no-native $cd weChat/ $../cocos run -p web

环境搭建并不是这篇文章的重点，更详细的信息可以参考：《搭建 Cocos2d-JS 开发环境》。

主界面及其页面切换框架的实现

程序的入口代码在main.js中，用编辑器打开并修改为下面的代码。

cc.game.onStart = function () { cc.view.adjustViewPort(true)cc.view.enableAutoFullScreen(false)var mode = cc.sys.isMobile &&window.navigator.userAgent.indexOf("MicroMessenger") != -1 ? cc.ResolutionPolicy.FIXED_HEIGHT : cc.sys.isMobile ? cc.ResolutionPolicy.FIXED_WIDTH : cc.ResolutionPolicy.SHOW_ALLcc.view.setDesignResolutionSize(640, 831, mode)//load resources cc.LoaderScene.preload(g_resources, function () { cc.director.runScene(new MainScene())}, this)}cc.game.run()

关键点解析如下：

1.设置浏览器meta来适配屏幕，引擎内部会根据屏幕大小来设置meta的viewport值，会达到更好的屏幕适配效果。

2.针对手机浏览器和PC浏览器启用不同的分辨率适配策略。

3.预加载图片声音等资源。 cc.LoaderScene.preload会生成一个“加载中 x％”的界面，等待资源加载结束后，调用第二个参数传入的匿名函数。 对于基于html的游戏，页面是放在服务器端供浏览器下载的，为了获得流畅的用户体验，cc.LoaderScene.preload让浏览器先把远程服务器的资源缓存到本地。需要预加载的资源定义在src/Resources.js文件中。

4.启动游戏的第一个场景。

主界面分为2个部分，第一个部分是不随着屏幕移动而移动的向上箭头和音乐按钮，第二个部分是根据用户滑动屏幕而改变的场景。

我们先根据需要，构建出需要的函数，并一一实现他，这里我们使用cc.Scene.extend()来扩展出一个scene，并在这个scene中构建出我们需要功能，并一一实现他。

由引擎提供的cc.Scene.extend方法，让js能实现高级面向对象语言的继承特性。 onEnter方法是场景初始化完成即将展示的消息回调，在onEnter中必须调用this._super()来确保Scene被正确的初始化。

用于初始化UI的函数 initUI()

用于初始化touch事件的函数 initTouch()。

用于切换页面的函数changePage()和记录当前页面的参数currentIndex

用于控制箭头显示隐藏的函数toggleArrow()

用于控制音乐按钮回调的函数

var MainScene = cc.Scene.extend({ listener: null, accelListener: null, currentIndex: 0, sceneList: [], ctor: function () { this._super()cc.spriteFrameCache.addSpriteFrames(res.firstPage_plist)}, onEnter: function () { this._super()this.initUI()this.addTouch()}, initUI: function () { }, toggleMusicCallback: function (sender) { }, togleArrow: function (status) { }, addTouch: function () { }, changePage: function (index, next) { } })

接下来我们一一来实现。

首先，我们来实现音乐按钮与箭头，我们在initUI()中添加如下代码。

var bg = new cc.Sprite(res.background_png)bg.anchorX = 0bg.anchorY = 0bg.scaleX = cc.winSize.width / bg.widthbg.scaleY = cc.winSize.height / bg.heightthis.addChild(bg, 0)this.arrow = new cc.Sprite("#arrow.png")this.arrow.setPosition(cc.pAdd(cc.visibleRect.bottom, cc.p(0, 50)))var posY = this.arrow.yvar arrowAction = cc.repeatForever(cc.sequence(cc.spawn(cc.moveTo(0.8, cc.p(this.arrow.x, posY + 30)).easing(cc.easeIn(0.5)), cc.fadeOut(1)), cc.delayTime(0.8), cc.callFunc(function () { this.arrow.y = this.arrow.y - 30this.arrow.opacity = 255}, this)))this.arrow.runAction(arrowAction)this.addChild(this.arrow, 1)this.menuItemToggle = new cc.MenuItemToggle(new cc.MenuItemImage("#music.png"), new cc.MenuItemImage("#music_sel.png"), this.toggleMusicCallback, this)this.menuItemToggle.setPosition(cc.pAdd(cc.visibleRect.right, cc.p(-this.menuItemToggle.width / 2 - 30, 140)))var togglemenu = new cc.Menu(this.menuItemToggle)togglemenu.anchorX = 0togglemenu.anchorY = 0togglemenu.x = 0togglemenu.y = 0this.addChild(togglemenu, 1)

我们在屏幕中，添加了一个背景的sprite，并且，将这个背景进行缩放，以让其在各种情况下都布满屏幕,并且我们为箭头设置了一系列动画，让其能够循环播放，Cocos2d-JS，为了方便广大开发者，提供了丰富多彩的动画(actions)。下面，我们先简单的介绍一下几个常用的action的API。

cc.repeatForever(action) 无限循环某个action

cc.sequence(action1,action2,...)顺序执行括号里面的action

cc.spawn(action1,action2,...)同时执行括号里面的action

cc.moveTo(duration,targetPoint)从当前位置在duration(秒)时间内移动到点targetPosition的action

cc.easeIn(rate) 以rate为ease参数执行easeIn的action，一般是这样使用的action.easing(cc.easeIn(rate))

fadeOut(duration) 在duration时间内从屏幕淡出的action

cc.delayTime(duration) 延时duration时间的action，通常用于等待一段时间后再播放某个action

cc.callFunc(function) 用于执行action的回调，通常在某个action结束后需要执行某段函数的话，可以使用它。

通过上述的简单介绍，是不是对action有了一个初步的了解了呢，我们实际来 *** 作一下：

我们需要一个箭头，往上走并慢慢减速和透明，最终消失，然后在原来的位置出现重复下去，所以我们可以归纳为，移动+淡出-->回到初始位置-->移动+淡出。这样我们很清晰就归纳出如何去写这个action了，我们使用cc.spawn(cc.moveTo(),cc.fadeOut())就构建出了移动+淡出这个效果，然后使用cc.callFunc()设置了这次action播放完毕要修改的位置回到初始位置，接着我们使用cc.sequence()来顺序执行这两个action，这样一来，一次action就编写完成了，最后我们只需要将这个action使用cc.repeatForever()就完成了我们需要的重复播放。

细心的读者可能会问了，代码中的位置设置，为什么是cc.pAdd(cc.visibleRect.right,cc.p())？这是cocos为了让大家更方便的做屏幕适配所定义的9个点，这9个点会根据不同屏幕大小来动态设定，例如cc.visibleRect.center，这个点的位置，无论在什么分辨率的屏幕下，都是在屏幕的正中央，这样我们就可以根据这个点的位置来做相对布局，已达到适配屏幕的目的，例如上面的代码this.arrow.setPosition(cc.pAdd(cc.visibleRect.bottom, cc.p(0, 50)))就是将arrow这个sprite，放在屏幕的底部的正中央，然后再在y轴上加50个像素，这样，无论屏幕的大小，都能保持在屏幕的底部的正中央向上50个像素。这也是我们做相对布局的基础。后续的布局，我们都会根据这些点的坐标来设置。

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)

---