DEV Community: emin

Check if Email is valid

emin — Sun, 03 Apr 2022 17:26:26 +0000

Hey there! I won't keep you long, just thought to share this quick snippet with you.

I am currently working on a new project, and started migrating everything from the old one where I had bunch of small helper methods, and now, I am cherry picking the best ones or re-working some older ones.

However, for this email checker i don't think in would ever need a new one.

This extension with check if the email has a valid format. I went through all kinds of iterations and finally stumbled upon this gem online. 💎

Note: This will only check if the FORMAT is valid. It will not verify if that email exists or not. I never needed that check so far, and most of the time you are sending a verification code or something from your server so all non-existent emails are discarded that way.

extension String {

func isValidEmail() -> Bool {
    // `try!` will always succeed because the pattern is valid
    let regex = try! NSRegularExpression(pattern: "(?:[\\p{L}0-9!#$%\\&'*+/=?\\^_`{|}~-]+(?:\\.[\\p{L}0-9!#$%\\&'*+/=?\\^_`{|}" +
        "~-]+)*|\"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\" +
        "x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*\")@(?:(?:[\\p{L}0-9](?:[a-" +
        "z0-9-]*[\\p{L}0-9])?\\.)+[\\p{L}0-9](?:[\\p{L}0-9-]*[\\p{L}0-9])?|\\[(?:(?:25[0-5" +
        "]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-" +
        "9][0-9]?|[\\p{L}0-9-]*[\\p{L}0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21" +
        "-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])", options: .caseInsensitive)
    return regex.firstMatch(in: self, options: [], range: NSRange(location: 0, length: count)) != nil
}

}

Thank you for reading! Feel free to get in touch on Twitter

Cheers! 🍻

Saving objects to UserDefaults

emin — Sun, 03 Apr 2022 17:24:25 +0000

UserDefaults are not meant to hold huge amount of data or complex objects. We use CoreData for that.
But hey, sometimes we are just that lazy

Recently a twitter friend of mine Dan O'Leary asked how to save objects to UserDefaults and he seemed to like this extension, so I thought I could share it with all you awesome folks!

Did you know he has an app on the store as well? Check it out -> RunRooster

So, let's not dillydally and get right into it. Quiet in the back! 🤫

Preparation 🧩

First, let's create the object that we will be saving. A simple object you might use in the app.

struct UserSettings: Codable {
    var userID: Int?
    var modePreference: String?
    var volumeLevel: Int?
    var highScore: Int?

    enum CodingKeys: String, CodingKey {
        case userID = "id"
        case modePreference = "mode_preference"
        case volumeLevel = "volume_level"
        case highScore = "highscore"
    }
}

I added those CodingKeys as a bonus in case you are getting that info from the server as well. And snake_case is soooo last year. Ama right?

Now we got ourselves a nice UserSettings where we could hold on to some user....settings? 🥁

This is really useful if user changes some info but does not have a wi-fi or any other type of internet connection, so you can hold on to this object and send it at a later date.

Next, and this is not obligatory, we will create a separate object that holds all our keys. I made a mistake of using hand-typed strings for keys once...and never again. (stuff of nightmares)

struct Keys {
    static let userSettings = "userSettings"
}

Execution 🤯🔫

Saving

Here comes the interesting bit. Let's create an extension that will save that object to UserDefaults.

extension UserDefaults {

static func saveUserSettings(_ settings: UserSettings) {
    do {
        let encodedUserSettings = try JSONEncoder().encode(settings)
        UserDefaults.standard.set(encodedUserSettings, forKey: Keys.userSettings)
        UserDefaults.standard.synchronize() // this line is a joke btw, read the summary, so awesome :) 
    } catch {
        print("Error saving User Settings.")
    }
}

//... loading code goes here

}

Thats it!
Quite easy right? Now you know why some developers (myself included) really love to use this quick and dirty way of saving some small objects for later use.

Loading

Same as the above, but in reverse ⏪

//... saving code

static func loadUserSettings() -> UserSettings? {
    guard let settings = UserDefaults.standard.object(forKey: Keys.userSettings),
          let loadedSettings = settings as? Data else {
        return nil
    }
    return try? JSONDecoder().decode(UserSettings.self, from: loadedSettings)
}

The only difference is that here our return is optional. Maybe we still haven't saved anything, who knows 🤷‍♂️

All jokes regarding laziness aside, keep in mind that UserDefaults size DOES affect you app loading time, and should only be used for smaller objects. Also, saving a user password there is a giant NO-NO.

Hope that helps on your future coding endeavours!

Thank you for reading, you lovely person! ♥️ Lets hook up on [Twitter][twitter]?

Adding Google Analytics using Publish

emin — Sun, 03 Apr 2022 17:22:04 +0000

For regular front-end dev this is a quick fix. Just add some scripts to your head and you can be on your merry way. But if you are a Swift developer playing with publish, it's a bit different. Still quite easy though.

So you have your Publish-made website ready to go but now you want to track some stuff with Google Analytics or another analytics website? This quick tutorial should help out!

