twocentstudios

8-bit Nails Plus

Wed, 12 Mar 2025 18:00:00 -0500

I’ve released 8-bit Nails v1.1 to the App Store. It includes some new features alongside a one-time in-app purchase to unlock them.

In this post I want to share some notes about the new features and my decision to add an in-app purchase.

In-App Purchase

A previously released app Count Biki includes in-app purchases but only as a tip that unlocks alternate app icons (admittedly no longer as popular as a perk as they once were). I wanted to start my indie app business journey by testing the waters with tip-based payment before trying other business models.

Unfortunately, Count Biki hasn’t had enough traffic to even begin to get the purchase funnel going. I’d probably need hundreds of thousands or even millions of users to generate any sort of revenue via the voluntary tipping model.

8-bit Nails is also a pretty simple app. It’s not a utility that assists users in accomplishing a specific goal, so it’s hard to justify a large price tag, especially a subscription. Perhaps I’m still undervaluing the app and will need to re-evaluate the business model again, but for now, I decided to add a single one-time purchase for “8-bit Nails Plus” which unlocks all the features of the app at once, forever.

The purchase screen is the image below. It’s a standard layout but I tried to make it a little flashy. I think it could be improved with some more illustrative images beneath each benefit.

8-bit Nails Plus purchase screen

v1.0 of the app allowed users to create unlimited nail sets. However, from v1.1 onwards, users will need to purchase Plus to create more than 5 nail sets. Any users that already have more than 5 (I don’t think there’s any) will need to purchase Plus before they can add more.

Plus upsell on the home screen

I’m hoping that creating 5 nail sets is a good signal that users are enjoying the app and are willing to pay to continue. (I also started prompting for a review after users add their 3rd nail set). Limiting the main resource of the app doesn’t sit well with me, but it’s something I have to experiment with in this early stage.

Widgets

Plus users can add a widget to their home screen or Today View. The widget shows their current nails. As Apple has opened up the iOS home screen more and more, iOS users have gotten more comfortable personalizing and decorating the home screen beyond simply having rows of apps.

Latest nails widget

Canvas resizing

I added the ability for Plus users to resize the canvas. This was a suggestion from a user who noted that the default 10w by 16h canvas didn’t allow for designs with a center line. I decided to include 4 options with similar aspect ratios: small and large, each with a odd/even variant.

Canvas resizing screen

I was hesitant to introduce image resizing because it can be very disruptive to the image if you’ve already “completed” your design. There’s a balance between forcing users to choose a canvas size before they start drawing and know what it means, and waiting until it’s too costly to change it. In the end, I made the preview screen so users could see what the result would be before deciding to irreversibly alter the canvas size.

The rescaling algorithm is nearest-neighbor which makes sense for pixel art. I was also considering adding an option for clipping, but it’s hard to imagine the cases where clipping makes more sense.

Under the hood, the app technically supports any canvas size, but there are a lot of assumptions based on the aspect ratio of nails. Therefore I wanted to keep it limited for now. Also, too large a canvas and touch drawing gets too difficult and time consuming.

List layout

I made some changes to the layout of the nails list. The share and view large buttons were hidden and I wanted to make sure it was easy for users to access them. It makes the home screen a little more cluttered, but I feel okay about shifting the balance a bit towards usability and discoverability.

Nails list with buttons pulled out beneath the row

Rendering improvements

As discussed in detail in my previous post Rendering Pixel Art with SwiftUI, I made some improvements to the rendering for nails across the app. Users will see less anti-aliasing artifacts, especially in share images.

Share images look nicer

Next steps

There are a few other features I’m considering adding like allowing nail outline customization or share image customization. But I’m going to wait for user feedback before any more overboard with guesses about what will drive downloads and usage (and revenue).

I’m planning to start uploading some videos to social media of me painting some nails with the app as a way to get the word out about the app. I haven’t experimented with ads or social media marketing yet and I think this could be a good opportunity to get started.

My other goal with adding a non-consumable in-app purchase (i.e. one-time unlock) was to have a reusable implementation for other apps. Working with StoreKit and testing all scenarios is complex and time consuming. I’m banking on this upfront work decreasing the time to add payments to future apps significantly.

Rendering Pixel Art with SwiftUI

Mon, 10 Mar 2025 06:08:00 -0500

The main challenge of rendering pixel art is maintaining crisp pixel boundaries when scaling the tiny bitmap to modern displays with lots of pixels.

Rendering from a native `Image`

