foumfo

GUI glitch while adding multiple rectangles

Recommended Posts

Hi @foumfo

Your measurements are off.
width & height uses percentage as default, 
left & top uses pixels as default
http://doc.babylonjs.com/how_to/gui#position-and-size

Using pixels (final size depends of number of rects);
http://www.babylonjs-playground.com/#L1SBDY#2 

Using percentage (final size is fixed and independent of number of rects)
http://www.babylonjs-playground.com/#L1SBDY#3

Share this post


Link to post
Share on other sites
4 hours ago, aWeirdo said:

Hi @foumfo

Your measurements are off.
width & height uses percentage as default, 
left & top uses pixels as default
http://doc.babylonjs.com/how_to/gui#position-and-size

Using pixels (final size depends of number of rects);
http://www.babylonjs-playground.com/#L1SBDY#2 

Using percentage (final size is fixed and independent of number of rects)
http://www.babylonjs-playground.com/#L1SBDY#3

I want the width and height of the rects to be the same and I also wanted to use percentages in order to have rects proportionate to the window's size.

To clarify, I want to create a minimap for my level.

I used your last method, and it's a bit off for me. There's gaps between the rects that look like rows and columns

Share this post


Link to post
Share on other sites

Could it be possible to avoid using pixels? I've noticed that when I resize the window, while the canvas is getting resized too, the gui stays the same

Share this post


Link to post
Share on other sites
16 minutes ago, Pryme8 said:

Why not make a dynamic texture and use that instead of a ton of GUI elements?

You mean using my double array to create a dynamic texture? Are dynamic textures GPU accelerated?

This double array of mine is generated by my random labyrinth generator algorithm, so what I'm trying to do here is create a minimap

Share this post


Link to post
Share on other sites

yup, create a dynamic texture which if you do it with array setting and not draw Rectangle methods it will be very fast (I bet faster then building the UI elements).

Then once it is assigned to the ram its load/impact will be minimal. At that point just set that dynamic texture as the image for a gui rect and whabam.

Share this post


Link to post
Share on other sites
10 minutes ago, Pryme8 said:

yup, create a dynamic texture which if you do it with array setting and not draw Rectangle methods it will be very fast (I bet faster then building the UI elements).

Then once it is assigned to the ram its load/impact will be minimal. At that point just set that dynamic texture as the image for a gui rect and whabam.

Ok I'll give it a shot

Share this post


Link to post
Share on other sites
13 hours ago, Pryme8 said:

yup, create a dynamic texture which if you do it with array setting and not draw Rectangle methods it will be very fast (I bet faster then building the UI elements).

Then once it is assigned to the ram its load/impact will be minimal. At that point just set that dynamic texture as the image for a gui rect and whabam.

I read here: https://doc.babylonjs.com/how_to/gui

that the GUI module is based on dynamic texture and also is GPU accelerated.

So isn't using a dynamic texture in my case a bit redundant?

Share this post


Link to post
Share on other sites
1 minute ago, Pryme8 said:

no... doing what you are doing is redundant and is creative but not the way to go about it.

Ok then I'll use a dynamic texture. Is there a way to convert my double array into a dynamic texture?

Share this post


Link to post
Share on other sites
41 minutes ago, Pryme8 said:

just parse through it, Ill make an example here when I get a chance ^_^.

Thank you, I'll wait for it because I don't know how to do that when it comes to dynamic textures

Share this post


Link to post
Share on other sites

no that was if I used an alt method, I went ahead and did the drawRect method just because its easier to understand.

If you would like I can do the imageData Manipulation method as well (is faster but is harder to understand)

 

for(var y=0; y<h; y++){
            for(var x=0; x<w; x++){
                var cell = data[x][y];
                var pos = {x:x*cellSize, y:y*cellSize};
                console.log(cell);
                if(cell){
                    ctx.fillStyle = 'black';
                }else{
                    ctx.fillStyle = 'white';
                }

                ctx.fillRect(pos.x, pos.y, cellSize, cellSize);    

            }  
        }

is whats doing all the work.

Share this post


Link to post
Share on other sites
3 minutes ago, Pryme8 said:

no that was if I used an alt method, I went ahead and did the drawRect method just because its easier to understand.

If you would like I can do the imageData Manipulation method as well (is faster but is harder to understand)

I'm already very grateful to you, so if you have the time now or in the future I would appreciate you showing me that method as well. Especially if that way is even more efficient

Share this post


Link to post
Share on other sites

technically this should work:
 

 var iDat = ctx.getImageData(0,0,w*cellSize, h*cellSize);
        var _data = iDat.data;
        var x=0,y=0;
        for(var i=0; i<_data.length; i+=4){
            var cell = data[Math.floor(x)][Math.floor(y)];
            console.log(cell);
            if(cell){
                    _data[i] = 0;
                    _data[i+1] = 0;
                    _data[i+2] = 0;
                    _data[i+3] = 1;
                }else{
                    _data[i] = 1;
                    _data[i+1] = 1;
                    _data[i+2] = 1;
                    _data[i+3] = 1;
                }
            x+=1/cellSize;
            if(x>=w){x=0;y+=1/cellSize;}
        }
        ctx.putImageData(iDat, 0,0);

but its not... which is kinda confusing.  I wonder if the putImageData Method is not working correctly or something.
http://www.babylonjs-playground.com/#PJQHIH#4

Just use the fillRect method for now, performance wise you should be fine, the other method is for if you start making maps that are like 4k wide and stuff.

Share this post


Link to post
Share on other sites

Ok then I'll use the fillRect method, thank you anyway for your work on this.

Since I want to use the texture for my GUI, could I just implement it in it somehow rather than use it as a face texture for a plane?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.