If you have some front-end experience it will definitely be helpful and easier as you are aware how these scripts are constructed. But for someone like myself (first ever language is Swift), it can be a bit confusing. Publish is an awesome tool that helps us create a website in a jiffy, and we can use standard HTML tags no problem. But scripts are a bit of a different beasts and it took me some trial and error.

Getting the tracking code

First things first, you need to register on google Analytics and follow all the steps until you are logged in. This is pretty standard and google already has a nice on-boarding process so you should have no issues there. If you do, let me know on emin.roblack@gmail.com

Next, we need to get the tracking code which is inserted into every HTML we want to track using analytics. This is done by going to the ADMIN menu inside your google dashboard, and then Tracking Info -> Tracking Code.

On that page you should find some code that looks a bit like in the snippet below. Copy all that, and let's get Swifty!

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-111111111-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-111111111-1');
</script>

Adding the head script

Now we get to the fun stuff! We are going to create an extension on the Node so adding this tracker on multiple pages is easier in the future.

So, go to your theme file, or a default Foundation theme if you are using that one. Whatever the case is, you should be able to find madeIndexHTML function that generates your homepage HTML.

There, near the top and OUTSIDE of your Theme extension, add the following code.

public extension Node where Context == HTML.DocumentContext {

static func googleTrackerHead() -> Node {
    .head(
    .script(
    .src("https://www.googletagmanager.com/gtag/js?id=UA-111111111-1")),
    .script(
    """
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-111111111-1');
    """
    ))
}}
//
//
//
// public extension Theme { . . .

Using the code you got from Google Analytics, replace the strings in the above code with your own tracker info.

Now, in general you should have your extensions in a separate Swift file, like Node+Extensions.swift or similar. But for this I placed it in the same Theme file as I don't plan to extend as much and this is a quite specific use-case.

We have created a function which will return a .head whenever called, so next we just need to call it!

