Search the Community

Hello, good afternoon. please can someone help me is that I am learning to use phaser 3. is to see if anyone could do me the favor of showing me how to do a can I do a basic menu in phaser 3 or a menu example. thank you very much I appreciate the help.

I was just searching PGs for examples of AdvancedDynamicTexture.CreateForMesh and came across a really well done menu ( which I converted to TypeScript and am using): https://www.babylonjs-playground.com/#31DGYT#5 There's no menu in GUI... I've seen other nice controls like @Pryme8's spinner, dropdown and progress bar. I'm porting my interface from DOM to GUI, so interested to see what's out there before I start creating my own custom controls. One I'll be building for sure is a switcher (http://bootstrapswitch.com/). My question is - does anybody have GUI controls they'd like to share?

Hi all, I've recently started a project that I gave myself to learn more about web based applications. I'm working on building character creation menu, (based on NITW by infinite fall), of which the design I had in mind would eventually look something like this: What I have so far is just a test of one of the sprites I put together: mae.mp4 The sprite is made using just one layer, at the moment. Essentially, while I don't think the concept is too difficult to put together, I'm having trouble finding examples of how to implement relevant sections of code using Phaser 3. If you might be able to give me some examples or resources to look into as to how I could build some of the features, I would greatly appreciate that. So, examples/tutorials/advice I'm looking for regards: -Building multiple menus of images, each accessible by clicking on relevant category titles. -Building one specific menu which gives options for choosing your starting sprite. (Will be cat/alligator/dog etc) -Clicking on images in a certain feature menu triggering that image to be layered onto the sprite. (Where only one of each category can be equipped at any one time) -How to tint the colour of the sprite and clothing objects. (I think layering of facial features may be necessary here, so I may have to restructure my sprite sheet? How does layering work in Phaser 3?) Thanks for having a look, hopefully gathering some examples in one place will help the next person trying to make a similar game too.

