Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

14. January 2012

 

Alright, first off this post has almost nothing to do with, well anything.  I just discovered this and frankly I think it’s damned cool! Although it has absolutely nothing to do with making games, who doesn’t like Lego?

 

I have a Safari online book subscription ( which I love by the way ) so when they add new books I am often exposed to things I was previously unaware of, but this one added today was unexpected!  They just added Badass Lego Guns!

 

Ok, a book about making guns in Lego, that is kinda cool.  A book about making 6 guns in Lego, that’s a bit cooler.  A book about making 6 guns that work in Lego, that’s just epic.  ( Actually, it’s 4 guns, a crossbow and a switchblade )

 

 

The book goes step by step in creating each of the guns, starts with an over view of each gun, then a bill of materials of LEGO pieces you will need.  The rest of each chapter is then basically IKEA style directions on how to assemble the gun ( or crossbow).

 

Obviously, the don’t fire bullets, but instead use ( what else! ) LEGO as projectiles and elastics as the propellant.  Some of these guns though have the look like even being LEGO and elastic powered, they could cause some serious carnage…  Consider the gun featured on the cover, the Warbeast… Yeah, it’s fully automatic and capable of a theoretical 1200 rounds per second!

 

imageimage

 

 

Amazon’s got it for 20$ or of course, as I mentioned earlier, it was recently released on Safari Books Online if you happen to be a subscriber.  Now I just need to come up with a few hundred dollars worth of LEGO!  Wonder how to buy technic LEGO is these days?

Totally Off Topic

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.

Month List

Popular Comments