iOS Build - Sprites, Textures and Art Are Not Crisp Like In The Editor?

[anonymous_user_75cae7c7]

Was curious if anyone had insight how to remove the blurry sprites(KennySpritePack) when exporting to iOS Device (iPhone5 and Mini)?
The sprite I am using is the Blue Alien and background, the size is 128x256. When I launch the application on my iPhone 5c, I get very blurry pixels for all the sprites and backgrounds

Am I missing something in the settings?
The sprites look great on the editor and stand-alone version, but when I try to test with mobile device, it looks like the art is downgraded.
Any help would be appreciated.

Thanks

[C-Arch]

Check Mip Map settings for the textures. Disable them.
Check your basedeviceprofiles.ini

+CVars=r.MobileContentScaleFactor=2

This makes a difference as well.

Check your PVRTC quality under the project settings

[anonymous_user_75cae7c7]

Thank you for the feedback… I was testing and noticed.

When I set the “Play in New Window” or “Play in Stand Alone Mode” to screen to:
Apple iPhone 4s and smaller windows… the textures appear to be blurry.

But in higher resolutions, larger screens it shows better quality.

My orthographic is 2048, is there some reason for this or way to have best quality for small screens and larger screens for my sprites?

Thanks

[C-Arch]

Hmm did you disable mip maps?

[anonymous_user_808c3f02]

@Crocopede;171375

Hmm did you disable mip maps?

We have found that disabling mipmaps works, but of course you lose the benefit of mip maps. There seems to be an issue with LODBias picking a much lower mip level when running on mobile, but I’m not sure how to override that.

[anonymous_user_75cae7c7]

Yes I did, actually, my initial sprites (I made new ones) were not set as a power of 2. So no mipmaps were selected.

Please check out the image I posted.

You will notice the clouds are smooth (not animated in frames, just move to right of screen).
But my hero, the blue eye guy… his edges are a bit rough. Not smooth like a vector image.
Anyway to get the edges of my sprite smooth?

[anonymous_user_75cae7c7]

Thanks Crocopede, I belive it was the PVRT quality was the issue.
I changed it to 2… it took a long time to compress (bc I have starter content in build). But, it did increase the textures and image quality.
Very much appreciated…

[intoxicat3]

another thing is that you could try to change the texture compression to VECTOR DISPLACEMENT MAP or something like that - don’t remember, I’m using this to improve texture quality on mobile because PVR compression is different then. And change LOD group to UI.

[C-Arch]

Cool man.
I just see now what you mean with the crispness. I was assuming you had an issue like me where mip maps would make textures extremely muddy. I had to increase where the mip maps were drawing from.

What you can also do for that is set the anti aliasing settings in your post process volume under the post process settings -> Misc - AA Method
This should smooth out your edges there around the character.

As far as I know for mobile you can only select temporal AA.
There might be a performance impact… but I doubt it would be too much.

[jwatte]

For what it’s worth, the jagged outline of the blue alien seems to be because of a lack of anti-aliasing/blending, not because of texturing as such.
Very thin lines will not look very good as part of 2D texture sources, unless you have an exact 1:1 pixel:texel map.
Also, you should probably add an alpha fringe around anything that you want to be nicely smooth on the screen.

[anonymous_user_75cae7c7]

Thanks for the feedback… could you elaborate on the following:

• exact 1:1 pixel: telex map How would I do this? Is this something with the orthographic camera and sprite size…?
• add alpha fringe around anything…? Where is this done, when developing the art or inside the unreal engine?

[Midnight_Toil]

Vector displacement makes your textures uncompressed.

As for your blue guy it looks like the source art does not have a correct antialiased alpha channel, or you material is rendered as Masked.

Filtering can also cause blurriness if you are wanting sharp pixelated look. You can change the filtering type on the texture from default, to Nearest. This is under the textures Properties under Texture/Filter.

You can look at Tappy Chicken for examples of this if you want.

You can adjust what res the games runs at natively on a per device basis. Newer device will need to be set to 2 to run at native resolution.

look under you game/Config for DefaultDeviceProfiles.ini