If you already have an pixel art image you’d like to display in Image (UIImage, CGImage, etc.) format (e.g. a PNG in your asset catalog or downloaded from a server), add the .interpolation(.none) modifier to Image.

struct NativeImageView: View {
    var body: some View {
        Image("color-image-10-10") // 10x10 PNG in Assets.xcassets
            .interpolation(.none) // <-- important
            .resizable()
            .scaledToFit()
    }
}

#Preview("NativeImageView", traits: .sizeThatFitsLayout) {
    NativeImageView()
        .padding()
        .border(.black)
        .padding()
}

With and without interpolation applied to an existing pixel art image

Bitmap Model

Imagine you want to manipulate color data directly instead of using CGImage as the container.

Let’s start by creating a simple struct to hold our bitmap data.

struct Bitmap: Equatable, Sendable {
    // Access via `values[row][column]`
    var values: [[Color]] 

    var rows: Int { values.count }
    var columns: Int { values.first?.count ?? 0 }
    var aspectRatio: CGFloat { CGFloat(columns) / CGFloat(rows) }
}

Next let’s add a few ways to create a bitmap for testing:

extension Bitmap {
    init(_ initialColor: Color? = nil, rows: Int, columns: Int) {
        values = .init(repeating: .init(repeating: initialColor ?? .white, count: columns), count: rows)
    }

    mutating func fill(_ color: Color) {
        values = .init(repeating: .init(repeating: color, count: columns), count: rows)
    }

    static func mockGrid(rows: Int, columns: Int) -> Self {
        var instance = Self(rows: rows, columns: columns)
        for row in 0 ..< rows {
            for column in 0 ..< columns {
                instance.values[row][column] = row % 2 == column % 2 ? .black : .white
            }
        }
        return instance
    }

    static func mockRowColors(rows: Int, columns: Int) -> Self {
        var instance = Self(rows: rows, columns: columns)
        for row in 0 ..< rows {
            instance.values[row] = Array(repeating: .init(hue: Double(row) / Double(rows), saturation: 0.7, brightness: 1.0), count: columns)
        }
        return instance
    }
}

Rendering options

There are two ways to render the bitmap: Image and Canvas.

Image allows you to use Image-specific modifiers to further manipulate the view.
Image encodes its native size, making it simpler to apply an aspect ratio.
Canvas draws directly to a GraphicsContext at the size provided by the parent view.
Canvas allows you to draw additional elements like dividers.

Rendering as `Image`

BitmapImageView will render the bitmap. It works by using the Image(size:label:opaque:colorMode:renderer:) initializer for Image that allows writing directly to the image via a SwiftUI GraphicsContext instance.

struct BitmapImageView: View {
    let bitmap: Bitmap

    var body: some View {
        Image(
            size: .init(width: bitmap.columns, height: bitmap.rows),
            label: nil,
            opaque: true,
            colorMode: .nonLinear
        ) { ctx in
            let cellWidth: CGFloat = 1
            let cellHeight: CGFloat = 1
            for row in 0 ..< bitmap.rows {
                for column in 0 ..< bitmap.columns {
                    let path = Path(
                        CGRect(
                            x: CGFloat(column) * cellWidth,
                            y: CGFloat(row) * cellHeight,
                            width: cellWidth,
                            height: cellHeight
                        )
                    )
                    ctx.fill(path, with: .color(bitmap.values[row][column]))
                }
            }
        }
        .interpolation(.none)
        .resizable()
        .scaledToFit()
    }
}

The size of the image is small; exactly the number of pixels specified in our bitmap. The other parameters are the defaults.

We loop through the bitmap contents and write each value as a one-point size rectangle in the graphics context.

With the resulting image, we can now apply the usual Image-specific modifiers.

The secret sauce is using the .interpolation(.none) modifier to preserve the hard edges when the tiny image is scaled up to retina display sizes.

With and without interpolation applied to the tiny bitmap

.resizable makes the image expand to fill the parent.

.scaledToFit preserves the square pixels. It’s the equivalent of .aspectRatio(bitmap.aspectRatio, contentMode: .fit) or .aspectRatio(nil, contentMode: .fit).

Here is a SwiftUI Preview to show our final result:

#Preview("BitmapImageView", traits: .sizeThatFitsLayout) {
    BitmapImageView(bitmap: .mockGrid(rows: 10, columns: 10))
        .padding()
        .border(.black)
        .padding()
}

Rendering as `Canvas`

struct BitmapCanvasView: View {
    let bitmap: Bitmap
    
