Making the app

This is the fifth in a series of blogs about how we developed Stenciletto 

Now this bit I like a lot: clean-sheet, really complex, hard-core coding. Mmmm, pain, headache, more pain, fun…

We prototyped in Xamarin.iOS as Xamarin Forms was very immature when we started out. We already had a big bag of cross-platform tools and libraries we had made to build the Puzzle Designer. This proved and tested our core components.

The real Stencilleto was started with Xamarin Forms projects for iOS, Android, UWP and MacOs. UWP and MacOs were later put to side so we could concentrate on iOS and Android, but we got far enough with them to know other platforms are very viable.

We used Forms for its XAML layout engine, navigation, animation engine, internal messaging, and the basic layout controls. All the UI graphics assets are rendered by our dynamic 2D vector rendering engine onto a SkiaSharp canvas. Some of the assets are assembled in code, something we planned when we created the engine. We spent a lot of time fine-tuning the rendering engine so it could run multiple animations at 16 frames per second on low-end Android devices and iPods. This means more capable devices aren’t even breaking sweat rendering our graphics.

Using XAML helped us to scale the UI to fit the different device sizes. The bigger the device, the bigger the graphic assets are drawn on it. 

Jane storyboarded everything in Affinity Designer, which meant her assets could go straight from the storyboard to the app. As she embellished the UI with more complex graphics and characters, these also went straight from Affinity Designer to the app. We only needed one version of each asset because we could scale them perfectly to whatever size we wanted.

(Original at: https://stenciletto.com/2021/04/06/making-the-app/)