if you don’t have this file, you can create it, and add this inside.

[IOS DeviceProfile]
+CVars=r.Streaming.PoolSize=160
+CVars=r.Streaming.UseFixedPoolSize=1
+CVars=p.EnableAsyncScene=0
+CVars=r.Scalability.MaxTextureQualityForLowVirtualMemory=3
+CVars=r.MaxAnisotropy=1

[IOS DeviceProfile]
+CVars=r.MobileContentScaleFactor=1

[iPhone4 DeviceProfile]
+CVars=r.MobileContentScaleFactor=2

[iPhone4s DeviceProfile]
+CVars=r.MobileContentScaleFactor=2

[iPhone5 DeviceProfile]
+CVars=r.MobileContentScaleFactor=2

[iPhone5s DeviceProfile]
+CVars=r.MobileContentScaleFactor=2

[iPad2 DeviceProfile]
+CVars=r.MobileContentScaleFactor=1

[iPad3 DeviceProfile]
+CVars=r.MobileContentScaleFactor=1

[iPad4 DeviceProfile]
+CVars=r.MobileContentScaleFactor=2

[iPadMini DeviceProfile]
+CVars=r.MobileContentScaleFactor=1

[IPodTouch4 DeviceProfile]
+CVars=r.MobileContentScaleFactor=1

[iPodTouch5 DeviceProfile]
+CVars=r.MobileContentScaleFactor=1

[Android DeviceProfile]
+CVars=r.Streaming.PoolSize=160
+CVars=r.Streaming.UseFixedPoolSize=1
+CVars=p.EnableAsyncScene=0
+CVars=r.Scalability.MaxTextureQualityForLowVirtualMemory=3
+CVars=r.MaxAnisotropy=1

[Android_Low DeviceProfile]
+CVars=r.MobileContentScaleFactor=0.5

[Android_Mid DeviceProfile]
+CVars=r.MobileContentScaleFactor=1.0

[Android_High DeviceProfile]
+CVars=r.MobileContentScaleFactor=1.5

[Android_Adreno320 DeviceProfile]
BaseProfileName=Android_High

[Android_Adreno330 DeviceProfile]
BaseProfileName=Android_High

[anonymous_user_75cae7c7]

Thanks for the feedback , very much appreciated.

Re: the source art does not have a correct antialiased alpha channel, or you material is rendered as Masked.

I have researched a little on this in Google,
but do you have any links or explanation that could explain how to do this technique or anti aliased alpha channel and how to change material to not be masked?

I drew the art in Illustrator, then layered export into PSD. Finally used Spine to animate the 2d art and exported it. I wasn’t sure at which point to setup the anti aliased alpha channel. I assume it’s in PSD, but couldn’t find topics on this in google explaining it.

NOTE: I made the changes in INI file, and changed textures of my blue guys animation to Uncompressed and Nearest Filter. I am still getting some pretty jagged pixels on my iPhone 5c

Also, I modified the clouds Materials to remove the lines above and below it, but did not change in my phone build. Seems to be using same textures.

[Midnight_Toil]

This is an example of antialiasing. Look at your alpha channel in Photoshop. It should look like the lower one in this pic. Look at your trees they appear to be anti-aliased correctly. Your source art should have the alpha anti-aliased correctly, and that should propagate through the project. In the material you should run this textures alpha channel into the opacity slot of the material, and go to the details panel, and set the blend mode under Material to Translucent.

As for how to make your art antialiased, in Photoshop when you make a shapes or paint, it is antialiasing that layer unless you turn off antialiasing. Then you can then either Ctrl-click that layer to get a selection from it, and then create an alpha channel from that, and save it as a 32bit tga file, or you can just hide any background stuff and save it as a png and this will include an alpha channel.

Could you post a pic of your source texture and alpha channel for your cloud texture, and your blue guy?

[anonymous_user_75cae7c7]

ok thanks for the feedback…

I attached my PSD Alpha Channels. (Note: I Imported the layers from Illustrator)

When importing, didn’t recall getting alpha channels, because I imported using SpriteSheet.
But my image had transparent background.

