Calling Button to appear and make it disapper

FahrulID · February 17, 2018

I'm very new on Phaser, Hope you all can help me

This is my fresh code

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>hello phaser!</title>
        <script src="//cdn.jsdelivr.net/phaser/2.5.0/phaser.min.js"></script>
    </head>
    <body>

    <script type="text/javascript">

    window.onload = function() {

        //  Note that this html file is set to pull down Phaser 2.5.0 from the JS Delivr CDN.
        //  Although it will work fine with this tutorial, it's almost certainly not the most current version.
        //  Be sure to replace it with an updated version before you start experimenting with adding your own code.

        var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });

        function preload () {
			game.load.spritesheet('courtrecordbtn', 'src/images/court-record.png', 194, 71);
			game.load.spritesheet('profilesbtn', 'src/images/profiles.png', 194, 71);
			game.load.spritesheet('nextbtn', 'src/images/next.png', 194, 71);
            game.load.image('logo', 'phaser.png');

        }
	
        function create () {
            var logo = game.add.sprite(game.world.centerX, game.world.centerY, 'logo');
            logo.anchor.setTo(0.5, 0.5);
			// Court-Record Button
			var courtrecordbtn = game.add.button(606, 0, 'courtrecordbtn', actionOnClick, this, 2, 1, 0);
			courtrecordbtn.onInputOver.add(over, this);
			courtrecordbtn.onInputOut.add(out, this);
			courtrecordbtn.onInputUp.add(up, this);
			// Profiles Button
			var profilesbtn = game.add.button(0, 0, 'profilesbtn', actionOnClick, this, 2, 1, 0);
			profilesbtn.onInputOver.add(over, this);
			profilesbtn.onInputOut.add(out, this);
			profilesbtn.onInputUp.add(up, this);
			// Next Button
			var nextbtn = game.add.button(game.world.centerX - 97, 529, 'nextbtn', actionOnClick, this, 2, 1, 0);
			nextbtn.onInputOver.add(over, this);
			nextbtn.onInputOut.add(out, this);
			nextbtn.onInputUp.add(up, this);
        }
		
		function up() {
			console.log('button up', arguments);
		}

		function over() {
			console.log('button over');
		}

		function out() {
			console.log('button out');
		}

		function actionOnClick () {
			background.visible =! background.visible;
		}
    };

    </script>

    </body>
</html>

I want to know how to make a button or images will appear if called, and can disappear too.

Thankyou Very Much....

Edited :
I Figured out i can use "If ", but i want to know another simplier way

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>hello phaser!</title>
        <script src="//cdn.jsdelivr.net/phaser/2.5.0/phaser.min.js"></script>
    </head>
    <body>

    <script type="text/javascript">

    window.onload = function() {

        //  Note that this html file is set to pull down Phaser 2.5.0 from the JS Delivr CDN.
        //  Although it will work fine with this tutorial, it's almost certainly not the most current version.
        //  Be sure to replace it with an updated version before you start experimenting with adding your own code.

        var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });
		
		// Variable
		var courtrecordbtnenable = true;
		var profilesbtnenable = true;
		var nextbtnenable = true;
		
        function preload () {
			game.load.spritesheet('courtrecordbtn', 'src/images/court-record.png', 194, 71);
			game.load.spritesheet('profilesbtn', 'src/images/profiles.png', 194, 71);
			game.load.spritesheet('nextbtn', 'src/images/next.png', 194, 71);
            game.load.image('logo', 'phaser.png');

        }
	
        function create () {
            var logo = game.add.sprite(game.world.centerX, game.world.centerY, 'logo');
            logo.anchor.setTo(0.5, 0.5);
			// Court-Record Button
			if (profilesbtnenable == true) {
			var courtrecordbtn = game.add.button(606, 0, 'courtrecordbtn', delnextbtn, this, 2, 1, 0);
			courtrecordbtn.onInputOver.add(over, this);
			courtrecordbtn.onInputOut.add(out, this);
			courtrecordbtn.onInputUp.add(up, this);} else { }
			// Profiles Button
			if (profilesbtnenable == true) {
			var profilesbtn = game.add.button(0, 0, 'profilesbtn', profilesbtnclicked, this, 2, 1, 0);
			profilesbtn.onInputOver.add(over, this);
			profilesbtn.onInputOut.add(out, this);
			profilesbtn.onInputUp.add(up, this);} else { }
			// Next Button
			if (nextbtnenable == true) {
			var nextbtn = game.add.button(game.world.centerX - 97, 529, 'nextbtn', actionOnClick, this, 2, 1, 0);
			nextbtn.onInputOver.add(over, this);
			nextbtn.onInputOut.add(out, this);
			nextbtn.onInputUp.add(up, this);} else { }
        }
		
		function up() {
			console.log('button up', arguments);
		}

		function over() {
			console.log('button over');
		}

		function out() {
			console.log('button out');
		}

		function actionOnClick () {
			background.visible =! background.visible;
		}
		
		function profilesbtnclicked() {
			alert('Profiles Button Clicked');
		}
		
		function delnextbtn() {
			
		}
    };

    </script>

    </body>
</html>

mattstyles · February 17, 2018

Sorry, I didn't read all your code, but,

'If' is just about the simplest logic construct we have in almost every language (and most powerful), our usual problem is adding layers of complexity and abstraction when things like a simple 'If' are more than good enough.

There are some patterns to stop lots of 'Ifs' in a row, or the dreaded if..else...else...else (switch being one, after that there are several design patterns to help, try googling Javascript Design Patterns, but they are obviously more complex than a list of ifs) but there is absolutely nothing wrong with it.

Despite some formatting issues your code with those if statements is very clear, I'd maybe throw them in to their own functions, but thats just preference, it doesn't make a whole lot of difference.

Someone once said (I don't remember who) "coding is just a load of if statements".

FahrulID · February 17, 2018

oh yeah ty, i figured a way that more simpler

function profilesbtn(enable){
			if (enable == true) {
			var profilesbtn = game.add.button(0, 0, 'profilesbtn', profilesbtnclicked, this, 2, 1, 0);
			profilesbtn.onInputOver.add(over, this);
			profilesbtn.onInputOut.add(out, this);
			profilesbtn.onInputUp.add(up, this);} else { }
		}

Sign In

Calling Button to appear and make it disapper

Recommended Posts

FahrulID

Link to comment

Share on other sites

mattstyles

Link to comment

Share on other sites

FahrulID

Link to comment

Share on other sites

Recently Browsing 0 members

Browse

Activity