Inside func makeIndexHTML(for index:... and under the current .head, add our newly created function:

....
//.lang(context.site.language),
//.head(for: index, on: context.site, stylesheetPaths: stylePaths),
.googleTrackerHead(),
//.body(
....

I commented out the current code which you should not edit, just so you can see where to place our new function.

The waiting game

Now we play the waiting game. 🕰 If you did everything correctly you should start getting some information in your Google Analytics after a day or so.

On the page where you got the script from there is a Send Test Traffic button and it says that it takes about 30 seconds to show some results, but for me, it was much much longer.

Thank you for reading, you lovely person! ♥️ Lets hook up on Twitter?

Pretty Print, please

emin — Sun, 03 Apr 2022 17:18:17 +0000

When doing some light debugging most of us tend reach for the good old print() statement right? Yeah, it's just me 😉

You might add some &&& or === to make your print REALLY stand out from all that output, but after a while it gets really hard to find anything in there. That is where this helper method comes in!

And also, EMOJIS! 👍

I found this awesome post by Andyy Hope where he really goes into detail how everything works, so if you are interested I recommend going over that whole post. It has 2 parts, and is WELL worth a read! 🤘

For all of you anxious to try it out right away, behold this helper method. ⬇️

Create a new Swift file in your project, and paste this code:

import Foundation

enum log {
    case ln(_: String)
    case obj(_: String, _: Any)
    case error(_: Error)
    case url(_: String)
    case any(_: Any)
    case date(_: NSDate)
}

postfix operator /

postfix func / (target: log?) {
    guard let target = target else { return }

    func log<T>(_ emoji: String, _ string: String = "", _ object: T) {
        #if DEBUG
        print(emoji + "\(string)→" + " " + "\(object)")
        #endif
    }

    switch target {
    case .ln(let line):
        log("✏️", "", line)

    case .obj(let string, let obj):
        log("📦", string, obj)

    case .error(let error):
        log("❗️❗️❗️", "", error)

    case .url(let url):
        log("🔗", "", url)

    case .any(let any):
        log("⚪️", "", any)

    case .date(let date):
        log("⏰", "", date)
    }
}

To make use of that "DEBUG" flag, find the following:

Go to your Project Settings
Open Build Settings
In the search, type "Flag"
Open Swift Compiler - Custom Flags and Active Compilation Conditions
For Debug insert a value -> "DEBUG"

And now for the fun part! Anywhere in your code use this

log.ln("So long PRINT! Been nice knowin' ya!")/

That prints: ✏️→ So long PRINT! Been nice knowin' ya!

!Important that little / at the very end is very important. That is a postfix operator and without it the log won't print out.

Andyy goes over that in detail in his post so head on there if you are interested how all that works.
You can even use your own character but Andyy recommended it and who am I to doubt Andyy 😅

Other available logs

Input	Output
log.ln("Text")/	✏️→ Text
log.obj("My Object", Object)/	📦 My Object → Object Properties
log.error(error)/	❗️❗️❗️→ Error Properties
log.url("undeadpixel.dev")/	🔗 → undeadpixel.dev
log.date(Date())/	⏰ → 2020-04-25 17:45:14 +0000
log.any("Whatever you want")/	⚪️ → Whatever You want

It is also quite easy to spot the logs that you added. Sometimes when I want to search over the project for a specific print and I type "print(" in the searchBar, all of the prints from every file are there. Now number of results is far narrower so my own code is easier to spot! 😳

That's it! Feel free to modify the helper and add your own emoticons or customise it to your hearts content!

Thank you for reading, you superb person! ♥️

Get in touch on Twitter

Cheers! 🍻

Missing compliance pain in the 🐴

emin — Sun, 03 Apr 2022 17:15:05 +0000

For the most part, uploading applications on the AppStore is really straightforward. But you know that one thing you need to do after each upload has been processed? Yeah, that one....missing the code compliance "thing"

It's definitely there for a reason. If you are using any kind of encryption you need to state that properly. But for the MOST of us I believe, which do some low-level type apps, and rarely use encryption, it has become one thing that is pain in the ass and with each upload you need to wait for the processing to complete so you can just tap that one radio button.

Well, no more! 🚀

It is surprisingly simple! (So simple it makes you wonder why isn't it there by default)

Just add this key ITSAppUsesNonExemptEncryption to your Info.plist, and set it to NO

And Boom! 💥 You are now ready to upload without any hassle. And next time your build is processed, it goes straight to your Testflight.

Thank you for reading, you superb person! ♥️

Get in touch on Twitter

Consider subscribing to the newsletter below if you loved the content.

Cheers! 🍻

Lottie Animations 🐘

emin — Sun, 03 Apr 2022 17:11:16 +0000

This library has been out there for a while, and it keeps getting better. I literally thought everyone knew about it, but after a recent talk with a friend of mine I realised that is not the case! So tap play on that coding playlist you have, and let's do this! It's SO easy!

Step 1: Install CocoaPods

You could do this with both SPM or Cococapods, but let's use the latter in this tutorial....because reasons.

If you already know how to handle cocoapods, skip forth ⏩, this is not the section you are looking for.

Open up the Terminal app and paste/type this:

sudo gem install cocoapods

This will install cocoapods dependencies on your Mac. You only need to do this once on your machine and you are good to go for any future pods not related to this project.

Next, you need to navigate to your project directory using the Terminal app. It's pretty straightforward and there are few way to do it. If you are not familiar with navigation using standard terminal commands, you can always just drag the project folder to your terminal window and press Enter.

For example, if you placed your folder on the desktop, path should look something like this:

~/Desktop/LottieTest

Note: If you are having issues with the Terminal and are not familiar with it, reach out to me on Twitter, I will love to help out ;)

While inside your project folder, you need to prepare the project for your lovely pods. It will create a Podfile to which you will add all the pods you want to install. Think of it as a wish list and Cococapods as the Santa 🎅

So, type this:

pod init

After some quick setup, it will be done, and now you need to open the Podfile. Enter this into your Terminal window:

open Podfile

It should look something like this:

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'LottieTest' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for LottieTest

end

First, replace the platform line with the right minimum version of iOS you plan to support. It really depends on your project and Cocoapods will snag the right version of the pod based on this. At the moment, we are close to iOS 14 so I will use iOS 13 as the minimum version. You also need to remove the # since that is a comment syntax, like // in Swift.

platform :ios, '13.0'

And finally we can tell our Santa what we are after this year. So, under # Pods for LottieTest line, enter this:

pod 'lottie-ios'

Save that Podfile, and close it. In your Terminal app you should be still inside your project folder. If your project is opened in Xcode, close it and type in this final command:

pod install

If you are doing this for the first time, I know it seems like a lot, and probably confusing, but very soon you will be doing this with your eyes closed. Your finger will know what to do!

Note: When using Cocoapods, once pods are installed, you will no longer use the standard file to launch the project, or in our case ➡️ LottieTest.xcodeproj
From now on, you need the use the newly generated project file ➡️ LottieTest.xcworkspace
You can see that the extension is different and file icon is mostly white instead of blue.

Open that .xcworkspace file and let's get to the good stuff!

Step 2: Getting the JSON

Once the pod is installed, we only have a few steps to go through to make our app come alive.

If you have some animation skills, you could easily create your own animations as there is a simple plugin that can convert most animations into JSON files. You can go on LottieFiles for more info on how to do that, or just browse that site and find the right animation for you. Most of them are free to use, and some more complex ones do cost but are well worth it.

For this example, i will use this crazy awesome elephant but you are free to use anything you want as usage is completely identical.
Tap the download button and then choose Lottie JSON

But before that look at how crazy this mt*cka is. Love it!

Note: Before importing the JSON file make sure to rename it to something meaningful. When you try to preview it inside the Xcode it tends to get buggy since this json contains LOTS of text, so it might become unresponsive. Hoping this will be handled soon. In any case there is nothing much you can do with the animation if you try to edit the contents anyway.

So, move that file into your project navigator, but OUTSIDE the Assets.xcassets folder and we should be ready for the next step.

Step 3: Pod import and setup

You've been through quite few steps of setting everything up, and you are ready to see the fruits of your labour 🤘

In your Main.storyboard place the UIView in the middle of the screen and possibly add some constraints so it would take up the whole screen or just a part of it.

Important While your view is selected, open the Identity Inspector and change the class to AnimationView and module to Lottie

Inside your ViewController.swift import the Lottie pod. You should have the autocomplete come up as soon as you start typing. If you don't, then you probably had some issues with the installation so go over that step again.

import Lottie

Next, create an outlet for your view inside ViewController.swift.

Step 4: Animation time!

Your project is not ready for any animations you can throw at it. Let's to exactly that!

Inside viewDidLoad, type this:

lottieView.animation = Animation.named("elephant")

Make sure NOT to include the extension (.json) for the filename. This will load the animation, but it won't play it. So add this under that line:

lottieView.play()

Thats it! Look at him go!

You can further edit this animation by modifying contentMode or loop etc...feel free to go through the documentation and explore!

Here are few examples

lottieView.backgroundColor = .clear
lottieView.contentMode = .scaleToFill
lottieView.loopMode = .loop / .autoReverse / .playOnce

Thank you for reading! Feel free to get in touch on [Twitter][twitter]

Consider subscribing to the newsletter below if you loved the content.

Or don't! Free country!

Cheers! 🍻

Converting Date to String and back

emin — Sun, 03 Apr 2022 17:04:28 +0000

There you are, coding away, all is fine, birds are chirping, keys are not getting stuck on your 2018 MBPro...but in the distance, Date() approaches . . .

Jokes aside dates are not that hard to work with most of the time. Accuracy isn't that important for majority of apps, but if you go down the rabbit hole of dates, there is no telling where you might end up.

Computerfile said it best in this video, so do check it out as it is quite fun and it will gives you a bit more insight.

If you create a Date() in your code, and print it, you will get something like so ↙️

var today = Date()
print(today)

// prints -> "2020-04-22 19:34:58 +0000"

When working with an API you will most probably get 2020-04-22T19:34:58+0000

Looks like a long string of...something...right? But fear not, it's actually very well structured, and quite logical once you know what to look for.

The most common standard or standard standard is ISO 8601, and this is how it is constructed

And now all of that makes complete sense. Except for that Z thing. Like...Zee UTC? 🤪

Get that Date!

Now that we know what we are looking at, first, we need to convert String -> Date.

// Info we got from backend.
let stringDateFromAPI = "2007-01-09T09:41:00-0700"

// Creating a formatter and setting the current locale
let formatter = DateFormatter()
formatter.locale = .current

// Telling the formatter what what kind of format we are expecting.
formatter.dateFormat = "yyyy-MM-dd'T'HH:mm:ssZ"

// Creating the date object
let dateFromAPI = formatter.date(from: stringDateFromAPI)

print(dateFromAPI ?? "Unknown")
// 🖨 2007-01-09 16:41:00 +0000 // But now its a date, not a string.

We got our Date() all nice and tidy. From here on, we have LOADS of choices for time formatting.

Keep in mind that the hours and minutes are based on the current user location since we used .current for the .locale setting. In case that you want to use the source time, just omit that formatter setting.

This date can be converted to a proper string now, in various ways. Here I will show you 2 main approaches that I use:

Going Native  (⌥#1)

Swift DateFormatter already has some pre-defined formats that might get the job done. Take a look at the print output for each. If you don't need a lot of control of your date, feel free to use these ⬇️

// Since dateFromAPI is an optional Date,
// I am using todays date as a default.

let nativeFormatter = DateFormatter()
nativeFormatter.locale = .current

nativeFormatter.dateStyle = .full
print(nativeFormatter.string(from: dateFromAPI ?? Date()))
// 🖨 Tuesday, January 9, 2007

nativeFormatter.dateStyle = .long
print(nativeFormatter.string(from: dateFromAPI ?? Date()))
// 🖨 January 9, 2007

nativeFormatter.dateStyle = .medium
print(nativeFormatter.string(from: dateFromAPI ?? Date()))
// 🖨 Jan 9, 2007

nativeFormatter.dateStyle = .none
print(nativeFormatter.string(from: dateFromAPI ?? Date()))
// 🖨

nativeFormatter.dateStyle = .short
print(nativeFormatter.string(from: dateFromAPI ?? Date()))
// 🖨 1/9/07

Custom Formatting 🛠 (⌥#2)

In case you need a more granulated control, just create your own custom formatter. Maybe even add some emojis to it? 🤷‍♂️

let customFormater = DateFormatter()
customFormater.locale = .current
customFormater.dateFormat = "🗓 MMM d yyyy 📲"
print(customFormater.string(from: dateFromAPI ?? Date()))
// 🗓 Jan 9 2007 📲

When creating a custom format, pay attention which notation you are using for the .dateFormat. It can get a wee bit touchy feely.

For example, lower-caps m is used for minutes, while capital M for months. Here are some examples below and their output. ⬇️

Input	Output
MMM	Jan
MM	01
M	1
d	9
dd	09
y	2007
yy	07
yyy	2007
yyyy	2007
HH:mm	17:41
hh:mm	05:41
hh:mm a	05:41 PM
E	Tue

You are now able to mix-n-match to create your custom DateFormatter!

You will fear the dates no longer!

As promised, here is the extension on String you can use for your projects and handle most API responses.

extension String {
    func convertToReadableDate() -> String? {

        let formatter = DateFormatter()
        formatter.locale = .current

        formatter.dateFormat = "yyyy-MM-dd'T'HH:mm:ssZ"
        guard let dateFromAPI = formatter.date(from: self) else { return nil}

        formatter.dateFormat = "MMM d yyyy"
        return formatter.string(from: dateFromAPI)
    }
}

// Usage: 
// label.text = "someDateString".convertToReadableDate()

Thank you for reading! Feel free to get in touch on Twitter

Cheers! 🍻

SpriteKit Adventures pt2

emin — Sun, 03 Apr 2022 15:01:19 +0000

SKCropNode and sizing, SpriteKit Adventures pt2

In the first post I found a nice way to add my fuelGauge in the upper left section of the screen. Now let's try to animate that fuel so it reflects our consumption.

History

If you are interested in how we got here, go here to check out the First Post. If you are however up to speed, let's get to it!

Our journey begins!

Like I mentioned in the description, my idea is to add the SKCropNode so I can "animate" fuel consumption by moving it up and down. I found this post by Paul Hudson which explains it really well.

So, I will place a base gauge first, then on top if that, an SKCropNode which will crop the fuel amount.

// MARK: Fuel Gauge Base (this is basically the gauge without the bright green fuel texture)-------------------------------
let fuelGaugeBase = SKSpriteNode()
fuelGaugeBase.size = CGSize(width: fuelGaugeHeight/23, height: fuelGaugeHeight)
fuelGaugeBase.position = CGPoint(x: 16, y: playableArea.maxY - fuelGaugeHeight/1.5)
fuelGaugeBase.texture = SKTexture(imageNamed: "fuelGaugeBase")
addChild(fuelGaugeBase)
// ------------------------------------------------------------------------------------

// MARK: Fuel Gauge -------------------------------
fuelGauge = SKSpriteNode()
// We are using 0's here since its positioned in regards to the parent, or SKCropNode
fuelGauge.position = CGPoint(x: 0, y: 0)
fuelGauge.texture = SKTexture(imageNamed: "fuelGauge")
fuelGauge.size = CGSize(width: 5, height: fuelGaugeHeight * 0.97)
// ------------------------------------------------------------------------------------

// MARK: Crop Node -------------------------------
let cropNode = SKCropNode()
cropNode.position = CGPoint(x: 16, y: playableArea.maxY - fuelGaugeHeight/1.5)
cropNode.maskNode = SKSpriteNode(imageNamed: "fuelGaugeMask")
cropNode.addChild(fuelGauge)
cropNode.zPosition = 1
addChild(cropNode)
// ------------------------------------------------------------------------------------

So far so good, positioning seems to be ok and the sizes are great.

Next, I want to move the fuelGauge up and down, therefore masking the fuel amount. I think I can do that by moving the base SKSpriteNode which is a child of the SKCropNode

All I need to do is change the Y position of the node. -100 should give us an ok result.

//...
fuelGauge.position = CGPoint(x: 0, y: -100)
//...

F*k me...that is not looking good at all. It does mask the gauge, but the size of the mask is not at all close the the size of the *fuelGauge node we added. It just picks up the size of the sprite which we defined here:

cropNode.maskNode = SKSpriteNode(imageNamed: "fuelGauge")

Time to look around and see if I can make that SKCropNode size the same as the fuelGauge. I do have other options I can use here, but I REALLY want to crop it. Because reasons.

The Solution 🏆

I haven't found anyone with similar issues so that only meant that I am the issue 😁 I took a short break over the weekend (🍻🍻🍻) and believe it or not, five minutes after I sat down and looked at the code again, and it hit me!

It was actually quite obvious, it just never occurred to me to try NOT using a sprite for the mask at all.

Our .maskNode is picking up the sprite size and it doesn't care that we changed all our sizes depending on the playable area. All it needs to know is the SIZE we are using now!

Let's give this one a go ⬇️

//...
cropNode.maskNode = SKSpriteNode(color: .green, size: CGSize(width: fuelGauge.size.width, height: fuelGauge.size.height * 0.97))
//...

Now THAT'S WHAT I AM TALKIN' 'BOUT! 🤜💥🤛

Let's Polish this up 🇵🇱

Now that size works, let's animate the usage of the fuel by moving the sprite inside the mask upwards. Just as an extra "thing" I will make the Lander consume more fuel while both thrusters are engaged.

First, we will declare a globalVariable to hold the Y position of the sprite.

var fuelConsumption : CGFloat = 0
.
.
.
fuelGauge.position = CGPoint(x: 0, y: fuelConsumption)

And place out consumption logic inside a newly created updateFuel() method:

func updateFuel() {

    // Determine consumption
    switch touchCount {
    case 1:
        fuelConsumption += 0.3
    case 2:
        fuelConsumption += 0.45
    default:
        fuelConsumption -= (isTouching && fuelConsumption > 0) ? 0.8 : 0.0
    }

    // Update sprite position
    fuelGauge.position.y = fuelConsumption
}

Which of course we will then add to the very beginning of our default update() method

override func update(_ currentTime: TimeInterval) {

    updateFuel()
    .
    .
    .

Done'zo Washington!

And here is the final product (for now) Our Lander can now spend fuel as well as re-fuel.
Not sure how much this would cost IRL but hey, that's the drivers problem, now mine 😉.
Also, as a kind of a dumb joke I made the fuel consumption move UP since...we are in SPACE 🛰.

This has been an experiment post, and I am really interested if you liked it...or not!

I would really appreciate if you let me know on Twitter.
Even if you just send me a message "It sucks dude", it would mean the world to me 🌎.

No hard feelings, I appreciate honesty more than you can imagine.

SpriteKit adventure pt1

emin — Sun, 03 Apr 2022 13:55:47 +0000

SpriteKit Node positioning on all screen sizes

Positioning nodes on the same exact spot can be a problem in SpriteKit. Perfect time to do an experiment.

Important: This is an [adventure post], where I will write a post WHILE I am working on the issue. So, all failed attempts, good and bad, will remain here. If you are here for a quick fix, just scroll to the SOLUTION section.

If however you would like to go on this adventure with me, strap on your best Swift shoes, get that warm drink in your hand and let's see where we might be swept off to. (mind your feet)

History

So, I am making this game which is an homage to Lunar Lander text-based game from back in the day. And when I say "back in the day" I mean like 1969. I wasn't even close to being alive then, I think my mother was like 5 years old...soooooo game is from beyond back in the day you might say. 😁

For some reason, first time I saw it, I was enchanted. So simple, so clear...but yet so challenging! Just to give you an idea of how old this game is, this is what the computer that was designed to play the game in REAL-TIME looked like. And by the way, this is 4 years after the initial LunarLander text based game.

So I decided to get to it, and create a modern version that will keep the simplicity, and have some "advanced" pixel art graphics to go with it, because nothing makes nostalgia come alive more than some good ol' pixel-art! ◻️

Intro

Our journey begins with the working demo. Have a look at this little guys first flight below! 🚀

⬅️ Tap the left side of the screen, it goes left
➡️ Tap right side of the screen, it goes right
⬆️ And if you tap with two fingers (position not important) it goes straight up!

Now, next thing I want to add is the fuelGauge, as we are in space, and we really need to manage our spending you know?! 💰

In case you are not familiar with SpriteKit, let me give you a quick rundown. We have one main UIViewController that is holding our scene. The SKScene is where all the gaming 🧙‍♀️magic happens, and viewController is there to present that scene to the user. Here is a quick glimpse.

So I have 2 options for adding the fuelGauge:

Add it in the ViewController like a regular UIImageView or UISlider
Add it to the GameScene as an SKSpriteNode

Adding it to the viewController is not a problem at all. I can use a delegate and modify that image height or even use a UISlider.

BUT, I really don't want to use the slider since my fuelGauge needs to be quite custom, and honestly I REALLY want to use SKCropNode and just mask the current fuel state by moving that node up and down. Masking in SpriteKit works really well so let's use that to our advantage! We don't plan to have a lot of nodes so I think this is fine.

Our journey begins!

This sounds like a breeze, let's add the node to our GameScene!

fuelGauge = SKSpriteNode()
fuelGauge.size = CGSize(width: 11, height: 260)
fuelGauge.position = CGPoint(x: 100, y: screenHeight - 260)
fuelGauge.texture = SKTexture(imageNamed: "fuelGauge")
addChild(fuelGauge)

I already added the image to my assets called "fuelGauge" so that is where the texture comes from. Let's build that on few devices and see what we have.

Now that's not quite right. Our gauge seems to be way to the right, not to mention that the steps are going towards the middle quite a bit more than they should on iPhone 7 and SE2!
Oh well, let's fire up our good friend DuckDuckGo and see what we can find! 🐥🐥🕵️‍♂️

The bug hunt 🐞

So I found this post on StackOverflow which mentions a similar issue. It says that we need to define the playableArea so gameScene knows what it's working with:

class GameScene: SKScene {
     let playableArea: CGRect
     //....

Then, use the following code in the GameScene initialiser:

override init(size: CGSize) {

    //1. Get the aspect ratio of the device
    let deviceWidth = UIScreen.mainScreen().bounds.width
    let deviceHeight = UIScreen.mainScreen().bounds.height
    let maxAspectRatio: CGFloat = deviceWidth / deviceHeight

    //3. For portrait orientation, use this*****
    let playableWidth = size.height / maxAspectRatio
    let playableMargin = (size.width - playableWidth) / 2.0
    playableArea = CGRect(x: playableMargin, y: 0, width: playableWidth, height: size.height)

    super.init(size: size)
}

So let me change the initialization for the GameScene in our main viewController and forward the size of the viewController that is creating it.

// ...
if let view = self.view as! SKView? {

let scene = GameScene(size: view.frame.size)
    // Set the scale mode to scale to fit the window
    scene.scaleMode = .aspectFit
// ...

Just to make sure everything kinda works, and before we do any "serious" math, let's place that fuelGauge smack middle of the screen:

//...
fuelGauge.position = CGPoint(x: playableArea.midX, y: playableArea.midY)
//...

Ok, let's see what we have so far!

Alright! Now we're talkin'! It's not perfect, and everything seems to be a lot bigger, BUT everything is the same size AND in the same position! Which I really like, since we can adjust the size based on the screen and that would make so much sense.

So, now I think we can really make the fuelGauge position exactly the way we want it. For some reason I feel the top left corner makes the most sense, as it won't be blocked with your fingers which I am assuming will be on the bottom part of the screen. That way, you can always keep an eye on the fuel!

With all that in place, now we can just use the appropriate values to place our texture in the right spot:

fuelGauge = SKSpriteNode()
fuelGauge.size = CGSize(width: 11, height: 260)
fuelGauge.position = CGPoint(x: 16, y: playableArea.maxY - 160)
fuelGauge.texture = SKTexture(imageNamed: "fuelGauge")
addChild(fuelGauge)

Note that I am using playableArea.maxY - 160 for the Y position. Since anchor-point for that node is in the middle, I am using 130 to move it down by the upper half, and them adding some more (30) to give it some breathing room.

Solution

This is all good so far. But one thing is bothering me. Height of the fuelGauge is the same on both screens. I know I said that I like that initially, and I still do. But I wan't to control the size of it depending on the screen height. On smaller phones this will be almost half the screen! Which is not something I want.

Therefore let's try and make it so that with one constant we can control the width AND the height of the fuelGauge. In my opinion taking 3rd of the screen is quite sufficient.

let fuelGaugeHeight = playableArea.maxY / 3

And now that we have that, what are we to do with our width which was hardcoded to 11points? Well, since our texture is 11x260, we could calculate the ratio which is 260/11 = 23

With that in mind, our new code for the fuel texture is this:

fuelGauge = SKSpriteNode()
fuelGauge.size = CGSize(width: fuelGaugeHeight/23, height: fuelGaugeHeight)
fuelGauge.position = CGPoint(x: 16, y: playableArea.maxY - safeZoneTop - fuelGaugeHeight/1.5)
fuelGauge.texture = SKTexture(imageNamed: "fuelGauge")
addChild(fuelGauge)

That fuelGaugeHeight/1.5 is the same as the - 160 we had before, we are just adding a bit more than the half of the height to have a bit of space.

Now, I realise that using "magic numbers" and hardcoding bunch of stuff is not recommended, but at the moment we are only tied in to that left spacing and the height ratio. I prefer to be precise and make all my screens look as similar as I can, and I am quite happy with this outcome!

HELLS YEAH!! Now that is what a call an effinng consistency! If I had a mic I would drop it! 🎤👇

I love this current look, and everything seems to be in order. I suspect iPad would be a different beast, but right now this is only planned for the iPhone. Who knows, with some adjustments iPad can join in, but we'll see. 🕵️‍♂️

And that's it! Our fuelGauge has a good placement and next, I will work on the pesky SKCropNode, so stay tuned!

This has been an experiment post, and I am really interested if you liked it...or not!
I would really appreciate if you let me know on Twitter.
Even if you just send me a message "It sucks dude", it would mean the world to me 🌎.

No hard feelings, I appreciate honesty more than you can imagine.

Screen Space in ARKit (+tutorial)

emin — Sun, 03 Apr 2022 13:37:45 +0000

There is a lot of stuff in AR I would like to talk about, but let's not waste your time (or mine) and get right to it!

This year at WWDC(2018), Grant Paul from the Human Interface team at Apple was talking about creating great AR experiences.
One thing that he really stressed out is the usage of Screen Space instead of Perspective for rendering text in our AR apps.

If you missed the lecture, I highly recommend giving it a whirl. It stresses out some key points that are really important, and ARKit being a new kid on the block, needs us as developers to get him through the hazing process.
Check it out here.

What is ScreenSpace?

Short answer --> Barrels in the original DOOM. I am not even kidding.

Basically, it's placing a 2D object in a 3D space. It really does have a 3D placement, but the object itself is a 2D sprite. We have loads of reasons to do this in iOS, but the main one is of course readability.

Take a look at this example used in the lecture. We see that the text that is placed with perspective, or SCNText, doesn’t work that well at all.

On the other hand, text placed in Screen Space is always the same size and facing towards the camera, making it perfect for placement of informational data.

I know I know, barrels in Doom do change the size at least, but still, way too good of a reference to be missing out on.

So, HOW do we get there?

Below is a quick tutorial on how to utilise screen space in your projects. This is just a basic template project with no real usage but you should be able to get the basics of screen space and how it works.

1. Project Creation and Setup

Start a new project and select an AR App template.

Whenever I start working with AR template, one thing that bothers me is not being able to add labels and views via storyboards.

So, to solve that:

Remove the default ViewController
Add a new ViewController from the Object library
Add a UIView inside the new VC
And finally add an ARSCNView to the VC

Now you have a UIView that can hold all labels, texts, images, and anything your heart desires, but under all of that, you have a ARSCNView for your AR shenanigans.
If you have a better solution for this setup I would love to hear it. So far this works great for me and it’s easy-peasy.

Note: The setup above is not a MUST for this tutorial, just thought to share it with you for future AR-related stuff.
Don’t forget to remove the old outlet and create a new one for the ARSCNView you just placed!

2. Create a UIView and a Label

Next, in a separate swift file, define a class that conforms to the UIView and define a label inside that UIView.
Once we initialize the view later on, it will take a SCNNode as a required parameter so we need to define that as well.

import UIKit
import SceneKit

class SSLabelView: UIView {

  weak var labelNode: SSLabelNode!
  var label = UILabel()

  // Initializing view with a node
  init(labelNode: SSLabelNode) {

    self.labelNode = labelNode
    // creating a frame/size for the view
    super.init(frame: CGRect(origin: CGPoint.zero, size: CGSize(width: 100, height: 100)))

    // Adding a label to the view
    self.addSubview(label)

    // Adding constraints to the label
    label.translatesAutoresizingMaskIntoConstraints = false
    label.topAnchor.constraint(equalTo: self.topAnchor, constant: 10).isActive = true
    label.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 10).isActive = true
    label.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: 10).isActive = true
    label.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 10).isActive = true
    label.textColor = UIColor.white

    // Hardcodded text value
    label.text = "TEST"
  }

  required init?(coder aDecoder: NSCoder) {
    fatalError("Init Coder has not been initialized")
  }
}

class SSLabelNode: SCNNode {
}

3. Main VC need some love too!

In the main ViewController (i hope you connected it with the storyboard you messed up at the beginning 😅….sry, I know that one is on me 🤦‍♂️), declare an array of views.
Here, we will append all the views we create when we tap the screen. I know, sounds like magic, only less lame.

class ARViewController: UIViewController, ARSCNViewDelegate {

@IBOutlet weak var sceneView: ARSCNView!

var ssViews: [SSLabelView] = []
.
.
.

viewDidLoad needs to be updated from the template since we are not using that sweet plane provided by Apple, so here is the code for that.

override func viewDidLoad() {
    super.viewDidLoad()

    // Set the view's delegate
    sceneView.delegate = self

    // Show statistics such as fps and timing information
    sceneView.showsStatistics = true

    // Set the scene to the view
    sceneView.scene = SCNScene()

  // Set the Session delegate
  sceneView.session.delegate = self
}

Note, that at the very bottom I added a session delegate. This is crucial to make the app work, but if you write it NOW, you will get errors for sure. So if you decide to do so, just ignore the errors for bit and all shall be revealed!

4. Touchy touchy

Next, we need to see how touches are handled. We just use a simple hitTest to get the latest touch location, and forward that info to a function that we will create in the next step.

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
  if let touch = touches.first {

    let touchLocation = touch.location(in: sceneView)
    let results = sceneView.hitTest(touchLocation, types: .featurePoint)

    if let hitResult = results.first {
      addLabel(at: hitResult)
    }
  }
}

5. Adding that label like a baws

Once we have the information of where the user tapped, we give that location to the SCNNode we defined at the start, add it as a subview and append it to the array we defined that will hold all the views that we place.

func addLabel(at tapLocation: ARHitTestResult) {

  let labelPosition = SCNVector3(tapLocation.worldTransform.columns.3.x,
                                 tapLocation.worldTransform.columns.3.y,
                                 tapLocation.worldTransform.columns.3.z)

  let ssLabelPosition = SSLabelNode()
  ssLabelPosition.worldPosition = labelPosition
  self.sceneView.scene.rootNode.addChildNode(ssLabelPosition)

  let ssLabelPlacedView = SSLabelView(labelNode: ssLabelPosition)
  self.view.addSubview(ssLabelPlacedView)
  self.ssViews.append(ssLabelPlacedView)
}

I tried to keep the naming as clear as possible so it makes sense, but it is much easier once you rewrite it and use naming convention that works for you 👍 My naming convention is equal to the thought a drunk gives when ordering a new drink. Whatever works.

6. Almost there!

Now we are ready to finally place the views in our ARSCNView. We have defined nodes all over the place and everything is there, but not really there.

So, in a new swift file we create an extension to the ViewController that conforms to the ARSessionDelegate. We do that, so our view would be updated every frame -> 60 frames per second. Smoooooth.

We go inside every view from our array defined in the main VC, and give it a position smack middle of the feature point.

There is also a small fixer function, thanks to Greg Chiste on YouTube , who has a video tutorial for screen space that helped me a lot getting the gist of it. That function makes sure that placed lables don’t appear behind us as well (prison bad UX right there if you know what I mean).

import ARKit

extension ARViewController: ARSessionDelegate {

  func session(_ session: ARSession, didUpdate frame: ARFrame) {

    for view in ssViews {
      let projectedPosition = self.sceneView.projectPoint(view.labelNode.worldPosition)
      onlyShowViewsInFront(projectedPosition: projectedPosition, view: view)
      let size = view.frame.size
      let x = CGFloat(projectedPosition.x) - size.width/2
      let y = CGFloat(projectedPosition.y) - size.height/2

      view.frame.origin = CGPoint(x: x, y: y)
    }
  }

  fileprivate func onlyShowViewsInFront(projectedPosition: SCNVector3, view: UIView) {
    if projectedPosition.z > 1 {
      view.isHidden = true
    } else {
      view.isHidden = false
    }
  }
}

You in AR now son.

If you run the app, move the phone a bit to pick up the feature points, and then smack that screen!
Text “TEST” will be placed in your 3D space and when you move around, you should see that it stays the same size no matter the distance. Pretty neat ha? 😀

Thank you for reading! Feel free to get in touch on Twitter

Consider subscribing to the newsletter below if you loved the content.
I am so lazy I probably won't bore you more than once a week.

Cheers! 🍻