{"pageProps":{"contents":[{"slug":"rapilo","title":"Rapilo","description":"An iOS game build with SwiftUI using custom animations and transitions.","content":"\nAs you might already know, I love coding and designing.\nI couldn't help myself but use the powerful SwiftUI framework and build an iOS game with playful animations.\n\n# Learning Resources\n\nI started looking into SwiftUI the day it was released. I started with Apple's own tutorials.\n\nA couple of days later, I discovered [Hacking with Swift](https://www.hackingwithswift.com) on Twitter.\nThere, I learned a lot about SwiftUI and its API, but couldn't find as much as I wanted about animations and transitions.\nMeanwhile you can find a complete list called [SwiftUI By Example](https://www.hackingwithswift.com/quick-start/swiftui).\n\nTo dive deeper into animations and transitions, I went back to my trusted design tutorial source [Design+Code](https://designcode.io/).\n\n# Design\n\nI stared designing in Sketch to get a feeling of how the game would be. After some iterations, I had something I could start coding in Xcode.\n\n<img src=\"/contents/project/rapilo/sketch-screens.png?v1\" class=\"block my-8 shadow-xl min-h-48 mx-auto rounded-lg\" />\n\n## Colors\n\nBesides the gray colors, I used the default iOS colors `Color.pink`, `Color.orange`, `Color.green` and `Color.blue`.\n\n## Icons\n\nI used the new iOS icons font introduced with iOS 13 called _SF Symbols_.\nThe leaderboard is the only icon I designed myself, which is exported as _PDF_ to be used as a vector.\n\n# Developement\n\nAfter exporting the one icon and the gray colors to the `Assets.xcassets`, I was ready to start coding in Xcode.\n\nI strongly believe that if a UI feels wrong, it's not going to be used. That's why I started with the UI and animations first.\nIt took me some time until I had something I felt was the right amount of animations and types of transitions.\n\n<img src=\"/contents/project/rapilo/playing.gif?v1\" class=\"block my-8 shadow-xl w-64 min-h-48 mx-auto rounded-lg\" />\n\nAfter the UI and animations, I added the state management using the _Combine_ framework.\nAdding the leaderboard by using Game Center, was the last bit i did before I started beta testing.\n\n# Beta Tester\n\nIf you want to be a beta tester, just sign up [right here](https://testflight.apple.com/join/WwxTW39J).\nDon't forget to give me your feedback. It helps me to improve the game so you can have even more fun.\n","type":"project","tags":["swiftui","game","ios","animations"],"publishedAt":"2020-04-06T21:43:11.000Z","image":"/contents/project/rapilo/logo.jpg?v1","updatedAt":null,"readingTime":{"text":"2 min read","minutes":1.735,"time":104100.00000000001,"words":347},"data":{"title":"Rapilo","description":"An iOS game build with SwiftUI using custom animations and transitions.","testFlightUrl":"https://testflight.apple.com/join/WwxTW39J","appStoreUrl":"https://apps.apple.com/us/app/rapilo/id1503915715","image":"/contents/project/rapilo/logo.jpg?v1","tags":["swiftui","game","ios","animations"],"publishedAt":"2020-04-06T21:43:11.000Z","updatedAt":null,"type":"project"}}],"tag":"ios"},"__N_SSG":true}