GUI displays in playground, but not in project

Questions
1

Seeking some general advice on a problem I am having. I have a very simple 2D GUI that displays a rectangle with some text. It renders as intended in the playground, but not in my project (which is in a fullscreen canvas in an Electron app). The rest of my project works great without any crashes or other major issues. Does anyone have an idea on what the problem could be?

Edit:
Okay, I have isolated the problem. It has something to do with the horizontalAlignment and verticalAlignment, which work as intended in the playground (placing the rectangle in the lower lefthand corner of the screen, but in my project the rectangle just disappears).

2

Hi @nate and welcome to the forum. Sorry you have not got any replies yet. When code works in the playground and not in your project it is nigh on impossible to give a solution as the evidence is then that the problem is somewhere in your containing code.

Is the code in your project the same as the playground?
Are you copying over the playground code using this structure First Steps - Babylon.js Documentation to copy the PG code into your project?
What happens in your project when you align your GUI to the center position?

Any chance of you linking to a live example of your project? You could try reproducing in JSFiddle :slightly_smiling_face:

1 Like
3

Thanks for the response. I’ve tested it some more now.

Here are situations where the rectangle GUI does not appear in my project:

  • horizontalAlignment set to left and verticalAlignment set to bottom does not display.
  • horizontalAlignment set to right and verticalAlignment set to top does not display.
  • horizontalAlignment set to right and verticalAlignment set to bottom does not display.
  • horizontalAlignment set to right and verticalAlignment set to center does not display.
  • horizontalAlignment set to center and verticalAlignment set to bottom does not display.

Here are other situations where it does appear as expected in my project:

  • horizontalAlignment set to left and verticalAlignment set to top does display.
  • horizontalAlignment set to left and verticalAlignment set to center does display.
  • horizontalAlignment set to center and verticalAlignment set to center does display.
  • horizontalAlignment set to center and verticalAlignment set to top does display.

Regarding my project, it is an Electron/React app, written in ES6. Unfortunately, I think it is probably a bit too big (with all the assets and numerous files) to upload to a site like JSFiddle. Since the top/left configuration works, I will just go with that for now, as there are other parts of the project I’d like to focus on instead.

4

Probably the best idea for now. When you get back to the problem you could consider github pages if you need to share the code and a live example