    var body: some View {
        Canvas(
            opaque: true, 
            colorMode: .nonLinear, 
            rendersAsynchronously: false
        ) { ctx, size in
            let cellWidth = (size.width / CGFloat(bitmap.columns))
            let cellHeight = (size.height / CGFloat(bitmap.rows))
            for row in 0 ..< bitmap.rows {
                for column in 0 ..< bitmap.columns {
                    let path = Path(
                        CGRect(
                            x: CGFloat(column) * cellWidth,
                            y: CGFloat(row) * cellHeight,
                            width: cellWidth,
                            height: cellHeight
                        )
                    )
                    ctx.fill(
                        path,
                        with: .color(bitmap.values[row][column]),
                        style: .init(eoFill: false, antialiased: false)
                    )
                }
            }
        }
        .aspectRatio(bitmap.aspectRatio, contentMode: .fit)
    }
}

Unlike the Image implementation, the GraphicsContext within the Canvas implementation is drawing at whatever size the parent specifies.

The secret sauce in this version specifying antialiased: false in the FillStyle(eoFill:antialiased:) parameter. With the default true, certain non-integer sizes will render with randomly sized dividers.

With and without interpolation inside the `fill` command

Adding the specific aspectRatio modifier ensures the view renders with square pixels.

#Preview("BitmapCanvasView", traits: .sizeThatFitsLayout) {
    BitmapCanvasView(bitmap: .mockRowColors(rows: 10, columns: 10))
        .frame(width: 409) // Forcing this width will show antialiasing artifacts 
        .border(.black)
        .padding()
}

Rendering as `Canvas` with dividers

One reason you might want to use Canvas is to draw dividers showing the pixel boundaries.

struct BitmapDividersView: View {
    let bitmap: Bitmap
    var lineWidthRatio: CGFloat? = 0.05 // ratio of cell size
    var lineColor: Color? = .white
    
    var body: some View {
        Canvas(
            opaque: true,
            colorMode: .nonLinear,
            rendersAsynchronously: false
        ) { ctx, size in
            let cellWidth = (size.width / CGFloat(bitmap.columns))
            let cellHeight = (size.height / CGFloat(bitmap.rows))
            for row in 0 ..< bitmap.rows {
                for column in 0 ..< bitmap.columns {
                    let path = Path(
                        CGRect(
                            x: CGFloat(column) * cellWidth,
                            y: CGFloat(row) * cellHeight,
                            width: cellWidth,
                            height: cellHeight
                        )
                    )
                    ctx.fill(
                        path,
                        with: .color(bitmap.values[row][column]),
                        style: .init(eoFill: false, antialiased: false)
                    )
                }
            }
            
            if let lineWidthRatio, let lineColor {
                let lineWidthHorizontal = lineWidthRatio * cellHeight
                let lineWidthVertical = lineWidthRatio * cellWidth
                if bitmap.rows > 2 {
                    for row in 1 ... bitmap.rows - 1 {
                        let linePath = Path { p in
                            p.move(to: CGPoint(x: 0, y: CGFloat(row) * cellHeight))
                            p.addLine(to: CGPoint(x: size.width, y: CGFloat(row) * cellHeight))
                        }
                        ctx.stroke(linePath, with: .color(lineColor), lineWidth: lineWidthHorizontal)
                    }
                }
                if bitmap.columns > 2 {
                    for column in 1 ... bitmap.columns - 1 {
                        let linePath = Path { p in
                            p.move(to: CGPoint(x: CGFloat(column) * cellWidth, y: 0))
                            p.addLine(to: CGPoint(x: CGFloat(column) * cellWidth, y: size.height))
                        }
                        ctx.stroke(linePath, with: .color(lineColor), lineWidth: lineWidthVertical)
                    }
                }
            }
        }
        .aspectRatio(bitmap.aspectRatio, contentMode: .fit)
    }
}

#Preview("BitmapDividersView", traits: .sizeThatFitsLayout) {
    BitmapDividersView(bitmap: .mockRowColors(rows: 10, columns: 10))
        .frame(width: 409)
        .padding()
        .border(.black)
        .padding()
        .background(Color.gray)
}

Adding dividers to the bitmap rendering

The above implementation draws dividers between rows and columns if lineColor is specified in the initializer.

I’ve implemented lineWidthRatio as a percentage of the cell width. It will scale somewhat naturally with the view size.

Note: this does not draw the outer border intentionally. If you need the outer border, it’s better to draw it using SwiftUI modifiers because inside the GraphicsContext callback, borders are drawn with half their width on each side of the path. This means that only half the outer borders will be visible if the Canvas is clipping.

