Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

14. January 2012

 

 

image

One of the biggest stumbling blocks for people learning to create games is the required mathematics.  A common question people ask is where is the best place to learn, the KhanAcademy is certainly a very good place to start.

 

 

They literally have thousands of video tutorials, over a wide variety of subjects including thousands of math specific tutorials.  Covering the gamut from early grade school up to university level topics.  Best of all it is completely free.  In their own words:

 

The Khan Academy is an organization on a mission. We're a not-for-profit with the goal of changing education for the better by providing a free world-class education to anyone anywhere.

All of the site's resources are available to anyone. It doesn't matter if you are a student, teacher, home-schooler, principal, adult returning to the classroom after 20 years, or a friendly alien just trying to get a leg up in earthly biology. The Khan Academy's materials and resources are available to you completely free of charge.

 

 

Here is an example video on vector dot product.

 



 

 

So, if you are looking for a great place to pick up some math ( or chemistry, SAT, art history… ) skills, the KhanAcademy is a very good place to start.

Cool Thing of the Week

13. January 2012

 

 

 

Sadly SFML only included precompiled binaries for 1.6 and even in that case, they don’t support Visual Studio 2010.  If you need to build SFML 2.0 for use with Visual Studio 2010, use the following step.

 

 

Go to this page and download the SFML 2.0 snapshot.

 

 

It’s a tar.gz file, if using 7zip, it means you will have to extract it twice.  Extract it to a folder somewhere on your hard drive, the results should look like this:

 

image

 

 

 

Now you need CMake.  Download and install it from here.

 

 

One installed, the next step is slightly tricky.  CMake needs to be run with the environment variables for Visual Studio properly set so it can locate your compiler.  This means you need to launch if from the command prompt provided by Visual Studio.  If you are using Visual Studio Express, in the start menu launch the Visual Studio Command Prompt.

 

 

image

 

 

 

Now that you’ve launched the command prompt, change directory to your cmake executable folder.  In my case it was c:\Program Files (x86)\Cmake 2.8\bin.  CD to that directory then run cmake-gui.exe.

 

 

 

image

 

 

 

The CMake GUI will now pop up.  Click “Browse Source” and navigate to the folder you extracted SFML2 to.  Then click “Browse Build” and navigate to where you want it to create all the project files, like I have below.  Once done, click configure.

 

 

 

image

 

 

If the directory you selected  doesn’t exist, the following dialog will appear:

 

 

image

 

 

Simply click Yes.

 

 

Now you are going to be prompted for what kind of project to generate, assuming you are using Visual Studio 2010 Express, select Visual Studio 10 then Finish, as follows:

 

 

 

image

 

 

 

If everything went ok, it will look like this:

 

 

image

 

 

 

The default settings are most likely what you want, now click Generate.  If all things go correctly, your project files will have been generated in the folder you specified in “Where to build the binaries”.  Here is mine:

 

 

 

image

 

 

 

Now simply double-click SFML.sln.

 

 

Visual Studio will load, now all you need to do is select the menu item Build->Build Solution in Visual Studio.

 

 

Voila!  You just built SFML 2.0 using CMake and Visual Studio 2010.  Look for the binary files in the lib folder.  Keep in mind the include and extlib files are required too, and are in the directory you extracted to earlier.

 

 

If that didn’t work for you, you can simply download this version I've compiled.  Keep in mind, SFML 2.0 is under constant development, so this version was only current as of 1/13/2012.  This archive also included the Include folder as well as the extlib folder, which is all you should require to get started with SFML2.

Programming

11. January 2012

 

 

No, you aren’t in a time machine and we didn’t just warp back to 1995. 

 

You may notice that I make use of animated gifs quite often for demonstrating things that require motion, or to illustrate my games in action.  Although the world has mostly left them behind, there are still some advantageous to using animated gifs, they can actually be quite small, work on a ton of environments including iOS ( where Flash obviously won’t ), they are faster for many browsers to load than videos and frankly they embed better.

 

edgeloopslide_thumb

 

Here is one such example animated gif, illustrating the use of Edge sliding in Wings 3D.

 

 

I’ve been asked a couple times how it is I create them, so I figured I would put together this quick tutorial on the subject.  True, it’s not really game development related, but hopefully you will find it useful or at least interesting.

 

 

 

Before getting started, you are going to need a few applications.  These applications are:

 

The GIMP

IrFan View

 

 

The Gimp is doing the heavy lifting, while IrFan is what we use to capture our images in the first place.

 

 

First load up IrFan, open the Options menu and select Capture, like such:

 

image

 

 

