SwiftUI Tutorial: Build an Awesome iOS and macOS Game with SwiftUI and Mac Catalyst | Robert Petras | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

SwiftUI Tutorial: Build an Awesome iOS and macOS Game with SwiftUI and Mac Catalyst

teacher avatar Robert Petras, UI Design & App Development with SwiftUI

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

14 Lessons (2h 38m)
    • 1. SwiftUI Tutorial Develop an iPhone and Mac App with Xcode and Mac Catalyst Framework

      4:38
    • 2. Let’s set up the Slot Machine iOS and macOS app project in Xcode

      12:49
    • 3. Let's build up the Slot Machine minigame’s header view

      18:02
    • 4. Let's build up the Slot Machine minigame’s main view with the reels

      7:00
    • 5. Let's build up the Slot Machine minigame’s footer view

      10:04
    • 6. Let's create the Info View with SwiftUI form

      9:42
    • 7. How to develop the main logic of the game with Swift 5

      17:28
    • 8. Let’s develop the logic of the betting system with Swift 5

      6:28
    • 9. How to create a custom popup window for the Game Over

      15:35
    • 10. How to store and retrieve data permanently: Introduction to User Defaults

      8:22
    • 11. Add animation to the Slot Machine game using SwiftUI

      15:05
    • 12. Add sound effects and a background music to the SwiftUI game

      13:02
    • 13. Let’s create your first macOS app using the Mac Catalyst framework

      13:32
    • 14. Let's create an amazing Sticker Pack without a single line of code in Xcode

      6:34
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

130

Students

2

Projects

About This Class

e2b83ab5

What we ‘re going to do in this SwiftUI tutorial? In this class, we’re going to build a Slot Machine game, an outstanding iOS, iPadOS and even a macOS app with SwiftUI. Slot machines are the most popular games in any casino. Unlike traditional table games, this game doesn't require any gambling knowledge, and anyone can get in the game with a very small bet.

At the beginning part of the class, we will create a very impressive game interface with many gorgeous graphics that were made by myself for this course. If you are curious, then I can tell you that I designed those graphic assets using a professional vector drawing iPad application with my Apple Pencil.

2073b51c

In the middle part of this class, we will develop the main game logic with Swift. Then we will learn how to save and read the High Score using the User Defaults. We can use User Defaults to store any basic data type for as long as the app is installed. You will see how easy is to use it with SwiftUI.

a27ed07c

In the last part of this class, we will learn how to bring an iPad app to Mac by using Apple’s Catalyst technology. With Mac Catalyst, our Slot Machine iPad app shares the same project and source code therefore we can efficiently convert this mobile app to desktop.

432c690a

Without further ado let’s set up our project as usual. Download the resource files from this section. Then place it to the Desktop and unzip it by clicking on the package.

The provided main folder contains 3 folders marked with the Swift logo and a supplementary workbook files with the objectives in PDF and ePub formats.

The red folder contains all of the resources you will need to build the Slot Machine game. Finally, we are going to save this app into the blue folder.

Who is this class for?

This SwiftUI class is suitable for anyone with some minor programming knowledge.

What is the difficulty level of this class?

The difficulty level of this SwiftUI class is suitable for All Levels.

What will you learn and what are the main objectives of this SwiftUI project?

By the end of the class, students are able to accomplish the following development tasks and build a game for iPhone, iPad, and even for Macintosh:

  1. How to build a Slot Machine Game Your First macOS App with SwiftUI and Mac Catalyst
  2. How to set up the Slot Machine iOS and macOS app project in Xcode (+Launch Screen)
  3. How to create the Slot Machine game’s header view
  4. How to build up the Slot Machine game’s main view with the reels
  5. How to build up the Slot Machine game’s footer view
  6. How to create the Info View with SwiftUI form
  7. How to develop the main logic of the game with Swift 5
  8. How to create a custom popup window for the Game Over
  9. How to develop the logic of the betting system with Swift 5
  10. How to save data permanently: Introduction to User’s Defaults
    1. How to store the game’s High Score using User’s Defaults
    2. How to retrieve data from User’s Defaults with Swift 5
    3. How to develop the logic of the Game Reset’s button
  11. How to add animation to the Slot Machine game using SwiftUI
  12. How to add sound effects and background music to the SwiftUI game
  13. How to Implement haptic feedback and improve the overall user interaction
  14. How to create your first macOS app using the Mac Catalyst framework

How can students get feedback from the teacher and other students?

  1. Students can share screenshots of their finished projects with the teacher and other students on the Skillshare learning platform by creating a new project in the class.
  2. By doing that the teacher of the class with many years of experience in the app development industry and other students are able to give feedback to the students.
  3. Students are encouraged to use the comments system and share their learning experiences with us as well.

Technical requirements of the project

There are only two technical requirements for this SwiftUI class:

  1. macOS Catalina from Apple (free)
    https://www.apple.com/macos/catalina/

  2. Xcode 11 from Apple (free)
    https://developer.apple.com/xcode/

Custom iOS 13 and iPadOS mobile app icon

25eac40f

Designer: Robert Petras

Meet Your Teacher

Teacher Profile Image

Robert Petras

UI Design & App Development with SwiftUI

Teacher

Hello, I'm Robert Petras. I teach UI/UX design and iOS app development with the Swift programming language in Xcode. 

In my opinion the best way to learn native mobile and desktop development is to learn the Swift programming language and master Apple's latest user interface framework: SwiftUI 3. You can create applications with less code using SwiftUI in the Xcode editor.

I'm pretty confident that you will enjoy the development process and you will be satisfied by looking at the finished applications while creating the main project in each class that I teach.

Recently started to teach iOS, macOS, watchOS, and even iPadOS mobile app development with SwiftUI which is a native User Interface framework invented by Apple.

