Game From Scratch C++ Edition Part 1


This part is sadly rather dull, there will be absolutely no coding but it is a necessary evil. In this part we are going to configure your development environment to work with SFML. If you already know all about how to set Visual Studio up, or are working in a different IDE, feel free to skip to the next part.



One thing to be aware of before we start. You will find these instructions vary from what you see in many other tutorials and there is one very good reason for that. Most tutorials configure your IDE settings globally, so the settings you change will effect every project you ever create. Myself, I configure on the project level whenever possible. This has the downside of requiring you to do this configurations again and again ever time you create a new project. However, what it does allow is for anyone that downloads the project to automatically have the correct settings. Also, it seems cleaner to me to only link to libraries when you actually need them. As an upside to this, if you download the project from here, you don’t actually need to do any of this work! ( That said, you should still learn how! )



Alright, assuming you downloaded all the requisite files listed at the end of the last post, lets get started. Warning, this is going to appear longer and a lot more daunting than it really is. I just went into a ton of detail because a small error in this step can lead to a very difficult to discover problem.



First off, fire up Microsoft Visual C++ Express 2010.


Selected the File –> New –> New Project… menu.



The following dialog will appear:






Select “Win32 Console Application”. Fill in the name, in this case Pang ( which will automatically name the Solution the same thing ) and select a Location to save your project in. You can optionally uncheck “Create directory for solution”, which I always do when creating a single project solution file. If you don’t you will end up with a directory structure like C:\Pang\Pang. In the end it doesn’t matter which you choose. Now click the OK button.



Now another dialog will pop-up:






Simply click the Next button ( or Finish ). If you click Next it will lead you to this dialog:





For now, you can leave everything exactly as it is and just click Finish.



There are a few things to be aware of here. First is the Application Type: which you basically choose at the first step when you selected to create a Console Application. Ignore it for now. Next are the additional options. If you leave “Empty project” unchecked, which we are going to do, it simply creates a default cpp ( pang.cpp in this case ) with the programs main() defined. Finally the Precompiled header checkbox is quite important, as this causes a file called StdAfx.cpp/StdAfx.h to be created which is the Microsoft way of supporting precompiled headers. We will cover precompiled headers later on, so for now leave it checked. Click the Finish button.



Once that is completed, Visual C++ will set up your project like this:





Now that this is created, we need to set up SFML to work with your newly created Project.




Before we continue there is one more thing to be aware off, Visual Studio created two things here, a Solution and a Project. When working inside the IDE, there is always one solution, but within a solution you can have multiple projects. Recognizing the difference between a project and a solution is very important. In the Solution Explorer, this will illustrate the difference:






The vast majority of configurations changes we make will be on the project level. When I say “Right Click on the Project” this is where I mean for you to click.



Alright, now open up the file we downloaded in the last part. If you do not have a good zip program, or aren’t using Vista/Windows 7 where it is built in, I recommend downloading 7zip. From inside the archive copy the folder SFML-1.6 and paste it in your newly created solution directory. In the end, your directory should look something like this:





Now we need to configure Visual C++ to know where SFML-1.6 is.



Right click on the Project in Solution Explorer and choose “Properties”



In the left hand column, expand Configuration Properties –> C/C++ –> General and on the right in “Additional Include Directories” add “SFML-1.6/Include/” ( without quotes! ). It should look like this:




Now in the same Property Pages dialog, on the left hand side expand

Configuration Properties –> Linker –> General and in “Additional Library Directories” type “SFML-1.6/lib/” (again, no quotes!). Once completed, it should look like this:





Finally, in the same Property Pages dialog, on the left hand side expand

Configuration Properties –> Linker –> Input in the field “Additional Dependencies” at the end of the field before “(%AdditionalDependencies)”



Again, no quotes!.



In my case ( which should be pretty standard for a new install ), the entire value after editing is:





Without any spaces or newlines of course. Once completed, it should look like this:





Finally, we are done with settings, click Apply then OK to close the dialog.

Your project is now 99% configured, only one step remains. When need to compile your project so that it will create the proper debug directories. In Visual C++, simply click this button image_thumb23 or press F5.



Assuming everything went according to plan, you should now see:





If you don’t, something is configured wrong. Retrace these steps and if the error keeps occurring, paste it into the commends of this page and I will see if I can resolve it.



Now I swear we only have one step remaining! In the previous part I got you to download a file called This file contains SFML binaries compiled to work with Visual C++ 2010. Open up the archive and copy the files:

  • sfml-audio-d.dll
  • sfml-graphics-d.dll
  • sfml-main-d.lib
  • sfml-network-d.dll
  • sfml-system-d.dll
  • sfml-window-d.dll

