Hello and welcome to the first video in this tic tac toe, Coco's two dx, c++ series. In this video, we'll be looking at the initial project setup. So first of all, I want to get a few prerequisites out of the way you got, I would say, you definitely need to make sure you know c++, we're not gonna be teaching c++ in here, there'll be certain basic c++ functionality that we won't even be talking about. We'll just be coding it costs to the x, if you know Coco's to the actual cost today, that will greatly help but we will explain as much as we can. So even if you don't know cocotte, this is still a great course for you. Even if you're an expert, you still know for our positive that you still learn quite a lot in this particular course, where it's to do with multiple resolutions supporting multiple devices, UI design, there's quite a lot This series.
Also, just make sure you've got costs to actually set up. We've got separate videos covering that which is all free. And there will be links provided to all of that. Once you got close to the x, fantastic, make sure you generate your project. And again, we will provide all of the video link for that and they will be free. Then finally, make sure you've integrated Coco's helper, which is our very own open source framework.
And that is obviously free to you because it's open source, and he allows you to integrate other frameworks like Django AdMob, Game Center, all of that good stuff really, really easily just using a few lines of code. So once you've done that, you've got your set up, you've got your beautiful project, all created. I've got my sonar Coco's helper set up. First thing I would say do is go to the GitHub page for the tic tac toe. There will be link to this are going to go to c++ go to Project Setup, go to resources. And we've provided all the different images to make this Tic Tac Toe game really shine.
They're all royalty free. So he used them in your future games, as much as you want to make as much money as you want out of it, and we will take nothing from it, which is obviously fantastic for you. So if you just download all of these images, put it within the resolution folder, the res folder should be added as a reference that we should update automatically. Another thing I want to say is, even though I'm coding this on a Mac, on Xcode, the process is the same whether you're doing it for Android, or if you're doing it for Windows or if you're doing it on Windows or on Ubuntu. Once you actually got Coco's to dx set up with Coco's helper integrated, the process is exactly the same that code is exactly the same because Coco's two dx is a cross platform game engine. So now what you want to do is go to your project, go to general, scroll down for the device orientation, and a D flat landscape and select portrait and upside down portrayed as a bare minimum, but you can have the functionality to be able to rotate 180 degrees because this is the way our UI has been designed for portrait.
So once you've done that, just click Run make sure it's all working. So it's always good to make sure your project still working when you do changes. So that successfully build and it should be running in this anytime now. So okay, that's run fantastic. I'm actually going to do is just quit the simulator run it again, just to make sure that simulator is the Okay, no good in terms of the size. So the simulator is all loading and just waiting for this now.
And I look fantastic, which is really cool. So what we're going to do is what we could even do, I'm going to change the hardware to an iPhone five. And the main reason for that is I'll be able to form a theme without having to use some sort of zoom scale factor. So yeah, that looks fantastic. Let's just confirm is still working on positive that it is. So it should load up any moment now.
While actually loads we can actually be on to the next Step, and that is, if we go to our app delegate dot cpp, we just need to do a few changes in here. Coco's to dx, by default has some sort of default resolutions, basically design resolution, we've created our own set of design resolutions, which support pretty much every iOS and Android device, and they're really easy to use. So if you get rid of all of this, let me see if it's done. So during, if you put hash, if defined, underscore is underscore land, your hash, and if and what we're checking here is in bash else, is if we define landscape I'm going to put hash define is underscore landscape. For the common design, you might be wondering, okay, why are we even implementing this if we're going to be commenting In the ad, especially considering this project he portrayed, it is because other projects are the game that you create, that's working, which is fantastic.
That's not looking quite so. I'm sure that will fix itself. So okay, if that are the projects that you create won't always be portrait, they will be landscape, we want to create this project as adaptable as possible. So once you've done that, inside of this, you're the static costs today. So we're accessing the cocoa studio namespace, getting the size object that I create on co designers moosh resolution, size equals to the current kernel size. And for the landscape choice is 1156 by 768.
These are values that we tried tested on it experimented with, even with games there are out on the Apple App Store and the Google Play Store. So we know the valley works very, very well. And for the portrayed, it simply reverses. So it's 768 by 1136. Now what you want to do, if you scroll down, keep scrolling down to the application did finish launching and scroll down some more. And what we want to do is actually, we actually want to go all the way to the top and include sewn off frameworks dot h header, which is part of our Coco's helper, that's the only header you need include and handle everything else for you.
So if we scroll down now, anywhere really after here, what we're going to do is To set up Coco's helper you may have already done this if you have fantastic you haven't just do iOS commerce set up for Android the process, you don't need a method like this and the videos covering the exact setup process for Android as well which we will provide. Again, all of which will be for free. So if you scroll down, instead of having to do all of these checks now, for the design resolution, all we have to do, we can get rid of all of this. We can replace this all with one line of code which is fantastic. And this is going to be GL view, set design resolution. And the width is the design resolution size dot width, which is what we created up top design resolution size dot height for the resolution policy report resolution mutia policy, colon colon, no border.
So there's a few different resolution policies. No border is our favorite. And that's the one we recommend. Essentially what that does is it maintain it doesn't stretch the images at all. A prevent any black bars from appearing on the left hand margin, top and bottom with Iraqi zooms in until the entire screen is covered. Sometimes you can get a bit of cropping where certain aspects of the screen on visible but we've created our code, or more specifically, our images and the position in code to be dynamic, and to fit within all the different resolutions.
So we've handled all of that as long as you dynamically position in position and you don't use my numbers, you'll be all good to go which is fantastic. So let's just run this, just confirm what this is looking like and confirm that it is actually still working So it's good to confirm, it's still running. Okay, so it is still running, which is fantastic. So what I'm gonna do now is, instead of saying hello world scene, that's not very, it's not very user friendly. It's not very developer friendly. So we're going to rename that.
So we're going to right click luckily now, just click enter. I'm going to name this slash c dot h. Do the same for hello world scene. We'll be implementing the scene more in a later tutorial. This is just doing the bare bones tiny in this last scene. Ah, we need to replace this with slash scene. And in here, we don't actually need a menu call back anymore.
So I'm going to get rid of this. Save that. And if we go to our cpp file in here, we can get rid of most of the code. So first of all, we need to include the appropriate header file. If we scroll down, we can get rid of literally everything within the init method. Apart from checking if the layer has initialized an MVC path from us returning true.
So if we scroll down and get rid of all of this, we can get rid of this HelloWorld menu close callback method. We've deleted the code from the header. We can rename this to splash screen See, Copy that, paste it here. paste it here. Yeah, and the last thing we want to do is do Sona, cos, so God we need to do include sonar frameworks haitch. So when this do Sona code plus helper colon colon, Game Center, colon colon sign in, you could use other sort of social frameworks like Google Play services, we're just going to be using Game Center.
So if we save that, run our application now. Okay, we have an error. So let's have a look what we got. This is the error. I forgot. If we go to the app delegate dot cpp and if we change the Hello World theme to splash screen, the haitch and we just need to scroll down and instead of creating a HelloWorld theme Create a splash screen.
Now if we run it, it should still getting an error. The create fun is still using the Hello We'll name the splash screen. Now if we run it This should you good to go. Okay build has succeeded. It is now running on our simulator simulator. And this popped up because we've integrated Game Center.
Like I said, there will be videos in the description covering all of this good stuff. I won't actually sign in now I will sign in afterwards. But you'll be able to use that to unlock achievements and track progress, which is fantastic. The only last thing I'm going to do in this video is change the hash If God's to a hash pragma once, this is just a nicer way of doing things, just confirm it's still working. Okay, yeah, it's built successfully. And now let's see if it runs on a simulator successfully on hopefully well, fantastic.
It does. So that's it for the initial project setup. Thanks for watching. there will be links provided to everything that we've mentioned. There'll be links, obviously to source code, so feel free to check that out. If you have any questions, feel free to post them on my education platform, sonar learning.co.uk.
And as usual, thanks for watching and I hope you have a great day.