Draw image

[JesseParticipant]

I am curious, Why did you decide to use Unsigned Int?

[juliocmfjParticipant]

Why there is no tile with negative ID. So I found it unnecessary to use an Int.

[VoidwalkerParticipant]

And it should. I also don’t get why using an int instead of an unsigned should make trouble in that case. It simply doesn’t make sense at all.

[juliocmfjParticipant]

I’m trying to understand by now why this happened. If I was drawing based on Int coordinates and not UInt. UInt is serving exclusively only to get the ID of the tiles, and nothing more. But… That’s it.

[Mark SiblyKeymaster]

I recommend avoiding the use unsigned values unless you are dealing with binary ‘bit patterns’ (for example, 32 bit ARGB values) or extern APIs that use unsigned values.

The main problem is that math works differently with unsigned, which can lead to unexpected/surprising results. For example, unsigned numbers can never be <0 as they’re always positive so you can run into trouble ‘looping backwards’ quite easily. Also, subtracting an unsigned number from any other integer will always give you an unsigned result (ie: >=0 ) as both are converted to unsigned before the subtraction.

Even if you expect values to always be >=0, eg: the layerId variable above, I would still recommend using plain old Int just to minimize the chance of surprises. I would not expect there to be any practical use for unsigned in the stuff you are doing here. Just because a feature is there doesn’t mean you have to use it!

Unsigned can be useful for dealing with bit masks an so on, but it should be used very sparingly IMO.

[juliocmfjParticipant]

Roger, Mark. I will be more cautious when using unsigned values. I’ll make the necessary changes to the code right now. And again, thanks for the explanation.

[juliocmfjParticipant]

I’ve been trying to do some optimizations. I rendered a 1000×1000 map with 48×48 tiles and FPS in release mode averaged 10 FPS.

After the optimizations, I got the average between 55 and 60 FPS with the same gigantic map.

Below is the code. I would like opinions and know if I made a mistake.

Monkey

' BEFORE Method Render(canvas:Canvas, layerId:Int) For Local y:Int = 0 Until layers[layerId].height For Local x:Int = 0 Until layers[layerId].width If (layers[layerId].map[x, y] > -1) Local tile:TiledTile = New TiledTile() tile.image = tileArray[layers[layerId].map[x, y]].image tile.xy = New Vec2f(layers[layerId].x + x * tileWidth, layers[layerId].y + y * tileHeight) If (tile.xy.X > -tileWidth And tile.xy.X < canvas.Viewport.Width And tile.xy.Y > -tileHeight And tile.xy.Y < canvas.Viewport.Height) canvas.DrawImage(tile.image, tile.xy.X, tile.xy.Y) End End Next Next End ' AFTER Method Render(canvas:Canvas, layerId:Int) For Local y:Int = 0 Until layers[layerId].height For Local x:Int = 0 Until layers[layerId].width If (layers[layerId].map[x, y] > -1) Local xy:Vec2f = New Vec2f(layers[layerId].x + x * tileWidth, layers[layerId].y + y * tileHeight) If (xy.X > -tileWidth And xy.X < canvas.Viewport.Width And xy.Y > -tileHeight And xy.Y < canvas.Viewport.Height) Local tile:TiledTile = New TiledTile() tile.image = tileArray[layers[layerId].map[x, y]].image tile.xy = xy canvas.DrawImage(tile.image, tile.xy.X, tile.xy.Y) End End Next Next End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

' BEFORE Method Render(canvas:Canvas, layerId:Int) For Local y:Int = 0 Until layers[layerId].height For Local x:Int = 0 Until layers[layerId].width If (layers[layerId].map[x, y] > -1) Local tile:TiledTile = New TiledTile() tile.image = tileArray[layers[layerId].map[x, y]].image tile.xy = New Vec2f(layers[layerId].x + x * tileWidth, layers[layerId].y + y * tileHeight) If (tile.xy.X > -tileWidth And tile.xy.X < canvas.Viewport.Width And tile.xy.Y > -tileHeight And tile.xy.Y < canvas.Viewport.Height) canvas.DrawImage(tile.image, tile.xy.X, tile.xy.Y) End End Next Next End   ' AFTER Method Render(canvas:Canvas, layerId:Int) For Local y:Int = 0 Until layers[layerId].height For Local x:Int = 0 Until layers[layerId].width If (layers[layerId].map[x, y] > -1) Local xy:Vec2f = New Vec2f(layers[layerId].x + x * tileWidth, layers[layerId].y + y * tileHeight) If (xy.X > -tileWidth And xy.X < canvas.Viewport.Width And xy.Y > -tileHeight And xy.Y < canvas.Viewport.Height) Local tile:TiledTile = New TiledTile() tile.image = tileArray[layers[layerId].map[x, y]].image tile.xy = xy canvas.DrawImage(tile.image, tile.xy.X, tile.xy.Y) End End Next Next End

