Create your first game using Unity and C# - Part 1 Getting your environment set up and importing some art.
Tags: unity3d, gamedev, csharp, beginners
Published: 2020-02-17 01:59:21

<h2><img class="aligncenter" src="https://unity.com/logo-unity-web.png" alt="Image result for unity" /></h2>
<h2></h2>
<h2>Creating your first game in Unity and C#</h2>
This series of articles will guide you through the steps to create your first game using the Unity engine and C#. Throughout the course of this article we will be focusing mainly on the Unity engine.  In order to get this thing to work though, we are going to need to write a good deal of C# code. I am approaching this article with the idea that users will have basic programming knowledge but are new to the Unity platform.

Because learning Unity is such a big task, we will not be covering the basic parts of computer programming in this article.  I will do my best to provide links to those concepts at a later date! For this tutorial we are going to work with a 2D project to make the early steps of learning the engine a little less complicated.

By the end of this module you will have learned about:
<ol>
 	<li>How to create a 2D project</li>
 	<li>The main screens in the Unity editor that you will interface with.</li>
 	<li>How to add art / graphics to your game.</li>
 	<li>How to parse a sprite &lt;something&gt;</li>
 	<li>How to add it to an object that represents a player character in your game.</li>
 	<li>how to apply physics to the player object.</li>
 	<li>how to add collision the player object.</li>
</ol>
<h2>Get the tools you need and install them</h2>
Here are links to all of the software you will need to create this project. I will not be detailing the install process but it is very straight forward.

<a href="https://unity3d.com/get-unity/download">Download Unity </a>(main download page )
<ul>
 	<li><a href="https://public-cdn.cloud.unity3d.com/hub/nuo/UnityHubSetup.exe?button=onboarding-download-btn-windows">Direct link to the free Unity Download </a>(if you just want to skip right to the free one)</li>
</ul>
<a href="https://visualstudio.microsoft.com/downloads/">Download Visual Studio 2019</a>

<a href="https://opengameart.org/">Download some art to use in your project.</a>

<a href="https://opengameart.org/sites/default/files/gfx_3.zip">(Here is a direct link to the art that I am using)</a>

&nbsp;

<strong>Install Unity and Visual studio and unzip / extract the graphics folder that you have chosen for art.</strong>

When installing Visual Studio be sure that you install the Unity tools that are part of the installation process.

( if you don't do this then later Visual studio intellisense won't know anything about the Unity package. )

<a href="https://docs.microsoft.com/en-us/visualstudio/cross-platform/media/vstu_unity-workload.png?view=vs-2019"><img class="alignnone" src="https://docs.microsoft.com/en-us/visualstudio/cross-platform/media/vstu_unity-workload.png?view=vs-2019" alt="Image result for visual studio installer unity tools" width="446" height="249" /></a>

&nbsp;
<h2>Create a new project</h2>
<strong>Open Unity and create a  new 2D project. (File &gt; new project &gt; )</strong>

<a href="https://www.thedevelopingdeveloper.net/?attachment_id=960"><img class="hoverZoomLink alignleft wp-image-960" src="https://www.thedevelopingdeveloper.net/wp-content/uploads/2020/02/Snag_698d58d-300x296.png" alt="Unity interface New project " width="202" height="199" /></a>

&nbsp;

&nbsp;

&nbsp;

&nbsp;

&nbsp;

<strong>Select the 2D template.</strong>

<a href="https://www.thedevelopingdeveloper.net/?attachment_id=961"><img class="hoverZoomLink alignleft wp-image-961 size-medium" src="https://www.thedevelopingdeveloper.net/wp-content/uploads/2020/02/Snag_699f536-300x174.png" alt="Unity interface the 2d template" width="300" height="174" /></a>

&nbsp;

&nbsp;

&nbsp;

&nbsp;

&nbsp;

<strong>Set the external editor in Unity to Visual Studio. (Edit &gt; Preferences &gt; External Tools &gt; and then set this to Visual Studio 2019 )</strong>

