Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
20. August 2018


In just 4 months since GIMP 2.10 was released, we have now seen 4 major patches (yeah, the versioning could use some work… Winking smile) that have brought rapid improvement to the open source raster art package.  The 2.10.6 release brings several new features including vertical text layers, two new filters, improved straightening and more.

Details from the news file:

Core:

  - Render drawable previews asynchronously.
  - Merge the file view filter and file format lists in GimpFileDialog.
    The presence of 2 lists was very confusing.

Filters:

  - New "Little Planet" (gegl:stereographic-projection) filter.

Tools:

  - Halt the Measure tool after straightening.
  - Add an "orientation" option to the measure tool, corresponding to
    the "orientation" property of GimpToolCompass (i.e., it controls the
    orientation against which the angle is measured, when not in 3-
    point mode.)  The orientation is "auto" by default, so that the
    angle is always <= 45 deg.  Note that the "orientation" option
    affects the tool's "straighten" function, so that the layer is
    rotated toward the current orientation.
  - Text layers can now represent vertical texts, with 4 variants:
    left-to-right and right-to-left lines, and forcing all characters to
    be upright or following Unicode's vertical orientation property.
    See also:
    * https://www.unicode.org/reports/tr50/
    * http://www.unicode.org/Public/UCD/latest/ucd/VerticalOrientation.txt

User Interface:

  - The Dashboard dockable dialog now has an "async" field to the
    dashboard's "misc" group, showing the number of async operations
    currently in the "running" state.
  - New Preferences option to enable/disable layer-group previews, since
    these can get quite time-expensive.

Translations:

  - New language: Marathi
  - 9 translations were updated: Brazilian Portuguese, German, Greek,
    Italian, Polish, Romanian, Slovenian, Spanish, Swedish.

You can learn a great deal more about this release in the release notes available here.

GameDev News


7. August 2013

 

I am about to create a game sprite for my own use and I figured I would document the process.  I am going to make an animated jet sprite and ultimately output a multi-frame single sprite sheet ready for use in a game.

 

Through the process I (may) cover:

  • Concept design ( as far as I do it anyway… )
  • Modeling it in Blender ( probably over multiple parts )
  • Texture painting in Blender
  • Texture finishing in GIMP or another image manipulation program
  • Animation ( maybe, might be overkill ) in Blender
  • Rendering in Blender
  • Making a sprite sheet, probably using TexturePacker
  • Using the sprite sheet in code (maybe ), probably using Haxe/OpenFL/Some Haxe Library, but subject to change.

 

Basically if I need to do it, I will document the process.

 

Keep in mind… I am a programmer who dabbles in art, and it shows!  We are just one step up from programmer art here, but the process is pretty much the same, you just need to add a bit more talent and patience. I am certainly not recommending anyone follow my work process, but it may give you some ideas.  Worst case scenario, it may just give you a good laugh!

 

Hope you enjoy.

News Art


14. January 2013

 

One of the themes of this site has always been to focus on low cost (or free) game development technologies.  As a result, you will tend to find content here tends to focus more on products like Blender or Wings instead of 3D Studio Max or Photoshop.  I will of course share any game development related news regardless to price tag, but I tended to focus on the tools available to the most people, especially when it comes to tutorials.  As a result, one product certainly comes to the front of the pack, GIMP.  While Paint.NET is nice, the GIMP is really the only affordable (free) product that comes close to feature parity with Photoshop.

 

When I first started this site, I looked at compiling a list of resources for getting started with the GIMP and noticed well… it was a bit of a wasteland.  There were a couple books, mostly far out dated at this point.  Today on Safari Books, this title(Safari link), The Artist’s Guide to GIMP(Amazon link) was just added, although it was published a few months back.  So I decided to take a look at how well the GIMP world is represented in books since I last looked a couple years ago.  The answer is, surprisingly well.  So what follows is a list of books about GIMP, in chronological order of release date:

 

Book Title Publish Year Safari Link  
The Book of GIMP 2013 Link
The Artists Guide to GIMP 2012 Link
GIMP For Absolute Beginners 2012 Link
GIMP 2.6 for Photographers 2011 Link
GIMP 2.6 Cookbook 2011 Link
GIMP Bible 2010 Link
Beginning Digital Image Processing using Free Tools 2010  

 

 

There are more books of course, but these are the ones released in the last 2 years.  Anything much older would be rather out of date at this point. 

 

I have to admit, the body of work available for GIMP is vastly improved, as has the GIMP in general.  If you haven’t checked it out in a couple years, you really should.  The UI is a lot nicer now, although it still has a ways to go.

Art


13. February 2012

 

 

I have been playing around a bit with Daz 3D Studio since it was recently made freely available. At first I struggled to find an actual use for the program, then I realized how exceptionally easy it made creating animated sprites. The following tutorial will walk through creating the following walk cycle using Daz Studio:



