Scale Image Problem

Monkey Forums/Monkey Programming/Scale Image Problem

Monking

(Posted 2013) [#1]

Hi,
I'd encountered scale image problem,
I did some research and I found this forum http://www.monkeycoder.co.nz/Community/posts.php?topic=1559
but unfortunately I can't fix my problem either. (Actually I'm not really know what they talking about and how to fix it)

I compiled in HTML 5 it some how no problem,
but when I compiled to flash, there has some 1 pixel black line around the image,
I set the width and height in MonkeyGame.as to
[SWF(width="400",height="600")]

Here is the output image:
https://www.dropbox.com/sc/15mbglyj3ir45f9/G5NRtyTlFw

Here is my coding:

Strict

Import mojo

Global game:Game

Global cWidth:Int = 0	'Width of canvas
Global cHeight:Int = 0	'Height of canvas

' Game Width and Height
Const WIDTH#=256
Const HEIGHT#=512

Class Game Extends App
	
	Field FPS% = 60
	
	Field img_background:Image ' Background Images
	Field showimg:Image
	
	Method OnCreate:Int()
		
		SetUpdateRate(FPS) 'Set the UpdateRate to 60 frames per second
		
		'Determine the canvas dimensions
		cWidth = DeviceWidth()
		cHeight = DeviceHeight()
		
		img_background = LoadImage("Background.png") ' Load background image
		
		Return True
		
	End Method
	
	Method OnUpdate:Int()
		
		Return True
	End Method
	
	Method OnRender:Int()
		Cls
		
		PushMatrix
		
		Scale cWidth/WIDTH, cHeight/HEIGHT ' set screen
		
		showimg = img_background.GrabImage(0,0,32,32,1,Image.MidHandle)
		
		' Loop for row and column in map
		For Local y:Int = 0 To 17
			For Local x:Int = 0 To 8
			
				DrawImage (showimg, x*32, y*32 , 0)
				
			Next
			
		Next
		
		PopMatrix
		
		Return True
		
	End Method
	
End Class

Function Main:Int()
	game = New Game
	Return True
End

May download the example at here:
https://www.dropbox.com/s/z0zszejbfjj3ekn/ScaleImage.zip

rIKmAN

(Posted 2013) [#2]

If you unzip that example into your DropBox, then paste the DropBox Public Link to the MonkeyGame.html file, it will run right from your DropBox for us.

It might make people a little more inclined to check out the example as it removes the hassle of the zip file, extracting etc

Midimaster

(Posted 2013) [#3]

as a workaround I would suggest to create tiles of a size of 34x34 if 32x32 is needed. The the "border"-pixels should be a copy of the corresponding old border.

then pick the tile frames from 1,1,32,32 instead of 0,0,32,32

or within For-Next-Loops:

pick from i*34+1,i*34+1,32,32

Xaron

(Posted 2013) [#4]

Use the flag Image.XYPadding

benmc

(Posted 2013) [#5]

I too use the extra transparent pixel method around tiles and then when drawing I make sure to convert coordinates to INT.

HOWEVER, the problem still arises due to scaling - especially when scaling up and Mojo image filtering is true. The edges get anti-aliased, and they blur a bit, and then where they overlap can sometimes blend colors strangely, making lines still appear.

Turning on image filtering seems to work, but you obviously can't do this for all games. I have yet to try scaling DOWN.

Monking

(Posted 2013) [#6]

To rIKmAN: Tried but didn't work..not sure how.

To Midimaster: Still didn't work

To Xaron: It exactly added padding in the image, not the result I want.

To benmc: Not working on me either?

****
I found out it actually is GrabImage issue, if I use img_background instead of showimg = img_background.GrabImage(0,0,32,32,1,Image.MidHandle), it work fine. But it does not fit the need of tiles..any other idea ?

Monking

(Posted 2013) [#7]

Well, I'm not sure I'm fix it or not, but my solution is create each tile as 33x33, so I'm actually grab it as 33x33 and show it on screen, hence the 1 pixel of grid is gone now.

**
If there is other solution better than this cheat, I hope to try it.
Thanks everyone.

Midimaster

(Posted 2013) [#8]

If this is a solution, it points to a problem of drawing, not grabbbing. It sounds like the tiles have wrong alpha values at the "border" pixels, when using a scaling factor...

Did you find out, where the black color came from? Is it the background color of the screen when grabbing or is it the background color of the screen, when drawing later.

Test to add a..

SetColor 255,0,0
DrawRect 0,0,DeviceWidth(), DeviceHeight()

...before Grabbing, and a...

SetColor 0,255,0
DrawRect 0,0,DeviceWidth(), DeviceHeight()

..before Drawing later. Which color is to see between the tiles now?

Monking

(Posted 2013) [#9]

Hi, sorry for late reply,

I added the following code before grab image,

SetColor 255,0,0
DrawRect 0,0,DeviceWidth(), DeviceHeight()

Set Color 255,255,255 ' Set Back to Transparent Color

so it show red between each tiles..