<a href="https://www.thedevelopingdeveloper.net/2020/02/16/create-your-first-game-using-unity-and-c-part-1-getting-your-environment-set-up-and-importing-some-art/snag_6c38d09/" rel="attachment wp-att-968"><img class="wp-image-968 alignleft" src="https://www.thedevelopingdeveloper.net/wp-content/uploads/2020/02/Snag_6c38d09.png" alt="Setting your external editor in unity" width="522" height="240" /></a>

&nbsp;

&nbsp;
<h2></h2>
<h2>Getting to know the Unity Interface</h2>
Now that you have a new project created, and are looking at the unity interface I bet you are thinking... "WOW that's a lot of stuff to look at!"

Don't worry that is a perfectly normal reaction! Let's walk through the interface and talk about each piece. There is a ton of information to learn here, so we will just focus on the stuff we need for now.

<a href="https://www.thedevelopingdeveloper.net/2020/02/16/create-your-first-game-using-unity-and-c-part-1-getting-your-environment-set-up-and-importing-some-art/2020-02-16_11-38-02/" rel="attachment wp-att-999"><img class=" hoverZoomLink aligncenter wp-image-999 " src="https://www.thedevelopingdeveloper.net/wp-content/uploads/2020/02/2020-02-16_11-38-02.jpg" alt="The main Unity Windows" width="1233" height="679" /></a>
<ol>
 	<li>The Scene
The scene window is a graphical representation of the game and all of the objects that you have set up to interact with. You can think of this kind of like the stage that actors use when performing a play. Everything you create that you want to interact with in your game, will have some sort of representation in the scene. You will eventually be placing everything in this area. Every object that is part of the game from your light source , to audio, all the way to blocks that represent the boundaries and terrain of your game will be represented graphically in the scene.</li>
</ol>
2. Hierarchy
<p style="padding-left: 40px;">The easiest way to understand the hierarchy is to think of it as a list of all of the things in your scene. While you can point and click to grab and examine items in your scene. At some point in a large game, you will have tons of objects in the scene and having a clean detailed interface to select from will invaluable. This is where the hierarchy comes in.</p>
 3. Project
<p style="padding-left: 40px;">The Project window displays all of the files related to your Project. It is the main way you can navigate and find Assets and other Project files in your application. This window is similar to the solution explorer in Visual Studio. I'm making this up off the cuff but essentially you have assets which are things like images, code files, config files and the folders that contain them. Pretty much everything that you build inside of the Unity Environment can be called an Object , and objects are contained in assets.</p>
4. Inspector
<p style="padding-left: 40px;">The inspector allows you to examine and modify individual objects in Unity. It is similar to the properties window in Visual Studio.  if we keep to the same logic above , when we modify an object in Unity its really just doing the work of finding the right asset and modifying it for you.</p>
5. Console
<p style="padding-left: 40px;">The Console is where you get information about what is happening in your program. You can use a statement like "Debug.Log("hello world"); to write information directly to the console.</p>
&nbsp;
<h2>Create folders to store your work</h2>
Now that you know a little about the Unity interface and have created a new 2D project. It' time to do a few things that will help us keep the project organized and orderly.

In this step we will create a series of folders that we will use to store assets for the game.

<strong>Go to your project  window right click on assets &gt; create folder</strong>

Create a new folder for:
<ul>
 	<li>Art</li>
 	<li>Animations</li>
 	<li>Scenes</li>
 	<li>Scripts</li>
 	<li>TilesMaps<img class="wp-image-949 alignleft" style="color: #82868b; font-size: 1rem;" src="https://www.thedevelopingdeveloper.net/wp-content/uploads/2020/02/Snag_5c8ff60.png" alt="initial project screenshot" width="179" height="272" /></li>
</ul>
&nbsp;

&nbsp;

&nbsp;

&nbsp;

&nbsp;

&nbsp;

&nbsp;

This is what your project (above) should look like now.

&nbsp;
<h3><strong>Import a sprite set for your character</strong></h3>
The first thing we need to do here is find the art set that we downloaded on your computer.

Click on the "Art" folder that we created in the assets window and drag and drop the gfx folder from the art files into that the art folder.

