Hi, Alex here from rebeloper.com and in this video I am going to show you how
you can use named colors. So let's get started.
Yes named colors this is a new
feature in iOS 11 and above of course and you can find it in Xcode 9.
Now the feature of named colors is to make your coding business much easier.
But before we dive into the details I will show you how I and most of us coders
used to do this before named colors and for that let's just start off by opening
a new Xcode project. So let's create a new project and I will create game.
Because everything is a little bit stranger in SpriteKit and I want you to
know how this is done inside a SpriteKit project. So I will just name the
product name and choose for the language Swift, okay.
Let's click on next and finally put it on the desktop I would create a new
folder here. Let's create the folder and finally
let's create our project too. Let's say that I want to add to our GameScene
here and let me just delete all of this well useless code for our example, okay. And
let's just build and run this on our simulator and see that everything is okay.
Okay now as you can see here we have the hello world label that I will instantly
just delete now because we will not use this. Let's go back to game scene and now
I want to add a sprite let me just build and run that so you may see that
everything is clear. I want to add a background color, okay. And for that we
will need to add a sprite. So let's add here a sprite: let background
and we will initialize it for this time with a color and that will be a UI color
let's call it red and the size should be the size of the view. So view. scene. size
and finally let's for example for now let's just
with a bang operator let's just add let's build and run see what this is result.
Okay here we have our reddish background, okay. That is all good. Now let's try to
add another: a logo so I will just drag and drop one of my assets here. I will
choose our logo here, okay. I will just drop it here in my assets catalog and
then go back to the GameScene.swift and let's create: let logo = SKSpriteNode
and this time around we are going to call with the imageNamed and
it will be a logo. I believe that's it let me just double check here, yes that
is correct. And of course let's just give it a
position logo. Rename this. So logoSprite it would be much easier to write
position = CGPoint. and I will use this zero but
before that because now we would have the logo down here I will just go up
here and say self.anchorPoint =
and that will be the middle of our scene. Okay 0.5 and 0.5. This way when we
set the position to CGPoint zero then the logo should be drawn at
the center of our screen, okay. Let's add some new zPositions. So background.zPosition = 0
So background.zPosition = 0 and let logoSprite.zPosition = 1 so the logo
should be in front of our background of course. Finally I will leave let's
addChild logoSprite, okay. Let's build and run again and let's see maybe we need to
shrink a little bit down our logo let's see what happens now. Oh, yes it is much
too big so let me just go here and type in logoSprite.setScale
because I want to scale down in proportion so the scale should let be say
0.2, okay. So we should have a nice logo on top of our... Good stuff here, okay now
what if we wanted to add a new color to this logo. So let's say:
logosSprite.color = .white. Let's just build and run this see what happens
and as expected well I knew already but nothing changed.
We don't have a color change but we added inside our code. That is because we are
not using our image as a template, our image to be rendered as
a template image. But we still need to think of something new. And that is that
our logoSprite is actually a texture. So we need to change:
logoSprite.colorBlendFactor to be not zero other than zero and we will add it to be 1.0, okay.
And now let's just build and run again and let's see what happens.
And of course as you might have guessed we will still have an error and, okay.
Doesn't really look white so let's just change this let's say to yellow.
Okay let's build and run again and now we will encounter another
strange issue. Well we have written here yellow but it is actually greed. Now why
is that? That is because our main image our main texture I would rather say is a
blueish image and we are giving it a color of yellow with a colorBlendFactor 1
so what we need to do instead of adding a bluish texture is to add a
plain or black or plain old white image. So let's just delete this and I
have already prepared here our white logo so let's just drag and drop it here
and of course don't forget to set the render mode to template image, okay. This
could be done in code as well but this is far more ... okay. Now let's go back to GameScene
and change the image name to "logowhite" and now let's just build and
run and see if the yellow color occurs. Because white color we wouldn't know any
changes. There it is I will just change this to let's say well yellow is okay by
this standard. So this is when... maybe we could add black here too so ...
... are red and black go together very well, okay. Now if you wanted to add other
colors and this is where we will progress to our named colors. We would
let's say create a constant class, let say new file, not a class just a new file where
we would store let say ... create this this is where we would store
our color. So let let's say themeColor and that would be let's go here and the
themeColor is red.
.red and of course we need to import UIKit because .red is actually a UIColor.
And most probably we need to add UIcolor here .red. And
this is our themeColor so we may go here and select our themeColor change this.
So whenever our designer comes in we can change our themeColor easily in
constant we don't have to go on in all of our scenes, okay. Next up is let's say
our "let" and this should be our tintColor. Okay this is all of the colors
let's say buttons or in our case our logo. And it will be a UIColor.black, okay. And
let's just copy out and now let's go back to the GameScene and add it here, okay. And
this is how we change all of our color in our cast. Now if we didn't want to use
and most probably we will not use these basic colors that UIKit provides
then we would go with something like this. And that is UIColor and here it is
let's go down and find this red green and blue and here we would go out and find
something. Go our finder and if you want to get great color schemes go to
colorhunt.co this is not a sponsored video anyway for Colorhunt I just
really like these color themes. I will choose this, okay.
And here you will have the hex value of your color. I really like this
one but the issue... let me just copy this out. But the issue is that with a UIColor
constructor we have only red green and blue and an alpha value but fear not
we still have another solution and that is uicolor.xyz. Here if you just
paste in here your hex value and of course we set alpha to 1. Here we have
our swift code, okay. Let me go back to Xcode and just enter it
here. And let's just build and run see the changes for now.
Okay good stuff it's another kind of read that I really like. Let's go back to
our Colorhunt page and I will select this gray one and just simply put here and
I believe it changed and I will just copy this line of code out and change our
tintColor too, okay. Let's build and run again and see what happens.
Okay maybe I will just select here this yellow one, okay.
This is just a preference I will just go on quick.
It's building again, okay. Now as you saw this is a very very tedious work. Now
what named colors can do for you is eliminate this all of this copying and
pasting and makes these color changes much much more easier, okay. And this is
what you need to do go to your assets catalog and let's just create a new
colors, okay. And here you have color and I would
just name this ThemeColor, okay. Never ever name your color sets brown or
light gray or anything like that because in the mean time when your designer
changes the color then maybe the blue color will not actually be blue it will
be anything else but blue. So go ahead and select your ThemeColor and now you
can tap on this little square here and as you can see here you have the chance
set your color manually. So I will just tap on this one and maybe slack just
crawl this down and let's just change this let's go back
to Colorhunt and maybe I will just change this to this new template color.
Okay and select the color picker and simply
select your color. So this will be the Theme Color, okay.
Next up we have our TintColor so I will just create new Color Set
and we can select this as the other one. Okay select the color picker and I will choose
this one, okay. Now we have our ThemeColor and
TintColor, good stuff, okay. Now let's go back to Game Scene and yep
rather yet go back to Constants and inside here we might choose, delete all
of this and here comes the magic we just select our... we just read this media
library and here we have our themeColor and we just drag and drop it here so and
we just select our tintColor and drag and drop it here and it is that easy, okay.
Let's build and run again and there you have it we have changed our themeColor
and tintColor, good stuff. For now if you would like to change these theme colors
let's say we go back to the asset catalog and change this themeColor to a
new one. We just select this one
color picker okay and if we go back to our Constants. You will see that none of
this has changed. Let's build and run again so it doesn't really remember this.
But I believe this is a bug in Xcode and it will be fixed soon. But as a quick
change we just delete it and drag and drop again,
okay. Maybe we just need to restart Xcode again quit Xcode.
Let's build and run again, let's start our project again
and now let's delete this and drag and drop our themeColor and this is most
probably about and it will be fixed in the new version of Xcode but this is how
easy and cool it is to use named colors inside your Xcode projects. So let just wait
for this build and run on our iPhone X simulator of course not
on my Rebeloper phone and let's wait for it and that is it that's a wrap for
named colors. I hope you enjoyed this video if you did go ahead and give it a
thumbs up and if you liked these videos and want to see more from me go ahead
and click on the subscribe button and maybe on the bell to get notifications
in your emails when new episodes are released from me on Rebelopers YouTube
channel, okay. See you in the next one.