Appl... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. SwiftUI Tutorial Develop an iPhone and Mac App with Xcode and Mac Catalyst Framework: Let's bring an iPad app to Mac. Now, it's incredibly simple to start building a native app from an existing iPad application. With Apple's new Mac catalysts, three inverse iPad OS apps share the same project and source code. Soviet can efficiently bring iPad apps to their decks that moreover, learning have to create a wonderful game using Swift UI framework is not only a useful, enjoyable venture as well, with the right learning material and teacher. Hi, my name is Robert, the lead instructor of this class. I am a professional iOS app developer and UI UX designer. Because this iPad OS game would make an excellent Mac app. Therefore, it is the perfect time to 3M line is codebase and bring this app to live on Mac. Who is this class for? Without any restriction, this glass is suitable for every enthusiastic app developers who want to create a marvelous game from scratch. The skills you will obtain from this class can be used to create more engaging games for iPhone, iPad, and Mac computers. What is their class all about? This practica class is about completing three main learning objectives. Swift, why free and work? The first thing that you will learn is how to use less thrifty. Why apples, native user interface development framework, game development. The second thing that you will achieve, he's learning how to bring this amazing iPad OS game to Mac OS X code essentials. The first thing that you will acquire is the Essentials or frill app development in Xcode code editor. But you will create in this class. By the end of this class, you via create this fully functional slot machine with outstanding game design that you can launch and use not only on mobile devices, but on Mac computers as well. You can use this, complete that project as a foundation of Mac OS app development and create similar games for different Apple platforms. Why should you take this class? Project-based learning approach? This class takes learning programming concepts through a project-based approach. It means that you will learn everything you need to know. My creating this application as your class project. Contextual learning. Glass was so heavily relies on contextual learning, which means that no arrows at development concepts are introduced slowly, then we need to use them hands-on development. Finally, this glass is not a just going through boring programming abstractions, that instead we will focus on writing actual Swift code in Xcode, apples official app development tool. By taking this class you real quick in your app development and programming skills by creating this joy full mini game. Having said that, see you at the glass people. So is this clear? 2. Let’s set up the Slot Machine iOS and macOS app project in Xcode: in this class, we are going to build a slot machine game and outstanding Rus I better West and even America. Where Sub it's 50. Why slot machines are the most popular games in any casino. Unlike traditional tabular games, this game doesn't require any gambling knowledge, and anyone can get in the game with a very small bet at the beginning part off the class, we will create a very impressive game, in their phrase, with many gorgeous graphics that were made by myself for this course. If ur careers, then I can tell you that I designed those graphic assets. He was in a professional factor droving iPad application with my approach pencil in the middle part off this class reveal developed the main game logic. It's swift. Then leave you learn, have to save and read the high score. Using the user defaults, they can use user defaults to store any basic that a type for as long as they have is installed. You will see how easy is to use it. It's review I in the last part of this class review learn, have to bring an I bet app to Mac by using apparatus Catalyst technology with Mac batteries are slot machine iPad APP shares the same project and source court. Therefore, they can efficiently combat this mobile that toe that stop without further ado. Let's set up a project as usual, download the resource flies from this section, then place it to the deck. Stop and and zip it by clicking on the package. The provided main folder contains free for orders marked with the swift local on the supplementary workbook fries With the objectives in PDF and a back four months. As you know, by now you can fight the completed project in the green folder. This finished project with the source courts may help you when you are stuck and need some quick help The red for their contains. All of the resource is you really need Toby. It a slot machine game. Finally, we are going to save this up into their blue folder. All right, that's lunch X court. Then create a new project, select the single viewer project and played under the U. S. The bar. Next, we need to configure our new swift to I project for the product name. Enter slot machine for the team. If you have an apple developer account. Logging in here allows you to build your AB on a device. If you don't have an apple developer account, you can skip this part and test your app in the IRA simulator on your Mac organization name . Enter your personal or company name here. You can leave this blank to for now. Organization. Identify where he usually enter the company's website Name in the reverse order, for example. Com dot swifty Why masterclass? The Bandel identify air is automatically combined from the project name and the organisation. Identify air. Next, make sure that the language is set to Swift, then the user in their face must be 50. Why as well Finally, leave the core data, the unit death and the desk options unchecked. After all of the settings, click on the next button and the ex court will ask us where we want to save our project on the computer. Navigate to the deck, stop and choose the students at border as the destination off your ex court project. All right, we are going toe had several at by close to the project. Please follow Mr Bice, that if you are not an experience. I was developed very it First navigate to the deck, stop and open. The resource is for there inside that open the app icons and the icon icon set folders as I do in this water. Select all of the graphics and the content file. Then Kobe, all of the 37 I attempts to the clipboard. After that, go back to Ex Scored and click on the assets holder in the Project Navigator panel. Select the Empty at Icon folder, right click or control. Click on the APP icon. Select the show in five. Other option in the Context menu and Ex Corde. We Bring Us Toe the Equals folder in a new review in though, Open the APP icon set further in the finder and based everything from their clipboard into this place. Then you need to replace the existing content. Jason. Five Jews Replace finally grows this finder tab. Nice job. Now navigate back to the resource is further in the finder indo than open the graphics folder. After this, select all of the graphics vice and drag and drop. Then toe the assets panel as I do after selecting these graphics vice right click or control. Click on them, then select the new folder from selection options in the new context menu. Name it to graphics. So far, so good. Then select the graphics background file and make sure that the inspector spinal on the right side of the X scored is visible. Click on the background file in the middle of the Assads window. Find the re sizing settings and click on the preserve. Rector Data check mark. This will make sure that our rectal graphic will not be rest arised. The next step is to create some color sets for this game. Click on the plus button at the bottom off the X scored assess window. Select the new color said option. Name it to color being then select the color in there Set window in the actual boots. Inspector panel. Change their color input method from floating point toe. Eight. Beat accidents. Immel. Enter double D W. 09 eff Great. After creating our first main color, let's had another one to the project. Click on the past. Bratton at the battle off the X Courts Asset window, the second time, selected a new color said option. Name it to color purple then select the color in there setting, though in the attributes inspector panel, change their calorie input method from floating point toe. Eight bit accident Seymour. Then enter five C W 051 Nice job Now let's create a yellow color set for time. Click on the plus button at the bottom. Select the new color, said option. Name it to color yellow. Then select the color in the asset, even though in the Attributes inspector panel said the color input method. Eight. Beat accidents. Immel. Then enter double F C. Pre 56 Super. We are almost done now Let's create the last color set. Semi your back black color for the shadows. Fourth time click on the plus button at the bottom. Select the new color set option may made to color transparent black. Then select the color in there. Set in, Though now accepted. The sliders, who are used to zero toe get a black color than change its opposite E from 100% toe. 20% and that's it. Our color sets are done. The only thing we need to do is to create a new folder for the colors, so let's do it named therefore other two colors after we finished with. Adding the graphic resource is to the project and creating the color sets our next taxes toe. Add the background music and the sounds effect to the project's main route. For their go back to the resource is Holder and open the sounds holder in the finder. Select all of the MP three sound vice and dragged them into the slot machine projects route . Further as I do, we can close the finder window now. Now make sure that the destination they create for the references and the targets options are checked in the new in the creek on the finish button. As many times before. If you create a new folder for the Sands Vies, Name me to go. Sounds awesome. Now let's prepare some other folders in address. Select the content you file and create a new views group with the selection in it, Then another empty one called helpers. As you can see, I am a huge fan off organizing every project with groups and for others, but about you. Now that we have done all of the preparation work, it's time to start the actual development by creating the largest screen without for Dorado . Select a large screen story World Fire in the Project Navigator. Next, in the view seen Banel find and select the actual view under the View controller as I show you then under the size inspector menu and check this safe area reality margins and they say, area they had guide options. This letter setting, we'll tell Ex scored that. We don't want to use the safe area. Then we create a new constraint in the storyboard. After that, click on the plus button on the toolbar and search for the image view on the asset in, though simply selected and drag and drop the image you into the center of the story world. As you know already, some handy dashed. The guides will have you to position it now select the Attributes panel. Then it's thoughts typing background at the image you section and choose our colored radiant background file. Select aspect Feel for the image at the content more. It will stretch out the image. Now we are going toe head new constraints to the background by clicking on its battle at the bottom of the editor and check the constraints to margins option, then said old direction of Are you toe one? Now? By adding these new constraints Xcor via stretch out the background image even beneath the safe area, the only need to do now is to set the one point constraint to zero, go to the size inspector panel out, then change all of the values off their constraints from 1 to 0. As I said before this whole process, a bit cumbersome, but since we couldn't he was 50. Why here? Therefore, this is the price which we have to pay if we want a custom radiant image as a background on the large screen. All right, our background is then our last ask is to add the slot machines logo to the storyboard. Click on the past pattern on the toolbar. Second time new assets window via pop up again then, and their image in the search field Select image. You after that drag and show up the image you into the center of the story board at the inspector panel, starts typing slot machine and choose their logo. As I do, the slot machine logo type will appear on the storyboard. Now we need to add an exact size for the local click on the Add New Alignment constraints button and enter 300 for the IV and 200 for the height. The next step is to center their logo by adding new alignment constraints. Check the horizontally and vertically in container checkbooks. Finally click on the Add toe constraints button, and that's all of it. We are done. How cool is that? It didn't steak a long time to create this custom lunch screen, did it? It's time to build around the slot machine app for the first time on your device or in the simulator, go to the toolbar and click Wanda build and rambutan. Then take a look at the new lunch screen. It's a good start to building our slot machine game, isn't it? In the next lecture with your Start, according are up. See you at the glass 3. Let's build up the Slot Machine minigame’s header view: in this class, we are going to develop the heather part off the slot machine game. As you can see, this is a complex Lee at, so it'll take quite some time to build it. The heather in their face contains the slot machine, local type, the game reset and in four butters than the high score and the players coins. Having said that, that's a champion two x scored and start quoting first thing. First reveal market of three main parts off the court. It comments. Enter Mark Properties, Mark Body Mark preview, then dropped the text. You in tow a newsy stack like I do disease that disease thick. After that, maybe a split up the layout into the following three main layers mark my grant mark in their face mark. But Bob. Then we create a vibrant Grady and their grand color linear, radiant Grady Ent Grady Aunt Colors Color color Pink color color Purple Star Point Stop endpoint Batam, As you can see in swift ey framework, linear ingredients and even colors are views by the own rights with using a just ignoring safe area modifier because threat shelled the colored radiant under deceive area. So Let's at this view modifier to the Grady Ent and just ignoring safe area. All great job. Now let's embed the placeholder text you into a new V stack. These thank alignment Center spacing. Five. Bedding frame Max Weed 700 to Andy. Next, we are going to define the main parts off the game in their face. Mark had there. Mark Score, Marg slot machine mark Food er. After doing that, they were continually developing the heather. First, replace the text you with a new image, you image graphics slot machine. Then add these modifiers toe the image. Very sizable. Scared to fit. Frame me and the kids. 256 Ideal did 300 max Sweet 320. Mean Hide 112 Ideal Hide. 130 Marx Height. 140 Alignment Center. Bad ink Horizontal layout Priority. One shadow color, color color Transparent black Great views zero x zero Why six NYSE a job? Just a short recap. What's going on? As you can see, the logo type got a flexible size by I think a minimum ideal and maximum were used to. It's read and hide. So depending on the actual device, it could shrink down or scale up automatically, then, by providing ah higher priority value to its layout. Inform the running application toe calculate, or precisely the size of the Holy Out and the sub views on the screen. Since we want to reuse this local type on the information view, therefore, it's a good practice to re factor are coat and create a separate view for it. Select the whole image and copy it's called to directly board. Then click on the Views Group on the Project Navigator and let's create a new swift you I view for the local type. Name this file to local view and save it after that replaced the place where their text you with the coat off the image view from the clipboard. So far, so good. Just one more thing because even Tory use this shadow modify or over and over again in this class. Therefore, we definitely should create a new custom. You modifier for it. Having said that, let's cut out the shadow modifier to deadly board and create a new swift file where we can place it, Select the Helpers group and let's create a new modifiers swift file first, let us import the swift ey friend work, Then the let's create the actual shadow modifier destruct Shadow modifier, you modifier, funk body content content. Some have you content After that plays the one liner shadow modifier here from the clipboard, now jam back to the local view file and had the shadow modifier to it. Modifier. Shadow modifier. All right. Our last task is to replace the image in their content. You with a new local view. Enter logo view Super. The logo is then. Now, with your focus on creating the reset and in four buttons, scroll down a little bit and add a new spacer under a local view. It will push up the logo to the top off the screen. After that, let's enter a comment where we recreate the patterns mug bad times. Then we start with the battle on the top left corner. Overly, I said. Bratton. Action. Brilliant. I said that game image since them name. Pero to circle above circle formed title extent, color color, wide alignment. Top leading. I think that we should create a new custom modifier for the two batters so we can reuse it . Select the phone and the accent, color, modifiers and copy. It's called into the clipboard. After that opened the Modifiers file and under the Shadow modifier, let's create a new one. Distract battle modifier view modifier, funk, body content, content, some view content that's basically code from that clipboard into the body off this modifier . Now jump back to the content you and replace their formed and the accent color with the new butter modifier, as I do modifier but on muddy fire. After finishing the reset button, let's duplicate it's called, then modified. The following Where? Use off the A four button comment in four Thanks in full view. Image being full circle, then alignment. Stop trailing super duper. The design and the layout off the top buttons are done. Let's continue this class by creating their coins sing for and the high school in their face elements. First, we create a New Age stack and two new Dexter views in it ages. Steck Thanks your backslash and coins. Upper case decks 100. You may wonder what back slash N is for exactly these back slash plus and special characters. We create a new line break in string twitterers All right, Now we need to add a new spacer toe there footer to push up somewhat. The coin sing for element spacer. Great. Next, maybe a style This quarter label with some view modifiers. Enter for grand color color white formed system sighs, then wait. Boy design grounded. So far, so good. Now let's continue with the score. Number shall be for grand color color White Fund system. Tyto Design around it. Fun to aid. Heavy shadow color, color, color. Transparent Black radios zero x zero Why three? They are a priority one. Then add the following modifiers to the horizontal stack. Bedding vertical for bedding. Horizontal 16 frame. I mean, did 128 Big grand capsule for grand color, color colored, transparent black. I consider these modifiers quiet, self explanatory. Basically, we created a nice capsule shaped with some beddings on the semi transparent black background. As you can expect. Review every factor discord by creating somebody, fires and big sections. Let's start with the score labor. After selecting the modifiers off the score label, cut them out to the clipboard, then create a new swift file. They made two extensions and save it into the helpers group after that importantly, Swift ey friend work. Next. Let's create the new text extension extension decks, funk score, labor style, text said. Then inside the foreground color and they phoned modifiers inside the function. Now jump back to the content you and at this new text extension toe the score label for loving by a new modifier. Score. Labor style. More dealing. Text alignment trailing Great job So far. Now we continue this re factoring with the score number shall be select the foreground color deformed and the front weight modifiers and got them out to directly board. Then open the extension file and add a new function inside the text extension. Funk scored number style. Next self, Then insert these type modifiers inside the function. Now jump back to the content you again and at this new text extension to the score number, score number style. Having done video, we are going to continue the other modifiers. Select the shadow, the layout priority modifiers, then cut them out to the clipboard, Then open the modifiers file and let's create a new custom modify ever below the other ones destruct Score number, modifier view modifier fung by the content content some for you content when you are done based. The modifiers from their clipboard inside the score number modifier now jam back to the content you yet again and added this new modifier to the score number for the fire score number modifier. Don't give up and keep up the good work. They are almost done. Select all of the modifiers off the age stack, then cut them out to the clipboard, then opened the modifiers file again. And the let's create a new custom modifier at the end of the file. Extract, score, container modifier, view modifier, funk, body content content. Some of you content now is the modifiers from their clipboard inside a score container modifier. After that, jump back to the content you and at this new modifier to the horizontal stack Monday Fire score container modifier After creating all of these new custom modifiers and extension. Finally, we can finish the heather by creating the missing high score in their face element, and that the players coins capsule in tow. A new H Steck. This will be the main container, both for the players, kindness and the high score. Then the applicator play years coins and add a new spacer between these elements. Spacer. Awesome. Next, we need to modify some values off the high score capsule. First, move the high score number before the label and changed the order off them. After that, modify the following while use text 200 then text. High score. Finally, more thieliant text alignment leading and that's it. Or some jab. Probably this is one off the longest lectures in the whole section. So congratulations, in my opinion, if something is worth doing than it's worth doing right, even if you feel overrun by creating new fires and re factoring the coat over and over again the following lectures there be shorter ones. Having said that, see you at the class. 4. Let's build up the Slot Machine minigame’s main view with the reels: In this short lecture, we are going to build the middle of Bart off the slot machine app with three realists and one spin button. Without further ado, let's start coding first, create a new swifty y file and name it toe really view. Then save it in tow. The views group. Next they will modify the size off the preview. Early out. Enter preview. Lee out fixed, Read 220. Hide 220. After that, create a new image. You for the rial image. Graphics Really precise. Herbal Scared to feed free him, me and the kids. 140 Ideal of it. 200 max with 220 I mean hide 100 Burti Ideal height 190 max hide 200 alignment Center modifier Shadow modifier. As you can see, the size of this really is flexible between 142 120 points. This will make sure that the really you'll be optimized every I, Wes and I better west the device. You need to know that the main purpose off the really is to decorate the game user in their face. There is no additional functionality attached to it. however, may be a display around only generated images about each riel since the size of the rial, and the image about it is identical. Therefore, we can reuse the view modifiers on HBO structure. That's why select and cut out the modifiers off the real view to directly board except the recyclable modifier, then opened the modifiers fine. And let's create a new custom modifier. Enter destruct image modifier view modifier, funk, body content content. Some. If you content after finishing read it is the more than five years from their clipboard inside the function. So far, so good. Now jump back to the rear view and, at this image modifier to the view. Nice job, since the aerial view is then, therefore, we can finally build up the middle part off the slot machine game. Go to the slot machine comments section and let's create the vertical is stacked container with the main sections in it, and, uh, these thick alignment center spacing. Zero mark Really Number one lark Grilled number two mark really number free mark spin button slot machine. Play out Priority to. After finishing with all prep work, we are ready to add new areas and images to the game in their face that start with the top most riel. Enter three of you, then embed this really view in tow a new disease check disease that nice job. It's time to add a new slot image about this. Really enter inside disease. Thank image Graphics Bell. Very sizable modifier Image modifier. Great. The first real with a slot image about it is quite impressive, is ended. Let's continue with creating the second row, including a new horizontal stack container. First copy the entire content off disease back into the clipboard, then enter the following court ages. Thick alignment center spacing zero. Next, place the comments inside this age stack, then copy and paste the rial view from the hill aboard. Two times as I show you Now modified. The content of the images Image graphics. Seven. That image graphics sherry super duper, although we need to insert now a new spacer between the two realists spacer after that at the maximum size to David off this container because we wanted to look good on a wider screens as well. Free him. Mark Swed 500 Nice job. Finally, it's trying to create a new spin button inside the surgery. So off the game in their face and that the following court that done action brilliant spin , their ears, image, graphics, spin. What is sizeable? What the fire image modifier rendering mode? Or did you know? And that's it. We have just created all of the areas and the spin button for the slot machine game. In the next lecture, we are going to create the missing part of the game in their face. The Food Tour. See you at the class. 5. Let's build up the Slot Machine minigame’s footer view: in this lecture, we are going to finish the yacht off the game. In their face. Our main objective is to create two buttons for the betting system in the food off there. Without further ado, let's get continued The project in X scored navigate to the footer section in the content you file and create a new age slack below the spacer, as I do a just think. Then inside these age stack, let's create the bare bone off the first button and there mark Bed to Andy Batam Action print Bet. 20 Qualities Next 20. Not bad. However, we need to add somebody fires for the text to you want Wade Heavy for grand color color white formed. Suits them. Title design. Rounded bad ink You have to come. Five frame Did 90 shadow color, color, color, transport and black Brave Use zero x zero. Why three? Okay, the Dexter looks better. Now It's time to work on the actual button Now at these following modifiers to it. Background capsule. He'll linear Grady, Aunt Grady Ent Grady End Colors Color, color being color color. Perper Starting point Top and point Batam Bad ink. Three. Big grant capsule field in your greedy aunt. Great yet Grady End colors, Kallur, Color, Bink, Keller, Keller, Berber, Start point, Batam and Point. So two capsules with the Grady and Fear colors are lying on top of each other. The lower most capsule is bigger than the top most capsule due to the three points bedding . Moreover, the direction off it's creating and color is the opposite off the top, most one as well. This creates a nice design effect for the battle that separates it from the similar background color. But we are not done yet. We are going toe. Add some casino chips beside this button so we can hide or display it on. A player changes in the amount off the bets. Let's add a new horizontal stack container for a battle than is there a new image? You inside it ages. Thank alignment center spacing, then then enter image. Good. I face casino chiefs very sizable. Opus City. One. Scared to feed free him. Hide 64 Animation. The Fort Modifier. Shadow of modifier. Great job, since the second button is identical to the 1st 1 Therefore, it's time for you. Factoring are coat and create some reusable modifiers for the buttons. First, select and cut out the following text modifiers into the clipboard, formed bedding, Free him and Shadow, then opened the modifiers file. And let's create a new custom modifier. Abstract. That's number modifier view modifier, funk by the content content. Some have you content after that business with the fires into the functions body. So far, so good. Now jump back to the content you and at this new modifier toe the text you modifier. That's number modifier before we continue the same process with the cap source off the battle. First, we need to add a new shadow to the last capsule modifier. Shadow of modifier. Fantastic. The design of the button is consistent with the other parts off the game in their face, and it looks much better to do you agree with me Now let's select and cut out all modifiers off the butters into their clipboard, as I show you then opened the modifiers Find again and let's create another custom or the fire abstract Matt capsule modifier. Have you modified your funk body content content? Some Have you content. All we need to do now is to insert the modifiers from the clipboard inside the functions body creating components with a gorgeous design using Swifty. Why is quiet Easy, isn't it? After that, that's a jump back to the content you. And at this new modifier to the battle modifier, that capsule modifier, we are almost done. Just let's create a new modifier for the casino chips as well. Shelvey Select and cut out the following modifiers off the casino chips into deadly board. The scared to feed the frame, the animation and the Shadow, too, then opened the modifiers five. The last time in this lecture and less create yet another custom modifier. Obstruct casino chips, modifier, view modifier, funk, body content, content. Some have you content now quickly. Is that the modifiers from the clipboard inside the function and jump back to the content? You finally, at this new modifier toe, the image you modifier, casino chips modifier, super duper. We have reached the point when we are ready to create the second button beside the 1st 1 Let's select the entire button with its core is enter container than duplicate. It's called one time as I do. It's not perfect yet, so we need to modify some values off the second button. Let's start with the comment mark. Bet then. Then change their strings inside the brain function print bed, then coins, then modified that text you. Thanks. Then after that, move the entire image. You above the button view as I show you. Great! Now give a yellow for grand color for the text since then, is that the fault? Bad color calorie alot with Har mony? This default setting. Now we need to hide the casino chips off the 20 bad button change. It's up a city from 120 to achieve this goal Her ray the layout design off the main game in their face is done. Congratulations. I hope that you are so excited as I do. Slowly but surely we build up the entire game in their face. In the next lecture, we will create a nice, inform you about the application and give credits for the creators. Shelvey. See you at the glass 6. Let's create the Info View with SwiftUI form: in this lecture, we are going to create a new view with some information about the slot machine up and give credits to the creators. All right, without her door, I do. Let's create a new Swifty WiFi as usual name. It's to inform, view and save it into the views. For their first reveal, embed the placeholder text into a new V stack, these stack alignment center spacing. Then, after that, replaced the text. You with that logo of you. No go off you, then at a new spacer below the local view so we can push it up to the top of the screen space. Sir, so far, so good. Next, you create a new static form. This form here contain all of the supplementary information about the slot machine game and third, the following code below the space, Sir form section Heather Text about the application. It's just think next. Abdication for grand color color gray spacer tex Slot machine. This first line in the form of your BR prototype so we don't need to write it again and again. Just one more thing at this modifier to the whole form, so the Children views could inherit its appear IUs fund assist them. Body design rounded. Great job. It's time to extract the first throw into a separate view and make it reusable commonplace . Click on the edge stack and select the extracts of you. Option in the Context menu, now renamed This View to form a row View, then scroll down a little bit and make sure that the preview is the last court block in the file. By moving up the form rove you. Our goal is to keep the court as clean and need as possible. Personally, I prefer to keep the preview at the bottom in each swifty y file. Now it's time to modify the row in a way that we can reuse it as many times as we wish without repeating its containers and modifiers over and over. All right, let's create two new properties for this role. Bar first item spring. There are second item. String after that replaced the content. In that excuse, there's first light them next second item Nice. The forum row view is then, but our court is broken in the content. You don't worry. We can quickly fix it by adding the missing properties toe the first throw. So let's do it. Former overview for side them. Application second item slot machine. As you can see from now, we can repeat this form. Rove, you serve you as many times as we want. Let's add the rest of the content for the app in four form a row. View first. Side them platforms. Second item iPhone. I bet Mac for tomorrow. View first item developer, Second item John Jane Form drove you first. Side them designer Second item, Robert, But Russ for Moreau view first item music second item, then Leibovitz Forum Rove. You first light them website. Second item. Swifty. Why? Masterclass dot com form Rove You First item Copyright second item 2020. All right. Reserved for Moreau View First, I'd them fashion second item 1.0 point zero. Keep up the good work. We are almost done with this lecture. Our last task is to create a new clothes button at the top right corner off this view. First, let's add a new bedding, then a new overly modifier to the the stack Bedding Top 40 Overly. After that, let's create a new bottle inside the overlay Matin Action Action image. Cyst them. Name. X mark. So girl formed title. Now we need to add a new property to the overly in orderto put this button at the top. Right corner Coma alignment Top trailing Nice job. Just one more thing at the spendings and the following modifiers to the button. Bad thing. Top 30 Padding trailing 20. Excellent color color Secondary Super The design of the button is then Now let's add functionality to it shall be. As you may already know, VB led an environment property to the view at environment presentation. More bar presentation mode. This presentation more environment Property will allow us to close their sheet when a user taps on the close button. Now navigate to the battle and enter said presentation More rapids. Why have you this miss This line off court will close their sheet but there is no shit created yet. Having said that, now we need to add a new sheet to our content. You file open the content you file and add a new property to it and stayed private are showing in full view bull force using their showing in full view property, we are able to tell the application than toe show day in full view and then not to do. Since our code gets longer and longer. It's words to show up the minimum in the editor, as I do, read the minimum. We can quickly navigate from one part off the court to the other part by using the market dividers as a reference point. Navigate today for view button and replace the print function with this cold yourself, showing it for you. True. All right. Our very last task is to add the still missing sheet modifier to disease back. She'd he's presented dollar sign showing in for you in full view. Excellent work. It's time to start the life review and test our application with a new sheet. A dating for you. Let's do it. As you can see President Thing of you in a sheet with safety, why is not so hard after getting more experienced? Creating a custom closing button is not mandatory each time that you will see later on that the decks. That Mac application doesn't have the slighted down functionality, as Iowa's abs have. That's why this closing button will be so handy when you bring the slot machine app to Mac . I am sure that you are already so eager to coat the main game logic in the next class. Until then, happy coding. 7. How to develop the main logic of the game with Swift 5: in this class, we are going to develop the main logic off the slot machine game. The rules and the game flow is quite simple. The play year taps on the spin battle to rotate three rears that have 16 balls on them. Winning or losing? Is that our mind by these randomly generated symbols, whether they are identical or aunt, if each really shows the same symbol along with the game, in their phrase than the player Weise? If there are no fully identical symbols than the player loses coins, the amount of the player cauldron depends on the bed. It could be increased either by 100 coins or 200 coins. This play out is calculated by multiplying the BET amount by 10 times. In this lecture, reveal mainly focus on the main game. Logic, however, later on, revealed add many new exciting features to this game in each following lectures, for example, review sieve permanently the high score in the disk. Off the device. We feel the developed debating system so that player will be able to choose the amount off the bat in each round. Then maybe you show a custom Pope Apkindo and the game is over. Another also feature will be playing different casino deem sound effects. This will generate a fantastic vibe for the slot machine, not to mention the last lecture, then reveal. Bring this game to Mac. All right, enough talking. Be that for Dorado. Let's start coding in X scored. First leave you create a new array for the slot machine symbols. Let same board graphics, Bell graphics, sherry graphics, coin graphics, grave graphics, seven graphics. Strawberry. Now we have all names off the images in this one array. Next, they will add this array to each really navigate to the rear section and change all hard coded image names to the symbols. Image seem. Boys is a road. The image same boys. One image seem boys for as you can see, we can choose any value from 0 to 5 in this array, and each index value is representing one of the slot machines. Seem bulls that will be shown on the Rios randomly. For the sake of this game logic, we need to separate the RIAS from each other. For example, real number one rial number two and the real number three. That's why we need to create another array for their free aerials. Let's do it, Add stayed private. You are realists. Array zero one to the first real is that almost one with index zero? The second, really is the left, really with indexed one. And finally, the third really is the right one with index to it's time to separate the symbols from each other by declaring which really, is which, firstly, seem boys three years zero then Secondly, Symbols, realists one and finally seem bulls. Three years to all right So far, we created an array off symbols and then array of Frias for the game. Now it's time to talk about the game logic for a moment before we continue coding. As you may know, that mean the rule of the slot machine game is together as many coins as possible by meaning many rounds in each round. The computer generates random symbols on the reels, the player billions spent. All of the symbols are the same time, like three bears, free Cherries or free service and so on. That player loses when the same boys are not identical to each other. Besides this main rule that are other rules as well but with your focus on this one. For now, before we start calling the game system, we need to describe the game flow and define what's happening in each state off the game without for Dorado. Let's write down these steps with new comments. Let's enter and you comment with the separator and call it to functions. After that, we are going to define what we need to do, step by step when the player steps on the spin button. First, we need to generate new random numbers and show new symbols. When their player that's on that spin button, let's call this Steptoe spinned areas. Then we need to check the meaning. Let's call this steptoe. Check the meaning. After that, we need to decide what to do When a player Ria's, this will be another step calling clear these then a player. Vince. It may or may not be a new high score for this. We need another step calling new high score off course. We need to do something when the player loses, so let's say they find another step player loses. Finally, when the player loses all of the coins, then they declare a game over and, uh, game is over, all right, we they find the main steps off the game flow of it. Comments. Now it's time to write down the actions off each step by creating separate functions for them. Let's start with the first function. Funk. Spin her areas. Areas zero I didn't random in zero seem bores count miners one rears one int random being a zero seem bores can't minus one three years to he and random in the zero seem boys can't minus one this factual were generated a new random number from 0 to 5 for each. Really. Now navigate to the spin button and at this new function, do it with a new comment. Spin in their ears. Self spin rears. Next review test are called by starting the Life Review on the campus. Excellent work. Every time we click on the spin button, we see a randomly generated symbol on each riel. All right, enough. Just think there is just one more thing about dysfunction. You may wonder, is there a better way to generate the random numbers in the ray? What if there are 100 rias in the game? Not only free, do we really have to generate the random them burst manually one by one off course, there is a better way to go through their way and generate a new London number for each index. Swift the language provides as a map mattered. This map metal allows us to transform a race using a transformation closure. This facet five. The return Why you will be an array off the same size containing all of the transformed elements. Let's see how we can optimize to this function. Comment out the first few lines and enter three years equals three years. MEP underscore in and random in zero Seymour's count minus one. As you can see, using this map metal, we can generate and store as many new London numbers programmatically as the size off our array. This is a good example. Off my be knowledgeable about swift language is so important for every developer. All right, let's go back to our main topic and continue this class by creating a new function. Enter Funk Chekhovian Inc. Inside this function, if you compare all of the rears and find out whether there is a hit or isn't we can do it with a conditional statement like this one You three years zero because three years, one and three years, one ecause three years to and careers zero equals three years to as if all of their ears have the same symbol than the player V s. Moreover, it could be a new high score as well. That's why we are going toe. Move these comments inside the first part off the condition player of years. New high score Next. Then there is no hit than the player loses. Move this comment in the air sparked off the condition Player loses after defining the bare bone part off the check meaning function. We need to run it when the player taps on the spin button, navigate to the spin button and add this new function to eat after the spin reace function . Jack cleaning, I said, Check raining. So far, so good. We are able to check the meaning situation, but in either states off, true or force our coats still doesn't do anything. We need to precisely define what we want to do when the player beings or loses the first task. When the player wins, then we want to give a payout by adding coins to the player. It will be the actual amount off the bad multiplied by 10. The seconds task. Then we need to check if there is a new high score or isn't the third desk. In case that player loses the round, then we need to take away the actual bat from the players coins. The final task in case the player runs out off coins than the game is over. Toe a shave. These goals. We need to grade three new properties to store the coins, the high score and the actual bet. Let's do it and, uh, add stayed private of our high score int zero Add stayed private of our Coy's and 100 adds , Did private, You are better mount. And then, as you can see, we start with zero high scores. Then we give 100 coins through the player. Finally, we said the default bet. 10 coins Easy job so far. Now it's time to insert these properties in their place according to the game. In their face, First navigate to the score number and replace the static text with them. You table Queens property. Thanks Goi's. Then we continue this process with high score in that decks. High score. Nice, excellent work. It's time to modify their players coins and the high score, As I said before, navigate to the function section and less great new one funk player Vince Coy's plus equals that amount multiplied by 10 than the let's around this player Vince function inside the true condition off the check meaning function play Irvin's. After that, we continue with creating a new function for the high score and, uh, funk. New high score. High score, of course. Toys Super this year, said a new high score. Now we need to create a new conditional statement and check if there is a new high score or isn't. And there the following cold inside a jack winning function. Beef Coy's more than high score new high score. With this conditional statement and the new function, we can handle the high score system later on. If you had more comments to this, like playing a different sound effect or saving the high score permanently in the disk off the device before we finish this long lecture, we need to deal with the loss situation. Let's create a new function and take away coins from the player than he or she loses in that game. Play. Enter Fung player loses coins minus equals bet amount. This function will extract the actual amount off the bed from the players coins. Let's surrounded inside the force. Result off the conditional statement. Inside the check winning function player loses, and that's all. Now we can test our at by starting the life preview or running it in the simulator or on a real device by tapping on the spin button. The application shows house random symbols on their ears. In the case, the symbols are not the same than we lose goings. And here it goes, their first problem off the game logic. We shouldn't have got a negative amount off toys in the next class. We need to deal with this and check when the game is over. Fortunately, then there is a new heat in the game play. They're not only the player squeeze will be increased by 100 but a new high school will be set as well. We can say that the main game logic works as we expected, but there is still room to improve it and add more features to the APP. Having said that that see you in the next class 8. Let’s develop the logic of the betting system with Swift 5: in this class. We are going to develop the logic off the betting system with Swift. This feature will allow the player to take different bets in each round in the slot machine . Again, the amount off the bat could be either 10 or 20 coins. This will require us to create two new functions. Toe work properly. Let's do it. Add the following good After the last function funk Activate Bad 20. That amount equals 20. Then the let's create the other function as well. Funk. Activate bet. Then that's amount equals then violent. The first function sets 20 coins as a bet than the 2nd 1 sets only 10 coins. All right, so far, so good. Now we need to run these functions when the player taps one off the buttons, navigate to the BET 20 button and replace the print function with the 1st 1 So activate bet 20. Then the last country new video Bet 10 Button said Activate bet Then Now it's time to does the application. Start the Life Review on the canvas and play the the up a little bit. Then you change the default. 10 coins Bet 20 coins. Bet Then you should see that when we lose the bet than our coins are decreased by 20 coins as well. Fantastic. The code works seamlessly as it's expected, but we won't stop there now. We need to improve the user experience by providing some visual signals for the player about what's going on behind the scenes. We can achieve this by implementing these two usual hints. The first signal is to change the foreground color off the actual battle to yellow. The second signal is to show the casino chips besides the battle off the actual bed. To make this work, we need to know which bet is selected and which isn't. That's why we are going to create two new properties to store the actual state off each bet , navigate back to their properties and let's create the following. Very Evers. Add stayed private of our he's active bet, then bull equals true. At ST Private, var is active. Bet 20 bull equals force. As you can see, the default bad ISS then reveal toggle. The state's off each property. When the player changes the bet, Go to the functions off the beds and at this court to them, activate bed 20 is active. Bet 20 equals True is active. Bet then equals force, then continue in the next function. Activate bet, then he's active. Bet then he costs. True is active. Bet 20 equals for us. Super duper. We can hold and change their states off the bets now Violin one off the bets is active than the other bet must be inactive. It's time to work on the visual indicators off the betting system. First navigate to the BET 20 button and change the foreground color modifier off the text for grand color is active. Bet to anti question mark color calorie yellow caught on color wide. Then change the upper city modifier off the casino chips. Oper City is active. Bet to anti question Mark one, Kahlan zero. As you may know, we were carry out the similar process with the modifiers off the Betterton button. Let's start with the Opus City over City. He's active. Bet then question. Mark one. Kahlan zero. Then the last country New vid. The foreground color for grand color is active. Bet then question. Mark. Color color Yellow, Kahlan. Color wide and that's it. Excellent work. We are done being the betting system. For now, it's time to address this court in the Life Review on the canvas. Let's believe it their game a little bit and change the beds from 10 to 20 and back and forth. As you wish. The betting system works without any glitches. Later on, reveal enhanced the user experience by adding animation sounds, effects and haptics to their game. Until then, happy coding and see you in the next class. 9. How to create a custom popup window for the Game Over: in this lecture. We are going to create a custom pop up window if you show this model than that player loses all the coins and the game is over without further ado, that's a champion to the project and start quoting in X code. First, we need to check the conditions off. The current can play and the game over. For that, we are going to create a new function and ran it each time. When that three year taps on the spin button navigate to the end of the functions and enter funk, he's game over. If Coy's, there's then the course zero Show more Daven, though. Now let's insert dysfunction into the action off their spin button, navigate to the end of the battle and inside the function it a new comment game is over. Sev it is game over. All right, he set up a new game over function. However, dysfunction doesn't do anything yet, since our goal is to show a model of Indo and the game is over. Therefore, we need to store their states off it somehow go back to the property section and let's create a new mutable property for that. Enter at ST Private Bar showing model Bull equals Force, then jumped back today's game over function and at this court inside a conditional statement showing Maada it was true after setting these showing more than property so true . Then finally, we can show the model window for the game over. Play out. It's time to create the missing model window. But before we start quoting, I will shortly talk about how the structure off this custom pop up window is buildup. The model window is beard up with two layers on top of the main game. In their face, the first layer is a semi transparent black color view that is expanding in all direction, including the safe area as well. To make the design more interesting, maybe a blur the view off the main game in their face, so the model being, though, can pop up better. This blurring effect is quite popular across all of the official applications. Build by upper the next layer is the actual model view that will be centered on the screen Revere create on outstanding design for the model and add additional actions to its button so the player can start a new game. Okay, enough talking. Let's do it first. Navigate to the end of the game in their face view, and let's add a new blur effect to it. Enter Blair Radios. Dollar sign showing model rapid value Question. Mark five. Colon zero oh, back force. The addition off a rapid value in there is required because Soon Vivian's show the model view programmatically with a new conditional statement. And therefore we need to dig inside this property toe, retrieve the actual robot you fit to show a new view. Next, the Blur modifier has through perimeters. The 1st 1 is really use. We said the radio size off this blur toe. Five. It's not too blurry just enough to help us to prop up the model. A bid from the background. The second barometer allows us to keep the transparency on the blood out about by setting its value to force. Anyway, with this blur modifier in place, now we can focus on creating the layers off the custom model view. It's time to desk our code. Let's start the Life review on the canvas and play with the game until we lose all of the coins and that's it Do you see how the main game in their face become blurred? Nice job so far, but we still have a lot to do. Stop the life review and navigate to the showing model property, then change its value from force. True, this will help us build up the actual model background and the model of you now scroll down to the previously written pope, a comments section. This is where we are going to develop the model of Indo inside a new conditional statement . As I said You before, enter the following in court. If dolar sign showing model, prep its value. Disease that color you eye color yellow. We are using a yellow color only just to see what's going on the screen. As you can see the yellow view inside Aziz thank full fears the screen expect for the safe area. That's why we need to add the following modifier to it. Veggies Ignoring safe area all now we change their color toe a semi transparent black color . Enter Kallur, you eye color Read zero green zero blue zero. A lot of phone 0.7. What do you think? Perhaps it's too dark. The only need to darken the background a little bit, so let's change it yet again. Color colored, transparent black. Excellent work. It's much better now, by the way, The semi transparent background is for not only helping of the model of Indo toe pop up, but to prevent the player to use the game interface behind it, including tapping on the spin button. We have reached the point where we can finally be adopt the model view. This will be such a fun. So let's do it right now. Enter more the these Thank spacing zero text game over. Then add the following modifiers to the V stack. Free him. I mean, we'd 280 ideal it 280 marks with 320 mean hide 260 Ideal Hide 200 a. D. Marx Hide 320 Ally Mond center Background color Right called radios 20 shadow color, color color Transparent black radios six x zero Why aid? As you can see, the slightly flexible these stack will be the main container for the models content. Next, we continue with the title of the model in the show, Add the following comment and modifiers to the text to you. Title formed. Cease them. Title design grounded. I want to wait. Heavy, bad ink, but grant color color being for grand color Color wide. Now. Is that a new frame modifier below the bedding in order to spread it horizontally? Enter frame Me and the Viet zero Max Reid Infinity. So far, so good with a new spacer, they are going toe Bush s title to the top spacer. Nice job. Now let's create a new vertical container for the content following with another spacer. Enter message these Think the alignment center, spacing 16. A spacer, Then create a new image. You inside this V's back image graphics seven rial re sizable. Scared to feed, frame Marx Hide 72. Pretty good now at the actual message. By creating a new text, you below the image fix bad The lack. You lost all of the coins backslash and let's play again. Formed cyst them Body design branded. Applying the limit to Morty line text that I meant Center for grand color Color Gray les at Priority one. I think that these text modifiers are self explanatory, except for the last one. The add value. One for the layout priority off the text you are reasoning behind it is toe Levante to make sure that the string won't be cut out than the AB calculates the sizes off the elements during the rendering. Very it super duper. The only thing we need to do now is to create a new button inside the model window when a player taps on it. Then it were close the pope up you and start a new game and, uh, about done action said. Showing model equals force said Coy's equals 100. Thanks, New game. Other case. Our bottom is almost done. We need to design it in a such a way that it feeds are over, look and feel. This is our design system, by the way. Having said that at the following modifiers to that ex to you Formed sees them body design around it form to eight semi board Excellent color color color being bedding, horizontal bad thing vertical and frame me and the kids 128 They're grant cap soon stroke border line of it 1.75 for grand color Kallur Calor being you may or may not notice that in general I like toe had more padding. Core is entirely and less budding vertically to the buttons. This fine detail makes it better, in my opinion, as a U. Why. U X developer What do you think about this design? It's pretty swick, isn't it? All right, we are done with the development of this lecture. But before we finish it, we need to hide the model window. Since this is the default settings off it after or navigate to the property section and said the default value off the showing model property to force again. VAR Showing Model Bull equals force. It's time to does the slot machine game. Let's start the life Review on the campus, then the let's Play video game Until we lose all the coins, a new Pope Apkindo must be shown with the game over message. It's quite impressive, isn't it? Let's try out again. Congratulations. It just works without any bags or glitches. How cool is that? In the next lecture? Reveal? Add a totally new feature to the slot machine, review a store and retrieve the high score on the device. Enough seeing Let's see you in the next class 10. How to store and retrieve data permanently: Introduction to User Defaults: in this lecture, we are going to store the high score using user defaults. The user defaults is appeal ist fire in the Epz package, and we can use it to set and get simple pieces off that before we start quoting Let's around the slut bashing up in the simulator and watch what's happening when they got a perfect it and we set a new high score. All right, we have three sherries and the new high score is set to 140. Now close the application, then rely on treat after a sec. We can clearly see that the high school is gone away. But don't worry because in this lecture, reveal develop dismissing feature by using a building solution that the framework provides us introducing user defaults. The user defaults class is exceptionally useful for storing small pieces off that in any application user, the force or so provides convenience methods for assessing commander the types such as integer bullion, spring date, you, l and so on. We can store even collection types with array and dictionary as well. You see in this class how easy to use it with Swifty. Why having said that, that's implemented into slot machine ready. Let's go navigate to the new high school function in the file. Then we are going to assign the value off the high score in the user defaults that a base by using a new key value pair perimeter, enter the following court. Inside this function he was there, the for its standard, said High score for Key High Score, and we are done with these byline off court Be achieved. Stored a new high score in the user, the forts that a base. But before we go on, let's hold on for a sec and analyze this long line off court Shelvey. First, we called an instance off the user defaults class. Then we chose to work with the built in and ready to use standard user defaults property by referencing it off course, we can also create a custom user defaults, but in most cases we are just fine using the standard user divorce property. Okay. After that, we entered the set method to set the value of the high score. Then we assigned this indeed your name toe the key high score in the user, the forts. Basically we created a new key value pair. Please keep in mind that all upper case and lower case characters in these four key argument are matter. Having said that when they want to retrieve the data from the user defaults, then we must use exactly the same string in the key. All right, you may think that we are already done by setting a new high score in the standard user defaults. That a base. But the true is that we still in it to do one more thing in order to make this feature worked properly. If you can remember, three of you asleep be initialized this high school property value zero, and we did it correctly At that time. However, we need to change this behavior. Our goal is to retrieve the actual value off the high score from the user defaults each time than the player relaunch the slot machine game. Now that we have already saved the high school value, let's see how we can get it back from the user defaults first, navigate to the top of the file where we initialize the high school property. Here is how we can get the value, associate it with the key high score had stayed private. War High score can't equals user Defour's standard in de Gier four. Key High score and that's it. Getting that from the user defaults is the just as simple as saving it. As you can see in the next figure, this integer matter will return on. Indeed, your value. Associate it with the specified key. In our case, this key is the previously defined high score with uppercase age and S letters. All right, so far, so good. It's time to test how setting and getting high score is working with the user defaults. Let's start the simulator and play the the slot machine until we get a new hit with a new high score. Super. It was quite quick. Then let's grows the slot machine app and relaunch it after waiting a sec. Excellent work. As you can see, we have just managed not to set, but to get the high score. Using the user defaults, we are almost done with this class. The only still missing feature in the slot machine game is the ability to rest of the game violently are developing this feature. We are going toe practice using the user defaults as well without for Dorado. That's jam back to the X scored and navigate to the end off the function section that the Let's create a new function for the rest. That button funk I said the game you was there the forts standard said. Zero. Four G high score high score equals zero coins equals 100. Activate bet then Now let's go through this function line by line. First, the override. The user defaults by setting the value off the high score key to zero Dan Veria said the high school property to zero as well. After that, we reset the players coins to 100. Finally, we sat back. The active bet amount to 10 in case it's changed by the player previously off course. We need to run this function inside the reset button, navigate to this button and enter the following court. Inside its action said. I said the game and that's all for this class. Let's start the simulator and test the reset button. You can see that our code is working like a charm. Really, really great job. Hoping that you enjoyed this gentle introduction to use their Defour, it's I must tell you that we have just scratched the surface so far, since there are in less possibilities off how we can use this hand little enough development. Therefore, we are going to use it many times in the upcoming projects. Until then, see what the next class. 11. Add animation to the Slot Machine game using SwiftUI: I am quite confident will say that you really enjoy this lecture. After finishing with the user interface design and game logic development in this class, we are going to add animation to the slot machine. The game in their face has three areas where at the animation could be especially beneficial. In my opinion, the first area is there randomly changing symbols. The second area is the bedding system. Then finally, effort area. Is the pope a model window, adding an emission toe. These parts could improve the overall user experience and grab the player's attention. Having said that, are you ready for having some fun? Then the let's start according in X scored. First, let's create a new property by entering the following court. Add stayed private bar animating symbol bull. He quotes force, then navigate to the first real and at a new on appear modifier to its image. You on a pier, their form self animating symbol. Taga. This fear Trigger the animation after the symbol has appeared on the screen. Now copy the whole on appear block off court to directly board and go to the second really in desert. The on a beer court snippet from the clipboard toe the image you inside a second riel. Then let's repeat the same process with the image you off the third Really, as I show you great job so far now the app via Togo, the state off the animation from forced to true Each time. After the symbols appeared on the screen, however, we still need to declare what kind off funny? Mention the van to run, go back to the first symbol and add the following modifier to the image of you over city animating symbol. Question Mark one, Kahlan zero. This will, and he made the opposite e off the symbol from 0 to 1. Now copy these opposite the modifier directly board and add it to the second symbol, as I show you than the last. Repeat. The same process with the sort symbol as well is a PC, isn't it? At the same time, when we are changing the opacity of the symbols, we want to move them from top to bottom as well. Go back to the first symbol and, at the following modifier, toe the image you over said. Why animating symbol? Question Mark zero column minus 50 This will move the symbol from top to its original position by 50 points above the rial. Now copy these offset modifier to directly board and add it to the second symbol. As I show you, then the let's repeat the same process with the third symbol as well. Nice work. Now let's define the animation type that we want to run each time when the player taps on the spin button. In my opinion, the best type of animation for this movement is there is out animation because it starts quickly at the beginning than it slows them at the end of the animation. Having said that, go back to the first thing ball and at the following modifier to the image of you animation , he's out. Now copy this animation modifier to directly board and added to the second symbol as I show you. Then let's repeat the same process with the third symbol as well. Alright, it's time to there's the animation. Let's start the life review on the campus and watch the animation of the symbols on the screen. It's working well, however, I find it a little bit too. Mahan IQ In the real life, the rear so the slot machine are spend Not at the same time, but after each other. One by one, began imitate this effect by adding the fragile relation to each animation off the symbols . Are you ready? Let's do it. Stop the life review and modify the first animation by adding generation to it. Animation. He's out duration double random in a 0.5. That that that 0.7. As you can notice the added around them in their wall to the first animation from 0.5 seconds 0.7 seconds. We are going to repeat the same process with the second and third symbols as well. The only difference will be that we ve changed adulation off each animation that's modified . The second animation. He's out situation W random in a 0.7. Not that that 0.9. After that, let's modify the third animation as well. He's out duration, doubles random in 0.9. That that that 1.1. All right. Now there's the animation. By starting the Life Review on the campus, it's working as it's supposed to do. However, sometimes I get a better result when I test swift you I animation on a real device. Anyway, you can notice another important thing than your top on the spin button. Our animation only works waas When the symbols become visible on the screen, however, the main goal is when he made these symbols when the player taps on the spin battle as well . To achieve this, we need to add this functionality to the spin button, go to the spin battle and, at the following new actions to it. The first step. We're biddies. New comment First them set to the default state. No animation with animation, self animating symbol. It was for us explanation off this code, since we want when he made the same bulls. Only then they are appearing on the screen. Therefore, we need to prevent the animation than the are disappearing from the screen. So far, so good. The second step will be the following the seconds that spend their ears with changing the symbols. Then add the animation after this as a new action. New comment The third step trigger the animation after changing the symbols with animation , said animating symbol. It was true. Finally, we are going to number the last two steps as well. The fourth step is to check the hit and the game over Action is the fifth step. Okay, Dokey. Let's start a life review and test the slot machine game on the Converse. Perfect. It works like a charm. We can say that this animation goes with the game play well, and it's quite impressive, too. Another area off this game where a well executed animation could improve the user experience is the betting system. By adding a horizontal movement to the casino chips, we can grab the attention off the player without further ado. Navigate to the BET 20 button and at the following modifier. Today image of you offset X is active to anti bed question. Mark zero, Kahlan 20. Changing the offset value from 20 to 0. We can move the casino chips from right to left. Let's replicate this process with the best and button as well. Off course. They must change the direction in the opposite way. Enter Hope said Eggs is active. 10. Bed question. Mark zero colon minus 20. This court We removed the casino chips from left to right after finishing with the casino chips. Review This the recently added animation, Let's start a life review and braving the betting battles a little bit, can you not? Is the improvement with the smooth movement off the casino chips? I hope so. The last area where you need some love is the custom pop up window. We are going to animate this model of, even though with a vertical movement each time, then it's a varying on the screen. But in order to accomplish this goal may be a need to create a new property to store the status off this movement. That's why navigate to the properties section and enter the following court. Add stayed private bar animating model bull. He calls for us, then scroll down to the end off the V, stack off the model of Indo and add a new appear modifier to it on a beer perform, I said animating model equals true this year, said the value off the animating model to True and trigger the animation. The only thing to do now is the great, a vertical movement with a spring animation attached to this pop up window. First we start by adding a new opposite him or the fire to the view and, uh, upper city dollar sign. Animating model. Prep it. Value question mark one, Kahlan zero. Then the Let's continue with the new offset modifier. Enter who said Why Dolar sign animating model. Rapid value Question Mark is a row column. My nose 100. Finally, we are going to attach a new spring animation toe. This modifiers enter animation animation. Spring rest waas is a low 0.6 dumping fraction 1.0 The land duration 1.0. All right. Before we finish this lecture, we need to set the value of the animating Buddha Property Toe Force than the player closes the window and starts a new game. Go to the close button and add these two lines off court Inside its action, said Animating model the course for us, said Activate bed then, as you can notice, we said the actual bed. So it's the vault while you as well Oops, I forgot something recently. I have around a slot machine game on my iPad device, and I noticed that he didn't add a spacer between the two bad batters. That's why let's a jump to the food er section and fix it right now. is that a new spacer between the battles as I show you spacer. Excellent job. They are going to end this lecture by testing how these animations work in the slot machine game. I would highly recommend you to build around the app on a really iPhone and not in the simulator, because in that case you really get a significantly better result ready, build and ran it. Let's play video games and watch how these recently added animations improve the user experience and make the look and feel off the slot machine. So impressive. Congratulations. We are done for now, but I don't think that we couldn't improve this game. Furthermore, are you eager to create more or some nous? I hope so. See you at the next class. 12. Add sound effects and a background music to the SwiftUI game: game logic off the slot machine game is done, but when it comes to user experience design as a whole, it forced short off expectation. Off course, the animations grabbed a player's attention, but you were C at the end of this lecture that there are other tools in our tool books to enhance the user experience. We have other options besides moving objects on the screen, such as playing sound effects or creating haptic feedback. This is especially true in game development in general, the great game designed contains both visual and sound components as well. Just keep in mind that when we are involving these components at the same time, then we basically providing or the over usual AIDS or hints for the player in the first part. Off this lecture, we are going to add some casino sounds, effects and even catch your background music to the game. Then, in the last part, off this tutorial, we are going to the elevate the haptics. Enough talking lets a jump into, according with Ex scored. Then let's create a new swift file for the audio player. Name it to play sound and save this file into the helper for their. Then we start quoting by importing the audio video Foundation friend Work, import a V foundation, then create a new function that were played. The sound fires enter the following in court. You are all the open here a V audio player Question Mark Funk play sound sound String Dive Spring If let buff Equus Bandel Main Bob for resource Sound auf Die, Die Do For the your clear equals try a V or the or player contents AWF ul File You are Elvis bath Both or the overly are question mark play catch brilliant at or couldn't find and played a sound file This block off court could be family heir to you since we have used it in the course many times before. Just a quick drink up. First we created a new or the open air variable which is an audio player type second. We created a new function withdrew perimeters. The first parameter is the sound name. And the 2nd 1 is the sound file format. Both of them are String Stipe. Next, inside this function we defined, I knew viable This war will check if the Afghanis s the sound file in the sound folder off the Good Sweets program in practice to use the do try, catch block off court for further at or handling. If there had cannot assist the sound file because it doesn't exist. Or maybe we misspelled the name off it, then it will print out a basic error message in that the back area, in case than the Afghanis, is the sound file without any problem than it. We're trying to create the actual or the or player and use the path off the sound file. After that, the audio play year starts playing the given sound file. The beauty in this court is that we can reuse it in the application as many time as we want . All right, let's implement this function into these happened. Let's play the sound effects first, open the content you file, then the navigato, their spin, the reels function and under the place sound Inside it play sound, sound. Spin. I I and be free great with this court reveal play a sound. The fact when the player tops on the spin button all right, next level play another sound. The fact when there is a hit without establishing a new high score, navigate to the Czech winnings Conditional statement and let's at a new S condition inside the meaning part off the block as please sound sound v in guy and be free. Nice job this way we play your song, the fact that the player Vince but there is no new high score off course. We want to play a different sound effect when the player not only Vince, but there is a new high score as well. Scroll down to the new high school function and enter a new place and function in decided with a different sound. Fire name. Play sound, sound, high score type and be free. So far, so good. What about the sound of the casino chips? It will make our game to sound even better, so let's do it. Jump to the activate bed 20 Function and enter the following court. Play sound sound. Casino chips died and be free. Then they repeat the same process with the activate bet. Then function. Play sound sound. Casino chips die can be free. Excellent work. Now it's time to play a new sound effect when the player loses all coins and the game is over. Update the East Game over function. Play sound sound. Game over. Die and be free. Have I told you that the slot machine game comes with a bunch of cool sound effects? There is a special one for the Gamera set as well update the rest of the game function. Did this cord play sound sound? Chime up I I and be free Super. The last sound effect is for the spinning Greer's navigate to the first real and let's play a new son file when a new symbol appears on the screen and they're discord inside the on appear modifier play sound sound. Rise up Taib and be free. Playing these rise ups on the fact only once is enough for us spinning Rias, in my opinion, okay, dokey. It's time for testing the slot machine game on a real device, or at least in the simulator, build and around the or some sound effect. Now let's believe it the game a little bit and discover all sound effects that were implemented in tow. This up. What do you think? Do you like it? I hope so. Just one more thing. Do you remember that these air short film all the slot machine game. There is a fantastic music played in the background. This is the perfect time when I would like to give a huge shout out to Daniel Abovitz, who is the composer off this great jazz music. Our goal is to play these background music when a player taps on the U four button at the right corner off the screen, opened a for view file and enter, and you own a pair modifier after the overly modifier off the V stack view. Want a beer? Perform, Play sound sound my grand music, Taib and be free. We are almost done with this part. However. We need to stop the music somehow, and the player decides to close this view. Jump to the close button and at this new action to it audio player question Mark stub. Fantastic. Then the Let's. There's this new background music in the simulator Shelvey build and run the up, then tap on the info button and listen to what's happening. Also, music, isn't it? The slot machine game gets better and better each time than we had new features to it. Do you agree with me now? We are going to finish this class by heading some haptic feedback to the up here and there . I wish come some nice redefined haptic feedback, such as a road warning and success for the slot machine game, the really implement the success haptik. The process is quite simple and easy to follow. First, let's create a new constant for the haptics. Lead haptics because you are a notification feedback generator, then navigate toe their spin re dysfunction and enter. Have dicks. Notification. A cured sex is great job so far. Next, let's repeat the same process with the activate bed. 20. Have dicks. Notification. A cured sex is, and finally at this gold toe the activate bet Then as well. Yep, you know they're saying practice makes perfect. Enter. Have digs notification. A cured success. Excellent job. We are done. It's time to test the slot machine game that's weird. And round the AB on a real device or in the simulator Shelvey. Now let's play with it a little bit. Just a friendly reminder to you we can test these haptics only a real device like an iPhone And congratulations. This game is an outstanding application builder. It's 50. I for sure. But can he make it even better off course in the next lecture? Revere, Learn. Have to bring these. Also map toe, Dexter. Up with apparatus. New framework called Mac batteries. See you at the next class. 13. Let’s create your first macOS app using the Mac Catalyst framework: Did you enjoy the lecture so far? I hope so, because this will be the sherry on the cake. In this class, we will bring the slot machine game toe Macintosh with using Apple's make catalyst framework. But before we jump into X scored, let's do some quick and easy housekeeping. Let's build and round the up and pay attention to the following two things. The first important thing. If you rotate the device, then you will notice that slot machine doesn't work properly on landscape mode. This was a design Joyce made intentionally before we started cording because we want to avoid this behavior. That's why we need to prevent this act to be rotated. All right, here goes the second task we need to the elevated Just hold on a sec and notice that the information on the status bar is in black. It's only true when we are on the light mode, because when we switch to dark mood than the color off the status bar were switch from black to white as well as the menu. I designer off this lot machine. I think that it looks much better with only white color. Having said that These are the main things that we need to fix before we go on to the main topic. Now close the APP and open the X code editor. Then select the main route off the project on the project Navigator pane. After that, select the slot machine tar, get on the middle panel. There should be only want our get with their sherry icon. So choose this one. As you can notice. On the right side, off the main window, there is a bunch of settings. Now listen to me carefully. Make sure that the general tub item is selected on the top bar. Next, find the device orientation section off the deployment in four settings. Are you with me? Nice. Then untracked. The landscape left and landscape right off shows there this will breath and as to rotate slot machine to left or two. Right? The desire to make this up to work on Lian portrayed more. So far, so good. The first task is already done. Now let's focus on how we can show the information only invite color, find a in four top item on the top menu bar and selected by clicking on it as I show you this will bring us a whole new set things when though you may or may not familiar with these custom properties settings. But that's fine. I've your God. You step by step, navigate to the last property and leave your cursor on this line for a vile. Now you must see a new plus and the new minor symbols shown on this line By clicking on the class symbol, we can add a new custom setting property to our So let's do it. Click on the plus button you will see. I knew context. The new pope App now start by being in this text field view controller bastes that was bar appear areas. When you are done, please select no from the right options. As I show you the discussed on property, we told the compiler that we want to set the appearance off the status bar manually. Next, we need to add a new property as previously, we need to click on the plus button again, then start by being into the text field starters bar style. Finally, let's select the light content from the Write off shores as I show you this Will said the white color for the status bar. And we are. Then it's time to test our up. Let's build and run it right now. All right. First try to rotate the device. You will see that this slot machine remains important. Rate more nice job so far. Then switch from dark mode to light more. If you are not already in light mood, you must see that the foreground color off the information on the status bar remains invite as well. Excellent work. We reached the point where everything is prepared for us to convert this mobile game. Toe addicts stop up by using apparatus Mackey. Catalyst solution. We can bring these already existing iPad us up to Macintosh. Are you such excited as I am? Sounds great. Then let's do it together. Open your ex scored that. Select them in project on the project Navigator pane. Before we had support for Mac, we need to select the eyewear Stargate that you want to configure after that in the general stop under deployment in four. Select the Mac checkbooks. Then we enable Max support X Scored adds the epicenter books entitlement to our project. Ex court only includes this entitlement in the Mac version off your app, not the IOS version. Then X Court also adds my Mac to the least off destinations on the toolbar to give it a try . Select My Mac as a new destination to run the slot machine Mac App from X scored. Just wait for a sec. Y X code is compiling the very first time our Mac app, and so the period goes slot machine. Our very first backstop up. Let's play a little credit, Sheldon screamed aerials and change the bed a couple of times. It works perfectly. Isn't it incredible? How easy was to bring our mobile Acto America? Now let's that's name for you. You may know this that sheets on Michael look different than sheets on iPhone devices. Moreover, while pulling them their sheet works on an iPhone device, then this feature doesn't exist on Macintosh. That's why we created a custom close button on the top right corner off the shit. Besides that, when you grab the bottom right corner off the application window, you will notice that we can resize it freely, give it a try and resize their game. Wow, how cool is that? By the way, This is the default behavior for a deck stop up. In general, it is a good practice to keep the vindaloo re sizable. However, as an app, you I designer, I prefer to keep the window compact in this situation. In that case, off this slot machine game, it makes more sense, in my opinion. Do you agree with me? If your answer is yes, then you are in the right place because I will show you have to restrict the minimum and maximum size off these next stop. Jump back to ex scored and open the scene delegate file on the project Navigator, Don't be scared. Just follow Miss that by step at a new conditional statement above the lad content. You you comment Fixed size Lapindo for Mac, if let seen equals seeing as breast remark you I mean, those seen seeing size restrictions Question mark. Minimum size equals CG size. You need it, Vince. 600 hide 800. Seeing size restrictions Question mark maximum size because CG size you need it, Vince. 600 height. 800. The size restrictions is a property on you. Ivindo. Seen that allows you to control the minimum and maximum size for the window on the deck stop in the above court who set the minimum and maximum size to 600 by 800 wines. Beauty and ran this slot machine. Then try criticising its window off course. We couldn't resize it. How cool is that? You really find that both minimum and maximum size has now changed toe custom values we specified above. Before we finish this lecture, I would like to show you something about this deck stopgap. Since every Mac application must have a manu bar, then go to it under the slot machine main menu and select the about menu item. It will show a new pope. APTV indo with the basic information about this application, there is a title and icon and the version number off the APP. Did you notice that the icon isn't have rounded corners anymore? Let me tell you about how ICANN's work on both IOS and Mac OS basically the user in their face guidelines which are provided for us by Apple recommending us to applaud square graphics for the icons without corners. The reason behind this is that the mobile operating system creates a mask with a corner reviews for those icons. On the other hand, the Mac operating system doesn't do this. That's why we see are a graphics here without rounded corners. Don't worry. I already have a solution for that. Just go to the deck, stop and open the resources for their inside that folder. Open the APP icons Walder as well. There you will find a special folder Gold Back Icon. Let's open it and take a quick look at the different sizes off icons with rounded corners. Our goal is to add these especially prepared icons toe the assets library. I would highly recommend you to switch to the list more from the icon mode in the preview window, as I show you, then open the X Court project and select the icon assets further inside their sets library . After that, we need to scroll them to the bottom of the window in order to find the new Mac icons that exclude created for us. When they brought this slot machine, I bet Abdo Mack with the Mack batteries, and here we are. You can check out the assets fire names and notice that there are variants off the icon set every icon size has both Benex Normal and two X retina resolutions as well. Our goal is to drag and drop each mayor off. I concepts from the preview window toe the slots accordingly to its size. Follow me carefully and do what I do precisely. First, we start with the 16 point icons, then with the 32 wide icons Next drag and drop the 128 wide icons following with the 256 wide icons. Finally, we finish with the big 512 point icon Variants or so job it's timeto build around the mecca again, just a final deep for you. After slot machine has lunch, you can check out its new icon on the dock as well as I show you. It has got the rounded corners. How cool is that now? Navigate to its menu are and open the APP info window by selecting the about menu item. To be honest, I am quite speechless that you managed to develop this outstanding implication. Congratulations. By now, the slot machine app should look like a native Mac OS app by law, so running on IOS devices as you can see now, it's incredible simple to start building a native makeup from your current IPAD app. It's not. Batteries are slot machine game shares, the same project and so school. So that's why we called efficiently Convert this, I bet Domack Uh, regardless, that slot machine main project is finished. I still have something special for you. In the next lesson. I hope that you are eager to figure out what's next in the following lecture. See you at the next class. 14. Let's create an amazing Sticker Pack without a single line of code in Xcode: in this bonus lecture, we are going to create some coaches thinkers for the slot machine game. That's the care. Back is a messaging extension that lets people share content with friends without typing or using emerges. Sanding stickers is an engaging way for us to express ourselves in the messages app. Without further ado, let's create a new sticker back without writing a single line off court. First, select the main a slot machine project on the Project Navigator. It must be highlighted. Then, at the very bottom of the project panel, click on the plus button and add a new target toe this app. They have to choose a template in the new options in, though in the search field, enter sticker and make sure that you choose the speaker back extension option. Then click on the next button for the product name. Enter slot machine sniggers, then click on the finish button. After that, let's activate the Steiger Shihm. Now we need to rename that, displaying him the lead. The sticker word from the text field slot machine should be the name of the sticker extension displayed in the Apple Messages application. Now you've USC and you would are get on the project. One l. Besides that you should see I knew for their called slot machines thinkers in the Project Navigator as well. This is the place where we are going to create this thicker pack. Unfold the stickers folder and click Wanders three girls has since library. Then in their sets library select the I Message Icon folder, which is empty. Currently, the next step is go to the deck, stop and open. The resource is for there. Inside that open the APP Icons folder as well. You will find a sticker icon for their inside this folder that are all of the different icons that we need. We had for dusty care back. There are not only square but rectangle icons that are required by the messages have in our US Now switch from icon more to list more in the preview. In, though, that's a drag and drop the icons to its container. Be careful now, because exclude requires us at the right icon to its right container. Each time, you really need to read the finance carefully than drag and drop the icon to its container . Fortunately, Didac scripted fire names. I really have for guidance for you. I am sure that you will find this is a time consuming process as I do, too. Nice job. So far, so good. After finishing with creating the I message icons, we are going to have all of the design graphics to the stick out back. Having said that, select the empty sticker back folder in their sense library, then go back to the resource is further on the deck. Stop and open this. The guests water inside it. As you can see, each Steiger graphics has a transparent background and the rounded corners. How cool is that now? Select all of the P and G if ice and drag and drop them into the sticker backs container area as I show you excellent job. You might be interested in how to customize the appearance off this thing. Gary Extension. In order to do that, make the inspector spun out to be reasonable and select the Attributes Inspector menu on this panel, you can set how many columns you want to display in the messages. There are options for 23 or four columns. I find that re stickers on a row are fine and guess what we have just created on outstanding sticker back extension for the slot machine game. It's time to test the stickers in a simulator or on a real device. Make sure that slot machines thinkers is the active shame on the toolbar and run it since he chose to run the stickers. Therefore, X court were lunch of the messages instead of the eye. Recep. I am sure that you know how to use the messages up. You only need to find a new stickers extension. I can't be the shadowy graphics in a capsule shape. By clicking on this icon, you can launch the I message accession. After lunching this extension, you can finally set and receive these thinkers from one test user toe. The other test user. Let's play video a little bit. Shelvey. We can even switch beat being the true test users in the messages and send slot machines thinkers to each other. The slot machines thinkers have a quiet, sleek design, isn't it? I am quite sure that people will love to send these thinkers to each other. How fantastic is that? I bet you have fun playing with these sneakers, just like myself. I hope that you enjoy this course so far, and I can confidently tell you that more projects are coming. Just one more thing. I would appreciate it so much if you could take the time to give me a five star rating or even better, if you could share your learning experience with others to dance by writing a health. Your review about this course this way You not only motivate me to publish more outstanding projects to discourse, but at the same time you have others to dance to be informed about this excellent learning material as well. Moreover, I would be glad to read your success stories, too. Thank you.