Search the Community

I am trying to implement a zoom/drag functionality with some menus over the map. Think of Age o Empires 3, you basically have a map on which you can do zoom and drag, but you also have som menus that are always over the screen. Check this for clarity. So far. I have implemented the zoom/drag by modyfing the x, y and scale attributes of game.scale. But this work pretty good when the scale is big enough to cover the whole screen. But what I need is some kind of viewport that is smaller than the screen (like in Age of Empires) where all the zoom/drag works. The remaining parts of the screen that are not part of the viewport are filled by the UI menus. So far I have put the menus outside the world like I posted here. I attached an image with what I mean by viewport and menus in case is not clear Thanks :)!

While working on my current project, an RPG with a Pokémon-esque menu-based battle system, I've begun to struggle with figuring out how to have complex, multi-layer, text (BitmapText, rather than button or image-based) menus. By "multi-layer", I mean that a menu can bring up another menu, ad infinitum, all potentially with different menu layouts (a list or a grid, for example). By "complex", I mean that the selections within menus can have wildly varying results; there could be a different function called by each selection, or there could be a few different functions that receive different parameters depending on the menu selection. An example: -Fight -Talk -Use Item -Run Away Selecting Fight brings up the following menu that appears on top of or next to the previous menu: -Attack1 -Attack3 -Attack2 -Attack4 Selecting any of those attacks calls a particular function targeting an enemy. Selecting Use Item brings up the following menu: -Item1 -Item2 -Item3 Selecting any of those items would call a shared function, passing in the name and stats of the item as parameters. Selecting Talk calls a menu with a list of things to say. Each selection would trigger a short dialogue, with periodic menus of its own, before returning to the Talk menu (or the first menu). Selecting Run Away calls another menu: Are you sure? -No -Yes Yes ends the battle, closing all previous menus and opening up another image to show post-battle information, while no simply closes the yes/no menu and returns the player to control of the previous menu. Pressing the back button on any menu would return the player to the previous menu. So, does anyone know of an elegant way to implement such a system in Phaser? Suggestions, links to tutorials or guides, pseudocode, descriptions, and actual working Phaser code are all welcome. Something that minimizes hard-coding, so as to allow things like an external XML, JSON, or text file that contains, say, character dialogue, to create menus for branching dialogue purposes, would be even more amazing. I'd like to avoid using the DOM or anything outside of Phaser for visual display, but anything along those lines that anyone is willing to share could still be helpful. I'll be working on this for a while, so if no one has posted a better response, I'll try to sum up as close as I am able to get over the next week of work. Thanks!