2D World Grid - GameCreators Forum

Author

Message

Sasuke

20

Years of Service

User Offline

Joined: 2nd Dec 2005

Location: Milton Keynes UK

Posted: 20th Nov 2013 00:49 Edited at: 21st Nov 2013 07:58

Link

Whats the best way to draw a square 2D Grid on the screen based on world position and scale (zoom)?

The current method:

gridSize = 32
worldPosX = 0
worldPosY = 0
zoom as float
zoomMultiplier as float
perPixelUnit = 1
centreX = screen width()*.5
centreY = screen height()*.5

sync on : sync rate 60
set text font "Tahoma" : set text size 13
do : cls rgb(64,64,64)

// update zoom
    zoomMultiplier = clamp(zoomMultiplier+(mousemovez() * 0.001), -5,5.0)  
    zoom = perPixelUnit * (2 ^ zoomMultiplier)

// draw mouse coord
    x  = worldPosX + (mousex()-centreX) / zoom
    y  = worldPosY - (mousey()-centreY) / zoom    
    
    ink set alpha(rgb(192,192,192),150),0
    text mousex()-12,mousey()+24,"x: "+str$(x,0)
    text mousex()+24,mousey(),"y: "+str$(y,0)

// draw grid
    width = centreX/zoom
    hieght = centreY/zoom

// make sure the grid is rescaled when beyond a limit
    // (this i will change for user defined sizes)
    if size <> 0
        if ((toX-fromX)/size) < 12
            gridSize = gridSize / 2
        endif
        if ((toX-fromX)/size) > 64
            gridSize = gridSize * 2
        endif
    endif
    
    size = gridSize / 4

fromX = size * ((int(worldPosX-width)+size-1)/size)
    toX   = size * ((int(worldPosX+width)+size-1)/size)

fromY = size * ((int(worldPosY-hieght)+size-1)/size)
    toY   = size * ((int(worldPosY+hieght)+size-1)/size)
    
    a2StartLineBatch ((toX-fromX)/size)+((toY-fromY)/size)+1
       
        for n = (fromX-size) to (toX+size) step size
            x = centreX+(n-worldPosX)*zoom
            a2line x,0,x,screen height(),set alpha(rgb(0, 255, 0),25-(sgn(abs(n) %% gridSize)*10))
        next
        
        for n = (fromY-size) to (toY+size) step size
            y = centreY-(n-worldPosY)*zoom
            a2line 0,y,screen width(),y,set alpha(rgb(0, 255, 0),25-(sgn(abs(n) %% gridSize)*10))
        next   
        
        y = centreY+worldPosY*zoom
        a2line 0,y,screen width(),y,set alpha(rgb(255, 0, 0),100)
             
    a2EndBatch
    
    sync
loop

+ Code Snippet

gridSize = 32
worldPosX = 0
worldPosY = 0
zoom as float
zoomMultiplier as float
perPixelUnit = 1
centreX = screen width()*.5
centreY = screen height()*.5

sync on : sync rate 60
set text font "Tahoma" : set text size 13
do : cls rgb(64,64,64)

    // update zoom
    zoomMultiplier = clamp(zoomMultiplier+(mousemovez() * 0.001), -5,5.0)  
    zoom = perPixelUnit * (2 ^ zoomMultiplier)

    // draw mouse coord
    x  = worldPosX + (mousex()-centreX) / zoom
    y  = worldPosY - (mousey()-centreY) / zoom    
    
    ink set alpha(rgb(192,192,192),150),0
    text mousex()-12,mousey()+24,"x: "+str$(x,0)
    text mousex()+24,mousey(),"y: "+str$(y,0)  

    // draw grid
    width = centreX/zoom
    hieght = centreY/zoom

    // make sure the grid is rescaled when beyond a limit
    // (this i will change for user defined sizes)
    if size <> 0
        if ((toX-fromX)/size) < 12
            gridSize = gridSize / 2
        endif
        if ((toX-fromX)/size) > 64
            gridSize = gridSize * 2
        endif
    endif
    
    size = gridSize / 4

    fromX = size * ((int(worldPosX-width)+size-1)/size)
    toX   = size * ((int(worldPosX+width)+size-1)/size)

    fromY = size * ((int(worldPosY-hieght)+size-1)/size)
    toY   = size * ((int(worldPosY+hieght)+size-1)/size)
    
    a2StartLineBatch ((toX-fromX)/size)+((toY-fromY)/size)+1
       
        for n = (fromX-size) to (toX+size) step size
            x = centreX+(n-worldPosX)*zoom
            a2line x,0,x,screen height(),set alpha(rgb(0, 255, 0),25-(sgn(abs(n) %% gridSize)*10))
        next
        
        for n = (fromY-size) to (toY+size) step size
            y = centreY-(n-worldPosY)*zoom
            a2line 0,y,screen width(),y,set alpha(rgb(0, 255, 0),25-(sgn(abs(n) %% gridSize)*10))
        next   
        
        y = centreY+worldPosY*zoom
        a2line 0,y,screen width(),y,set alpha(rgb(255, 0, 0),100)
             
    a2EndBatch
    
    sync
