[SOLVED] How to load an image from a spritesheet to UI Button in JS

cocos2d-x JavaScript
1

Hi,

I made a sprite sheet with menu buttons in it and I load it through resource.js. I have 6 images for 3 buttons (normal/clicked state). I am having trouble getting any of the buttons to display. Here is my code to load the play button:

// Load menu buttons from menuButton Spritesheet
cc.spriteFrameCache.addSpriteFrames(res.menuButtons_plist);
var menuButtonsSpriteSheet = new cc.SpriteBatchNode(res.menuButtons_png);
this.addChild(menuButtonsSpriteSheet);

// Play Button
var playButton = new ccui.Button();
var playButton_n = cc.spriteFrameCache.getSpriteFrame("play_n.png");
var playButton_s = cc.spriteFrameCache.getSpriteFrame("play_s.png");
playButton.loadTextures(playButton_n, playButton_s);
playButton.addTouchEventListener(this.onPlay, this);
playButton.setAnchorPoint(cc.p(0.5, 0.5)); //Anchor centered
playButton.setPosition(centerPos);
this.addChild(playButton);

What am I doing wrong? Do spritesheets work with UI Buttons?
Debug is telling me Object not found, load image failed.
I tried looking at the Sprite Documentation but no luck in finding the right syntax to use for UI button. Is it the textures part?
I don’t know how to set the playButton.loadTextures(playButton_n, playButton_s) properly.

2

Hello,

Sprite sheet will work for UI buttons. While loading texture you need to specify the texture type i.e ccui.Widget.PLIST_TEXTURE

This is code am using to create UI buttons using sprite sheet

var spriteFrameCache = cc.spriteFrameCache; spriteFrameCache.addSpriteFrames(res.LoadingAnimation_plist, res.LoadingAnimation_png);

var button = new ccui.Button(); button.setTouchEnabled(true);
button.loadTextures(“loading_1.png”,”loading_1.png”,”loading_1.png",ccui.Widget.PLIST_TEXTURE);
button.x = 300;
button.y = 384;
button.addTouchEventListener(this.touchEvent ,this);
this.addChild(button);

Regards,
Gurudath

3

Hi Gurudath,

I added ccui.Widget.PLIST_TEXTURE to my loadTextures line but it didn’t seem to change anything :pensive:

Here is what my code looks like now:

cc.spriteFrameCache.addSpriteFrames(res.menuButtons_plist, res.menuButtons_png);

var playButton = new ccui.Button();
playButton.setTouchEnabled(true); 
playButton.loadTextures("play_n.png", "play_s.png", ccui.Widget.PLIST_TEXTURE);
playButton.addTouchEventListener(this.onPlay, this);
playButton.setAnchorPoint(cc.p(0.5, 0.5)); //Anchor centered
playButton.setPosition(centerPos);
this.addChild(playButton);

Still no luck in displaying the UI button.

Errors:
Cannot GET /play_n.png
load image failed

4

Basically is there a way to “get image filepath” as a string from the spritesheet?

5 
cc.spriteFrameCache.addSpriteFrames(myplist);
var playButton  = new ccui.Button("game_common_png/arrow.png", "", "", ccui.Widget.PLIST_TEXTURE);
2 Likes
6

You can use loadTextures() but you need to provide 4 parameters

From source code :

/**
 * Load textures for button.
 * @param {String} normal normal state of texture's filename.
 * @param {String} selected  selected state of texture's filename.
 * @param {String} disabled  disabled state of texture's filename.
 * @param {ccui.Widget.LOCAL_TEXTURE|ccui.Widget.PLIST_TEXTURE} texType
 */
loadTextures: function (normal, selected, disabled, texType) {
    this.loadTextureNormal(normal, texType);
    this.loadTexturePressed(selected, texType);
    this.loadTextureDisabled(disabled, texType);
},
7

OMG thank you!!! I got it working after putting ,"", for the disabled parameter. I thought that was optional.
Both of these methods work:
var playButton = new ccui.Button(“normal.png”, “selected.png”, “”, ccui.Widget.PLIST_TEXTURE);
And
var playButton = new ccui.Button();
playButton.loadTextures(“normal.png”, “selected.png”, “”, ccui.Widget.PLIST_TEXTURE);

Do you know if playButton.setTouchEnabled(true); is needed?

1 Like
8

Yes, to add a clickEventListener. (I think the default value is false)
setEnabled() function will set disabled sprite and pause clickEventListener

1 Like
9

setTouchEnabled(true) is true by default

look at:
cocos2dx 3.6 = \frameworks\cocos2d-html5\extensions\ccui\uiwidgets\UIButton.js
cocos2dx 3.8 = \web\extensions\ccui\uiwidgets\UIButton.js