Snap to Grid - GameCreators Forum

Author

Message

Somarl

13

Years of Service

User Offline

Joined: 11th Feb 2011

Location: UK

Posted: 9th Feb 2013 16:40 Edited at: 9th Feb 2013 16:41

Link

Hi with the following code i can now very simply create a grid over any size picture (within reason) which so far works the way i want it to.

rem Draw a square or rectangle of any size under 500 x 500pxls (for display purposes)
rem Call it Pic1.jpg or whatever but change the load image "", 1

Set Display Mode 1074, 768, 32
Sync On
Load image "Pic1.jpg", 1

x = Image Width(1) / 10
y = Image Height(1) / 10

Columns = x
Rows = y

Dim Map(Columns, Rows)

For a = 1 To Columns
    For b = 1 To Rows
        Map(a, b) = 0
    Next b
Next a

Paste Image 1, 0, 0

Space# = 10.0 ` Has to be a real number, not sure exactly why yet but doesnt work as int. Will probably end up being 8.0 because i will do all pixels and pics by a multiple of 8, for this purpose though its 10 so each grid block will be 8x8pxls rather than 10x10 what it is now.

For a = 0 To Columns
    Line a * Space#, 0, a * Space#, Space# * Rows
Next a
For b = 0 To Rows
    Line 0, b * Space#, Space# * Columns, b * Space#
Next b