This will add all of the art to your project.

Now that we have the art, we are going to tell the editor about our player character.

In the project window:

<strong>Open "Art" and then open the gfx2 folder.</strong>

In the gfx2 folder you will find several image files.

For the most part we will only need to concern ourselves with the one named character. However we do need to make an adjustment to all of the files for this project first.

<strong>Select All of the images and then in the "Inspector window" </strong>

<strong>Find the setting for "Pixels Per Unit" and set it to 16 </strong>

<strong>Then hit the apply button.</strong>

<a href="https://www.thedevelopingdeveloper.net/2020/02/16/create-your-first-game-using-unity-and-c-part-1-getting-your-environment-set-up-and-importing-some-art/snag_6f6a03b/" rel="attachment wp-att-971"><img class="aligncenter wp-image-971" src="https://www.thedevelopingdeveloper.net/wp-content/uploads/2020/02/Snag_6f6a03b.png" alt="Pixels Per Unit" width="489" height="370" /></a>

(note that I have some files that aren't images if you have any of these and you select all of the files you will not get the right view in the inspector. it's no big deal you can just select each file one at a time and make this change to each of them.. it will only give you this option for pictures)

&nbsp;

<strong>Now choose your character image.</strong>

&nbsp;

<img class="aligncenter size-full wp-image-970" src="https://www.thedevelopingdeveloper.net/wp-content/uploads/2020/02/Snag_6f0a087.png" alt="Assets &gt; graphics &gt; character" width="1753" height="470" />

&nbsp;