( basically all files ending with –d.dll ) into the debug folder that was generated in your project directory. Your debug folder should now look something like this:





Now, we are done!



If you couldn’t follow along to that, or you get errors, you can download a fully configured solution here. Just download, unzip and double click pang.sln.



Alright, now that we have everything configured and working… on to the next section to write some code!


Back to Introduction Forward to Part 2

blog comments powered by Disqus

Creating a game sprite: Texture mapping Part 2: Creating a UV Map
Home > Art

Creating a game sprite: Texture mapping Part 2: Creating a UV Map

6. September 2013


As I mentioned in the prior tutorial section creating a UVMap is basically like wielding a pair of virtual scissors to cut your 3D object up so it can be smushed flat.  As we saw earlier, the default unwrap map is pretty, subpar:


Default unwrap:



Let’s start cutting things up.  First we will default the wings.  In 3D view, make sure you are in Edit mode and Edge selection, then select the edges at the base of the wing, like so:



Now we want to mark the selected as a seam.  Press CTRL + E to bring up the Edge menu, and select Mark Seam.



Or you could use the button in the Tools panel of 3D View:



Both options do exactly the same thing.  Once the seem is marked it will appear as red:



Now you can see the result of marking a seam.  In 3D view, select all edges ( A ) and take a look at the UV window:



We now have a completely separate collection of UVs ( called a UV island ).  I still wouldn’t want to paint over these UVs yet, so we have a bit more work to do.  In order to be able to flatten the wing even more, lets mark another set of seams, like below:



Now look what happened to the UVs



That is certainly much easier to paint over!  Of course, you could have split the wing top and bottom easy enough but each additional seam makes painting a bit trickier.


Remember the textured view of our jet from the previous tutorial:


Instead of a checkerboard texture on the wing, you just got a white blotch.  Now that we marked the wing seams, look at the result:



MUCH better!  Ultimately our goal is to make the entire jet have a checkered texture like that.  The process is exactly the same, just keep marking seems in the model until the UV layout makes sense.  Let’s repeat the same process on the back wing and then the tail.  If you make a mistake, you can simply Clear Seam on the selected seam.  To completely undo your changes, select all edges and do CTRL+E –> Clear Seam and you are back to default.


I marked the following seams on the back tail and wing:




Resulting in this UV layout:



And in our rendered view:



Next lets cut the jet in half vertically.  Select the continuous loop all the way around the jet, it will meet up with the wing cut:










You want a continous edge around the entire jet that will cut it between top and bottom.  Once selected, mark the seam.



Now mark the area surrounding the air intake:



This however results in an unwanted seam, shown below marked in green:



Select those edges and then select Clear Seam.


Now we have:



And the following UV layout:



Keep in mind, Blender automatically sets the positions, so yours might be a bit different layout wise.


Finally, lets seperate the cockpit away from the fusalage:



The cockpit:



And finally, the tail:



And now our fully UV mapped model:


As you can see, the texture pattern flows pretty well over our image.  There are portions where we might get into a bit of trouble but they aren't areas where we are going to need details, so we should be good to go!



Well, that sucked, there has to be an easier way!


Yeah, actually, there is.  Blender has something called a Smart UV Project.  To use it, in 3D View, in edit mode, select all, then press U.  In the resulting menu select Smart UV Project:




Then a dialog will appear:



As I understand it, Smart UV looks at your model and separates UVs based on the angle between shapes.  So for example, since the wing essentially meets the fusalage at 90 degrees, it will easily be split into it’s own UV group.  Play around with the angle limit until you get a grouping you like.  Here is the result at 66 degrees.




Not ideal, but certainly a hell of a lot easier!



We only touched on a very small bit of what you can do with UVmaps.  Just keep in mind, if you add another seam ( and thus generate another Unwrap ), the positions will be reset.  Otherwise you can scale, turn, relocated, etc… UV coordinates to your hearts content.  If you don't want them to be scaled again, you can Pin (p) a UV in place.


Selection Options


You may find that you want to select Polygons from the UV layout screen.  By default it’s setup that what you select in the 3D view will be selected in the UV view, but it’s possible to do the opposite.

You need to click the “Keep UV and edit mode mesh selection in sync” button.



Now making a selection ( such as using the B)ox select mode ) in the UV window:



Will select the corresponding polygons in the 3D view:


Click here for the Next Part


Art ,

blog comments powered by Disqus