Getting rid of the cracks? Tile Images…

This topic contains 9 replies, has 4 voices, and was last updated by c0d3r9 9 months, 1 week ago.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts

July 14, 2018 at 2:17 am #15037

Participant

I’m having a bit of issues with cracks in my tile maps, any ideas of how to fix it?

Namespace myapp

#Import "assets/"
#Import "<std>"
#Import "<mojo>"

Using std..
Using mojo..

Const VIRTUAL_SIZE := New Vec2i(320, 200)

Class MyWindow Extends Window
	Field tiles:Image[]
	Field filterTextures:Bool = True
	
	Method New()
		Super.New("Tile Test", 1280, 800, WindowFlags.Resizable)
		Layout = "letterbox-int"
		tiles = LoadSpriteSheet("tileset2.png", 48, 32, 32)
	End

	Method OnRender(canvas:Canvas) Override
		GameLogic()
		App.RequestRender()
		GameRender(canvas)
	End
	
	Method GameLogic()
		If Keyboard.KeyHit(Key.Escape)
			App.Terminate()
		End
	End
	
	Method GameRender(canvas:Canvas)
		canvas.TextureFilteringEnabled = filterTextures
		For Local x:Int = 0 To Width Step 32
			For Local y:Int = 0 To Height Step 32
				canvas.DrawImage(tiles[14], x, y)
			Next
		Next
	End
	
	Method OnKeyEvent(event:KeyEvent) Override
		If event.Type = EventType.KeyDown And event.Key = Key.Enter And event.Modifiers & Modifier.Alt
			Fullscreen = Not Fullscreen
		Endif
	End
	
	Method OnMeasure:Vec2i() Override
		Return VIRTUAL_SIZE
	End
End

Function Main()
	New AppInstance
	New MyWindow
	App.Run()
End

Function LoadSpriteSheet:Image[](path:String, numFrames:Int, cellWidth:Int, cellHeight:Int, prefix:String = "asset::")
	Local atlasTexture := Texture.Load(prefix + path)
	Assert(atlasTexture, " ~n Image " + prefix + path + " not found.~n ~n")
 
	Local images := New Image[numFrames]
	Local atlasImg := New Image(atlasTexture)
	Local columns:Int = atlasImg.Width / cellWidth
 
	For Local i := 0 Until numFrames
		Local col := i Mod columns
		Local x1 := col * cellWidth 
		Local y1 := (i / columns) * cellHeight
		Local x2 := x1 + cellWidth
		Local y2 := y1 + cellHeight

		Print "i = " + i + ", x1 = " + x1 + ", y1 = " + y1 + " x2= " + x2 + ", y2 = " + y2
		
		images[i] = New Image(atlasImg, New Recti(x1 ,y1, x2, y2))
	Next
 
	atlasImg = Null
	Return images
End

Namespace myapp

#Import "assets/"

#Import "<std>"

#Import "<mojo>"

Using std..

Using mojo..

Const VIRTUAL_SIZE := New Vec2i(320, 200)

Class MyWindow Extends Window

Field tiles:Image[]

Field filterTextures:Bool = True

Method New()

Super.New("Tile Test", 1280, 800, WindowFlags.Resizable)

Layout = "letterbox-int"

tiles = LoadSpriteSheet("tileset2.png", 48, 32, 32)

End

Method OnRender(canvas:Canvas) Override

GameLogic()

App.RequestRender()

GameRender(canvas)

End

Method GameLogic()

If Keyboard.KeyHit(Key.Escape)

App.Terminate()

End

Method GameRender(canvas:Canvas)

canvas.TextureFilteringEnabled = filterTextures

For Local x:Int = 0 To Width Step 32

For Local y:Int = 0 To Height Step 32

canvas.DrawImage(tiles[14], x, y)

End

Method OnKeyEvent(event:KeyEvent) Override

If event.Type = EventType.KeyDown And event.Key = Key.Enter And event.Modifiers & Modifier.Alt

Fullscreen = Not Fullscreen

Endif

End

Method OnMeasure:Vec2i() Override

Return VIRTUAL_SIZE

End

Function Main()

New AppInstance

New MyWindow

App.Run()

End

Function LoadSpriteSheet:Image[](path:String, numFrames:Int, cellWidth:Int, cellHeight:Int, prefix:String = "asset::")

Local atlasTexture := Texture.Load(prefix + path)

Assert(atlasTexture, " ~n Image " + prefix + path + " not found.~n ~n")

Local images := New Image[numFrames]

Local atlasImg := New Image(atlasTexture)

Local columns:Int = atlasImg.Width / cellWidth

For Local i := 0 Until numFrames

Local col := i Mod columns

Local x1 := col * cellWidth

Local y1 := (i / columns) * cellHeight

Local x2 := x1 + cellWidth

Local y2 := y1 + cellHeight

Print "i = " + i + ", x1 = " + x1 + ", y1 = " + y1 + " x2= " + x2 + ", y2 = " + y2

images[i] = New Image(atlasImg, New Recti(x1 ,y1, x2, y2))

atlasImg = Null

Return images

End

Place the image in assests folder or just download the tiletest.zip

Attachments:

tiletest.zip

July 14, 2018 at 3:38 am #15041

Pakz

Participant

This from discord. Make sure the spritesheet image is with the power of 2. So width and height 256*256 or 512*512. Textures and opengl thing.

