1. Community Home
  2. Programming

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

  • efares
    Likes 0
    Problem Description

    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.

  • Sonar Systems admin
    Likes 0
    This reply has been verified.
  • efares
    Likes 0

    I have been looking at that page but can’t seem to the find 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 sad

  • efares
    Likes 0

    I tried adding ccui.Widget.PLIST_TEXTURE to my loadTextures line but it didn't seem to change anything

    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

  • Sonar Systems admin
    Likes 0

    There is a PLIST section

    This reply has been verified.
  • efares
    Likes 0

    Are you refering to this http://cocos.sonarlearning.co.uk/docs/plist ? Or is there another document on PLIST and UI buttons?

  • Sonar Systems admin
    Likes 0

    There is that but within the Sprite section/

    This reply has been verified.
  • efares
    Likes 0

    Yes, I have looked at that and it works perfectly fine if I make a MenuItemSprite but I cannot seem to get the png image to load as a UI button.

    So how do I Create A Sprite (UI button) With A Sprite Frame Cache?

  • Sonar Systems admin
    Likes 0

    How about a local png so not a spritesheet?

     

    This reply has been verified.
  • efares
    Likes 0

    What do you mean by local png? I can load a single image in res and that works perfectly fine with UI buttons.
    I just thought I could use a spritesheet with UI buttons because I read spritesheets are better than loading individual images in terms of performance and load time.

    Should I just use local png and load each image separatly?
    Is there no way to use a spritesheet image with UI buttons?
    I’m trying to find documentation on that.

  • efares
    Likes 0

    I got it working!!!!! I had to put ,"", 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?

  • Sonar Systems admin
    Likes 0

    Great to hear,

     

    setTouchEnabled I believe is set to true by default I believe but try ommitting the line and let us know what happens.

    This reply has been verified.
  • efares
    Likes 0

    You’re right, setTouchEnabled is true by default, no difference when I set it to true or remove that line. Same results.

  • Sonar Systems admin
    Likes 0

    Does it not work

    This reply has been verified.
  • efares
    Likes 0

    It DOES work smiley

  • Sonar Systems admin
    Likes 0

    Great :D

    This reply has been verified.

Login to reply