Hi everyone, as someone new to Phaser I came across the question most of us (newbies) have after a few hours experimenting.. Am I doing it right?! Obviously there's never only one "right way" of doing things, after watching a few tutorials I ended up with the code below. I'm looking for a feedback in the following topics: Classes - If I am not mistaken I've probably tried 3 differents ways of making classes, this one was the most logical to my eyes. (I'm refering to classes which I want to use as scenes) Var vs this. - Is there any difference? I see people using var x and this.x (I assume I can also use let instead of var since I'm always on the same block) Starting a new scene - This is the part I am really confused about, I have menuNumber initialized in another .js and basically I'm waiting for a pointerdown event to happen in one of the images to then change menuNumber value that will be read through update() since it's an infinite loop in order to start a new scene. Note: Everything is working fine and I'm preloading all the images in another .js file class MainMenu extends Phaser.Scene { constructor() { super({key: "MainMenu"}); } create() { this.add.image(640, 320, "background"); //var title = this.add.image(200, 200, "title"); reduce png size var jogarBut = this.add.image(960, 120, "jogarBut").setInteractive(); var opcoesBut = this.add.image(960, 180, "opcoesBut").setInteractive(); var ajudaBut = this.add.image(960, 240, "ajudaBut").setInteractive(); var rankingBut = this.add.image(960, 300, "rankingBut").setInteractive(); var creditosBut = this.add.image(960, 360, "creditosBut").setInteractive(); var sairBut = this.add.image(960, 420, "sairBut").setInteractive(); //Click on title easter egg - to do menuNumber = -1; jogarBut.on("pointerdown", function (ev) { menuNumber = 0; }); opcoesBut.on("pointerdown", function (ev) { menuNumber = 1; }); ajudaBut.on("pointerdown", function (ev) { menuNumber = 2; }); rankingBut.on("pointerdown", function (ev) { menuNumber = 3; }); creditosBut.on("pointerdown", function (ev) { menuNumber = 4; }); sairBut.on("pointerdown", function (ev) { menuNumber = 5; }); } update() { if(menuNumber===0){ this.scene.start("Jogar"); } else if (menuNumber===1){ this.scene.start("OpcoesMenu"); } else if (menuNumber===2){ this.scene.start("AjudaMenu"); } else if (menuNumber===3){ this.scene.start("RankingMenu"); } else if (menuNumber===4){ this.scene.start("CreditosMenu"); } else if (menuNumber===5){ this.scene.start(""); } } }

Hello! I wasn't sure what to call it but I am working on a game with my husband (terrible idea, he's a designer..) and he asked if I could create a menu screen that plays out a little scene or something. He showed me this video as an example of Mario Kart SNES (only watch the first 35 seconds of so): https://www.youtube.com/watch?v=AlAmXXNz5ac I am aware of how to use states and all but, I only just started using Phaser and I was trying to think out how I would create something similar to the scene played out in the example (Maybe something not so complex), also if this is possible how would I loop this scene, since a user might leave the scene playing to see the end of it? Thank you in advance for all of your help!!

Hi all! My geme have a menu_1 with buttons, if you click some button, then over an old menu_1 creates a new menu_2 with new buttons, but buttons from menu_1 react for click even if it under of new menu_2. I mean, if my button have observable PointerUp and I am creates sprite over this button, then this button react for PointerUp anyway, even under sprite, how I can hide all Observable buttons under one big sprite, that it don't react for pointer, but when I am delete my big sprite, then buttons start react on poiter again? Thank

How can I create start menu in Phaser? I found nothing on that.

here I found example: https://phaser.io/examples/v2/misc/pause-menu but there sholud use game.input.onDown.add (this is little uncomfortable, there should to plot the field x y buttons positions...), I noticed that it depends on the game.paused - if game.paused=true; these any buttons not warking correctly... If I would like use clissic buttons - game.add.button(positionx, positiony, 'button', function(){ }); I must used other idea to paused? I would like to create a more interactive menu (sliders, hover animations, cursor pointer), it is recommended that other solutions to this prolblem? Or maybe better create this menu in html/css? how to do it correct? Thanks for answer

Is it possible to insert a html code inside babylon.js to show a menu ? If it is true ; can anyone give me an example

Hi, I am curious if anyone has used the GamePad to do any type of menu navigation? I would like to be able to support the menu fully with the GamePad just curious if anyone else has done this and has some tips. I am currently using DOM elements for my menu but I am happy to do whatever works best for BabylonJS. Thanks, Matt

Hi, I'm looking at the excellent example at http://playground.babylonjs.com/#HSVQL (lines 118-130) and was wanting to know if there was a way to attach an action to a Dynamic Texture (line 118), or it's related 'context' (line 126) ? I was wanting to use this idea in an in-game 'menu', and be able to display a set of options, you know, like a menu... and the user to be able to select one. I'm using a ArcRotateCamera and love how the text is always facing the user. I believe that an ActionManager is only attachable to a Mesh (and not a DynamicTexture), and the canvas CanvasRenderingContext2D object that the myDynamicTexture.getContext() returns doesn't appear to have any funtionality I'm after (like readMousePosition() or something similar). I initially thought of producing 2D Plane meshes for the menu, but I'm not entirely sure how to go about forcing them to be always facing the user ? Any ideas or guidance is very appreciated. Thanks, bws.

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!

I have a game with a MainMenu state and a Play state. I want to keep my animated background without reloading it (the animation should loop without interruptions) when I change from MainMenu state to Play state. How can I do this?

Hi everyone, I recently found out about Phaser and I'm in love Quick questions: - How do you guys handle a static UI? Sprites/Text inside a group? - I would also like a menu when clicking on an object (think right-click menu). I'd like to move the container to the location of the mouse and "hide" when clicking "outside" that object. Would a sprite be the right way to go about it? Killing it to hide it? - I'm trying to use http://www.kenney.nl/assets UI Asset pack, but I'm not sure how Phaser handles the TextureAtlas XMLs. Any pointers would be appreciated. Thanks!

Hello, I'd like to customize my player by giving the ability to pick different avatars/colors/etc from predefined list. I've already checked phaser examples, and wiki on the github. Would you recommend some examples with the similar behaviour, please?

Hello everyone, I need help on something. I wonder if it's possible to make something like a "drop down menu" when the mouse hovers one mesh. I've got the problem minimized by overriding the right button click. But this option is not viable (since it's a bad practice). So.. I use the left button to point the place where the mesh will move to, the only solutions that occurs to me it's the mouseover event. Any suggestions? Thanks in advance.

Could you help me out with a problem that I have with the game im making. Between the menu and game state (witch has a button that sends me to the gam menu) and game state with tilemap (in witch if you press the enter key it sends me back to the menu). My problem consists in the fact that when I press the enter key in the game state to go back to the menu, the menu button disappears, I've tried to do it from the menu with a game state without tilemap and the button doesn't disappear. As a possible solution Ive thought about if while pressing the enter key apart from redirecting the user to the menu, it destroys the map with the method destroy(), which supposedly eliminates the map and its corresponding layers. As a conclusion, I think that the object map ends up getting deleted, but not its layers. Problem example Link: http://button.ramonserrano.info <--------------------- Github Assets Link: https://github.com/r...m-Button-Phaser Full game: https://googledrive....Cd0E/index.html CODE State Menu (function() { 'use strict'; function Menu() { this.titleTxt = null; this.startTxt = null; } Menu.prototype = { create: function () { var x = this.game.width / 2 , y = this.game.height / 2; this.add.sprite(0, 0, 'menufondo'); this.text = this.add.text(this.world.centerX-650, 500, "PRESS BUTTON PLAY TO GO TO THE GAME", { font: "65px Arial", fill: "#ff0044", align: "center" }); this.playbutton=this.add.button(this.world.centerX - 90, 700, 'play', function () { this.game.state.start('game'); }, this, 2, 1, 0); console.log(this.playbutton); }, update: function () { } }; window['button-problem'] = window['button-problem'] || {}; window['button-problem'].Menu = Menu; }()); State Game (function() { 'use strict'; function Game() { this.player = null; this.map; this.layer; this.cursors; this.music; this.moneytext; this.sounddeath; this.soundcoin; } Game.prototype = { create: function () { var x = this.game.width / 2 , y = this.game.height / 2; this.map = this.game.add.tilemap('estomago'); this.map.addTilesetImage('tiles'); this.layer = this.map.createLayer('layer1'); this.layer.resizeWorld(); this.camera.x=3600; this.camera.y=4800; this.text = this.add.text(4200, 4800, "PRESS ENTER to return to menu", { font: "65px Arial", fill: "#ff0044", align: "center" }); this.text.anchor.setTo(0.5, 0.5); }, update: function () { if (this.input.keyboard.isDown(Phaser.Keyboard.ENTER)) { this.game.state.start('menu'); } }, }; window['button-problem'] = window['button-problem'] || {}; window['button-problem'].Game = Game; }());

Could you help me out with a problem that I have with the game im making. Between the menu and game state (witch has a button that sends me to the gam menu) and game state with tilemap (in witch if you press the enter key it sends me back to the menu). My problem consists in the fact that when I press the enter key in the game state to go back to the menu, the menu button disappears, I've tried to do it from the menu with a game state without tilemap and the button doesn't disappear. As a possible solution Ive thought about if while pressing the enter key apart from redirecting the user to the menu, it destroys the map with the method destroy(), which supposedly eliminates the map and its corresponding layers. As a conclusion, I think that the object map ends up getting deleted, but not its layers. Game Link: http://button.ramonserrano.info Github Assets Link: https://github.com/rslnautic/Problem-Button-Phaser