Giving buttons a texture

edited May 2015 in UC Berkeley CS160

I'm trying to stylize buttons by doing this:

var greenTexture = new Texture("greenButton.png");
var greenSkin = new Skin({texture: greenTexture, width: 200, height: 40});

but instead, it just makes the buttons disappear. I also tried using a texture for the background, in the exact same way I did in IPA1 and IPA2, but the background disappears as well. It seems maybe the Kinoma update has changed things...Any ideas would be appreciated!



  • Hmm. If you can post/gist some more of your code, we can probably point you in the right direction. Also, of course, make sure that greenButton.png is in your /src directory.

  • edited May 2015

    Okay, well here is how we define our buttons. We basically pass in a parameter for skin like so:

    new BTN.btn({skin: greenSkin, darkSkin: greenPressSkin, textForLabel: "Login"}),

    and the skins are defined as above. The images are all in the /src directory.

    exports.btn = BUTTONS.Button.template(function($){ return{
        top: 5, bottom: 5, left: 5, right: 5, skin: $.skin, 
        contents: [
                new Label({top: 0, bottom: 0, left: 5, right: 0, string: $.textForLabel, style: titleStyle}),
        behavior: Object.create(BUTTONS.ButtonBehavior.prototype, {
            onCreate: { value: function(content){
                this.upSkin = $.skin;
                this.downSkin = $.darkSkin;
                this.nextScreen = $.nextScreen;
            onTouchBegan: { value: function(content){
       = this.downSkin;
                trace("backButton was tapped.\n");
            onTouchEnded: { value: function(content){
       = this.upSkin;
  • edited May 2015

    Never mind, from playing around with the width and height, I got a little bit of green to show up, so it's a picture scaling problem. What is the best way of scaling this in Kinoma? Right now I am randomly trying numbers, and it alternates between disappearing and showing a tiny corner...

  • Answer ✓


    I've had that problem before. Always frustrating. Most likely, you have a problem with the aspect ratio when you are defining the skin. You can find info on that here in the docs.

    When in doubt, just try each of fill, fit, and stretch and see if any of them does what you want.

    — Andy

Sign In or Register to comment.