The above image is actually a web animation generated from this spritesheet that we will create. All told, the process will take about 5-10 minutes, most of it will be you waiting for your computer!  If the above image isn’t animating, that means your browser ( most likely Internet Explorer ) doesn’t support the keyframes CSS attribute.  Trust me, it works. Smile

 

 

You are going to need a couple things to follow along this tutorial, all of which are (currently) freely available.

 

You will need:

 

 

 

Install all of these products.  Now we fire up Daz Studio.

 

We are going to use the default human, feel free to drag and drop and design your guy however you want.  That said, do not move the person from the default screen location.

 

Once your guy or gal is dressed/decorated however you want, its time to add some animations.  On the left hand panel, select Content Library, Walks then start-(N) and drag it down to the beginning of the timeline.

 

Like so:

 

imageimage

 

If done correctly, if you press play your character will now have a walk cycle.  You can drag down as many animations as you would like to capture, just add them one after another in the timeline.  In this example we are just going to do the single walk cycle animation.

 

Now comes the key part, you don’t actually want your character to be moving like it does currently, you want him to remain stationary.  First lets frame things into the left.  Click the view selector box to rotate to the left view.

 

image

This is the guy you are looking for, click the red section labeled left.  Now ideally your window should look something like this:

 

image

 

 

Now we need to strip out the movement part from the animation.  To do so, first we need to convert to Studio keyframes.  This is done by right clicking in the blank gray area above the timeline and selecting Bake to Studio Keyframes, like so:

 

image

 

You will get the following message:

 

image

 

Simply click Yes.  Now we can edit out your animation.  What we want to do is remove movement along the Z-axis.  In order to do this, select Parameters along the right hand panel, then you want to select the Hip ( the root of all animations ).  You can do this by either clicking it within the scene Window, or selecting it from this drop down:

 

image

 

 

Now that you have the Hip selected, in the Parameters panel ALT+Left click the zTranslate panel:

image

 

This process should reset it’s value to 0.  Now if you press play on the timeline, your animation should now be stationary.  Now its time to render our images out.  To do so in the menu select Render->Render Settings…  like so:

 

image

 

The following window will appear:

 

image

 

If not already done, make sure at the bottom right it is set to “Show Advanced Settings”.  Now drag the quality/speed slider down to 3 ( or it will take forever, for little visible gain ).  Now you want to scroll the options down a bit.  First we want to set our image render resolution.  I personally went with 128x96, but you can use whatever you want.

 

image

 

 

Now scroll the options down a bit more and select the Render To: drop down.  You want to select Image Series like this:

image

 

 

Now we want to select where to render it to.  Leave Start and End Frame at the defaults ( the entire animation ), file in a name and leave it as PNG so we get transparencies.  Switch the location from Library to Folder and pick a directory you want it to save your renderings to, like so:

image

 

Now click the green “Render” button.  You will get a warning like the following:

image

 

Simply click OK.

 

Now we wait… there is absolutely no indication it’s actually doing anything, but Daz Studio is now rendering your sprites.  The only real indicator it’s doing anything is the spinning “busy” mouse icon.  Let it do it’s thing, it took approximately 4 minutes on my PC.

 

Once it is completed, in Explorer navigate to the directory you told it to render to.  If all went well, your directory should be populated with 51 PNG images.  Here’s mine:

 

image

 

 

Now that we have our sprites, we need to make them into a sprite sheet.  If you haven’t already, install The GIMP and the sprite sheet plugin I linked earlier.  Now load up The Gimp.

 

In GIMP select File->Open As Layers…

image

 

Navigate to the folder you saved your images to, then CTRL+A to select them all ( or CTRL + Click to select them one by one ).  When finished press Open:

image

 

If everything worked correctly, your layers list should look like this:

 

image

 

Now select the Filters Menu->Sprite-Sheet->Create From Layers…  If this menu option doesn’t show up, you haven’t installed the spritesheet plugin correctly.

 

image

 

Gimp will now merge all of the layers together into a single sprite sheet in a new window like so:

 

image

 

 

Simply save this file and you are done.  My end results are this.  You may want to do some editing, like making your spritesheet square instead of one wide and short image, but this can be accomplished in a few minutes of copy and paste.  All told, one remarkably fast way to generate a walk cycle sprite animation.  Rendering other angles or different animations is simply a matter of repeating the process from a different angle or dragging and dropping different animation sets.

 

Of course, you can also create your own animations quite simply in Daz.  You can also import your own meshes and props, although I haven’t really experienced this part yet, so I do not know how painful the process is. 

Art


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


GFS On YouTube

See More Tutorials on DevGa.me!

Month List