Forums » Help » Button

I have spent a few hours browsing the impact forums for how to create a button class ( total n00b ) and all I could find was this snippet that looked pretty perfect but I had no idea how to put it in impact.

https://gist.github.com/Houly/1395616

I did look in the docs about entities and will read it more tonite but I am sure it will be as readable to me as it is now. (( meaning not much ))

If someone could explain it in the most basic level, as if to someone who has a medium understanding of javascript, that would be much appreciated in helping me get my project off the ground.

1.) Create a new folder in your 'lib' directory. Name this new folder ''plugins'.
2.) Create a new JavaScript file in your plugins folder; create a .txt file then rename it to button.js.
3.) In your main.js, under your requires() header, add: 'plugins.button'
4.) Use

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

to create a button, just like you would any other entity.

Okay I tried doing all this and went a run the test, the canvas doesnt show up.

I did step one and on step two when I created the button.js, I copied the code from the link provided, and put that inside of the button.js.

'plugins.button' was required and.... nothing...

There is a button.png in the media file just in case you ask.
This is what is in the main.js file.

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

MyGame = ig.Game.extend({
	
	// Load a font
	font: new ig.Font( 'media/04b03.font.png' ),
	
	
	init: function() {
		// Initialize your game here; bind keys etc.
	},
	
	update: function() {
		// Update all entities and backgroundMaps
		this.parent();
		
		// Add your own, additional update code here
	},
	
	draw: function() {
		// Draw all entities and backgroundMaps
		this.parent();
		
		
		// Add your own drawing code here
		var x = ig.system.width/2,
			y = ig.system.height/2;
		
		this.font.draw( 'Never give up, Dandre!', x, y, ig.Font.ALIGN.CENTER );
	}
});

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


// Start the Game with 60fps, a resolution of 320x240, scaled
// up by a factor of 2
ig.main( '#canvas', MyGame, 60, 320, 240, 2 );

});

What error is being displayed in the console? Settings -> JavaScript console or Settings -> Developer tools. If you are on Windows, you might have the 'Hide Known File Extension' feature turned on, meaning by renaming a .txt file to button.js it is actually turning into button.js.txt and causing a crash when you go to load.

Uncaught SyntaxError: Unexpected identifier; main.js:62

That was the one error in the console.

Add }); to line 58 and it should fix that error.

Essentially you're missing the closing braces.

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' );
  }
}); // <--- This here.

Okay. Well now that error is not showing up but now I have an type error of width not being defined even through I am sure it is.

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

MyGame = ig.Game.extend({
	
	// Load a font
	font: new ig.Font( 'media/04b03.font.png' ),
	
	
	init: function() {
		// Initialize your game here; bind keys etc.
	},
	
	update: function() {
		// Update all entities and backgroundMaps
		this.parent();
		
		// Add your own, additional update code here
	},
	
	draw: function() {
		// Draw all entities and backgroundMaps
		this.parent();
		
		
		// Add your own drawing code here
		var x = ig.system.width/2,
			y = ig.system.height/2;
		
		this.font.draw( 'Never give up, Dandre!', x, y, ig.Font.ALIGN.CENTER );
	}
});

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


// Start the Game with 60fps, a resolution of 320x240, scaled
// up by a factor of 2
ig.main( '#canvas', MyGame, 60, 320, 240, 2 );
});

Uncaught TypeError: Cannot read property 'width' of undefined---- main.js:41.

-------

I am not an expert with javascript nor impactjs but isn't it already defined?

( All of this to test a button )

No, it's not, because at line 41 the game has not been created yet.

Try spawning the Button after the game is created:

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


MyGame = ig.Game.extend({

    // Load a font
    font: new ig.Font('media/04b03.font.png'),


    init: function() {
        this.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');
            }
        });
    },

    update: function() {
        // Update all entities and backgroundMaps
        this.parent();

        // Add your own, additional update code here
    },

    draw: function() {
        // Draw all entities and backgroundMaps
        this.parent();


        // Add your own drawing code here
        var x = ig.system.width / 2,
            y = ig.system.height / 2;

        this.font.draw('Never give up, Dandre!', x, y, ig.Font.ALIGN.CENTER);
    }
});

// Start the Game with 60fps, a resolution of 320x240, scaled
// up by a factor of 2
ig.main('#canvas', MyGame, 60, 320, 240, 2);


});

Wow Jon you really know your stuff. Thanks. I got a button. Now time to find out how to use it I suppose.