loop

"Get in the Van!" - Van B

Back to top

Profile PM Email

Phaelax

DBPro Master

23

Years of Service

User Offline

Joined: 16th Apr 2003

Location: Metropia

Posted: 20th Nov 2013 07:44

Link

Your method looks pretty good to me. Is it not fast enough?

http://zimnox.com

Back to top

Profile PM Email Website

Sasuke

20

Years of Service

User Offline

Joined: 2nd Dec 2005

Location: Milton Keynes UK

Posted: 20th Nov 2013 12:34

Link

Just wanted to see if there was another way...

If not... people may use it at there leisure

"Get in the Van!" - Van B

Back to top

Profile PM Email

Libervurto

20

Years of Service

User Offline

Joined: 30th Jun 2006

Location: On Toast

Posted: 21st Nov 2013 00:43 Edited at: 21st Nov 2013 21:46

Link

It's a bit hard to follow your code without any comments. It looks fine to me but it does look more complicated than I was expecting.

I don't like this line: fromX = size * ((int(worldPosX-width)+size-1)/size)
I know what you are doing and I can't see any better way to round down to the nearest "size" but it looks damn ugly, and it's not obvious what the purpose is, surely there is a better way to do it? Math boffins?

You can at least get rid of a layer of brackets: fromX = size * (int(worldPosX-width+size-1)/size)
I don't understand why you have INT() there at all, can you explain that? Why do this before the integer division?

If we write it algebraically [we have to edit it out because we got it wrong!]

Formerly OBese87.

Back to top

Profile PM Email

Sasuke

20

Years of Service

User Offline

Joined: 2nd Dec 2005

Location: Milton Keynes UK

Posted: 21st Nov 2013 08:24 Edited at: 21st Nov 2013 08:33

Link

It's ugly and I forgot to comment, also forgot to put int in the fromY etc lines to.

Firstly your right about the brackets, well notices. Originally it was all split into sections and I condensed it to one line so I guess I just chucked brackets round each section. You can take one more off aswell: size * int(worldPosX-width+size-1) / size

The reason for the int, I should of stated that this was used in a 3d environment so the worldPosX/Y is the orthogonal camera position, which is a float. Without the int, it treats the whole thing like a float variable and this really changes the result given that 2d coordinates are integer.

Quote: "If we write it algebraically: x = ab + cb, where x = (worldPosX-width+size-1), b = size, a %% b = 0, c %% b > 0, so we want to remove cb leaving ab but the value of c is unknown."

Knew I should of studied algebra more cause a %% b = over my head!

"Get in the Van!" - Van B

Back to top

Profile PM Email

Van B

Moderator

23

Years of Service

User Offline

Joined: 8th Oct 2002

Location: Sunnyvale

Posted: 21st Nov 2013 12:44

Link

I would use a stretched sprite, but that might involve changing the UV coordinates. Like, if the grid is 16x16 pixels, I'd make a 16x16 grid image, sprite, then size the sprite to the size of the world and set the UV's to repeat the image over the whole sprite.

With that, you can set the Z depth, alpha fade it, make it look as nice as you like.

I am the one who knocks...

Back to top

Profile PM Email

Sasuke

20

Years of Service

User Offline

Joined: 2nd Dec 2005

Location: Milton Keynes UK

Posted: 21st Nov 2013 16:00 Edited at: 21st Nov 2013 16:04

Link

Could you do this with this type of grid Van B?

Note: Better to watch full screen at 720p, YouTube conversion messed up the grid slightly (Gonna reupload)

"Get in the Van!" - Van B

Back to top

Profile PM Email

Libervurto

20

Years of Service

User Offline

Joined: 30th Jun 2006

Location: On Toast

Posted: 21st Nov 2013 21:42 Edited at: 21st Nov 2013 21:58

Link

Quote: "You can take one more off as well: size * int(worldPosX-width+size-1) / size"

