Welcome, Guest. Please login or register.

Login with username, password and session length

 
Advanced search

1411468 Posts in 69368 Topics- by 58422 Members - Latest Member: daffodil_dev

April 23, 2024, 12:28:54 AM

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsDeveloperTechnical (Moderator: ThemsAllTook)Low resolution pixel art
Pages: [1]
Print
Author Topic: Low resolution pixel art  (Read 1403 times)
Cimpresovec
Level 1
*


View Profile
« on: June 21, 2019, 03:29:21 AM »

So I have more of a poll question for anyone doing pixel art in Unity. I'm working on some low resolution game (72x128) and I'm hitting some issues (pixel artifacts) with my current workflow.

My current workflow is to use Unity's Pixel Perfect Camera that basically just uses render textures internally. This guide (https://twitter.com/davitsu/status/1087439859801833472) is probably the most common way to do pixel art in Unity (the other way is to manually handle render textures). So my question is does anyone else have any other workflow using pixel art in Unity? I talking about pure low resolution pixel art (so that particle effects and GUI is affected) and not using the "big pixel" style.

I'd be gracious for any feedback.
Logged

Programming is the closest thing I have to magic.
dafu
Level 0
**



View Profile
« Reply #1 on: June 29, 2019, 06:07:39 AM »

RetroBlit! (https://pixeltrollgames.itch.io/retroblit). Fantasy Console-like APIs in Unity.

It's my own creation so a bit of shameless advertising here, but this is exactly why I made it. Sometimes you just want to draw pixels to the screen and not jump through a million hoops to jam that into a 3D engine. I wanted something that codes like a Fantasy Console but has the portability of Unity.
Logged
Cimpresovec
Level 1
*


View Profile
« Reply #2 on: June 30, 2019, 12:46:24 PM »

Thanks for the info and the link. I actually did find your solution before but it is not something I would personally pick. I really like what you did but when I'm actually using Unity I'd rather not pick something that isolates me from it. I'm then also limited to the features you provide rather than the Unity ecosystem (Although I could probably extend your solution). Overall I really like it, gives me a lot of PICO8 vibes but it's just not my cup of tea.

Thanks and best regards.
Logged

Programming is the closest thing I have to magic.
dafu
Level 0
**



View Profile
« Reply #3 on: July 01, 2019, 08:40:08 AM »

Absolutely it is a niche product with pico8 being one of its inspirations. You can pull in various Unity features into it, so long as they're not related to rendering, eg in-app purchases.

Thanks for checking it out!
Logged
Xnite
Level 0
**



View Profile WWW
« Reply #4 on: July 02, 2019, 03:14:20 PM »

I'm interested in this too.

It's disappointing to hear that the workflow you linked is still not a perfect solution. What kind of artifacts are you getting?

I'm tempted to try RetroBlit, but am also worried about losing the use of some Unity features and assets I've come to rely on.
Logged

Cimpresovec
Level 1
*


View Profile
« Reply #5 on: July 03, 2019, 06:34:33 AM »

I'm using really low resolution 72x128 pixels. And on Android devices some pixels sometimes don't "align" properly i.e. they are displayed on the wrong "cell". So for example a 3x3 full color sprite may have it's left middle pixel sticking out 1 more pixel to the left, leaving a gap. I only noticed it on my Android device and with certain coordinates and sprite atlases. I think some rounding error etc. are leading to it but I have no control over it. Well I can affect if but then it affect my workflow and I rather not do that.
Logged

Programming is the closest thing I have to magic.
Daid
Level 3
***



View Profile
« Reply #6 on: July 03, 2019, 01:08:45 PM »

I'm using really low resolution 72x128 pixels. And on Android devices some pixels sometimes don't "align" properly i.e. they are displayed on the wrong "cell". So for example a 3x3 full color sprite may have it's left middle pixel sticking out 1 more pixel to the left, leaving a gap. I only noticed it on my Android device and with certain coordinates and sprite atlases. I think some rounding error etc. are leading to it but I have no control over it. Well I can affect if but then it affect my workflow and I rather not do that.
Got a screenshot of that? I think I've been experiencing the same on the RaspberryPI, 1 row of pixels bleeding where they shouldn't. Almost if the GPU is rounding upwards when it shouldn't be at all. Very noticeable with rendering a tilemap from a single texture with tiles. I added a very small fudge factor in the UV coordinates to work around it.
Logged

Software engineer by trade. Game development by hobby.
The Tribute Of Legends Devlog Co-op zelda.
EmptyEpsilon Free Co-op multiplayer spaceship simulator
dafu
Level 0
**



View Profile
« Reply #7 on: July 03, 2019, 04:48:48 PM »

This will happen if your pixel size doesn't evenly divide into your window size, or if your vertex position coordinates are not rounded up to integers. If you use fractional coordinates for your vertices eg: 0.33333f make sure the shader float precision for your vertex position is accurate enough, it's best to use whole integers though.

If your display is not divisible by pixel size then there are shaders you can use that smooth out the edges of the pixels without too much blurring. Not to plug RetroBlit too much but it comes with such a shader, and there's a bit of discussion on this problem here in the docs:
http://www.pixeltrollgames.com/RetroBlit/docs/doc/features.html#pixel_perfect_rendering

Also for most accurate pixel perfect results what you really want to do is create an off screen rendering texture that is the size of your pixel space (eg 480x270) and render everything to it at 1x scale, and then render this whole texture in the final pass scaled up to your native resolution size eg 1920x1080. This achieves two things, your pixels are all uniform, and for majority of your rendering the pixel fill rate is much lowerbecause you're targetting 480x270 pixels instead of 1920x1080, this lets you layer more effects, and have less regard for overdraw at higher performance.
« Last Edit: July 03, 2019, 04:59:28 PM by dafu » Logged
Cimpresovec
Level 1
*


View Profile
« Reply #8 on: July 03, 2019, 09:15:47 PM »

I was able to dig up an image from an old Android build, you can see the pixel "scramble" in the blue obstacle.



I was also able to "correct" it by changing up some UVs e.g. adjusting the sprite rectangles in the sprite editor (I'm using sprite sheets). But then you have to correct the object for that and I just don't want to do that. I found that sprite "rectangles" dividable by 2 helped.

Thanks for the explanation dafu. I expected something like this. The plugin I'm using is actually using an off screen render texture but the issue is still happening. Maybe a shader that rounds the vertex positions could help and then I'd use that shader on every sprite. But it's always a chore to work around such issues.
Logged

Programming is the closest thing I have to magic.
Xnite
Level 0
**



View Profile WWW
« Reply #9 on: July 04, 2019, 03:10:24 PM »

I noticed this blog post has some extra details about a pixel perfect workflow: https://blogs.unity3d.com/2019/03/13/2d-pixel-perfect-how-to-set-up-your-unity-project-for-retro-8-bits-games/

For example, setting the Pivot Unit Mode to pixel. Wondering if this would fix your issues?
Logged

Cimpresovec
Level 1
*


View Profile
« Reply #10 on: July 08, 2019, 01:00:13 PM »

Yeah that is the official Unity guide for pixel perfect. Sadly the pivot mode doesn't effect the issue.
Logged

Programming is the closest thing I have to magic.
Pages: [1]
Print
Jump to:  

Theme orange-lt created by panic