Search the Community

I am planning on making a game with a doom style HUD, this requires me to put a GUI image component at the bottom of the screen. I have this part working correctly, but now I would like to put GUI text components ON TOP of the image. When I try to put these elements at the bottom of the screen they do not move from the middle of the screen. Is there a way I would be able to make an overlay that goes ontop of a GUI element?

Hi Folks, How can I create a over layer so that the meshes in the layer are always drawn on top of the "basic" meshes? It seems that we can have several mesh layers but I can no longer find them in the tutorials. Thanks

Hello guys, currently I'm trying to resize my game to the whole window, while centering a fixed aspect ratio game window in the center, and having padding sprites at the side, but without success. Can you tell me what I should do? Cheers

having trouble figuring this one out. see the following playground reference http://www.babylonjs-playground.com/#1KUECA#1 you should see a cube that should have a red overlay. If you don't see the red overlay, then comment out the "var grassTex = " line and run it again. can't figure out why the texture constructor is interfering with the overlay in all of my test scenarios. the causal factor seems to be the procedural texture constructor, because when i comment that out, the overlay returns. is this a bug or is something else going on here?

Hi, I am trying to figure out whats the best way to create an inventory item (which could be an image, sprite or a button) with partial semi-transparent overlay. The idea is that user clicks on (enabled) inventory item, and then clicks on game area which puts that item on game area. That inventory item should be disabled for a specific period of time. What I am thinking is adding grey semi-transparent overlay on a button, which grows from bottom to top proportionally by be time elapsed. When time elapses, button is enabled again and overlay is removed. What's the correct way to do that?

I have gallery of images representing player's avatars that can be unlocked. Avatar is simple Phaser.Image with transparency. Locked avatars are displayed as darkened version of normal avatars. To avoid duplicate graphics, I would like to use some sort of overlay, but I can't figure it out. I tried to use overlay semi-transparent black rectangle with multiply blend mode in hopes that it would cover only non-transparent parts of avatar, but it just shows semi-transparent black rectangle on top. It is quite possible that I am using it wrong, I can't find any useful examples how to use blend modes and documentation is rather sparse. On more generic term, is there any way how to use image with transparent background as a alpha mask for another image/sprite? From what I understand, you can only use Graphics object as a mask, but is there some hack? It can be slow, it will be used only on a screen with 5 such images and performance is not an issue in this case.

Hey guys, I'm creating a drag and drop interface and using arcade.overlap with onDragStop to position a sprite with a "drop zone" group. Unfortunately, the draggable sprite is large enough to cover two drop zones at the same ime. I have a custom property ("occupied") that is set to true while the sprite x,y is set to the drop zone x,y when a sprite is dropped and overlapping. Unfortunately, it does this for both drop zones in the group and both are "occupied" although only one x,y is used. Hope that makes sense. But my question is how do I only allow for only one sprite to be triggered on overlay?

Hi All, I've been spending some time trying to figure out the best way to add some decent 2D UI elements to a Babylon js game (i.e. alert boxes, status bars,clickable graphics on the edge of the screen). Ideally I'm trying to create the feel I've seen on the HTML5 polycraft game. Currently my only options seems to be: • Use a dynamic texture on a plane always facing the camera - I can't use existing components on here and it seems like it might be quite inefficient rendering all the 2D elements in 3D space. • Use multiple canvas layers - The works and allows the use of pre-built HTML5 canvas components (such as zebkit components), but gets quite messy and your canvas layers have to be precisely sized as clicks don't propagate through layers. What I think I probably really need is a way directly draw in 2D to the canvas as Babylon uses after the 3D rendering cycle completes, is this possible/efficient? Or is there some a simpler way to make a nice UI I have completely missed?

What if you want to show an upgrade screen or another dialog above the game. For example how to display an onscreen instructions dialog above the game. The thing is that I need to pause the game including the physics(ARCADE). The thing is that the arcade physics can't be paused. I believe if I use p2 physics, there is an update call, which I can opt not to call when another popup is displayed. Please share your ideas. It was nice if there was a sleep option in a state and we can switch to another state, then resume later; which I think not possible without a full framework change.