I looked at that but I don't think you can, eg: (13×4)÷4 ≠ 4×(13÷4) if we use integer division.
If that code works then you could remove the *size /size altogether as they just cancel each other out.

Quote: "Knew I should of studied algebra more cause a %% b = over my head!"

%% is modulus function in DBP, so a %% b = 0 means a is exactly divisible by b, and c %% b > 0 means c is not divisible by b. I should also have stated that c < 1. I actually made an error with the algebra and I see a much simpler way to write it now.

Rounding x down to the nearest multiple of y: x = y(h+k), where h is an integer and k < 1
So,
x = hy + ky
hy = x - ky

This is what I use to round to the nearest whole number: x = x# + x# - int(x#), maybe some form of this could be used?
Actually with bit-shifting it could be: x = (x# << 1) - int(x#), which might be faster?

Formerly OBese87.

Back to top

Profile PM Email

Sasuke

20

Years of Service

User Offline

Joined: 2nd Dec 2005

Location: Milton Keynes UK

Posted: 21st Nov 2013 21:59

Link

Quote: "I looked at that but I don't think you can"

Well I tried both methods and they both produce the same results. Thou I left the brackets on cause it's easier to see the order of calculation.

And I didn't think you were talking in terms of DBP so I got confused but now I get you.

"Get in the Van!" - Van B

Back to top

Profile PM Email

Sasuke

20

Years of Service

User Offline

Joined: 2nd Dec 2005

Location: Milton Keynes UK

Posted: 23rd Nov 2013 17:44

Link

What do people think of the vid in terms of ease of use? The quick selection tool is all done with the mouse other an turning it on which I use hot keys.

"Get in the Van!" - Van B

Back to top

Profile PM Email

Libervurto

20

Years of Service

User Offline

Joined: 30th Jun 2006

Location: On Toast

Posted: 24th Nov 2013 23:10

Link

Quote: "Well I tried both methods and they both produce the same results."

So can you just use: int(worldPosX-width+size-1)?

Formerly OBese87.

Back to top

Profile PM Email

Sasuke

20

Years of Service

User Offline

Joined: 2nd Dec 2005

Location: Milton Keynes UK

Posted: 25th Nov 2013 01:55 Edited at: 25th Nov 2013 01:58

Link

Ooooh! You actually made me notice an error!

This: size * int(worldPosX-width+size-1) / size
and: for n = (fromX-size) to (toX+size) step size

Should be just: size * int(worldPosX-width) / size
and: for n = fromX to toX step size

So thanks for the persistence or I wouldn't have noticed it

Quote: "So can you just use: int(worldPosX-width+size-1)?"

The main problem with that is it doesn't snap to the size of the grid but rather offsets by worldPosX, and with this line especially: x = centreX+(n-worldPosX)*zoom which n starts from fromX, n-worldPosX will always equal the same value because theres always the same distance from each other because of worldPosX. But using: fromX = size * int(worldPosX-width) / size snaps fromX to the nearest size, so when it gets to n-worldPosX the grid will actually move by the difference.

"Get in the Van!" - Van B

Back to top

Profile PM Email

Libervurto

20

Years of Service

User Offline

Joined: 30th Jun 2006

Location: On Toast

Posted: 25th Nov 2013 02:30 Edited at: 25th Nov 2013 02:31

Link

Ah that makes sense, so the fact you were jumping in size increments made it look like it was working properly whether or not you actually rounded to size units... I think.

Maybe I'm just not into your code deep enough but I feel like storing int(worldPosX-width) in a variable would help readability, also using an integer variable would automatically cast the result as an integer.

Formerly OBese87.

Back to top

Profile PM Email

Sasuke

20

Years of Service

User Offline

Joined: 2nd Dec 2005

Location: Milton Keynes UK

Posted: 25th Nov 2013 03:02 Edited at: 25th Nov 2013 03:03

Link

Quote: "Ah that makes sense, so the fact you were jumping in size increments made it look like it was working properly whether or not you actually rounded to size units... I think."

Sort of, more that the position it draws from and to is jumping in size increment and that's offset by worldPos to cover the range of the size, making it look like it's moving.

Quote: "Maybe I'm just not into your code deep enough but I feel like storing int(worldPosX-width) in a variable would help readability"

Could do, though I thought the extra variable would be unnecessary really, though I guess that comes down to personal preference.

"Get in the Van!" - Van B

Back to top

Profile PM Email

Sorry your browser is not supported!

DarkBASIC Professional Discussion / 2D World Grid