Button.js

// A Button Entity for Impact.js

ig.module( 'plugins.button' )
.requires(
  'impact.entity'
)
.defines(function() {

  Button = ig.Entity.extend({
    size: { x: 80, y: 40 },
    
    text: [],
    textPos: { x: 5, y: 5 },
    textAlign: ig.Font.ALIGN.LEFT,
    
    font: null,
    animSheet: null,
    
    state: 'idle',
    
    _oldPressed: false,
    _startedIn: false,
    _actionName: 'click',
    
    init: function( x, y, settings ) {
      this.parent( x, y, settings );
      
      this.addAnim( 'idle', 1, [0] );
      this.addAnim( 'active', 1, [1] );
      this.addAnim( 'deactive', 1, [2] );

      if ( this.text.length > 0 && this.font === null ) {
        if ( ig.game.buttonFont !== null ) this.font = ig.game.buttonFont;
        else console.error( 'If you want to display text, you should provide a font for the button.' );
      }
    },
    
    update: function() {
      if ( this.state !== 'hidden' ) {
        var _clicked = ig.input.state( this._actionName );
        
        if ( !this._oldPressed && _clicked && this._inButton() ) {
          this._startedIn = true;
        }
        
        if ( this._startedIn && this.state !== 'deactive' && this._inButton() ) {
          if ( _clicked && !this._oldPressed ) { // down
            this.setState( 'active' );
            this.pressedDown();
          }
          else if ( _clicked ) { // pressed
            this.setState( 'active' );
            this.pressed();
          }
          else if ( this._oldPressed ) { // up
            this.setState( 'idle' );
            this.pressedUp();
          }
        }
        else if ( this.state === 'active' ) {
          this.setState( 'idle' );
        }

        if ( this._oldPressed && !_clicked ) {
          this._startedIn = false;
        }

        this._oldPressed = _clicked;
      }
    },
    
    draw: function() {
      if ( this.state !== 'hidden' ) {
        this.parent();

        if ( this.font !== null ) {
					for ( var i = 0; i < this.text.length; i++ ) {
	          this.font.draw( 
	            this.text[i], 
	            this.pos.x + this.textPos.x - ig.game.screen.x, 
	            this.pos.y + ((this.font.height + 2) * i) + this.textPos.y - ig.game.screen.y, 
	            this.textAlign
	          );
	        }
				}
      }
    },
    
    setState: function( s ) {
      this.state = s;
      
      if ( this.state !== 'hidden' ) {
        this.currentAnim = this.anims[ this.state ];
      }
    },
    
    pressedDown: function() {},
    pressed: function() {},
    pressedUp: function() {},
    
    _inButton: function() {
      return ig.input.mouse.x + ig.game.screen.x > this.pos.x && 
             ig.input.mouse.x + ig.game.screen.x < this.pos.x + this.size.x &&
             ig.input.mouse.y + ig.game.screen.y > this.pos.y && 
             ig.input.mouse.y + ig.game.screen.y < this.pos.y + this.size.y;
    }
  });

});

sample.js

// a Sample spawning call

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' );
  }
});

Usage.md

In order that the button will work, you have to bind the needed key. The default name of the action is click. In your game init write this:

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

Can render Text. Just specify your ig.Font when spawning the button or set ig.game.buttonFont Specify the animSheet, otherwise you won't see the button. If you need the different states, your animSheet must contain all three of them. Left is idle, middle is active and right is deactive

To see something override the drawing method or specify an animSheet. If you just want to test this class you can use this image:

Has 4 States:

• hidden - Not shown
• idle - just sitting there
• active - someone is pushing on it
• deactive - shown, but not usable

And 3 Events

• pressedDown - activated when pressed Down
• pressed - constantly fires when pressing
• pressedUp - activated when button released

Use like you want to, just don't blame me for anything.