How can i apply image to the button created through script and how apply custom sky box

Questions
, ,
1

i havew created buton throuch script and want to give an image to it and if i go the edit option and make changes and come back and click on play then the ui gets back to the same as the old and i also want to apply a custom sky box image which i have the link but i am unable to apply it.

2

Hi,

Want to show is an example in the playground? We will be much better equipped to understand the issue and will be able to point out to a solution :blush:

3

its the project and in the sky box code in line 22 starting its commented

4

A skybox consists usually of 6 images that are applied to the box. It seems like you have only one image, of I’m not mistaken.
Does this page help?

Regarding the sky material, it works differently. It emulates sky for you. You can read about it here:

5

well i tried that but the image link that i am using is not being displayed can u help i have given the project link above that will be very great full

6

The image you are using is incorrect. it is a single image, but the skybox expects 6 images. As the documentation states. There is little I can do with the image you provided. You can always try with the skybox images we provide, but I am not sure this is what you want?

7

Thanks for the help i did it with a little different method. I want to know that if we make any changes in ui by clicking on the edit button in playground then the GUI does not gets saved and i want to make the ui responsive how can i do that please help me in this issue @msDestiny14

8

For myself I would save my button (either through the snippet server or locally) once using the editor. Then you can load it back into your playground in code. Here’s an example:

let advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("GUI", true, scene);  
let loadedGUI = await advancedTexture.parseFromSnippetAsync("#MMWSUI");

To my knowledge if the UI was created in code and then you load up the editor, that change will only remain for that instance you are running for playground. This is similar to the particle editor for example. If you make changes but don’t save that particle system as either a local or snippet then reloading the project will just erase your work.

I think @DarraghBurke can elaborate more on the workflow between the GUI editor and the playground and verify this. Thanks! :slight_smile:

1 Like
9

@msDestiny14’s suggestion is good. If you load the GUI from a snippet into the playground, when you save changes made using the GUI editor, it should automatically update the snippet ID to the latest version. However, you will have to save your changes.

For responsiveness, the biggest thing is to make sure you are using percentage units whenever you want something to scale with resolution. Also, you will probably want to use left/right/top/bottom alignments rather than center alignments, since you will probably want your UI elements to keep their distance from the edge of the screen rather than from the center.

Here’s an example of a responsive UI: Babylon.js Playground (babylonjs.com)

1 Like