Create a gist now

Instantly share code, notes, and snippets.

@Houly /Button.js
Last active Aug 16, 2016

What would you like to do?
A simple Button for Impact.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;
}
});
});
// 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' );
}
});

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:

button

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.

auz1111 commented Jun 19, 2012

Hi, is there a demo for this script?

Owner

Houly commented Jun 19, 2012

Not a button only one. I used the buttons in my 7dfps attempt here: http://think-jeckel.de/game/gorilla/

But normally you just use them like this

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()
  }
)

auz1111 commented Jun 19, 2012

Got it. Thanks for the script!

How do I access this button? I tried

ig.game.getEntitiesByType("Button")

and

ig.game.getEntityByName("mybuttonname")

and neither work.

OK, it looks like I can loop through all entities like this:
for (var i in ig.game.entities){ if (ig.game.entities[i].name) console.log(ig.game.entities[i].name); }

to get the entity by name

Thanks for the script! I got it to work. Got a long way to go to be good in real programming.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment