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!")

}

})

什么是精灵图：

css精灵(CSS sprites),是一种网页图片应用处理技术。主要是指将网页中需要的零星的小图片集成到一个大的图片中

应用的原因：

1.减少对浏览器的请求次数，避免网页的延迟

2.方便小图标的统一管理

精灵图的制作：

1.软件：ps

2.制作方法：

新建透明图层

添加参考线将画布划分，将小图标放入划分好的格子中

精灵图的使用： css精灵图需要配合背景的图片和背景定位

1.引入精灵图

.basic{

background-image:url(ui.png)

width:80px

height:80px

background-repeat:no-repeat

display:inline-block

}

2.精确定位需要显示的小图标坐标

.sprite1{

background-position:80px 0px

}

.sprite2{

background-position:160px 160px

}

---