CI for Unity Games Using TeamCity

[Music] hi everyone welcome to my session i'm going to be talking today about building unity games using teamcity so let's get started first of all i'm going to create a new project in unity and i'm going to store this in a workspace i've created in perforce so over in p4v i have a depot called unity games and a workspace under my user directory called unity games also so if i jump back to unity hub i can create a new project and for this i'm going to call this game my super awesome game i'm going to save this in the unity games folder and i'm actually going to i'm going to create this from a an existing template so i'm going to select the 2d platformer micro game and click create this will go ahead and create a new project it will resolve all the packages bring those in and create the project for us okay so now the game has been created in unity so we can let me maximize this and i'll also close the tutorial section on the right here and expand the canvas now this game comes with a sample scene which i can expand here and we can select one of the views so from the player view and if you're not familiar with this sample game in unity essentially you have a player that can go along this this environment and collect these tokens which are these yellow or gold uh diamond shaped tokens and we can preview what this game looks like directly inside of unity by clicking the play button up here and then we can just run through the game you can see you can collect these tokens and avoid the enemies so quite quite a simple game were quite quite interesting so one of the first things i want to do is add this game into perforce i want to store this code because we then want to set up the project inside of team city so to add the project perforce i go to the edit menu project settings and under here i can select version control and we'll change the mode over to perforce this is one of the built-in integrations offered in unity and i'm going to enter my credentials so my username for perforce my password and the workspace which will be unity games and the server and that's where perforce is currently running so i click the connect button and that connected fine so we'll close that and on the window menu i can go to asset management version control to bring up the version control menu and i'll add this as a tab down here just so it's easily accessible and if we expand that we can see all of the files that will be added if i were if i was to check this into source control so i can actually go ahead and click submit and i'll call this my initial commit and that's submitted successfully and if i go over to p4v i can go to depot click refresh and we can see the super awesome game now shows up in perforce one of the things i want to do though is in order for team city to detect that this is a unity project there are a couple more files that need to be checked in so i'm actually going to inside of the p4v i'm going to add the whole super awesome game folder so i'm going to mark that for add and i've already defined a global p4 ignore file so we're not worrying about checking any of either library files any of the packages the temp folder that will just take up extra space on the server so you can see all of the ignored files here so i click ok and there are also some files with wild cards which will exclude as well and then if i go over to the depot folder again click refresh okay so if i click submit i can call this my initial commit again click submit okay so now we have the entire project checked into perforce and i can refresh we can see all of the required files for this game and i stored on perforce and one of the next things i want to do is in order for team city to trigger a build of this game uh i want to create a c-sharp class file that will define the two types of builds i want to create the first one will be a mac os build of this game and the second one will be a webgl version of the game which i can play inside the web browser in order to do that what i can do is go to the assets menu and open this c-sharp project and this will cause the rider ide to be opened i have this installed on my machine and this will open up the unity project inside of rider and we'll just wait for that to load okay so the project has opened up inside of rider and in the folder structure here we can see there is an editor folder which has an existing class file c class file already in there so i can right click on this folder and go to add a new class and i'm going to call this my game builder class and it'll go ahead and create that new c-sharp file and i'm going to actually paste in some code i prepared earlier and essentially what this is doing is we have a class called game builder and it contains two methods one called perform mac os build and the other called perform webgl build and what these do the mac os one if we look at this one first we define which scenes we want to include in the build i've also defined the output path that's going to generate an application called super awesome game which exists under the build mac os folder i've also defined the target as being a standalone osx with standalone mac os game and then down here the build player takes those options and generates a build based on those configurations and then further down if we look at the webgl build it is a very similar thing it takes the list of or the array of scenes we define a output path which is build slash webgl i've defined the target as webgl as well and it proceeds with the build of the game and also if you look there is a attribute tagged onto each of these methods which adds a menu item inside of the unity ui so we've added menu items for both of these methods which means both of these methods can be called directly inside of unity so if i jump back to the unity ide we can see that there is a new build menu and i can build a mac os version of the game or a webgl version of the game just through those new menu options at the top of the screen but we want to run this build inside of team city so in order to do that i want to first of all check in my latest changes because we can see that unity has detected that new game builder class so i can right click on here and submit those changes and i'll just say i've added the game builder class and click submit and now if i jump over to team city i i've got team city running on my local machine here this is my local host version of team city i have one project in here at the moment just called hello world i'm not going to go into that one today i'm going to create a completely new project for this game and in order to do that i click on the new project button in the upper right corner and the nice thing with team city if you just type in the url it will figure out how to connect so if i type in the the repository url which will be perforce and then the host name or ip address where perforce is running and you'll be under depot and it'll be called super awesome game and i authenticate again and click proceed and this will connect to perforce and we can see it's picked up the repository so i can just change the name to super awesome game and when you create a new project in team city it also creates a new build configuration and the build configuration uh could be for building a mac os game it could be for building a webgl game and the build configuration contains one or more build steps uh which i'll show shortly but for this first build configuration i'm going to rename this because i want this to be for building my mac os version of the game so i've changed the name and click proceed and team city has auto detection built in for detecting the types of build steps you might need based on the code that is in inside of the repository so it scans this repository in perforce and it's detected that it's a unity game and because i have the unity plug-in installed in team city it suggested the unity build step and you can tell which plugins you've got installed if you go to the administration section and go to the plugins area you can see a list of all of the plugins that are installed and you can see unity support listed here and this is a jet brains developed plug-in if you want to install this on your own team city server if you just head over to plugins.jetbrains.com and search for unity support you can then download that zip file and upload it inside of the team city uh plugins area so jumping back to my my super awesome game we can see if i jump to the build configuration for building the mac os app i can start to edit the configuration settings now when this build is running it's going to be produced in an artifact and that artifact is going to be the built version of the mac os game so it's going to be a dot app file and i need to tell team city that i want to zip up the contents of the folder where the mac os app resides and store that zip as an artifact inside of team city so in the build configuration settings i've scrolled down to the artifact paths and i'm telling teamcity to grab the contents of the mac os folder and zip that up into game mac os dot zip and that will be stored as an artifact so we can download it or use it in in subsequent build configurations so i'll save that change and then the next thing i want to do is add a build step because we need to tell team city what it needs to do in order to run the build you can either do the auto detection or let me just go ahead and add the unity step manually and there are only a couple things i need to define on here first of all i need to tell it which method to execute inside of my game builder class so all i need to do for that is specify the class name which is game builder and then reference the method name inside of my game builder class so i can just copy the before mac os build method and paste that in there don't any brackets just do game builder dot perform mac os build the other thing i want to do as well under the command line arguments in order for team city to see the output from the unity cli i just do log file and a dash and we'll save those changes and then under the triggers team city by default as a vcs trigger i want to delete this because i'll show you shortly i'm going to create a build chain or a build pipeline so i'm going to be linking several build configurations together and i want to have just one vcs trigger on the final build configuration in my build chain because the way city works is um if you define a vcs trigger at the end of the build chain it will automatically trigger all of its dependent build configurations based on what the changes are or whether anything can be reused so i'll delete this default vcs trigger so now we've got the one build configuration for building the mac os version of the application and so i'll go ahead and create a second version of sorry a second build configuration so if i jump back up to my project i can click on the create build configuration button i'm going to choose the manual option because we already have a vcs route defined at the project level and i'm going to call this new build configuration build webgl and click create and i can choose to attach an existing vcs route so you can see it's listed the perforce repository that's defined on the root project and again it's going to auto detect the build steps you can either wait for that or click cancel and you can just add the build steps manually which i'm going to do now so i'm going to choose unity again and this time i'm going to do game builder and i'm going to reference the webgl build method and again the additional command line argument for log file and then jump into the general settings of the build configuration i need to define the artifact paths again so i can just add in the location of the webgl game which will be under the build folder in a subfolder called webgl i'm going to grab the contents of that folder and add it to a zip file called game webgl.zip okay so we've now got two build configurations this is going to actually generate our our builds so rather than developers running the builds on the individual machines they can check in their changes and team city will automatically build the game and also store the artifacts for future reference and that's quite useful if you want to maybe replicate a issue in an older version of the game or just share builds with your with your team the final thing i want to do is deploy a webgl version of a game to an external service so i have a s3 bucket that's set up as a website and i want to copy my webgl files all the way over to s3 so the last build configuration i'm going to create is for the deployment of the webgl game so i'm going to call this the deploy webgl and because this is deploying artifacts i'm going to choose the deployment build configuration type okay and under here i can go ahead and add some of the necessary configurations the first thing i'll do is add a build step and this is going to execute the aws cli to copy the the webgl files the the index page and all of the assets for the game in order to run i will copy all of that over to the s3 bucket so i have the aws cli installed on my build agents that are used by team city so i can just go ahead and add a command line build step and i can copy in some steps i prepared earlier so i've got three items inside of this custom script i've got the first one which will sync the contents of the game folder which i will add as a dependency shortly and it will sync the contents of that folder over to the s3 bucket defined here the second entry will actually remove the files that have a gzip extension because i want to or rather i need to define a content encoding type on the gzip files and this ensures that when the website that's been rendered on the s3 bucket is actually passing down the correct content encoding types for the gzip files so i'll go ahead and save that and one of the next things i need to do is define the vcs root again so let me attach a vcs route and i can just choose the project vcs route i also want to define a trigger and i'll choose the vcs triggers there there are different triggers you can choose from so if you want to do a maybe a nightly scheduled build you can do a scheduled trigger i'm just going to choose a vcs trigger so whenever a change is detected in perforce teamcity will detect those changes and automatically run a new build the next thing i want to do is create my build chain and this is also referred to as a build pipeline and in order to do or in order to create that build chain you go to the dependencies section of a build configuration and you define its dependencies so what this build configuration is dependent upon and to define the build chain i have the snapshot dependencies so you can see i've got my super awesome game here and i'm going to choose the build mac os and the build webgl build configurations and that creates the build chain which can be visualized by clicking on the build chain link here and because the mac os build and the webgl build have no dependency on each other team city automatically figures out that those build those builds can actually run in parallel so rather than waiting for the mac os build to finish before the webgl build starts those can be run in parallel and that will be handled automatically by team city and then we've got our final build configuration here that deploys the webgl game and that depends on the both of these but it's going to wait until the webgl build is ready before it then deploys it to the s3 bucket and the last thing i want to do is define the artefact dependencies because in order to publish the webgl game this build configuration needs to have a copy of the zip file that was created under that build configuration so to do that i need to define the build configuration i'm grabbing an artifact from so i'm going to choose the build webgl build configuration i'm getting artifacts from a build in the same chain and the artifact rules i'm going to define the name of the webgl zip file and i'm going to automatically extract that zip file into the game folder and that game folder is what we're syncing to the s3 bucket using the aws s3 commands so i'll click save on that and then if we jump back up to the projects we can see we've got my super awesome game i've got my three build configurations and if i click the deploy button this will automatically run the mac os build the webgl build and once those are both finished that will then deploy the game the webgl game to s3 so we'll wait for this to finish um it will take uh quite a few minutes for the first build um but we'll come back shortly when this is finished okay so we've got the first version of the game built i manually triggered this in the team city ui and let me show you what's actually been produced and recap what we've done so under the game because the build has now been run we can go to the build chains tab and see our first build chain we can see that all three build configurations were successful indicated by the the green check mark we can also see which build agent each of the builds was executed on and if i go back to the project itself on the right hand side of the screen you can see the artifact icons and that indicates that there's an artifact associated with this particular build for the mac os version of the game if i download this zip i'll just save this onto my desktop and if we open up this game this is what the experience looks like on a desktop so we've got the player you can see the tokens that can be collected but it'd be good to make this game a bit more interesting so what i'm thinking of doing is actually changing all of the tokens that we see so all of these diamond shaped tokens that you can collect i'm thinking of changing those for uh team city tokens so let me close this game and i'll we'll go back to the unity interface now i've already created a asset or a sprite that will be used for the team city token so if i go to my png image i prepared earlier we can see i've got 15 versions of the team city logo that i've added into a single png file and each of these team city logos has a gradually increasing in size flash or just a random graphic just so i can use this for the purposes of an animation so you can see it gradually increases in size and then decreases and this will be looped inside of unity in order to add this sprite inside of unity if i go back to the project and go to the sprites folder i'm going to add the image in there i can do this by dragging and dropping the image over and we can see down here we've got the team city token image now in order to configure this sprite first of all i need to configure a 2d sprite editor in this project so under the window menu if i go to package manager what we can do is browse the available packages and choose their 2d sprite editor so if we just to choose 2d sprite install that and that will enable the editor for this project okay so the 2d sprite editor has been installed and if i go back and click on my team city token png image again on the settings for this sprite rather than it being a single image i want to choose multiple because this png contains multiple sprites i can then click on the sprite editor button and this will launch the sprite editor and now we need to tell unity what the different boundaries are for each of the images inside of this sprite so i'm going to choose automatic detection and then click the slice button and you can see it's added borders around each of the each of the sprites so if i click on apply that now creates our that gives us our animation that we can use inside of the the various tokens in the game and if you click on the expand icon here you can see the different frames inside of this sprite and in order to apply this to my game what i want to do is in the hierarchy if i go to tokens and if i select one of the tokens you can change its properties you can change the sprite that's being used so i'm going to select all of my tokens and under the sprite here we can select the initial sprite that is shown and i'm going to search for my team city token and just choose the very first frame now this is quite a large token in comparison to what was there before so let me scale this down to 0.5 on both the x and the y axis and then the next thing to do is to set up the animation and in order to do that we can go down to the idle animation on the right hand side here and you can define all of the different frames that will be used for this animation so i have a total of 15 frames so i'm going to define 15 here hit enter and that creates the the extra elements now i'm not expert in unity so i'm not sure if this is the quickest way of doing it but if i just drag and drop the uh the different frames from the uh from the project here over to the inspector that allows me to define the animations let me just select the tokens again and i can drag and drop the sprites i want to use okay so now we've defined all of the different elements for the animation so i can go ahead and save that and under the version control section we can see that there are a few modified files we can also see uh the scene has been updated we can see the teamcitytoken.png file that i added into this project so now that i've saved the changes i can right click and submit those changes and i'm going to say i've changed the tokens and then click submit and if we go back to the team city user interface after a few seconds we will see a pending change detected by team city and we can see that shows up here and we can actually see all of the commits that have been detected and now both the mac os and the webgl build is running so if we click on the link here this will actually take us to the run in build and we can preview the log file as the build is running so if we go to the build log tab and this is a nice rich build log it groups all of the parts of the log by the different sections if you have multiple build steps you have multiple areas of the build log that you can expand and collapse and we can monitor all of the different steps if we wanted to under the changes tab we can see the full list of changes if i want to see which files were changed i can click on that and see the changes if there are file types that you are maybe text based and you want to compare them you can actually click on the files and see a a side-by-side comparison for this one it's not so useful but that capability is there if you want to compare the before and after state of a particular file so we can see if we jump back to the project screen we've got the mac os build that has completed successfully the webgl build that's completed successfully and i've also deployed the webgl version of the game so first of all let's download the new version of the game so if i go to artifacts and let me save this new version of the game again i'll save that to my desktop and we'll load up version two of this game and we need to do this twice because it's not a verified game and now when we jump back the game is much more interesting because we've now got team city tokens that we can collect rather than boring diamond shape tokens so this kind of shows how cool team city is how quick it is to configure a unity game and how you can make a quick change inside of the the unity editor obviously i'm not a gaming expert but this just kind of shows the uh the flexibility that you have when you have something like team city to automate your builds and then lastly we've got the webgl version of the game which has been published to my s3 bucket which is running as a website so if i navigate to that game in the browser we get the exact same experience only inside of my browser instead and i can go ahead and collect more team city tokens or i can die because i'm not very good at gaming so that's how you can build games inside of team city using unity and perforce i hope you find this session interesting feel free to ask any questions and be happy to help thank you [Music] you

Channel: JetBrainsTV

Views: 238

Keywords: JetBrains, software development, developer tools, programming, developer

Id: Sh_BRCw7prc

Length: 31min 8sec (1868 seconds)

Published: Mon Dec 13 2021