(This is actually a set of sprites that Unity can interpret as all of the basic data that we need for animation. I'm not going into detail as to how all of this works at the moment, just follow the steps. )

&nbsp;

With the character image selected look to your inspector window and :

<strong>Change the Sprite Mode to multiple</strong>

<strong>Press the "Sprite Editor" button. </strong>

<img class="aligncenter wp-image-976" src="https://www.thedevelopingdeveloper.net/wp-content/uploads/2020/02/2020-02-16_12-31-06-1.jpg" alt="Sprite mode and sprite editor" width="286" height="372" />

&nbsp;

This will open up our sprite editor. Here you will see all of the various facings and animations for the character. Above the pictures you will see that there are a few menus.

&nbsp;

<strong>Select the one labeled "slice"</strong>

<strong>Set the Pixel size to x = 16 and Y = 32 </strong>

&nbsp;

&nbsp;

<a href="https://www.thedevelopingdeveloper.net/2020/02/16/create-your-first-game-using-unity-and-c-part-1-getting-your-environment-set-up-and-importing-some-art/2020-02-16_12-52-06/" rel="attachment wp-att-977"><img class="aligncenter wp-image-977" src="https://www.thedevelopingdeveloper.net/wp-content/uploads/2020/02/2020-02-16_12-52-06.jpg" alt="The Sprite editor" width="432" height="325" /></a>

&nbsp;

Now with your character image selected in the project

<strong>Look back to the inspector &gt; Change the "Filter Mode" to point (no filter) </strong>

<strong>Change the compression to "High Quality"</strong>

<strong>Hit Apply </strong>

<a href="https://www.thedevelopingdeveloper.net/2020/02/16/create-your-first-game-using-unity-and-c-part-1-getting-your-environment-set-up-and-importing-some-art/2020-02-16_12-58-39/" rel="attachment wp-att-978"><img class="aligncenter size-medium wp-image-978 hoverZoomLink" src="https://www.thedevelopingdeveloper.net/wp-content/uploads/2020/02/2020-02-16_12-58-39-227x300.jpg" alt="Import settings" width="227" height="300" /></a>

&nbsp;

<strong>Grab your character from the assets window and drag it into the scene. </strong>

<a href="https://www.thedevelopingdeveloper.net/2020/02/16/create-your-first-game-using-unity-and-c-part-1-getting-your-environment-set-up-and-importing-some-art/2020-02-16_13-07-20/" rel="attachment wp-att-984"><img class="aligncenter size-medium wp-image-984 hoverZoomLink" src="https://www.thedevelopingdeveloper.net/wp-content/uploads/2020/02/2020-02-16_13-07-20-300x120.jpg" alt="Drag character into the scene" width="300" height="120" /></a>

<strong>Then in the hierarchy rename it to "Player" <a href="https://www.thedevelopingdeveloper.net/2020/02/16/create-your-first-game-using-unity-and-c-part-1-getting-your-environment-set-up-and-importing-some-art/2020-02-16_13-08-40/" rel="attachment wp-att-985"><img class="aligncenter size-medium wp-image-985 hoverZoomLink" src="https://www.thedevelopingdeveloper.net/wp-content/uploads/2020/02/2020-02-16_13-08-40-300x137.jpg" alt="Name your new object" width="300" height="137" /></a></strong>

Ok. So we learned how to create a new project , set it up , get some free art,  import a sprite sheet, set up our environment to use Visual Studio, create a "Object" for use in our game and finally put it on the stage (the scene) . I think that is enough for now! If you are still with me follow me on to my next article in this series:
Handling Player movement. (it will be up shortly)
<div class="" data-block="true" data-editor="1nn37" data-offset-key="6rjfd-0-0">
<h3 class="_1mf _1mj" data-offset-key="6rjfd-0-0"><span data-offset-key="6rjfd-0-0">If any of you have made it this far ... do me a favor and leave a comment or sign up to my mailing list so that I can gauge the interest in this type of content. </span></h3>
</div>
<div class="" data-block="true" data-editor="1nn37" data-offset-key="bdkl-0-0"></div>
&nbsp;
<div id="hzImg" style="border: 1px solid #ffffff; line-height: 0; overflow: hidden; padding: 2px; margin: 0px; position: absolute; z-index: 2147483647; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.33) 3px 3px 9px 5px; opacity: 1; top: 1115px; left: 530px; background-color: #ffffff; cursor: pointer; pointer-events: none; display: none;"></div>
<div id="hzImg" style="border: 1px solid #ffffff; line-height: 0; overflow: hidden; padding: 2px; margin: 0px; position: absolute; z-index: 2147483647; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.33) 3px 3px 9px 5px; opacity: 1; top: 1747px; left: 0px; background-color: #ffffff; cursor: pointer; pointer-events: none; display: none;"></div>
<div id="hzImg" style="border: 1px solid #ffffff; line-height: 0; overflow: hidden; padding: 2px; margin: 0px; position: absolute; z-index: 2147483647; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.33) 3px 3px 9px 5px; opacity: 1; top: 3434px; left: 439px; background-color: #ffffff; cursor: pointer; pointer-events: none; display: none;"></div>
<div id="hzImg" style="border: 1px solid #ffffff; line-height: 0; overflow: hidden; padding: 2px; margin: 0px; position: absolute; z-index: 2147483647; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.33) 3px 3px 9px 5px; opacity: 1; top: 3696px; left: 547px; background-color: #ffffff; cursor: pointer; pointer-events: none; display: none;"></div>
<div id="hzImg" style="border: 1px solid #ffffff; line-height: 0; overflow: hidden; padding: 2px; margin: 0px; position: absolute; z-index: 2147483647; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.33) 3px 3px 9px 5px; opacity: 1; top: 982px; left: -6px; background-color: #ffffff; cursor: pointer; pointer-events: none; display: none;"></div>
<div id="hzImg" style="border: 1px solid #ffffff; line-height: 0; overflow: hidden; padding: 2px; margin: 0px; position: absolute; z-index: 2147483647; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.33) 3px 3px 9px 5px; opacity: 1; top: 5159px; left: 543px; background-color: #ffffff; cursor: pointer; pointer-events: none; display: none;"></div>
<div id="hzImg" style="border: 1px solid #ffffff; line-height: 0; overflow: hidden; padding: 2px; margin: 0px; position: absolute; z-index: 2147483647; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.33) 3px 3px 9px 5px; opacity: 1; top: 1395px; left: -6px; background-color: #ffffff; cursor: pointer; pointer-events: none; display: none;"></div>
<img id="hzDownscaled" style="position: absolute; top: -10000px;" /><img id="hzDownscaled" style="position: absolute; top: -10000px;" /><img id="hzDownscaled" style="position: absolute; top: -10000px;" />

<img id="hzDownscaled" style="position: absolute; top: -10000px;" />

<img id="hzDownscaled" style="position: absolute; top: -10000px;" />

<img id="hzDownscaled" style="position: absolute; top: -10000px;" />

<img id="hzDownscaled" style="position: absolute; top: -10000px;" />
<div id="hzImg" style="border: 1px solid #ffffff; line-height: 0; overflow: hidden; padding: 2px; margin: 0px; position: absolute; z-index: 2147483647; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.33) 3px 3px 9px 5px; opacity: 1; top: 6189px; left: 489px; background-color: #ffffff; cursor: pointer; pointer-events: none; display: none;"></div>
<div id="hzImg" style="border: 1px solid #ffffff; line-height: 0; overflow: hidden; padding: 2px; margin: 0px; position: absolute; z-index: 2147483647; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.33) 3px 3px 9px 5px; opacity: 1; top: 6495px; left: 87px; background-color: #ffffff; cursor: pointer; pointer-events: none; display: none;"></div>
<img id="hzDownscaled" style="position: absolute; top: -10000px;" /><img id="hzDownscaled" style="position: absolute; top: -10000px;" />

<img id="hzDownscaled" style="position: absolute; top: -10000px;" /><img id="hzDownscaled" style="position: absolute; top: -10000px;" /><img id="hzDownscaled" style="position: absolute; top: -10000px;" /><img id="hzDownscaled" style="position: absolute; top: -10000px;" />
<div id="hzImg" style="border: 1px solid #ffffff; line-height: 0; overflow: hidden; padding: 2px; margin: 0px; position: absolute; z-index: 2147483647; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.33) 3px 3px 9px 5px; opacity: 1; top: 6727px; left: 0px; background-color: #ffffff; cursor: pointer; pointer-events: none; display: none;"></div>
<img id="hzDownscaled" style="position: absolute; top: -10000px;" /><img id="hzDownscaled" style="position: absolute; top: -10000px;" />

<img id="hzDownscaled" style="position: absolute; top: -10000px;" /><img id="hzDownscaled" style="position: absolute; top: -10000px;" />

<img id="hzDownscaled" style="position: absolute; top: -10000px;" /><img id="hzDownscaled" style="position: absolute; top: -10000px;" />

<img id="hzDownscaled" style="position: absolute; top: -10000px;" /><img id="hzDownscaled" style="position: absolute; top: -10000px;" /><img id="hzDownscaled" style="position: absolute; top: -10000px;" /><img id="hzDownscaled" style="position: absolute; top: -10000px;" />

<img id="hzDownscaled" style="position: absolute; top: -10000px;" /><img id="hzDownscaled" style="position: absolute; top: -10000px;" />
<div id="hzImg" style="border: 1px solid #ffffff; line-height: 0; overflow: hidden; padding: 2px; margin: 0px; position: absolute; z-index: 2147483647; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.33) 3px 3px 9px 5px; opacity: 1; top: 692px; left: -6px; background-color: #ffffff; cursor: pointer; pointer-events: none; display: none;"></div>
<div id="hzImg" style="border: 1px solid #ffffff; line-height: 0; overflow: hidden; padding: 2px; margin: 0px; position: absolute; z-index: 2147483647; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.33) 3px 3px 9px 5px; opacity: 1; top: 2620px; left: -6px; background-color: #ffffff; cursor: pointer; pointer-events: none; display: none;"></div>
<img id="hzDownscaled" style="position: absolute; top: -10000px;" />

<img id="hzDownscaled" style="position: absolute; top: -10000px;" />

<img id="hzDownscaled" style="position: absolute; top: -10000px;" />

<img id="hzDownscaled" style="position: absolute; top: -10000px;" /><img id="hzDownscaled" style="position: absolute; top: -10000px;" />