Forums » Code » Button

Hej,

my game is finally ready to be released. Next week it will be hitting the App Store. In the meantime i'm trying to clean up the code and try to release some of the stuff we have been doing.

Here is the first one, a simple Button Class: https://gist.github.com/1395616

More infos are in the gist itself.

VERY clean!

Would anyone be so kind as to explain how to add a button, with text that changes a variable (myGameMode) .. (embarrassed smiley)

THX!

You mean changes the variable on click?

ig.game.spawnEntity( Button, x, y {
  size: { x: 64, y: 16 },
  animSheet: new ig.AnimationSheet( 'media/button.png', 64, 16 ),

  text: [ 'Some', 'Multiline', 'Text' ],

  pressedUp: function() {
    myGameMode = 'yay';
  }

} );

Make sure a button.png excists in your media folder. Just saw that i didn't explain how the image should be, so i'll do this in a minute.

You basically need and png that holds all three states, normal, pressed and deactive of the button. In the case of the code above this would be a 64x48 big png, with the normal state left, the clicked state in the middle and the deactive state on the right.

Thanks a lot for your detailed answer Philip unfortunately i'm a js noob, so im having difficulty getting this work ..

Im guessing

ig.game.spawnEntity( Button, x, y 

Is not meant to be a closed bracket? In othere words your code is right and im just putting it in the wrong place?

Where abouts would i put your code to make a button display on the menu screen:

init: function() {
            this.introTimer = new ig.Timer(1);//how long to wait on menu sreen
        },
        run: function() {
        if(this.introTimer.delta()<0){
	    this.logoImage.draw( 0, 0 ); //draw the image
	    myGameMode = 1;
	    introTimer = 0;
	    
	}
	else if(this.introTimer.delta()<2){
	this.introImage.draw( 0, 0 ); //draw the image
	 this.font.draw("TEST MAIN MENU TEXT", 100, 100, ig.Font.ALIGN.CENTER);//text on intro
		myGameMode = 2;
		
	
        }else{
            myGameMode = 2;
            ig.system.setGame(MyGame);
		}
        }	
});

Sorry to ask the stoopid questions...

First thing you should learn is to format you code right. Thats hard to read even if you know what everything means.

The entity should spawn in the init function. Like this:

font: new ig.Font( 'media/font-small.png' ),

init: function() {
  this.introTimer = new ig.Timer( 1 ); //how long to wait on menu sreen
  
  ig.game.spawnEntity( Button, 50, 50 {
    size: { x: 64, y: 16 },
    animSheet: new ig.AnimationSheet( 'media/button.png', 64, 16 ),

    text: [ 'Some', 'Multiline', 'Text' ],

    pressedUp: function() {
      myGameMode = 'yay';
    }

  } );
}

Another thing i forgot to mention, you should have a font loaded.

Thanks for your time and patience Philip, i'll give it a go, i'm learning JS atm so bear with me :-)

Hi, i just downloaded your Button class and i cant seem to get the button to appear on the screen.

The button is being created as i confirm it through a console log but again nothing appears on screen.

Here is the code i am using to create the entity instance:

this.spawnEntity(EntityButton, 100, 100, {
text: [ 'Start Game' ],
textPos: { x: 50, y: 50 },
textAlign: ig.Font.ALIGN.CENTER,
size: { x: 148, y: 34 },
font: new ig.Font('media/bm_japan_font.png'),
pressedUp: function() {
doSomething()
}
});

Any help is appreciated, thanks.

Nevermind i figured it out, you have to draw out the buttons.

If you want to setup mutiple buttons for say your title screen, setup a loop in your draw method such as the following:

var btns = this.getEntitiesByType(EntityButton);
for (var i = 0; i < btns.length; i++) {
btns[i].draw();
}

Hum, sorry, i'm not looking that often here in the forums.

But normally the buttons are normal entites and thus shouldn't need that extra loop. There must be something in your game's drawing loop that prevefnts entities from drawing.

I've been working at this for a couple hours and I'm having a horrible time trying to get this plugin to work out of the box, using only the code you provided.

First I ran into bugs b/c you're using fonts & images that you don't provide along w/ the gist you posted above. So I modified the plugin to use a image and font that I had locally.

Then I pasted in the code from your gist comment:

ig.game.spawnEntity( ig.system.width / 2 - 75, ig.system.height - 80, {
  text: [ 'Start Game' ],
  textPos: { x: 75, y: 14 },
  textAlign: ig.Font.ALIGN.CENTER,
  size: { x: 150, y: 45 },
  pressedUp: function() {
    doSomething()
  }
)

The code above you're using the spawnEntity method but not providing the named entity of what to spawn. Also you are missing a "}".

I fixed those bugs but then when I'd run the game I'd get it load to 90% and then freeze. In the console I can see:

Uncaught RangeError: Maximum call stack size exceeded
window.ig.copy
window.ig.copy
......

So after comparing again to your code above I see you have method of your level defined called font. I added that and BAM the errors go away.. The button still wasn't showing up but at least I got the errors to go away.I implemented the draw code that ArcadeHype provided and that seems to get them to show up.

....But the click events still weren't working. You may have though it obvious but you should probably also state in your documentation that you must bind KEY.MOUSE1 to the "click" action. Otherwise none of the click code you write for click events will get fired.

So Users, add this in your game init method:

    ig.input.bind( ig.KEY.MOUSE1, 'click' );

Could you please detail all of the above with your gist. You could probably increase the likelihood your plugin makes it into games, as well as save A LOT of people A LOT of time. I know documentation sucks, but when people are using your code it's important.

Anyway, thanks for the plugin. I hope the next person who tries to use it finds this post as I think it will save them a good bit of time.

Hum, I'm sorry that this was such a hard time to get to work. <but you are right, my documentation is not quite complete. I will try to make myself a little bit clearer and update the gist. Thanks for the feedback.

Hej,

I just updated the plugin a little and wrote some more documentation. I hope this is better.

What I don't understand is that you need to explicit draw the entities to see them. Normally you shouldn't do that. I just tested it again and this isn't the case. I just threw the new plugin in a newly downloaded impact installation and it works great. Would be great if you could tell me if this is the case or the problem was something else or my crappy documentation.

If that helps I also encountered the drawing issue. It worked fine when button was spawned in an entity already loaded. However I had to manually call draw on buttons spawned in the games init method.

Really weird. I can't recreate the problem. My main.js looks like this:

ig.module( 
  'game.main' 
)
.requires(
  'impact.game',
  'impact.font',
  'plugins.button'
)
.defines(function(){

MyGame = ig.Game.extend({
  init: function() {
    ig.input.bind( ig.KEY.MOUSE1, 'click' );
    
    ig.game.spawnEntity( Button, ig.system.width / 2 - 37, ig.system.height / 2 - 11, {
      font: new ig.Font( 'media/04b03.font.png' ),
      text: [ 'Start Game' ],
      textPos: { x: 37, y: 8 },
      textAlign: ig.Font.ALIGN.CENTER,
      size: { x: 75, y: 23 },
      animSheet: new ig.AnimationSheet( 'media/button.png', 75, 23 ),
      
      pressedDown: function() {
        console.log( 'pressedDown' );
      },
      pressed: function() {
        console.log( 'pressed' );
      },
      pressedUp: function() {
        console.log( 'pressedUp' );
      }
    });
  }
});

ig.main( '#canvas', MyGame, 60, 320, 240, 1 );

});

Out of curiosity MartinGr were you using box2d? Such as...

MyGame = ig.Box2DGame.extend({

I am, and sometimes my buttons will randomly fall down the screen. Maybe related.

I looked into this a little further and found an issue & fix when using box2d games.

Add line 6 below the button plugin please. It prevents the buttons from falling when you spawn them at a certain position. This is necessary when using a box2d implementation.

 Button = ig.Entity.extend({
            size: { x: 80, y: 40 },
            text: [],
            textPos: { x: 5, y: 5 },
            textAlign: ig.Font.ALIGN.LEFT,
            gravityFactor: 0, <<<< THIS LINE IS IMPORTANT
            font: null,

I wasn't using Box2d. It's probably also worth mentioning I didn't use text on the buttons either. But that shouldn't affect the buttons draw() method.

That's how my init() looks like

init: function() {
		
		ig.input.bind( ig.KEY.LEFT_ARROW, 'left' );
		ig.input.bind( ig.KEY.RIGHT_ARROW, 'right' );
		ig.input.bind( ig.KEY.UP_ARROW, 'up' );
		ig.input.bind( ig.KEY.DOWN_ARROW, 'down' );
		ig.input.bind( ig.KEY.ENTER, 'restart' ); 
		ig.input.bind( ig.KEY.MOUSE1, 'click' ); 
		
		this.loadLevel(LevelLanguageselect);
		
		//English 
		this.spawnEntity( Button, 140, 140);
		//Spanish 
		this.spawnEntity( Button, 260, 140, {
			language: 'spanish',
			animSheet: new ig.AnimationSheet( 'media/spanish.png', 107, 68 ),
		});
		//French 
		this.spawnEntity( Button, 380, 140, {
			language: 'french',
			animSheet: new ig.AnimationSheet( 'media/french.png', 107, 68 ),
		});
		//German 
		this.spawnEntity( Button, 140, 220, {
			language: 'german',
			animSheet: new ig.AnimationSheet( 'media/german.png', 107, 68 ),
		});
		//Russian
		this.spawnEntity( Button, 260, 220, {
			language: 'russian',
			animSheet: new ig.AnimationSheet( 'media/russian.png', 107, 68 ),
		});
		//Portuguese
		this.spawnEntity( Button, 380, 220, {
			language: 'portuguese',
			animSheet: new ig.AnimationSheet( 'media/portuguese.png', 107, 68 ),
		});
		//Arabian
		this.spawnEntity( Button, 200, 300, {
			language: 'arab',
			animSheet: new ig.AnimationSheet( 'media/arab.png', 107, 68 ),
		});
		//Estonian
		this.spawnEntity( Button, 320, 300, {
			language: 'estonian',
			animSheet: new ig.AnimationSheet( 'media/estonian.png', 107, 68 ),
		});
		
		this.initializeTranslations();
		
	},

Hum, it's getting weirder. I don't see a problem there. I tried a little around to break it, but didn't succeed. Sorry, nothing I can do here.

Phillip. I'm using this plugin pretty extensively now in multiple different ways. I'll be sure to post any of my findings here. One thing I added was an option to make it a "toggler" button. Which sets the active / idle state as a toggle.