(Solved)What is the Best Way to create start menu?

[khleug35]

The following code is my way to create start menu 

but I think it is stupid way and hard code ..................

Full Code:

game.module('game.main').body(function() {
	game.addAsset('font.fnt');
	game.addAsset('select_arrow.png');
	game.createScene('Main', {
		backgroundColor: "#000000",
		init: function() {
			this.StartGame = new game.Text('Start Game');
			this.StartGame.anchorCenter();
			this.StartGame.x = game.width / 2;
			this.StartGame.y = game.height / 2;
			this.StartGame.addTo(this.stage);
			this.StartGame.interactive = true;
			this.StartGame.mousedown = function() {
				game.system.setScene('Stage1');
			};
			this.HowtoPlayGame = new game.Text('How To Play');
			this.HowtoPlayGame.anchorCenter();
			this.HowtoPlayGame.x = game.width / 2;
			this.HowtoPlayGame.y = game.height / 2 + 150;
			this.HowtoPlayGame.addTo(this.stage);
			this.HowtoPlayGame.interactive = true;
			this.HowtoPlayGame.mousedown = function() {
				game.system.setScene('HowToPlay');
			};
			this.ExitGame = new game.Text('Exit');
			this.ExitGame.anchorCenter();
			this.ExitGame.x = game.width / 2;
			this.ExitGame.y = game.height / 2 + 300;
			this.ExitGame.addTo(this.stage);
			this.ExitGame.interactive = true;
			this.ExitGame.mousedown = function() {
				game.system.setScene('Exit');
			};
			this.arrow_select = new game.Arrow_Select(game.width / 2, game.height / 2);
			this.arrow_select.arrow_select.addTo(this.stage);
		},
		update: function() {}
	});
	game.createClass('Arrow_Select', {
		init: function(x, y) {
			this.arrow_select = new game.Sprite('select_arrow.png');
			this.arrow_select.selectTime = true;
			this.arrow_select.anchorCenter();
			this.arrow_select.position.set(x, y);
		},
		reset: function() {
			if (!this.arrow_select.selectTime) {
				game.Timer.add(500, function() {
					game.scene.arrow_select.arrow_select.selectTime = true;
				});
			}
		},
		update: function() {
			// Movement
			if (game.keyboard.down('UP') && this.arrow_select.selectTime && this.arrow_select.y != 360) {
				this.arrow_select.y = this.arrow_select.y - 150;
				this.arrow_select.selectTime = false;
				this.reset();
			} else if (game.keyboard.down('DOWN') && this.arrow_select.selectTime && this.arrow_select.y != 660) {
				this.arrow_select.y = this.arrow_select.y + 150;
				this.arrow_select.selectTime = false;
				this.reset();
			}
			switch (this.arrow_select.y) {
				case game.scene.StartGame.y:
					if (game.keyboard.down('ENTER')) {
						game.system.setScene('Stage1');
					}
					break;
				case game.scene.HowtoPlayGame.y:
					if (game.keyboard.down('ENTER')) {
						game.system.setScene('HowToPlay');
					}
					break;
				case game.scene.ExitGame.y:
					if (game.keyboard.down('ENTER')) {
						game.system.setScene('Exit');
					}
			}
		}
	});
});

 

The code is working!!!! But I think it is not the clever way do make it, It is hard code

 In Arrow_Select class

I set it to 500 time to select up or down to avoid the Arrow_Select move very fast.

 reset: function(){
       if(!this.arrow_select.selectTime){
            game.Timer.add(500, function() {
            game.scene.arrow_select.arrow_select.selectTime = true;
           }); 
            
        } 
    },

 

In Arrow_Select update tag

When Arrow_Select.y equal the menu choose.y and down "Enter" button , it can start the scene 

 update: function() { 
        
        // Movement
        if (game.keyboard.down('UP') && this.arrow_select.selectTime && this.arrow_select.y != 360) {
            this.arrow_select.y = this.arrow_select.y - 150;
            this.arrow_select.selectTime = false;
            this.reset();
        }
        else if (game.keyboard.down('DOWN')  && this.arrow_select.selectTime && this.arrow_select.y != 660) {
            this.arrow_select.y = this.arrow_select.y + 150;
            this.arrow_select.selectTime = false;
            this.reset();
          } 
         
       switch (this.arrow_select.y){
        case game.scene.StartGame.y:
        if (game.keyboard.down('ENTER')){       
          game.system.setScene('Stage1'); 
        }
        break;
        case game.scene.HowtoPlayGame.y:
        if (game.keyboard.down('ENTER')){       
          game.system.setScene('HowToPlay'); 
        }       
        break;
        case game.scene.ExitGame.y:
        if (game.keyboard.down('ENTER')){    
        game.system.setScene('Exit');   
        }
       }
        

    }

 

 

 

Any other best way???? Thanks

 

 

[Wolfsbane]

I'd take a look at the essentials plugin, and see how it's built.

The docs for it describe the API: 

If you look at your code, you'll see that you're essentially doing this for each menu button. You're 1: creating it with an asset( in your case, Text), 2: setting the x/y coordinates, and 3: setting up a callback method with an action. (In your case: goto scene X/Y/Z)

So you don't have to create so much 'code' in your scene's init, you could write something like:

this.StartGame = new game.Button('Start Game', game.width/2, game.height/2, function() {game.system.setScene('Stage1'});
this.HowToPlay = new game.Button('How to Play', game.width/2, game.height/2+150, function() {game.system.setScene('HowToPlay'});
this.ExitGame = new game.Button('Exit', game.width/2, game.height/2+150, function() {game.system.setScene('Exit'});

 

Now for your arrow code: Tough to say, there's a hundred ways to skin a cat. Maybe one way could be to store the list of buttons as a list(array). and when you move up/down, you simply change 'target', and update x/y.

E.g.

game.createClass('Arrow_Select', {
		init: function(x, y, buttonList) {
            this.buttonList = buttonList;
            this.target = 0; //0 = first element in list.
			this.arrow_select = new game.Sprite('select_arrow.png');
			this.arrow_select.selectTime = true;
			this.arrow_select.anchorCenter();
			this.setXY(); //see new helper function below.
		},
        setXY: function() {
            this.arrow_select.position.set(this.buttonList[target].position.x, 
                                            this.buttonList[target].position.y);
        },
		reset: function() {
			if (!this.arrow_select.selectTime) {
				game.Timer.add(500, function() {
					game.scene.arrow_select.arrow_select.selectTime = true;
				});
			}
		},
		update: function() {
             if (game.keyboard.down('UP') && this.arrow_select.selectTime) {
                  this.target -= 1;
                  if (this.target < 0 ) {
                       this.target = this.buttonList.length-1;
                  }
             }
             else if (game.keyboard.down('DOWN') && this.arrow_select.selectTime) {
                  this.target += 1;
                  if ( this.target >= this.buttonList.length) {
                      this.target = 0;
                  }
             }
             //update position
             this.setXY();

             if (game.keyboard.down('ENTER')) {
                 this.buttonList[target].doButtonAction(); // Arrow Object shouldn't care what this action is. It should be coded in the button.
             }
		}
	});

(gosh.. this code editor is horrendous for formatting... )

 

Does this way make sense? A little less hardcoded? This way the arrow object doesn't know about the x/y coordinates, and it doesn't even know what action it's meant to take on object. That's all still stored in the button object.

[khleug35]

@Wolfsbane

Thank you for help, your code is clear and helpful .