Sign in to follow this  
khleug35

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

Recommended Posts

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

    }

 

 

1.png

 

Any other best way???? Thanks

 

 

Share this post


Link to post
Share on other sites

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

The docs for it describe the API: 

image.png.e919f1d0f879900330610d0e515825f9.png

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.