Impact

This forum is read only and just serves as an archive. If you have any questions, please post them on github.com/phoboslab/impact

1 decade ago by NatasZBaker

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 decade ago by lTyl

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.

1 decade ago by NatasZBaker

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

});

1 decade ago by lTyl

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.

1 decade ago by NatasZBaker

Uncaught SyntaxError: Unexpected identifier; main.js:62

That was the one error in the console.

1 decade ago by Joncom

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.

1 decade ago by NatasZBaker

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 )

1 decade ago by Joncom

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


});

1 decade ago by NatasZBaker

Wow Jon you really know your stuff. Thanks. I got a button. Now time to find out how to use it I suppose.
Page 1 of 1
« first « previous next › last »