In PSD the image looks great! But when importing into UE4… and running on mobile is when I see jagged pixels.
Attached is Blue Guy and Cloud Source Texture. (These textures were given from UE4 upon importing sprite sheet)

http://www.dreambotstudios.com/wp-content/uploads/2014/11/Textures.zip

RE: in the material you should run this textures alpha channel into the opacity slot of the material, and go to the details panel, and set the blend mode under Material to Translucent.

– I cannot find this anywhere in UE4, I assume because I didn’t receive Materials upon importing my sprite sheet.
I do have Composite Texture left blank in the material of the idle animation of my blueguy. (attached below).

Also, note… I have 2 sprite sheets for my idle animations. Since I wanted the images to be large, thinking that may help the jagged pixels.

[jwatte]

• exact 1:1 pixel: telex map How would I do this? Is this something with the orthographic camera and sprite size…?

Yes, you can only do this if you have a fixed-size screen, an orthographic camera, and an exactly known sprite size / texture resolution.
For anything where you want to change screen resolution, you have to either author one sprite image for each resolution, or design sprites that work well when blended/scaled.

• add alpha fringe around anything…? Where is this done, when developing the art or inside the unreal engine?

This is typically done inside the art tool. Reading about your art path, I wonder if there is a way to generate anti-aliased paths when importing from Illustrator in Photoshop?
Also, when you say it looks good in Photoshop, is that at the resolution you’re showing on screen in game, or at some larger resolution?

In general, I would advocate against using Nearest filtering – it will cause blocky-looking outlines, and often also causes “flying pixels syndrome” on moving objects that aren’t just flat colors.

I actually think your clouds have this lack-of-alpha problem, too, because the edges around the rounding look a bit blocky. The reason they look better than blue guy is that the blue buy has a much thinner black outline. If you aim for all lines to be at least two pixels wide on screen in the game (at your desired resolution,) this will probably be easier to manage.

[anonymous_user_75cae7c7]

In regards to masked materials, I look at my sprite individual file and found the image below.

Default Material is Masked…

Could I change this and would this help jagged pixels?

[anonymous_user_75cae7c7]

Thanks for your feedback @JWATTE…

RE: looks good in Photoshop, is that at the resolution you’re showing on screen in game, or at some larger resolution?

Actually I tried downsizing in PSD to 128x128 (bc my image is like 4,000x4,000 from Illustrator). When I downsized, it was pixelated when zoomed in.
Would you recommend taking my Illustrator image and shrinking it to smaller size, then export layers to PSD?

[anonymous_user_75cae7c7]

THANK YOU FOLKS… (, JWatte, Crocopede, Intoxicat3, Crinity)

After 3 long days of frustration, a simple collaboration with the UE4 community gave me some insight into the engine and getting 2d sprites/art ready for games.
I finally discovered the solution, which I share below and learned a lot more from you guys.

Ok, so it was pretty simple actually…

My Art Work Flow:
Illustrator >> Export to Photoshop >> Photoshop Export Layers >> Layers into Spine (2d Animation Tool) >> Export Frames from Spine >> Build SpriteSheet(TexturePacker) >> Import into UE4 (phew…)

When I import my sprite sheet into UE4, it would create 2 folders, Frames and Textures.
But I got confused, because my Textures were both in the main folder and Texture Folder (see below).

Folder That I Imported SpriteSheet (Notice the 2 Texture Files)

Then inside my Texture Folder Is these same 2 texture files

So the problem was:
If I didn’t edit the Texture file in my “Textures” folder that was generated, the changes were not being made.
I was modifying the texture file in the main directory…

Hope that makes sense for someone else with same issues.

I now have pretty decent looking sprites, using specific selections in the Texture File:

Not sure if to use Editor Icon… but it works for now.

So the game is just about ready to launch on Apple, and the PC… it will be my first with the Engine and actually my first game I totally programmed and designed entirely by myself, including the art. Usually would have other devs do the coding and artists, but with the UE4, I wanted to dive deep into the engine and learn this for the next 10 years of my career… so it makes me pretty happy to get something out there live within the first few menths of learning the engine and game development in general.

Thanks folks,