Forums » Help » Z-Type Menu class

Does anyone know if the menu.js file that is used in Z-Type is available for download?

Would be nice if impact came packaged with it so we dont have to waste development time coding buttons for the main menu screen.

There's a reason it's not public: the code is horrible and not very flexible.

If you still want to give it a shot, here it is: https://gist.github.com/4056456
The basic idea is, that you have a this.menu var in your game class that you .update() and .draw() for each frame (or ignore if no menu is active).

The menu expect to have left, right, up and down bound to the arrow keys as well as click to Mouse1. There are also some hard-coded values in there, e.g. the mouse.x position to decide wether to increase or decrease the volume.

Basic usage:

MyGame = ig.Game.extend({
	menu: null,

	init: function() {
		this.menu = new TitleMenu();
	},

	update: function() {
		if( this.menu ) {
			// Update menu and exit
			this.menu.update();
			return;
		}

		this.parent(); // update game
	},

	draw: function() {
		this.parent(); // draw game

		if( this.menu ) {
			// draw menu on top
			this.menu.draw();
		}
	}
});

I hope you can make sense of this all.

Hey Dominic,

Thanks for the file and instructions. Yea your setup is a bit hackish but if it works it saves me a bit of time.

I got the buttons loaded into my game but i think im running into a scoping issue as i cant interact with any of the buttons and the entities in my intro (moving clouds) are overlapping the buttons.

I have the menu loaded in the main Game class (ig.Game) but my Start screen is being constructed through a different class (ex. StartScreen = ig.Game.extend). I tried loading the menu from the StartScreen class to try and resolve the issue but it wouldn't seem to load.

Have a look at my game and let me know if you are able to determine what the issue might be: http://gamedev.arcadehype.com/wfu/

Thanks.

If your entities overlap the menu, it&039;s simply the drawing order. You should draw the menu as the very last thing in your game's #draw() method, i.e. after calling this.parent(). This shouldn't affect the input, though.

I see two issues in your game: the 'click' action is not bound. You should bind it to mouse1 when the game starts:

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

Also, the mouse position reported by Impact is wrong, because of the CSS scaling of the canvas. This is a bit harder to fix. Can you try to change this, around line 177 in the mousemove method in lib/impact/input.js

this.mouse.x = (tx - pos.left) / ig.system.scale;
this.mouse.y = (ty - pos.top) / ig.system.scale;

to

var internalWidth = parseInt(ig.system.canvas.offsetWidth) || ig.system.realWidth;
var scale = ig.system.scale * (internalWidth / ig.system.realWidth);

this.mouse.x = (tx - pos.left) / scale;
this.mouse.y = (ty - pos.top) / scale;

I hope this works.

Hey Dominic,

I implemented the changes that you suggested but the menu still doesn't work, have a look: http://gamedev.arcadehype.com/wfu/

Any other ideas?

Thanks.

Oh, yes. The Menu still assumes that it's positioned at the center of screen. If you hover over the character on the title screen, you'll see your console.log messages.

In the menu's update method, around line 58, change this:

var xs = ig.system.width/2;

to

var xs = ig.system.width/2 + 170;

just like you did in the menu's draw method.

Hey Dom,

Yup that did the trick thanks. One last thing, how do i enable the rollover effect?

Thanks again.

This was a great jumping off point. I was able to get most of what I want in about 30 minutes, using your code as a base. I hooked this into an empty level for the title screen, the pause screen, and added nested menus without much effort!