Set the capture settings up as follows.  Set it to Foreground Window, so it will only capture the currently focused application.  If you want to capture the entire screen or a sub-rectangle of the screen do it here.  Then under Capture method, set it to Automatic – timer delay and put how often you want to take a screenshot.  Too fast and your computer may have trouble keeping up, too slow you will not capture enough detail.  Finally set to Save captured image as file and pick a directory.  As soon as you press start, it will start taking screenshots.  To stop, you need to focus IrFan again, selections Options->Capture or press C.  This is what it should look like:

 

 

image

 

 

Now, once you’ve clicked start, go do whatever it is you want to capture, it will ding each time it saves an image.  Once done and you’ve turned capturing back off, go to your destination directory and you should have a series of screen captures, like this:

 

image

 

 

Each frame will compose one frame in our animation.  Delete any images you don’t want.  Often there will be a couple captures at the beginning and end that you won’t want as you were getting ready.

 

 

Now that we have our frames, load up The Gimp.

 

Select File->Open as Layers, like such:

image

 

 

Now select all of your images, then click Open ( either shift click each, or CTRL + A ) like such:

image

 

 

Now in the Gimp you will see your layers have been added, in chronological order, like so:

 

image

 

You can now delete frames if you wish, this is your last chance.  Now we are going to turn it into an animated gif.

 

Select File->Save As.  In the dialog that pops up, this part is very imported.  Make sure you specify your name as ending in .gif, like this:

image

 

 

So long as you ended your name with gif, when you press save, this dialog will pop up:

image

 

 

Make sure you have selected “Save as Animation”, then click Export.  Then one more dialog will pop up:

 

image

 

 

The two most important settings are “Loop Forever” and “Delay between frames when unspecified”.  Loop will cause the image created to start over once it stops playing ( or not ).  The delay is the default amount of time each image will be shown for.  At 100ms, we will playback at 10FPS.  Once done, click Save.  This part could take a few moments.

 

 

You will now have an animated gif, like this:

 

AnimatedSample

 

 

This is good, but has a few limitations.  First off, its probably GIGANTIC.  Second, it’s probably bigger ( dimensions ) than you wanted it to be.  Finally, it’s possible you don’t want all pictures shown at the same speed.

 

First, lets make it smaller in physical size, this change will actually help with the file size as well.  In the GIMP, simply select Image->Scale Image… from the menu.  Then the scale image dialog will pop up:

 

image

 

 

Pick your new dimensions and click Scale.

 

 

Now that your image has been scaled, lets make the file size smaller.  In the menu select Filters->Animation->Optimize (For GIF).  GIMP will chug away for a few seconds then create a new image for you ( your old image will still be open too, in a different GIMP window, you can close it if you like ).

 

 

 

In your newly created image, you will notice something interesting in the Layers window:

 

image

 

All of your layers have been renamed to include (100ms) in the name.  If you want an individual frame to display longer, such as making the first frame last for 1 second, right click the layer you want to display longer and select Edit Layer Attributes…  Then edit the name to represent the new time in ms that you want the image to last:

 

image

 

 

Do this for each layer you want to change the duration for.  Now that you are done, save your image like you did before ( specifying a gif extension ).

 

Presto, a new animated GIF

 

AnimatedSample2

 

 

This one however, is 1/3rd the size, at 129KB.

 

 

And that, is how I create animated gifs.

General, Totally Off Topic

10. January 2012

 

 

I am just embarking on my next tutorial series that I hope you will find interesting.  As I said earlier, I’ve rather neglected the art side of things.  What I am going to do is go from nothing to a sprite sheet and show all of the steps in between.  That will basically consist of:

 

Box modeling a spaceship in Blender

Texturing that spaceship

Rendering the spaceship

Turning the renders into a spritesheet

 

 

So, pretty much every step of the process for making game art from scratch using Blender ( plus a little external 2D work ).  I am of course a programmer that does 3D as a hobby, so this is very much going to be a programmers approach to 3D art!  What exactly does that mean?  I’m not really sure, probably that I will do things lazily, incorrectly and in a crude manner, so don’t take what I do as the gold standard! Winking smile

 

Unlike with my C++ tutorial, this one will be a bit less structured and updated a bit more often.  Your feedback and suggestions are of course appreciated.

6. January 2012

 

 

 

Coming to Blender from other modelling packages, a few things are much less intuitive than you would expect.  I’ve been neglecting things from the art side of the fence for quite a while, so I am going to address that.  This post covers a couple handy tricks in Blender.  If you are a vet, these things will be “well duh!” items, but if you are new to Blender I think you will find them handy.

 

 

 

Insetting a polygon

 

This is a common enough task that is frankly rather irritating to accomplish in Blender.  An inset polygon can basically be though of as a polygon within a polygon, generally flush to the containing polygon.

 

