Graphics not sharp when imported

chongyunxiang

  • *
  • Posts: 278
Hi,

I've been exporting my graphics at 4x and importing it into Stencyl. The file format is .png.
Created it based on the 1980x1280 ratio, then have it import at 4x to suit the mobile dimension (480x320).

I use Adobe Illustrator to export my vectored graphics. When I view the graphics using Preview or other Image software, the image is sharp and clear. But its no longer sharp when I imported it into Stencyl. I tried the No Smoothing, Bilinear and Bicubic functions. But it's all the same results. I'll try and upload a screenshot of the same graphic when displayed on my mobile.

Can I ask, what kind of settings do you use in your graphic software and also the import settings in Stencyl? Do I have to export using another format instead of png?

Thanks.

chongyunxiang

  • *
  • Posts: 278
Here's a screenshot of it!

The same goes for all my graphics. The lines and edges are not as sharp as it appears when opened in Preview or Windows Photo Viewer.

Bicubic has better results.

Thank you!

« Last Edit: July 28, 2015, 03:55:34 am by chongyunxiang »

ajimundi

  • *
  • Posts: 230
I think it's a new bug. This happens to me as well while doing a tutorial. My tiled previewed fine as 32x32, but once I got past import, it became 8x8 tiles.

EDIT: imported in 4x. The tile was 32x32 but it was low res (as if 8x8 resized up) and the one in the tile page is 8x8.
::: It's never too late, unless you're dead. Maybe not even then. :::

DTH

  • *
  • Posts: 148
I cant help with the image issue I'll leave that to experienced users but your tile issue is because you imported the tile set at x4, import it again as x1 it will be fine

dtrungle

  • Posts: 1938
Try to put a border(stroke) around the words and see if that does anything. I get this as well using inkscape.

There's an anti-alias setting in Settings>Advanced, is it on?

« Last Edit: July 28, 2015, 06:40:14 pm by dtrungle »

ajimundi

  • *
  • Posts: 230
I cant help with the image issue I'll leave that to experienced users but your tile issue is because you imported the tile set at x4, import it again as x1 it will be fine
It was imported at x4 because it _was_ a x4 resolution tileset, i.e. the set was comprised of 128x128 tiles., which should be 32x32 in x1.
::: It's never too late, unless you're dead. Maybe not even then. :::

chongyunxiang

  • *
  • Posts: 278
I turned the anti-aliasing on and it did helped a bit. But it isn't as crisp and clear as it should be. But still better than the initial stage. Hopefully someone can shed some light on this. I was thinking it could be the file format of the image.

stefan

  • *
  • Posts: 2263
Check out my scaling tutorial. You can find it on the stencyl page on my website below.

chongyunxiang

  • *
  • Posts: 278
I already watched the video and its the same way I create and import my graphics. Right now I'm using Anti-Aliasing and it helps quite a bit, usable for now.

When I export my game to mobile, there are disadvantages like screen got cut off or there are black spaces. I read on Stencylpedia and am aware of the scaling issues in Stencyl. Like if I put a button at the edge of a screen, when exported to a bigger screen mobile, the button got cut off. There are different scaling options to choose from but they all have their disadvantages.

But is there a way to have it scale and fit properly without those disadvantages?

Just asking even though my game has little buttons and I can smack them right in the middle without any worries, but it's for future references.

stefan

  • *
  • Posts: 2263
In that case you should base the buttons position in relation to the camera. I will see if I can do a tutorial for it this week. Can you give me an example what scaling causes the cut off?

chongyunxiang

  • *
  • Posts: 278
I purposely create my buttons at both the extreme left and right side of the screens to test the different scaling Options. The device I used is a Redmi Note 4G with a 5.5" HD IPS display

Even though my phone doesn't require the 4x graphic, I still selected everything just to be certain.

My graphics are imported at the ratio of 1920x1280, so my button is not 1920x1280, but in the ratio as compared to the background. Graphics are imported at 4x, Bilinear with Anti-Aliasing turned on.

Attached are the results for the different scaling modes. I've also attached a screenshot of what it's supposed to look like.

It's not just the buttons, but the overall graphics itself is also being stretched/cutoff/ etc.

So far, the best option seems to be Scale to Fit (fullscreen) or Stretch to Fit in terms of not cutting any graphics.

Can I ask, will the Stretch to Fit option also use the 4x graphics when imported to a larger screen device? Or will it use the 1x graphic and stretch it 4x? I'm a little confused because under Scales, there are 1x - 4x, and under Scale mode there are options like Stretch and Scale. So it seems like Stretch doesn't use the scale and the Scale uses scales. Haha! Too much usage of the word Scale.

Anyway, attached below are the different results on my phone. Hopefully it'll help!

Thanks!

stefan

  • *
  • Posts: 2263
Thanks for the usefull info =)
More people should explain issues like this haha!

Ill see when i will be able to do the tutorial and let you know asap

chongyunxiang

  • *
  • Posts: 278
No problem! Hopefully this gives others an idea of how it looks like when they choose different scale options! Thanks for helping!