IGNORED

# Find the X and Y of a card

## Recommended Posts

Is there a way to find the X and Y value of a card/tile using code?

ex) I have graphic on the screen, and I want my sprite to appear where that card is.

Edited by Brian's Man Cave
##### Share on other sites

Generally I think the formulas are like this:

Sprite X = 8 + column*8

Sprite Y = 8 + row*8

It depends a little what your sprite looks like, if you want it centered on top of a square.

Or are you asking "in which location is a tile with this GRAM"? If you don't keep track of positions, I think you need to traverse the entire #BACKTAB looking for the tile, masking out the colour bits etc.

##### Share on other sites

59 minutes ago, carlsson said:

Generally I think the formulas are like this:

Sprite X = 8 + column*8

Sprite Y = 8 + row*8

It depends a little what your sprite looks like, if you want it centered on top of a square.

Or are you asking "in which location is a tile with this GRAM"? If you don't keep track of positions, I think you need to traverse the entire #BACKTAB looking for the tile, masking out the colour bits etc.

What I am trying to do is have the sprite replace the graphic. Then I can animate the graphic to move.

##### Share on other sites

9 hours ago, Brian's Man Cave said:

What I am trying to do is have the sprite replace the graphic. Then I can animate the graphic to move.

Then what @carlsson provided will work:

```SpriteX = 8 + (column * 8)
SpriteY = 8 + (row * 8)```

dZ.

##### Share on other sites

Yes, adjust offset as you feel required.

##### Share on other sites

• 2 weeks later...
On 4/1/2022 at 5:05 AM, DZ-Jay said:

Then what @carlsson provided will work:

```
SpriteX = 8 + (column * 8)
SpriteY = 8 + (row * 8)```

dZ.

How do I determine Column and row?

##### Share on other sites

42 minutes ago, Brian's Man Cave said:

How do I determine Column and row?

Hmm ... perhaps it would be easier if you told us what you have to start with.

##### Share on other sites

1 hour ago, DZ-Jay said:

Hmm ... perhaps it would be easier if you told us what you have to start with.

I am working on a board game that is a rectangular grid, each square is a card. Each game piece is tracked using an array red_loc(a) where a is the piece and the value is the card number it is on.

So if I want a sprite to appear over one of the cards, I would need to know the x and y of each card.

Edited by Brian's Man Cave
##### Share on other sites

7 hours ago, Brian's Man Cave said:

I am working on a board game that is a rectangular grid, each square is a card. Each game piece is tracked using an array red_loc(a) where a is the piece and the value is the card number it is on.

So if I want a sprite to appear over one of the cards, I would need to know the x and y of each card.

When you say "the card number," do you mean its index in the BACKTAB?  If so, then computing the X and Y coordinates in the grid (column and row, respectively) is simple.

First, consider that the card number is derived from the following formula.  This is the generalized form to calculate the sequential position in a grid:

`cardnum = (row * width) + column`

The width of the background grid is 20 columns.  Using Algebra, we can then solve by the row and column:

```row = (cardnum / 20)
column = (cardnum % 20)```

There are 20 columns in the grid, so dividing the card number by 20 will give you the vertical coordinate (row), and the remainder will be the horizontal coordinate (column).

From that, getting sprite coordinates is just as easy:  there are eight pixels along each axis of a card, so we can multiply the column and row by eight to get how many pixels to position in each direction.

You need to add an extra eight pixels to each coordinate to account for the origin of the sprite grid being offset eight pixels to the left and top of the background grid.

Putting it all together, you get:

```spritey = ((cardnum / 20) * 8) + 8
spritex = ((cardnum % 20) * 8) + 8```

I hope that providing an explanation of the principles that lead to the formula helps you understand how it works.  Teaching a man to fish and all that ...

If you have any questions at all on the above, please let us know.

dZ.

Edited by DZ-Jay
• 1
• 1

##### Share on other sites

By the way, in case it is not fully clear, the reason you need to add an extra card (8 pixels) to each coordinate of the sprite is because the sprite grid is larger than the screen background grid, and its origin is a full card above and to the left of the screen.  Below is an illustration of this:

```              +--------------------------------------------+
|  Sprite Grid                               |
|   +---------------------------------------+|
|   |  Display Screen Grid                  ||
|   |                                       ||
|   |                                       ||
|   |                                       ||
|   |                                       ||
|   |                                       ||
|   |                                       ||
|   |                                       ||
|   |                                       ||
|   |                                       ||
|   |                                       ||
|   +---------------------------------------+|
+--------------------------------------------+```

This makes a lot of sense once you understand why it is that way.  First, recall that a sprite's coordinates are based on its top-right corner.

Now, if you move a sprite to the right one pixel at a time, eventually the sprite will touch the right-side border.

```Sprite at column 19, row 8
Coordinates: (152, 64)
Right edge
of screen
|
Column 17       Column 18       Column 19   v
|_______________|_______________|_______________|_
. . . . . . . . . . . . . . . . . . . . . . . . .
: : : : : : : : : : : : : : : : : : : : : : : : :+--
. ..|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|
. ..|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|
. ..|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|
. ..|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|  Row 7
. ..|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|
. ..|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|
. ..|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|
. ..|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|+--
. ..|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|#|#|#|#|#|#|#|#|
. ..|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|#|#|#|#|#|#|#|#|
. ..|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|#|#|#|#|#|#|#|#|
. ..|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|#|#|#|#|#|#|#|#|  Row 8
. ..|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|#|#|#|#|#|#|#|#|
. ..|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|#|#|#|#|#|#|#|#|
. ..|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|#|#|#|#|#|#|#|#|
. ..|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|#|#|#|#|#|#|#|#|+--
. ..|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_||
. ..|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_||
: : : : : : : : : : : : : : : : : : : : : : : : :
. . . . . . . . . . . . . . . . . . . . . . . . .
^
|
Right edge
of screen```

If you continue to move it to the right one pixel at a time (x=153, x=154, x=155, etc.), it will smoothly transition off the screen as its right-most pixels go out of the visible area.  Eventually you will reach the maximum sprite X coordinate of 159, at which point, it has been removed completely from the visible screen.

This works great and smoothly when moving to the right.  Moving to the left is a bit trickier.

Consider what would happen if the sprite's origin aligned with the display screen -- in other words, what would happen if the (0, 0) coordinate of a sprite started at the first column and row?

```Sprite at column 0, row 0
Coordinates: (0, 0)

Left edge
of screen
|
v   Column 0        Column 1        Column 2
|_______________|_______________|_______________|_<---- Top edge of screen
--+|#|#|#|#|#|#|#|#|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|. ..
|#|#|#|#|#|#|#|#|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|. ..
|#|#|#|#|#|#|#|#|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|. ..
Row 0  |#|#|#|#|#|#|#|#|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|. ..
|#|#|#|#|#|#|#|#|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|. ..
|#|#|#|#|#|#|#|#|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|. ..
|#|#|#|#|#|#|#|#|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|. ..
--+|#|#|#|#|#|#|#|#|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|. ..
|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|. ..
|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|. ..
|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|. ..
Row 1  |_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|. ..
|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|. ..
|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|. ..
|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|. ..
--+|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|. ..
|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|. ..
|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|
: : : : : : : : : : : : : : : : : : : : : : : : :
. . . . . . . . . . . . . . . . . . . . . . . . .
^
|
Left edge
of screen```

Because the position of the sprite is based on its top-left corner, and you are already at position zero, you can't move it to the left any more because X=0 is the absolute minimum you can set.  To take the sprite off the screen you would have to hide it, which would be a bit abrupt, since right before it, the sprite was in full view.

A similar thing would happen if you try to move upwards from top row.

So, the hardware designers solved this by extending the coordinate plane of sprites by 8 pixels on each axis as depicted above.  That way, setting a sprite flush to the edges of the screen on the very first column and row, means it is actually at position (8, 8); which gives you 8 more pixels to move in each direction to smoothly transition the sprite smoothly off the screen at the top or left edges.

So the bottom-line is:  Sprite coordinates start 8 pixels to the left and top of the display screen coordinates.  Therefore, when converting from screen to sprite coordinates, you need to add 8 pixels to each axis.

-dZ.

Edited by DZ-Jay

## Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.