Jump to content

Text box and other UI elements in Phaser


freedev
 Share

Recommended Posts

Hello,

 

I need to add some UI elements in a stage of my game (i.e. character creation). I'll start with the "easiest", which is a simple text box where users can type something into.

 

I've done some research and I found that there are two proposed solutions:

 

1) Use a solution like http://www.zebkit.com/.

 

I tried to integrate Zebra with Phaser without any success, and since I couldn't find an example of someone who successfully done it, I gave up.

 

2) Use an input element, place it in the DOM, and position it relatively to the canvas using CSS.

 

I manage to do that easily, as well as keep the position of the element relative to the canvas size, using something similar to the following (just some rough code found in an example):

var x = this.game.scale.offset.x + (400 * this.game.scale.scaleFactorInversed.x);var y = this.game.scale.offset.y + (250 * this.game.scale.scaleFactorInversed.y);$('#input-test').css("left", x + "px");$('#input-test').css("top", y + "px");

But, I'm having issues with scaling. This is my scaling setup:

this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;this.scale.windowConstraints.bottom = "visual";this.scale.pageAlignHorizontally = true;

Therefore, if I resize the browser, the input element stays at the correct position, but obviously it isn't scaled along with the rest of the game.

 

I thought of a solution (in theory) that would run along with the positioning code and calculate the proportions of the canvas so I would then calculate what the optimal size and font size of the input would be and scale it up or down using CSS, but that seems like an overkill for such a simple thing as an input box.

 

Is there an existing solution for Phaser that I missed?

 

If not, how do you tackle such issues, since I assume that most games require at least some input (e.g. the player's name)?

 

Thanks

Link to comment
Share on other sites

  • 2 months later...
  • 2 months later...

1) Use a solution like http://www.zebkit.com/.

 

I tried to integrate Zebra with Phaser without any success, and since I couldn't find an example of someone who successfully done it, I gave up.

 

I tried too without any success :( would be great if someone could help it for this solution.

Cause the DOM way is problematic, I'm not able to put DOM element in front of Paser canvas in fullscreen mode. It seems only be working with the non-fullscreen mode :(

Link to comment
Share on other sites

  • 2 months later...

So, I too have tried to match the two together with no success. It seems they both control cycles of the canvas and can't easily interact. You can however overlay 2 Canvas elements and share data through variables. In this case I am just doing it on create but it could happen on a button click etc. Swap with your own image. I set the x value of the combo box relative to the image. Zebra UI background is transparent. Example:

<!DOCTYPE html>
<html>
<head>
    <script src="js/phaser.min.js"></script>
    <script src="js/zebra.min.js"></script>
    <style type="text/css">
        body {
            background-color: #EEEEEE;
            width:500px;
            margin-left:auto;
            margin-right:auto;
            text-align:center;
        }

        #rty {
            position:relative;
        }

        #asd {
            z-index: 1;
            position: absolute;
        }

        #qwe {
            z-index: 2;
            position: absolute;
        }
    </style>
</head>

<body>
    <h2>Phaser and Zebra Overlaid</h2>
    <div id="rty">
        <div id="asd"></div>
        <div id="qwe">
            <canvas id="myCanvas" width="500" height="300"></canvas>
        </div>
    </div>
    <script type='text/javascript'>
        var firstRun = 0;
        var game = new Phaser.Game(500, 300, Phaser.AUTO, "asd", { preload: preload, create: create }, false);

        function preload() {
            game.load.image('pic', 'images/Android.png');
        }

        function create() {
            var j = game.add.sprite(20, 20, 'pic');
            if(firstRun == 0)
            {
                firstRun = 1;
                zebra.ready(function () {
                    eval(zebra.Import("ui", "layout"));

                    var canvas = new zebra.ui.zCanvas("myCanvas");
                    var root = canvas.root;

                    canvas.setBackground("transparent");

                    var txt = new zebra.ui.Combo();
                    txt.setBounds(j.x + 50, 20, 200, 30);
                    root.add(txt);
                });
            }
        }

    </script>
</body>
</html>

 

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...