Hello I am looking to create a compass with Babylon.GUI to replace the one I made in HTML and CSS3. My problem is that Babylon.GUI does not offer a background-position as in CSS to move an image and that it repeats to the right or to the left.
I don’t want the image to be moved with image.left but with something like image.backgroundPosition so that the image is moved inside the Rectangle container and this repeats.(Could this not be added to Babylon) I therefore cannot replace my compass in HTML with Babylon.GUI.
To better understand here is a PG where I have the version made with Babylon.GUI and a version made with HTML and CSS to compare.
I would like to be able to reproduce the same thing as the HTML version but with Babylon.GUI
You could probably put two images side-by-side and position them so that they always cover the whole compass area.
Like if you were to make a wrapping background, you could put two sprites next to each other. As the player moves right, the backgrounds move left. When sprite 1 goes completely off the left side of the screen, you reposition it on the right side of sprite 2. Repeat when sprite 2 goes off the left side of the screen, etc.
Though you could probably accomplish the same thing with one sprite by making your sprite twice as wide so that it already repeats once, and then position it with some modulus so that the edges are never visible.
Thank you for your reply. I don’t think it’s the best solution of having to manage to move 3 images at once. In addition with a camera that rotates 360 ° or 720 ° this would surely become a problem.
I would prefer some sort of solution with a backgroundPosition, which I think would be cleaner and handle the displacement than a single image.
If your compass image is at least as wide as the compass itself then it can be done with 2 images, and you can use modulus to keep the camera angle within 0-360.
The two images I use have the same size and are transparent.
Yes I hope for a simpler method as I have already done with HTML. Most of the things I do with Babylon.GUI are as simple as with HTML and CSS, except for this case of using the compass where it is missing I think a backgroundPosition or something like that.