Wow, that was a terrible description!  Lets use a picture instead.  This is an inset polygon:

 

imageimage

 

Here is how you create one.

 

Press Tab to enter Edit Mode

 

CTRL+Tab+3 for face mode

 

Select your face to inset

 

Hit E to extrude.  Immediately click the right mouse button.  You have now created a new face exactly over your existing face, with the exact same dimensions.

 

Now hit S to scale your face, and drag the mouse until it is inset as much as you would like.  Left click when complete.  And you are done.

 

 

 

 

Handy tip

One thing to be aware of when using the extrude tool, even if you hit escape or otherwise cancel, the face is still extruded!  Why? Beats the hell out of me, this seems like a really stupid thing to do, as it clutters up your mesh with overlapping vertices and edges you don’t need.  So if you are doing an extrude, after you cancel, make sure you undo it!


 

 

 

That’s not really an outrageous amount of work to inset a face, but it is enough to be annoying, especially for a task I do so commonly.  Thankfully, there is a plugin available to make your life easier!  I believe it started shipping in Blender 2.58, but I wouldn’t recommend quoting me on that!

 

 

Lets go ahead an enable that plugin now.

 

In the top menu select File –> User Preferences…

Select the Addons tab

Scroll down and locate Mesh: Inset Polygon, then enable it using the checkbox at the top right like this:

 

image

 

Now, if you want to keep this enabled permanently click Save as Default at the bottom left corner of the window:

image

 

Now there is an Inset Polygon tool available.

 

Back in Blender in the Mesh Tools sidebar ( press T if it isn’t currently visible ) you will now have a new option.

 

image

 

You will now be able to use the Inset command.  Once you click Inset, the below option will appear. 

 

Amount determines far inset the new polygon will be.

 

Height determines how far out the face will be raised.

 

 

You can inset multiple faces at the same time, but the results are “wonky”.  Which is to say, pretty much useless.

 

 

 

 

 

I find myself insetting quite often, in order to add details to my mesh, which leads to the next tip.  Creating a hole.  Consider a model like a gun, how exactly would you go creating the barrel of a gun?

 

 

 

Creating a hole in your mesh

 

 

So how exactly would you go about creating a hole like the barrel of a gun?

 

 

Well, start a new scene and inset just like we just covered:

 

image

 

Now hit the W key then select Subdivide from the menu that pops up.  This will subdivide the selected face into 4 sub-faces, like such:

image

 

For rounder edges, you can subdivide again.  Now we want to “round out” our square selection into a circle.  Hit the spacebar and type “Sphere” in the menu you want to select To Sphere:

 

image

 

Now move your mouse cursor to the right until your selection is rounded, like this:

 

image

 

Now press E to extrude and pull your new hole:

 

image

 

And now you have a rounded(ish) hole in your mesh!  For smoother corners, make more sub-divisions before you call To Sphere.

 

 

Straighten Vertices

 

Want to line up a number of vertices at once, here is how:

 

Select your vertices

image

 

Now there are a few ways of approach this.  First you can set a pivot to line up around.

 

To do so, hold down the . key and click where you want the pivot to be.  Such as this:

 

image

 

 

Now to move all the vertices to line up with the pivot point, you:

 

Press Scale, then the axis you want ( in this case red, or X ), then hit 0.

 

So, hit S then X then 0.  Finally left click to accept the changes.

And presto!

 

image

 

All the vertices line up along the selected axis.

 

You can do the same thing relative to the selected vertices.  In that case, select your vertices and be sure to move your pivot point back to either median or active element, using this option:

 

image

 

Now change the orientation to Normal:

 

image

 

 

So, if you chose Median Point and set Orientation to Normal, it will look like this now:

image

 

The axis on the widget determine which axis to align along.  Green is Y, red is X and blue is Z. 

 

Let's say you wanted to flatten along the z-axis.  Simply S(cale), Z then 0 and left click, and your results will be lines up along the Z axis. Like such:

 

image

Art

Month List

Popular Comments

Major updates to the GameFromScratch Unity book list
Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon


Home > >

21. June 2013

It's been a while since Unity 4 was released, but new books were just trickling in.  Now though, the floodgates have opened.

 

The following books have been added to the Unity book list:

Additionally, the following books were updated:

Professional Unity and C# (Cancelled)
Essential 3D Game Programming (Cancelled)
Unity 4.x Cookbook

 

Keep in mind, many of these books are in development.  Some are a very long way away from release.  As always, if I missed one or made an error, please let me know!

 

You can access the unity book list right here.

 

,

blog comments powered by Disqus

Month List

Popular Comments