[nerobotParticipant]

Working with constant-sized tiles grid you can calculate starting and ending indexies for x and y outside of double for-for.

Then your ‘for’ loops will go through visible tiles only.

[juliocmfjParticipant]

Did not quite understand. Would you have a simple example?

[nerobotParticipant]

Pseudocode:

Monkey

Method Render(canvas:Canvas, layerId:Int) Local xStart := [calculate x-index for first visible tile accordingly to x-offset] Local yStart := [calculate y-index for first visible tile accordingly to y-offset] Local xEnd := xStart + viewport.width / tileWidth Local yEnd := yStart + viewport.height / tileHeight For Local y := yStart To yEnd For Local x := xStart To xEnd If layers[layerId].map[x, y] = -1 Continue Local xy:Vec2f = New Vec2f(layers[layerId].x + x * tileWidth, layers[layerId].y + y * tileHeight) Local image := tileArray[layers[layerId].map[x, y]].image canvas.DrawImage(image, xy.x, xy.y) Next Next End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Method Render(canvas:Canvas, layerId:Int)   Local xStart := [calculate x-index for first visible tile accordingly to x-offset] Local yStart := [calculate y-index for first visible tile accordingly to y-offset] Local xEnd := xStart + viewport.width / tileWidth Local yEnd := yStart + viewport.height / tileHeight   For Local y := yStart To yEnd For Local x := xStart To xEnd If layers[layerId].map[x, y] = -1 Continue Local xy:Vec2f = New Vec2f(layers[layerId].x + x * tileWidth, layers[layerId].y + y * tileHeight) Local image := tileArray[layers[layerId].map[x, y]].image canvas.DrawImage(image, xy.x, xy.y) Next Next End

Note:

• inside of FOR I removed check for visibility because now we go through visible tiles onle
• also I removed creating New TiledTile() – why to create instance if we can just draw ‘plain’ image
• also I replaced xy.X & xy.Y with xy.x & xy.y – because of access to fields (small chars here) is faster that to properties (properties equals to method call)

[abakoboParticipant]

Primitives are faster than struct fields.. So I would not use vec2 inside such loops.

Here I use vx ans vy but you Can also put their expressions direcly in drawimage arguments.
The image coule be passed direcly too, it might perform better.

Monkey

[crayon-5cb9c1a61665d981167373 inline="true" ] Method Render(canvas:Canvas, layerId:Int) Local xStart := [calculate x-index for first visible tile accordingly to x-offset] Local yStart := [calculate y-index for first visible tile accordingly to y-offset] Local xEnd := xStart + viewport.width / tileWidth Local yEnd := yStart + viewport.height / tileHeight Local vx : Float Local vy : Float Local image : Image For Local y := yStart To yEnd For Local x := xStart To xEnd If layers[layerId].map[x, y] = -1 Continue vx = layers[layerId].x + x * tileWidth vy = layers[layerId].y + y * tileHeight image = tileArray[layers[layerId].map[x, y]].image canvas.DrawImage(image, vx, vy) Next Next End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

[crayon-5cb9c1a61665d981167373 inline="true" ] Method Render(canvas:Canvas, layerId:Int) Local xStart := [calculate x-index for first visible tile accordingly to x-offset] Local yStart := [calculate y-index for first visible tile accordingly to y-offset] Local xEnd := xStart + viewport.width / tileWidth Local yEnd := yStart + viewport.height / tileHeight Local vx : Float Local vy : Float Local image : Image For Local y := yStart To yEnd For Local x := xStart To xEnd If layers[layerId].map[x, y] = -1 Continue vx = layers[layerId].x + x * tileWidth vy = layers[layerId].y + y * tileHeight image = tileArray[layers[layerId].map[x, y]].image canvas.DrawImage(image, vx, vy) Next Next End

[/crayon]

[juliocmfjParticipant]

abakobo, I followed your recommendations as well.

[juliocmfjParticipant]

Now you have a part that I do not understand. In the map matrix, the value -1 corresponds to no tiles, that is, no tiles with this value will be rendered, just above it.

I saw above, what you did:

Monkey

If layers[layerId].map[x, y] = -1 Continue

1	If layers[layerId].map[x, y] = -1 Continue

. I think that this way, it should render the tiles only value -1… What whould be the logic behind?

[nerobotParticipant]

Keyword ‘Continue’ inside for loop is equivalent of Next, i.e. immediately go to the next loop frame. And here – skip all with index -1.

[juliocmfjParticipant]

It would be the same as:

Monkey

If (layers[layerId].map[x, y] > -1) ' Draw End

1 2 3

If (layers[layerId].map[x, y] > -1)     ' Draw End

[Author]

Posts