Hello,
I am making some graphics on adobe illustrator. The Images turn out great, but depending on an area on the simulator the image is blurry and is not the same resolution as other areas on the screen. I am wondering if anyone knows what can be the cause of this.
Any help would be greatly appreciated. [import]uid: 23689 topic_id: 18019 reply_id: 318019[/import]
Not without seeing examples of your code and images you are using. [import]uid: 5317 topic_id: 18019 reply_id: 69073[/import]
I can’t think how this could be the Sim or corona.
Could it be your screen? [import]uid: 79135 topic_id: 18019 reply_id: 69210[/import]
Images + sample code to reproduce would be helpful here. [import]uid: 52491 topic_id: 18019 reply_id: 69273[/import]
I have an image displayed on the screen. I’ve tried this with any image and the resolution changes. I had a blank simulator and one with other images on it. Try any image and see if this is the same for you. I’m not sure if it’s JUST ME but i tried different main.lua files and simulators and it’s the same. I am starting to go crazy, at one point its great quality then i change the position and the image quality is bad. Can someone please see if this is the same for you, if so what should i do to change this ?
(When the position of the Image has a width of 1.2 and a height of 4 it is perfectly fine. Once I change the position to a width of 1.1 the image quality changes.)
I added this code:
[code]
local ball = display.newImage “ball.png”
ball.x = display.contentWidth/1.2 – The width is 1.2 at the moment.
ball.y = display.contentHeight/4
– Then change the width to 1.1
local ball = display.newImage “ball.png”
ball.x = display.contentWidth/1.1 – The width is 1.1 now.
ball.y = display.contentHeight/4 [import]uid: 23689 topic_id: 18019 reply_id: 69512[/import]
What is the size of the image you are displaying? The size of the image is the deciding factor.
Say you have an image that is sized in even numbers. 32x32 for example, with a center reference point. If you display that image, and put it at coordinates x = 16 and y = 16, that means that the edge pixels are at coordinates of 0 on the left, and top, and 32 on the right and bottom. (image.contentWidth/2 = 16) Nice crisp image.
If you have an image that is 31x31, and display it at the same coordinates as before, the edge pixels are at 0.5 top and left, and 15.5 right and bottom. (image.contentWidth / 2 = 15.5) Blurry image.
Does that make sense? [import]uid: 5317 topic_id: 18019 reply_id: 69598[/import]
I am not entirely sure what you are getting at. [import]uid: 23689 topic_id: 18019 reply_id: 69677[/import]
mike4 said “What is the size of the image you are displaying? The size of the image is the deciding factor.”
"MichaelAssadi “I am not entirely sure what you are getting at.”
I think what he’s getting at is what size is the image you are displaying? 
For example
You say
local ball = display.newImage( "ball.png" )But you don’t say what the source image size is. When you created this ball, what were the dimensions? If I created a ball in Adobe Illustrator and made it 32x32, then that will be the size on screen UNLESS I used
local ball = display.newImageRect( "ball.png", 64, 64) Basically, that would change the 32x32 size on screen to 64x64, because the newImageRect will allow you to scale up or down.
So let me ask the question, which I don’t think there is any other way to ask it:
What size/dimension in pixels is your ball.png?
ng [import]uid: 61600 topic_id: 18019 reply_id: 69835[/import]
Thank for the explanation. The dimension of the ball.png is 32x33.
[import]uid: 23689 topic_id: 18019 reply_id: 69840[/import]
I think the 33px height explains the blurriness. All image dimensions should be even pixels to appear sharp. Changing the dimensions to 32x32px (in Photoshop) should fix the problem. [import]uid: 13507 topic_id: 18019 reply_id: 69848[/import]
The image still appears the same. But my original question was, depending on the position of the image the quality is not the same. [import]uid: 23689 topic_id: 18019 reply_id: 69890[/import]
This is a direct result of the image pixel dimensions being divisible by 2.
If the image edge pixels are divisible by two, as you change the position of the image on screen, the edge pixels will always fall on a single pixel.
If the edge pixels are not divisible by two, as you change the position of the image on screen, the edge pixels will alternately be on a pixel, and then between two pixels.
Does that make sense? [import]uid: 5317 topic_id: 18019 reply_id: 69894[/import]
Here’s a question: what are the implications when using an imageSheet with “divisible by 2 dimensions”, and “non-divisible by two” dimensions for its frames?
Say the image sheet dimensions are
100 x 100
But one of the frames is 51 x whatever.
In other words do both the FRAMES of the images sheets, and the IMAGE SHEETS themselves have to have dimensions divisible by 2? [import]uid: 73951 topic_id: 18019 reply_id: 101212[/import]
@MichaelAssadi,
Your issue might be in the resolution you’ve set your app at, and the physical resolution of your target device. If the former (coded resolution) is higher than the physical resolution, Corona needs to “factor” the position to fit, and if that object lies at somewhere like 50.5 (after factoring) the device will place it at 51, and thus you’ll see some visible shift.
@mort,
Images and image sheets don’t need to be in 2x or “power of 2” dimensions any longer, however putting them in power of 2 supposedly makes them faster and more memory efficient. I would suggest, if you have an image that is 118 x 102 pixels, that you pad it with transparent space to 128 x 128. The file size shouldn’t increase, and you’ll gain OpenGL speed benefits by making it “power of 2”.
In regards to image size versus image SHEET size, I think it’s most important to make the SHEET in power-of-2 dimensions. You can then squeeze any number of odd-sized frames onto that sheet, but try to keep the sheet at 512, 1024, 2048, etc. [import]uid: 9747 topic_id: 18019 reply_id: 101214[/import]
@I.D.
Thanks, as always for your prompt reply.
Shouldn’t all image, and thus frame, dimensions be even, such that there aren’t any issues with half pixels?
To lend some context to the situation: I am designing an image sheet and I’m concerned that if I don’t place images at whole number coordinates (e.g. 100, 100), with image/frame dimensions of even values (e.g. 222 x 52), I’ll run into issues with image clarity. Is this true?
(Say, I need to define non whole number coordinates for a frame.) [import]uid: 73951 topic_id: 18019 reply_id: 101333[/import]