July 14, 2018 at 3:45 am #15042

Ethernaut

Participant

Just tried using my SpriteTools Atlas class, and it fixes the problem by working its magic behind the scenes…

https://github.com/DoctorWhoof/spriteTools

Minimal changes to your code, and unchanged texture file.

Namespace myapp

#Import "images/"
#Import "<std>"
#Import "<mojo>"
#Import "../spritetools"

Using std..
Using mojo..
Using spritetools..

Const VIRTUAL_SIZE := New Vec2i(320, 200)

Class MyWindow Extends Window
	Field tiles:Image[]
	Field filterTextures:Bool = True
	
	Method New()
		Super.New("Tile Test", 1280, 800, WindowFlags.Resizable)
		Layout = "letterbox-int"
		tiles = New Atlas( "asset::tileset2.png", 32, 32, 0, 0, TextureFlags.FilterMipmap ).Cells
	End

	Method OnRender(canvas:Canvas) Override
		GameLogic()
		App.RequestRender()
		GameRender(canvas)
	End
	
	Method GameLogic()
		If Keyboard.KeyHit(Key.Escape)
			App.Terminate()
		End
	End
	
	Method GameRender(canvas:Canvas)
		canvas.TextureFilteringEnabled = filterTextures
		For Local x:Int = 0 To Width Step 32
			For Local y:Int = 0 To Height Step 32
				canvas.DrawImage(tiles[14], x, y)
			Next
		Next
	End
	
	Method OnKeyEvent(event:KeyEvent) Override
		If event.Type = EventType.KeyDown And event.Key = Key.Enter And event.Modifiers & Modifier.Alt
			Fullscreen = Not Fullscreen
		Endif
	End
	
	Method OnMeasure:Vec2i() Override
		Return VIRTUAL_SIZE
	End
End

Function Main()
	New AppInstance
	New MyWindow
	App.Run()
End

Namespace myapp

#Import "images/"

#Import "<std>"

#Import "<mojo>"

#Import "../spritetools"

Using std..

Using mojo..

Using spritetools..

Const VIRTUAL_SIZE := New Vec2i(320, 200)

Class MyWindow Extends Window

Field tiles:Image[]

Field filterTextures:Bool = True

Method New()

Super.New("Tile Test", 1280, 800, WindowFlags.Resizable)

Layout = "letterbox-int"

tiles = New Atlas( "asset::tileset2.png", 32, 32, 0, 0, TextureFlags.FilterMipmap ).Cells

End

Method OnRender(canvas:Canvas) Override

GameLogic()

App.RequestRender()

GameRender(canvas)

End

Method GameLogic()

If Keyboard.KeyHit(Key.Escape)

App.Terminate()

End

Method GameRender(canvas:Canvas)

canvas.TextureFilteringEnabled = filterTextures

For Local x:Int = 0 To Width Step 32

For Local y:Int = 0 To Height Step 32

canvas.DrawImage(tiles[14], x, y)

End

Method OnKeyEvent(event:KeyEvent) Override

If event.Type = EventType.KeyDown And event.Key = Key.Enter And event.Modifiers & Modifier.Alt

Fullscreen = Not Fullscreen

Endif

End

Method OnMeasure:Vec2i() Override

Return VIRTUAL_SIZE

End

Function Main()

New AppInstance

New MyWindow

App.Run()

End

July 14, 2018 at 4:09 am #15043

therevills

Participant

Tried the power of two by increasing the image (tileset2.png) to 256×256, but still had the gaps. I thought Monkey did that for you?? Maybe I’m thinking of BMX or MX1?

Ethernaut’s code does get rid of the gaps, but the seamlessness is not quite right now but better than the gaps

Attachments:

July 14, 2018 at 4:29 am #15046

Ethernaut

Participant

This is what I get when doing the tiling by hand in Photoshop:

Seems pretty close to what the Atlas did!

For tilemap work, check out “Pixel Edit“. It’s super simple, but has some killer features, like painting directly on the tile while you see the result in a tile map, etc.

<edit> If you zoom in, there’s indeed an odd edge interpolation going on… will investigate!

July 14, 2018 at 4:41 am #15047

Ethernaut

Participant

Argh, found a bug on my end! Will fix…

July 14, 2018 at 5:02 am #15048

therevills

Participant

I’ve been using Pyxel Edit now for a while, it is awesome

Argh, found a bug on my end! Will fix…

Cool – I’ll keep an eye on your fix!

Thanks for helping

July 14, 2018 at 5:04 am #15049

Ethernaut

Participant

Ok fixed!

Instead of copying neighbor pixels, I copy the values from the other side of the tile (i.e. gap on the left edge of the tile gets the color values from the right edge).

On top of that, I also fill the pixels at the intersection of the gaps now, which something I didn’t do before because I’m lazy!

Updated here:
https://github.com/DoctorWhoof/spriteTools/blob/master/source/atlas.monkey2

July 14, 2018 at 5:20 am #15050

therevills

Participant

Looks perfect! I’ll test some more soon! Thanks a lot!

July 14, 2018 at 12:52 pm #15051

c0d3r9

Participant

with https://www.codeandweb.com/texturepacker

its possible to add a pixelborder to each tile on the spritesheet.

only a little tip

Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

Getting rid of the cracks? Tile Images…

Attachments:

Attachments:

Archives

Recent Replies

What is this?