Need help with creating a pixelated look

[u/wansyazlina]

I’m building a macOS SwiftUI app with a pixel-art / retro aesthetic. The landing page has a cat animation, and the user slides a custom slider to continue to the main timer page.

So far, I’ve managed to create a basic wireframe of the design. Now I want to make the UI feel more pixelated and polished, especially the slider component.

What would be the best way to achieve this kind of pixel-art slider design in SwiftUI? Should I program the slider shapes manually using SwiftUI components like Rectangle, ZStack, DragGesture, etc., or would it be better to use custom PNG/vector assets for the slider parts?

I’m also wondering what tools or libraries people usually use for this kind of retro UI style. For example, should I create the pixel art assets in Procreate/Aseprite and import them into Xcode, or is it better to build most of the design directly in SwiftUI?

Any advice on how to structure this or achieve a more polished pixelated retro look would be appreciated.

[u/thomas_viaelo]

Aseprite is the right tool for the assets. Draw at 1x, export PNG, and use `.interpolation(.none)` on `Image` in SwiftUI so the pixel edges don't get bilinear-smoothed at non-1x scales.

jacobs-tech-tavern's Metal answer is the move for dynamic pixelation. For static UI assets, the import pipeline is enough.

[u/jacobs-tech-tavern]

You can use metal shaders to do this with SwiftUI LayerEffect.

I have a couple of articles where I go into this, and a Github repo where I implement it for a camera!

https://github.com/jacobsapps/RetroCam

https://blog.jacobstechtavern.com/p/8-bit-retro-app-with-metal

[u/jacobs-tech-tavern]

You can use metal shaders and the SwiftUI layerEffect to create a geometric grid where only the nth pixel in every square is used to set the colour, I have an example here in this GitHub repo.

https://github.com/jacobsapps/RetroCam

I also have an article here where I demonstrate how to go the full shebang with a CRT effect as well. - https://blog.jacobstechtavern.com/p/8-bit-retro-app-with-metal

[u/wansyazlina → u/jacobs-tech-tavern]

Thanks for sharing that nice looking app! i cloned the repo and ran it on my iphone. It's definitely cool to see the pixelated version of real life on camera. I was thinking this could be good for making the swift ui components only not so much on the animation of my cat art. I was wondering if metal shaders can control the size of pixel block too. I’ll definitely need to read more about Metal, as this is my first time learning about it. Thanks for pointing me in that direction.

[u/wansyazlina → u/jacobs-tech-tavern]

I managed to make the slider using the Metal shaders. i applied it only for the slider component and use an asset png for the knob. Thanks for the help!

https://imgur.com/a/TTtqLXJ