Get image 2, 0, 0, Space# * Columns + 1, Space# * Rows + 1, 1 `Makes it quicker than redrawing grid every loop
Do
    Cls
    If cellx < Columns + 1 AND celly < Rows + 1 ` Make sure it doesnt fall out of the array and crash
        Text 0, 450, "Value : " + str$(Map(cellx, celly))
    EndIf
    
    Paste Image 2, 0, 0 ` Paste the grid
    
    cellX = int(mousex() * Columns / (Columns*Space#)) + 1
    cellY = int(mousey() * Rows / (Rows*Space#)) + 1

`Draw information (only if the mouse is in the table)
    if cellX > 0 and cellY > 0
        if cellX <= Columns and cellY <= Rows
            text 0, 400, "Current cell " + str$(cellX) + " : " + str$(cellY)
            
            If MouseClick() = 1 ` This section needs changing to the number that has been chosen
                Map(cellx, celly) = 1
            EndIf
        endif
    endif

Sync
Loop

+ Code Snippet

rem Draw a square or rectangle of any size under 500 x 500pxls (for display purposes)
rem Call it Pic1.jpg or whatever but change the load image "", 1

Set Display Mode 1074, 768, 32
Sync On
Load image "Pic1.jpg", 1

x = Image Width(1) / 10
y = Image Height(1) / 10

Columns = x
Rows = y

Dim Map(Columns, Rows)

For a = 1 To Columns
    For b = 1 To Rows
        Map(a, b) = 0
    Next b
Next a

Paste Image 1, 0, 0

Space# = 10.0 ` Has to be a real number, not sure exactly why yet but doesnt work as int. Will probably end up being 8.0 because i will do all pixels and pics by a multiple of 8, for this purpose though its 10 so each grid block will be 8x8pxls rather than 10x10 what it is now.

For a = 0 To Columns
    Line a * Space#, 0, a * Space#, Space# * Rows
Next a
For b = 0 To Rows
    Line 0, b * Space#, Space# * Columns, b * Space#
Next b

Get image 2, 0, 0, Space# * Columns + 1, Space# * Rows + 1, 1 `Makes it quicker than redrawing grid every loop
Do
    Cls
    If cellx < Columns + 1 AND celly < Rows + 1 ` Make sure it doesnt fall out of the array and crash
        Text 0, 450, "Value : " + str$(Map(cellx, celly))
    EndIf
    
    Paste Image 2, 0, 0 ` Paste the grid
    
    cellX = int(mousex() * Columns / (Columns*Space#)) + 1
    cellY = int(mousey() * Rows / (Rows*Space#)) + 1

    `Draw information (only if the mouse is in the table)
    if cellX > 0 and cellY > 0
        if cellX <= Columns and cellY <= Rows
            text 0, 400, "Current cell " + str$(cellX) + " : " + str$(cellY)
            
            If MouseClick() = 1 ` This section needs changing to the number that has been chosen
                Map(cellx, celly) = 1
            EndIf
        endif
    endif

    Sync
Loop

There is more i want to add which i will get to like showing what number lies in each grid but i think i may be ok with that.

Now what i want to do is "place" down tiles that are different sizes and have very little idea on how to do this as it depends on the size of the object. I think i need an offset or something for some tiles but not for all.

So if i had a grid like this:

You can see that the red is 3x3 and needs some sort of offset that is the grid square width /2 which seems simple and the 4x4 has a different center that lands in a different place but i dont know the following.

a) how to place it while snapping to the grid with its offset.
b) how to place the 4x4 which offset seems to be different as its middle is not the same
c) how to tell all the square concerned in the array that they are now different (i.e a building is now sat here change from a 0 in the array to a 1). The 3x3 for example needs to affect all the mini tiles in that grid from the center.

Back to top

Profile PM

Phaelax

DBPro Master

21

Years of Service

User Offline

Joined: 16th Apr 2003

Location: Metropia

Posted: 10th Feb 2013 02:19

Link

This might help you:
http://forum.thegamecreators.com/?m=forum_view&t=187859&b=6

Don't think about the center of your 3x3 or 4x4 tile, just the upper left corner. Snap that point to the grid and the rest of the tiles should follow.

To snap to the grid, take your mouse coordinate and divide it by the grid size.

If you would like to have the object centered on the mouse, you would need to offset the initial value.

To get the grid coordinate of the mouse's current location:

+ Code Snippet

gx = mousex() / GWIDTH
gy = mousey() / GHEIGHT

Now, take the number of tiles your object uses and divide it by 2 and subtract that from grid value we already have. So for a 3x3 object:

+ Code Snippet

gx = (mousex() / GWIDTH)  - 3/2
gy = (mousey() / GHEIGHT) - 3/2

Complete code:

Rem Project: Dark Basic Pro Project
Rem Created: Saturday, February 09, 2013

Rem ***** Main Source File *****
set display mode 1024, 768, 32

REM Tile size for the grid
#CONSTANT GWIDTH = 64
#CONSTANT GHEIGHT = 64

REM Maximum grid numbers
MaxGridX = screen width()/GWIDTH
MaxGridY = screen height()/GHEIGHT

REM define an array with a size equal to the number 
REM of grid tiles on screen.
dim grid(MaxGridX, MaxGridY)

REM Size of the box (3x3)
boxX = 4
boxY = 2

sync on

DO
    cls
    
    
    
    REM Get grid coordinates so that object is 
    REM centered at mouse and snaps to grid
    gx = (mousex() / GWIDTH)  - boxX/2
    gy = (mousey() / GHEIGHT) - boxY/2
    
    REM Constraints (make sure box stays within boundaries
    if gx < 0 then gx = 0
    if gy < 0 then gy = 0
    if gx > MaxGridX - boxX then gx = MaxGridX - boxX
    if gy > MaxGridY - boxY then gy = MaxGridY - boxY
    
    REM draw the object
    ink rgb(255,0,0),0
    drawBox(gx, gy, boxX, boxY)
    
    
    REM draw the grid
    ink rgb(128,128,128),0
    drawGrid()

sync
LOOP

REM Draws a box at specified grid position.
REM Width and height are in number of grid
REM spaces: 3x3, 4x2, etc...
function drawBox(gridX, gridY, width, height)
    box gridX*GWIDTH, gridY*GHEIGHT, gridX*GWIDTH+width*GWIDTH, gridY*GHEIGHT+height*GHEIGHT
endfunction

REM Draw a grid divided by tiles with
REM the specified dimensions.
function drawGrid()
    sw = screen width()
    sh = screen height()
    w = sw / GWIDTH
    h = sh / GHEIGHT 
    
    for x = 0 to w-1
        line x*GWIDTH, 1, x*GWIDTH, sh
    next x
    for y = 0 to h-1
        line 1, y*GHEIGHT, sw, y*GHEIGHT
    next y
endfunction

+ Code Snippet

Rem Project: Dark Basic Pro Project
Rem Created: Saturday, February 09, 2013

Rem ***** Main Source File *****
set display mode 1024, 768, 32

REM Tile size for the grid
#CONSTANT GWIDTH = 64
#CONSTANT GHEIGHT = 64


REM Maximum grid numbers
MaxGridX = screen width()/GWIDTH
MaxGridY = screen height()/GHEIGHT 

REM define an array with a size equal to the number 
REM of grid tiles on screen.
dim grid(MaxGridX, MaxGridY)


REM Size of the box (3x3)
boxX = 4
boxY = 2


sync on

DO
    cls
    
    
    
    REM Get grid coordinates so that object is 
    REM centered at mouse and snaps to grid
    gx = (mousex() / GWIDTH)  - boxX/2
    gy = (mousey() / GHEIGHT) - boxY/2
    
    REM Constraints (make sure box stays within boundaries
    if gx < 0 then gx = 0
    if gy < 0 then gy = 0
    if gx > MaxGridX - boxX then gx = MaxGridX - boxX
    if gy > MaxGridY - boxY then gy = MaxGridY - boxY
    
    REM draw the object
    ink rgb(255,0,0),0
    drawBox(gx, gy, boxX, boxY)
    
    
    REM draw the grid
    ink rgb(128,128,128),0
    drawGrid()


    sync
LOOP


REM Draws a box at specified grid position.
REM Width and height are in number of grid
REM spaces: 3x3, 4x2, etc...
function drawBox(gridX, gridY, width, height)
    box gridX*GWIDTH, gridY*GHEIGHT, gridX*GWIDTH+width*GWIDTH, gridY*GHEIGHT+height*GHEIGHT
endfunction



REM Draw a grid divided by tiles with
REM the specified dimensions.
function drawGrid()
    sw = screen width()
    sh = screen height()
    w = sw / GWIDTH
    h = sh / GHEIGHT 
    
    for x = 0 to w-1
        line x*GWIDTH, 1, x*GWIDTH, sh
    next x
    for y = 0 to h-1
        line 1, y*GHEIGHT, sw, y*GHEIGHT
    next y
endfunction

"You're not going crazy. You're going sane in a crazy world!" ~Tick

Back to top

Profile PM Email Website

Somarl

13

Years of Service

User Offline

Joined: 11th Feb 2011

Location: UK

Posted: 10th Feb 2013 20:28 Edited at: 10th Feb 2013 20:31

Link

This is great, just what i am looking for. I just have one question.

It seems that

+ Code Snippet

REM Get grid coordinates so that object is 
    REM centered at mouse and snaps to grid
    gx = (mousex() / GWIDTH)  - boxX/2
    gy = (mousey() / GHEIGHT) - boxY/2

this is what makes the mouse appear at the center of the "object" or "box" which for me will be something like a building that will be placed. However the mouse is not in the center and is more offset down and to the right once the box starts moving. Yet the code above makes sense that it would be half the width and height so i dont know why it doesnt keep the mouse mostly in the center. i understand why it wont be all the time because the mouse has to move but it shouldnt be where it is surely it would be only slightly around the center depending on what direction you moved.

Edit: i noticed it works for 3x3 as it seems to center around the center box, but for things like even numbers it centers round the box down and to the right. Rather than the very center of the shape which would be offset to the grid. At least i see what it is doing.

Back to top

Profile PM

Phaelax

DBPro Master

21

Years of Service

User Offline

Joined: 16th Apr 2003

Location: Metropia

Posted: 11th Feb 2013 00:15

Link

An even number of boxes would be off center because there's no center box to position over the mouse.

"You're not going crazy. You're going sane in a crazy world!" ~Tick

Back to top

Profile PM Email Website

Ortu

DBPro Master

17

Years of Service

User Offline

Joined: 21st Nov 2007

Location: Austin, TX

Posted: 11th Feb 2013 06:03 Edited at: 11th Feb 2013 06:22

Link

you can use modulus to check for odd/even and apply an additional offset of 1/2 tile to the even number objects to maintain the centering.

if the modulus 2 of the boxes is 0 it is even, if it is 1 it is odd.

this gives you 1 grid square worth of space to move the mouse within centered on the object center, equal to the 1 grid square space at the center of an odd number object.

to handle rectangular objects, you will need to check both the x tile count and the y tile count to determine which/both need to get an offset

+ Code Snippet

if boxX mod 2 = 0
    `it's even
    gx = (((mousex() + GWIDTH/2) / GWIDTH)  - boxX/2)
else
   `it's odd
    gx = (mousex() / GWIDTH)  - boxX/2
endif

if boxY mod 2 = 0
    `it's even
    gy = (((mousey() + GHEIGHT/2) / GHEIGHT)  - boxY/2)
else
   `it's odd
    gy = (mousey() / GHEIGHT)  - boxY/2
endif

I've added a drawCenter function which for me makes the centering feel more visually natural, since the mouse can move around in a grid squares worth of space.

Rem Project: Dark Basic Pro Project
Rem Created: Saturday, February 09, 2013

Rem ***** Main Source File *****
set display mode 1024, 768, 32

REM Tile size for the grid
#CONSTANT GWIDTH = 64
#CONSTANT GHEIGHT = 64

REM Maximum grid numbers
MaxGridX = screen width()/GWIDTH
MaxGridY = screen height()/GHEIGHT

REM define an array with a size equal to the number
REM of grid tiles on screen.
dim grid(MaxGridX, MaxGridY)

REM Size of the box (3x3)
boxX = 8
boxY = 5

sync on

DO
    cls

if boxX mod 2 = 0
        `it's even
        gx = (((mousex() + GWIDTH/2) / GWIDTH)  - boxX/2)
        cx# = ((mousex() + GWIDTH/2) / GWIDTH) - 0.5
    else
       `it's odd
        gx = (mousex() / GWIDTH)  - boxX/2
        cx# = mousex() / GWIDTH
    endif
    if boxY mod 2 = 0
        `it's even
        gy = (((mousey() + GHEIGHT/2) / GHEIGHT)  - boxY/2)
        cy# = ((mousey() + GHEIGHT/2) / GHEIGHT) - 0.5
    else
       `it's odd
        gy = (mousey() / GHEIGHT)  - boxY/2
        cy# = mousey() / GHEIGHT
    endif

REM Constraints (make sure box stays within boundaries
    if gx < 0 then gx = 0
    if gy < 0 then gy = 0
    if gx > MaxGridX - boxX then gx = MaxGridX - boxX
    if gy > MaxGridY - boxY then gy = MaxGridY - boxY

REM draw the object
    ink rgb(255,0,0),0
    drawBox(gx, gy, boxX, boxY)

REM draw center
    ink rgb(255,128,128)
    drawCenter(cx#, cy#, 1, 1)

REM draw the grid
    ink rgb(128,128,128),0
    drawGrid()

sync
LOOP

REM Draws a box at specified grid position.
REM Width and height are in number of grid
REM spaces: 3x3, 4x2, etc...
function drawBox(gridX, gridY, width, height)
    box gridX*GWIDTH, gridY*GHEIGHT, gridX*GWIDTH+width*GWIDTH, gridY*GHEIGHT+height*GHEIGHT
endfunction

function drawCenter(gridX#, gridY#, width, height)
    box gridX#*GWIDTH, gridY#*GHEIGHT, gridX#*GWIDTH+width*GWIDTH, gridY#*GHEIGHT+height*GHEIGHT
endfunction

REM Draw a grid divided by tiles with
REM the specified dimensions.
function drawGrid()
    sw = screen width()
    sh = screen height()
    w = sw / GWIDTH
    h = sh / GHEIGHT

for x = 0 to w-1
        line x*GWIDTH, 1, x*GWIDTH, sh
    next x
    for y = 0 to h-1
        line 1, y*GHEIGHT, sw, y*GHEIGHT
    next y
endfunction

+ Code Snippet

Rem Project: Dark Basic Pro Project
Rem Created: Saturday, February 09, 2013

Rem ***** Main Source File *****
set display mode 1024, 768, 32

REM Tile size for the grid
#CONSTANT GWIDTH = 64
#CONSTANT GHEIGHT = 64


REM Maximum grid numbers
MaxGridX = screen width()/GWIDTH
MaxGridY = screen height()/GHEIGHT

REM define an array with a size equal to the number
REM of grid tiles on screen.
dim grid(MaxGridX, MaxGridY)


REM Size of the box (3x3)
boxX = 8
boxY = 5


sync on

DO
    cls

    if boxX mod 2 = 0
        `it's even
        gx = (((mousex() + GWIDTH/2) / GWIDTH)  - boxX/2)
        cx# = ((mousex() + GWIDTH/2) / GWIDTH) - 0.5
    else
       `it's odd
        gx = (mousex() / GWIDTH)  - boxX/2
        cx# = mousex() / GWIDTH
    endif
    if boxY mod 2 = 0
        `it's even
        gy = (((mousey() + GHEIGHT/2) / GHEIGHT)  - boxY/2)
        cy# = ((mousey() + GHEIGHT/2) / GHEIGHT) - 0.5
    else
       `it's odd
        gy = (mousey() / GHEIGHT)  - boxY/2
        cy# = mousey() / GHEIGHT
    endif

    REM Constraints (make sure box stays within boundaries
    if gx < 0 then gx = 0
    if gy < 0 then gy = 0
    if gx > MaxGridX - boxX then gx = MaxGridX - boxX
    if gy > MaxGridY - boxY then gy = MaxGridY - boxY

    REM draw the object
    ink rgb(255,0,0),0
    drawBox(gx, gy, boxX, boxY)

    REM draw center
    ink rgb(255,128,128)
    drawCenter(cx#, cy#, 1, 1)

    REM draw the grid
    ink rgb(128,128,128),0
    drawGrid()

    sync
LOOP


REM Draws a box at specified grid position.
REM Width and height are in number of grid
REM spaces: 3x3, 4x2, etc...
function drawBox(gridX, gridY, width, height)
    box gridX*GWIDTH, gridY*GHEIGHT, gridX*GWIDTH+width*GWIDTH, gridY*GHEIGHT+height*GHEIGHT
endfunction

function drawCenter(gridX#, gridY#, width, height)
    box gridX#*GWIDTH, gridY#*GHEIGHT, gridX#*GWIDTH+width*GWIDTH, gridY#*GHEIGHT+height*GHEIGHT
endfunction

REM Draw a grid divided by tiles with
REM the specified dimensions.
function drawGrid()
    sw = screen width()
    sh = screen height()
    w = sw / GWIDTH
    h = sh / GHEIGHT

    for x = 0 to w-1
        line x*GWIDTH, 1, x*GWIDTH, sh
    next x
    for y = 0 to h-1
        line 1, y*GHEIGHT, sw, y*GHEIGHT
    next y
endfunction

Back to top

Profile PM Email Website

Sorry your browser is not supported!

Newcomers DBPro Corner / Snap to Grid