Adding dividers and a border to the bitmap rendering

#Preview("BitmapDividersViewWithBorder", traits: .sizeThatFitsLayout) {
    BitmapDividersView(bitmap: .mockRowColors(rows: 10, columns: 10))
        .frame(width: 400)
        .padding(2)
        .border(.white, width: 2)
        .padding()
        .background(Color.black.opacity(0.8))
}

It’s also reasonable to draw the dividers into a separate Canvas instance (with opaque: false) and overlay it using the standard SwiftUI tools. However, it will be slower (albeit imperceptibly so for most use cases) since SwiftUI will have to do the compositing again.

8-bit Nails - Pixel Art Nail Diary

Mon, 17 Feb 2025 06:22:00 -0600

This week I released 8-bit Nails. It’s a light-hearted app for nail painting enthusiasts to express their creativity through pixel art and document their manicures.

Download it on the App Store.

Marketing screenshots for 8-bit Nails on v1.0 release

After you or a loved one gets their nails done IRL, jump into 8-bit Nails and create a matching set of nails with your own vision in pixel art style. Manicures can be simple or elaborate, and using your creativity to translate them into pixel art style is a fun challenge.

The drawing tools are simple, but there are a few built-in helpers to selectively copy an individual nail across to other nails. You can customize the nail on each hand.

8-bit Nails includes helper tools to eliminate the boring parts of painting

The system color picker is available, and the already used colors are easily accessible as a dynamic palette. And undo and redo functions are available for each nail.

The color picker

After you’ve finished pixel-fying your nails, they appear in the diary tagged with the current date. You can look back to see each of your nails over time.

The main screen shows a diary of your nails with most recent at the top

There’s also a full screen viewer when you want to show off your work in person.

View your nails in full screen

And finally, there’s a special shareable image version with an auto-generated background color. Save this to your camera roll or send it to friends.

An example shareable image

Background

My girlfriend is a nail enthusiast. She gets her nails painted every couple of weeks. I liked seeing what new designs she had and a budding idea came to me of having a painting app to keep track of them. While prototyping, I realized having a full suite of drawing tools and brushes was way too complicated and intimidating. But arbitrarily limiting the drawing resolution created a fun constraint, made it easier to paint on a smartphone-sized touch screen, and ensured that there was a soft-limit on the time it takes to get to the finish line.

I finished a prototype version over a weekend, got it on Test Flight, and sent her an invite before the holidays. Over time, I’ve slightly improved the tools, fixed a few bugs, and added a few nice-to-have helpers. It was fun to see how both her and I interpreted her nails differently in pixel art style. Only after a couple rounds, I think each of us has gotten better at translating the pixel art style. Some of the more complex 3D designs she’s gotten IRL have been especially fun to try to paint in the app.

When I started developing the app, I wasn’t planning on taking it beyond something for the two of us. But as I chipped away at features and slowly noticed how popular manicures were with those around me, I decided it’d be worthwhile to put the finishing touches on the app and release it publicly on the App Store.

There are already a slew of manicure-related apps on the App Store. All fall into the category of games, photos for inspiration, or hyper-realistic painting simulators. Most are targeted towards young girls.

Similarly, there are plenty of pixel art apps. On the casual side, there are paint-by-numbers apps. On the tools side, there are full pixel art suites with layers and other complex tools.

I’m curious to see whether a cross between the two categories will find an audience.

Development

On the technical side, I’m using SwiftUI and no external frameworks. Since my original goal was a personal app, the code reflects that.

Data for all nail sets are saved to one file. The data is saved as matrix of color values and drawn live in a SwiftUI Canvas View. Currently, the canvas is hard-coded to 10x16 pixels, but the code supports any resolution.

I use the system color picker. Undo/redo is implemented as a stack of nail data for each nail in the set. I wanted to experiment with some custom transitions so I didn’t use any sheet or NavigationStack views this time; all views are layered in a ZStack.

If the app starts to get traction, I’m planning on cleaning up the codebase. I realize with my last app Eki Bright I probably leaned a little too hard on the side of a clean codebase. If I want to continue on the indie dev path, I’ll need to keep optimizing for coding practices that facilitate a sustainable business, which means more up-front research, more marketing, more monetization, and more failing fast. All things that spending excess time in the codebase takes away from.

I think it’d be fun to add a widget that shows your latest nails on your home screen. And allow customization of the nail shape. Besides that, I’m going to wait to see what real users are looking for.