Hello, sorry another basic question!
Is it possible to have a simple menu build via text hyperlink in Phaser 3 (latest build) ?
I’ve got a main menu looking pretty much like this :
Funfair | About the author | Buy the books | Wordtamer certificates | University of Winchester | Contact
and clicking on word(s) between pipes (|) loads a different section…
If this isn’t supported is it possible to have an html overlay div with regular html links or something like that?
Hi Slavomir,
I assume this is a game you’re working on? I haven’t tried it, but since text are considered game objects in Phaser 3, I would think you can call setInteractive on each text object, then attach a pointerdown event to each one as well. In each pointerdown event, you should be able to set window.location.href to the link you want to redirect to. Hopefully this helps. If you would like me to try making an example, I can see what I can do. 
Hello,
thank you for taking time to answer my question. So just a quick explanation about a nature of a project, I’m remaking this flash website : http://wordtamer.co.uk/ to Phaser. You will probably need to view it in Firefox, as Chrome won’t let me run http site in flash…
It’s a funfair themed website , with a paralax home screen, that launches individual funfair games, that serves as selectors for some words, that will be a basis for creative writing exercise later.
The home screen has a text based menu that loads some other sections of the site as well:
Your suggested approach is I guess fine in general, however when you get to nitty gritty details, that’s when the issues occurr.
So for example, to put mouse events on text, you would have to put them on a ENTIRE textfield rigtht?
but then… how do you know which word was clicked? Or even how do you show the rollover states on individual menu items?
So then you have to break it down to inidivudual text fields + dividers, but then you have to manage sizing, event handling and alignment and spacing of 11 separate textfields (6 menu items plus 5 dividers) , which could get complicated…
So much easier option would be to use scene.add.dom and have a div with the menu prebuilt, and phaser sync it’s position with canvas… However, add.dom command no longer exists , well at least not in the current build?
I could still have it in div DOM elements placed on the top of the canvas, and move/resize/sync its position with the canvas… BUT, then, how do I sent these commands to phaser?
You are talking about doing this in html like it’s different. 
But think about it, you also create a separate link for each section, and they all have an url to point to and separate mouse events.
Well, it’s exactly the same here. And yes, it’s a bit easier to do with html and css because it’s made for that, but fortunately, this is programming and you can create functions and variables that do most of the repetitive work and end up with a simple list of link names and associated events to trigger on click.
@SlavomirDurej here’s what I had in mind:
https://codepen.io/anon/pen/zQYWJa?editors=0011
To be honest, after reading your reply, I would almost just make the site with regular old HTML and CSS, then set the z-index of the canvas element to a lower depth. You can set the background image of the page using the background-image property in CSS. Most of what you want can simply be made with HTML and CSS. I’d recommend only making the interactive part under the “Word the Amazing Tamer” branding at the top the Phaser game. Even if the links at the bottom interact with the interactive experience, you can set IDs for each of them as HTML anchor tags, which you can grab with JavaScript and trigger different things in the Phaser “game”. Please let me know if you have any questions.
That’s awesome mate, thanks! I haven’t done any work with Phaser text yet, so didn’t know if there are going to be any issues with test metrics, for example, I am pleasantly surprised you can use txt.width inside a for loop, i.e. text width is getting correctly rendered and measured inside a cpu cycle.
And yes it would be quite different in html, as only thing you’d have to take of manually would be assign a separate event handlers for the menu items, but for example there would be no need to manually program a text flow into 2 lines if the stage resizes, or program manual horizontal alignment etc…
Thank you, I was thinking the same thing as well… as there are many text based pop ups that would probably be pain to made in Phaser but relatively easy in HTML…
it just a matter of seamlessly integrating those on the top of the canvas / phaser div.
made a short video capture of a current version here: https://www.youtube.com/watch?v=1m0qU3BfBWc
If you notice a lot of those text based scenes slide into the view under the word tamer logo and cropped by the rounded frame border…
What mechanics would you suggest to communicate between phaser and and those pop up html elements? For example, when I dismiss the pop up and need to resume the paralax scrolling in Phaser, or when I need to trigger the pop up from phaser? Some sort of global scope callbacks maybe?
You may want to leverage Phaser’s DOMElement for this. Checkout some of the demos in the Labs.
those demos don’t work from me (in chrome) …
I get these error messages in console:
Uncaught TypeError: this.load.css is not a function
and Uncaught TypeError: this.add.dom is not a function ?
The DOM Elements are for 3.17 only, won’t work in any previous version unless you’ve done a custom build with the experimental flag enabled. They are, however, exactly how I’d handle this requirement.
I’ve checked the github, there’s no tag for v3.17 ? is that in private beta ?
