DrawRect usage?

[PhatPeterParticipant]

If you try this code with any sprite-sheet of 32×32 tiles then you’ll notice the pixels will bleed.
Is this the classic bleeding OpenGL bug in some sense or am I just using it wrong?

Monkey

[crayon-5cba8456aa50d064509835 inline="true" ] Namespace bunnies ' #Import "assets/32x32sheet.png" #Import "" #Import "" Using std.. Using mojo.. Const VWIDTH:=1920, VHEIGHT:=1080 Class Bunnymark Extends Window Field frames: Int = 1 Field elapsed: Int = 1 Field bunnies:Stack[] = New Stack[4] ' 512x512 tilesheet of 32x32 tiles Field images:Image[] = New Image[]( Image.Load("asset::32x32sheet.png"),Image.Load("asset::32x32sheet.png"),Image.Load("asset::32x32sheet.png"),Image.Load("asset::32x32sheet.png") ) Field lastMilli := Millisecs() Method New() Super.New("Bunnymark", VWIDTH, VHEIGHT, WindowFlags.Resizable ) Local tmpimage:=Floor( random.Rnd( 3 )) For Local i:=0 Until bunnies.Length bunnies[i] = New Stack End End Method OnRender( canvas:Canvas ) Override App.RequestRender() If Keyboard.KeyReleased(Key.Escape) Then App.Terminate() Local bunnycount:Int For Local s:=Eachin bunnies For Local bunny:=Eachin s bunny.Update(); bunny.Draw(canvas);bunnycount+=1 Next Next canvas.Color = Color.White ;canvas.DrawRect( 0, 0, VWIDTH, 25 ) 'canvas.Color = Color.Black ;canvas.DrawText("The Bunnymark ( " + asbunnycount + " )",0,0);canvas.DrawText(" FPS: " + App.FPS, 300, 0 ) End Method Method OnMouseEvent( event:MouseEvent ) Override If event.Type = EventType.MouseDown Local _len := 0 If event.Button = MouseButton.Left Then _len = 1 Local tmpimage:Int For Local i:=1 Until _len + 1 tmpimage = Floor( random.Rnd( 3 )) bunnies[ tmpimage ].Add( New Bunny( Mouse.X, Mouse.Y, images[ tmpimage ] ) ) End End End Method End Class Bunny Field x: Float, y: Float, xspeed: Float, yspeed: Float, texture: Image Global gravity := 0.5 Method New( x: Float, y: Float, texture:Image ) Self.x = x ; Self.y = y ; Self.texture = texture ; xspeed = random.Rnd(10) End Method Update:Void( ) 'yspeed += gravity ; y += yspeed ; x += xspeed 'If y >= VHEIGHT Then y = VHEIGHT ; yspeed = -random.Rnd( 35 ) 'If x < 0 Or x > VWIDTH Then xspeed *= -1 ; x = Clamp(x, 0.0, Float(VWIDTH) ) x=x+xspeed End Method Draw(canvas:Canvas) canvas.TextureFilteringEnabled = False canvas.DrawRect(x,y,256,256,texture,5*32,1*32,32,32) End End Function Main() New AppInstance New Bunnymark App.Run() End Function

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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83

[crayon-5cba8456aa50d064509835 inline="true" ]   Namespace bunnies ' #Import "assets/32x32sheet.png" #Import "" #Import "" Using std.. Using mojo.. Const VWIDTH:=1920, VHEIGHT:=1080 Class Bunnymark Extends Window Field frames: Int = 1 Field elapsed: Int = 1 Field bunnies:Stack[] = New Stack[4] ' 512x512 tilesheet of 32x32 tiles Field images:Image[] = New Image[]( Image.Load("asset::32x32sheet.png"),Image.Load("asset::32x32sheet.png"),Image.Load("asset::32x32sheet.png"),Image.Load("asset::32x32sheet.png") ) Field lastMilli := Millisecs()   Method New() Super.New("Bunnymark", VWIDTH, VHEIGHT, WindowFlags.Resizable ) Local tmpimage:=Floor( random.Rnd( 3 )) For Local i:=0 Until bunnies.Length bunnies[i] = New Stack End End   Method OnRender( canvas:Canvas ) Override App.RequestRender() If Keyboard.KeyReleased(Key.Escape) Then App.Terminate() Local bunnycount:Int For Local s:=Eachin bunnies For Local bunny:=Eachin s bunny.Update(); bunny.Draw(canvas);bunnycount+=1 Next Next   canvas.Color = Color.White ;canvas.DrawRect( 0, 0, VWIDTH, 25 ) 'canvas.Color = Color.Black ;canvas.DrawText("The Bunnymark ( " + asbunnycount + " )",0,0);canvas.DrawText(" FPS: " + App.FPS, 300, 0 ) End Method   Method OnMouseEvent( event:MouseEvent ) Override If event.Type = EventType.MouseDown Local _len := 0 If event.Button = MouseButton.Left Then _len = 1 Local tmpimage:Int For Local i:=1 Until _len + 1 tmpimage = Floor( random.Rnd( 3 )) bunnies[ tmpimage ].Add( New Bunny( Mouse.X, Mouse.Y, images[ tmpimage ] ) ) End End End Method   End   Class Bunny Field x: Float, y: Float, xspeed: Float, yspeed: Float, texture: Image Global gravity := 0.5   Method New( x: Float, y: Float, texture:Image ) Self.x = x ; Self.y = y ; Self.texture = texture ; xspeed = random.Rnd(10) End   Method Update:Void( ) 'yspeed += gravity ; y += yspeed ; x += xspeed 'If y >= VHEIGHT Then y = VHEIGHT ; yspeed = -random.Rnd( 35 ) 'If x < 0 Or x > VWIDTH Then xspeed *= -1 ; x = Clamp(x, 0.0, Float(VWIDTH) ) x=x+xspeed End   Method Draw(canvas:Canvas) canvas.TextureFilteringEnabled = False canvas.DrawRect(x,y,256,256,texture,5*32,1*32,32,32) End End   Function Main() New AppInstance New Bunnymark App.Run() End Function

[/crayon]

[PhatPeterParticipant]

I upload the whole package here, maybe someone knows how to fix the glitch?

Attachments:

1. Glitchy.zip

[PhatPeterParticipant]

I think I solved it myself, the x & y needs to be Int instead of Float.

[EthernautParticipant]

Using ints will solve it, but sometimes you want fractional coordinates (i.e. HD sprites, non “retro” 2D games).

For those cases, the only solution I know of is to add a gap between each tile, and copy the color of each edge pixel to the corresponding gap pixel.

I used to do this using Photoshop actions, but it was really annoying since you had to keep two sets of images – the original ones, and the ones with the colored gap…

…So I made a Monkey module to deal with that “on the fly”! (this feature is still alpha)
https://github.com/DoctorWhoof/spriteTools

Here’s how it works:
Once you load a PNG file, the Atlas class internally generates the gaps between tiles, even if they were created without gaps, and creates a texture atlas from that. You can then use Atlas.Cells[ index ] to access each individual image.

And as a bonus, it converts any source image file into a “Power of Two” sized atlas, more guaranteed to work in all kinds of GPUs without artifacts like unwanted scaling.

Totally untested in real production! Let me know if it works.

[Author]

Posts