Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon Join the GFS Discord Server!
26. November 2015

 

A new beta release of the Krita drawing package; mostly an under the hood revision to add animation support on the road to Krita 3 release.

 

From the release post:

Today we are happy to announce the long awaited beta-version of Krita with Animation and Instant Preview support! Based on Krita 2.9, you can now try out the implementation of the big 2015 kickstarter features!

What’s new in this version? From the user point of view Krita didn’t change much. There are three new dockers: Animation,Timeline and Onion Skins, which let you control everything about your animation frames and one new menu item View->Instant Preview Mode (previously known as Level of Detail) allowing painting on huge canvases. For both features, you need a system that supports OpenGL 3.0 or higher.

For people who previously installed Krita, to get Instant Preview to show up on the view menu, delete the krita.rc(not kritarc) file in your resource folder(which can be accessed quickly via Settings->Manage Resources->Open Resource Folder) and restart Krita. Or just use the hotkey Shift+L.

But under these visually tiny changes hides a heap of work done to the Krita kernel code. We almost rewritten it to allow most of the rendering processes run in the background. So now all animated frames and view cache planes are calculated in the moments of time when the user is idle (thinks, or chooses a new awesome brush). Thanks to these changes now it is possible to efficiently work with huge images and play a sequence of complex multi-layered frames in real time (the frames are recalculated in the background and are uploaded to you GPU directly from the cache).

 

A tutorial featuring Krita 2.9 animation features in action:

GameDev News


24. November 2015

 

It’s hard to believe that GIMP (General Image Manipulation Program) has now been around for 20 years.  To go along with the 20th anniversary, they also released version 2.8.16.  The following from the GIMPrelease announcement:

 

New Releases and The Future

To celebrate the 20th anniversary, we released an update of the current stable version of GIMP. Newly released GIMP 2.8.16 features support for layer groups in OpenRaster files, fixes for layer groups support in PSD, various user interface improvements, OSX build system fixes, translation updates, and more changes.

Our immediate future plans are to release first public version in the unstable 2.9.x series that will feature fully functional GEGL port, 16/32bit per channel processing, basic OpenEXR support, vastly improved color management implementation, new tools, on-canvas preview for many filters, and more. This release will encompass over three years of work and become the first milestone towards 2.10.

Following v2.10 release, we shall complete the GTK+3 port that is required to bring back state of the art Wacom support for Windows users. When it’s done and GIMP 3.0 is out, we shall finally be able to get started on some very exciting and much anticipated features like non-destructive editing. Please refer to Roadmap for more details.

 

Well then, happy birthday GIMP.  Head on over here to download it now.

GameDev News Art


20. November 2015

 

Recently I just finished a tutorial covering creating isometric maps using the Tiled map editor.  One commonly occurring question was “where can I get tiled-friendly isometric tile sets?” for free.  The answer unfortunately is there aren’t a ton of options.  There are a few good isometric tile sets out there (I may coverisometrictitle this in a different post), but not a ton of choices.  So instead I’ve decided to look at the process of making isometric tiles in Blender and thankfully it’s not that difficult.  The process follows.  There is also an HD video version of this tutorial available here.

 


First load up blender.  We are going to start by just making a 64x64 pixel tile of the default Blender cube.  For this exercise we are going to have our object centered about the origin.  Precision is of critical importance to this entire process, so we are going to be working numerically in the properties panel(N key).

 

image10

 

Now let’s delete all of the faces except the base:

GIF

 

The majority of the work is actually in setting up the camera.  With the camera selected we need to position it.  Since our object is at the origin, we need to offset away from it.  As the isometric style is from above and at an angle we offset 60 degrees on the X axis and 45 degrees around the Z axis.  If you are using a more skewed perspective ( not 2:1 ratio ), you will choose a different  rotation.  We also move the camera back along the Y axis and up the Z, we will be moving the location slightly later.

image

 

Next we set the dimensions of our camera in the Camera tab, we are going to start of with 64x32 at 100%, like so:

image

 

Now in the Properties editor, select the camera icon and we need to set the camera to Orthographic.  We then adjust our Orthographic scale until the camera extents capture the cube.

image

 

In 3D view switch to camera view (0) then adjust the Orthographic Scale and Z axis of the camera until your image is framed, like so:

image

 

Now change the camera dimensions from 64x32 to 64x64 and adjust the z value of the camera until the base tile is aligned to the bottom of the camera frame, like so:

image

 

Now render it out to texture.  We already set up the render dimensions, now we simply need to set the renderer to render transparency:

image

 

In Shading in the Rendering tab set alpha mode to Transparent.  Now render your tile and TADA:

tile

 

Now let’s extrude our tile to the extents of our camera frame, like so:

image

 

Then render it out:

tile2

 

Now you can test our two isometric tiles out in tiled:

image

 

Now you will notice the tiles look remarkably, um, tiled.  This is due to the shading.  In the materials for your tile, set Shadeless on, then the results look cleaner.

image

 

Creating a Reference Cube

It’s possible you want a framework to model non-cube shaped entities in an isometric style.  Thankfully it’s incredibly easy to create such a thing. 

First take your reference cube, then apply a Wireframe modifier to it:

image

 

This now gives you a nice shape to use for reference, like so:

image

 

Now chances are if you are going to model within the reference you are going to want to make it unselectable and mark it so it doesn’t show up in the renders, like so:

image

 

Now of course you will probably want bigger than 64x64 tiles.  One option is to simply duplicate our cube, then move it by 2 units (as our cube is 2x2 in size) along the X axis, like so:

image

 

We can then render each tile by moving the camera by 2 along the X axis, setting all other tiles to not render, although this could easily be scripted.

 

Chances are we are going to want to make several tiles at once too and this would also be extremely easy.  Simply take your reference tile and apply an array modifier then another array modifier, like so:

image

 

The only difference between the two modifiers is the axis of the relative offset.  This now gives up a 6x6 grid of tiles to work with:

image

 

Only problem is, now we have one big tile instead of 36 separate tiles, but no matter, this is easily resolved!  Make sure both Array modifiers have been applied.

 

Now enter Edit mode and press P –> Separate by loose parts.

Next select them all in Object mode and select Set Origin->Origin to Center of Mass.

 

And TADA, 36 tiles ready for editing!

GIF2

 

Of course if you wanted to edit the tiles as a whole (for example, connected terrain) you would do this before performing the separation. 

 

Next we have to render each tile.  Basically grab a tile, translate it to the origin, hide the other 35 tiles, render it.  Now repeat that process 35 times.  Sounds fun, eh?

Yeah, not to me either, good thing I’m a programmer. Let’s take a look at automating this using Python in Blender’s built in API.   Please keep in mind, I rarely program in Python and have never scripted in Blender, so don’t expect brilliance!

import bpy

objs = []
for obj in bpy.data.objects:
    if obj.name.startswith("Cube"):
        objs.append(obj)

# loop true all the meshes, hide all but active, and copy active to 0,0,0 and render        
for curObj in objs:
    prevLoc = curObj.location.copy()
    curObj.hide_render = False
    
    for otherObj in objs:
        if curObj != otherObj:
            otherObj.hide_render = True
            
    curObj.location = (0,0,0)
    bpy.data.scenes['Scene'].render.filepath = "c:\\temp\\" + curObj.name + ".png"
    bpy.ops.render.render(write_still = True)
    
    curObj.hide_render = True
    curObj.location = prevLoc

 

Now if you run that script it will render all of the tiles to your C:\temp directory.

 

Of course the key to making tiles look good is going to be the texture mapping…  but you’ve got all the tools you need to succeed and quickly at that.

 

The Video

Art Programming Design


16. November 2015

 

Announced over at the Cocos2D-x blog today, they just released version 3.9 of the popular cross platform open source 2D based C++ framework.  The release is primarily for maintenance and stability but some new functionality was added as detailed on the forum:

 

unnamed-1024x332

  1. 3D Module:
    • Added 3D MotionStreak to support streak effect.
    • Refined Sprite3D to support material system.
  2. 2D Module:
    • Added frame callback function and animation callback function.
    • Added script component system.
    • Reconstruction of 2D physics with Component.
    • Improved EditBox implementation on iOS and Win32 platform.
    • Removed dependence of libcurl on AssetsManager, AssetsManagerEx and Downloader (iOS & Android).
    • Improved particle performance.
  3. Others:
    • Supported Action inheritance, update function overwriting in JSB.
    • Improved ScrollView performance in Web engine.
    • Improved Scale9Sprite performance in Web engine.
    • Decoupled Sprite's setTexture() and updateColor() in Web engine.
    • Added support for debugging and release on real devices with Xcode7 and iOS9.

The new release can be downloaded here. (Direct link)

 

If you are interested in learning more about Cocos2d-x, we have a full tutorial series available here.

GameDev News


5. November 2015

 

In this tutorial we are going to look at playing back music in our SFML game.  We will look at streaming an ogg file from disk.  We will also quickly look at the basics of handling time in SFML as we add fast forward and rewind abilities to our music playback.

 

There is an HD version of this tutorial here.

 

Playing music files is different from playing audio files and we will deal with this in a separate tutorial.  Music files are designed to be streamed from disk, not resident in memory.  SFML supports the following file formats:

  • ogg
  • wav
  • flac
  • aiff
  • au
  • raw
  • paf
  • svx
  • nist
  • voc
  • ircam
  • w64
  • mat4
  • mat5
  • pvf
  • htk
  • sds
  • avr
  • sd2
  • caf
  • wve
  • mpc2k
  • rf64

 

You will notice a very noticeable exception from that list, the mp3 format. That is because the mp3 format is encumbered by a number of patents and should be avoided to protect yourself from potential licensing fees.  Fortunately the ogg format offers similar file sizes and similar audio quality as the mp3 format without the licensing pitfalls.  If you require to covert formats the free software Audacity is an excellent and easy choice.

 

The major difference between sound effect and music is the sound effect stays resident in memory, while a Music file is streamed from disk.  Both classes still possess a great deal of common behaviour.  In fact if you look at the inheritance tree you will see that they have a common base class.

 

image

 

Now lets finally create some code showing how to actually play and control music files.

 

// Demonstrate that the hills are alive with the sound of music
#include "SFML/Graphics.hpp"
#include "SFML/Audio.hpp"
#include <iostream>

int main(int argc, char ** argv){
  sf::RenderWindow renderWindow(sf::VideoMode(640, 480), "Demo Game");

  sf::Event event;
  sf::Music music;
  music.openFromFile("audio/goats_typicalamerican.ogg");
  music.setVolume(50);

  music.play();

  while (renderWindow.isOpen()){
    while (renderWindow.pollEvent(event)){
      if (event.type == sf::Event::EventType::Closed)
        renderWindow.close();


      if (event.type == sf::Event::EventType::KeyPressed){

        // Up and down to control volume
        if (event.key.code == sf::Keyboard::Key::Down)
          music.setVolume(music.getVolume() - 10);
        if (event.key.code == sf::Keyboard::Key::Up)
          music.setVolume(music.getVolume() + 10);
        

        // Left and right to control tracking position
        if (event.key.code == sf::Keyboard::Key::Right){
          auto newPos = music.getPlayingOffset() + sf::seconds(5);
          music.setPlayingOffset(sf::Time(newPos));
        }
          
        if (event.key.code == sf::Keyboard::Key::Left){
          auto newPos = music.getPlayingOffset() - sf::seconds(5);
          if (newPos.asSeconds() <= 0.0f) newPos = sf::seconds(0);
          music.setPlayingOffset(sf::Time(newPos));
        }

        std::cout << "Current volume is :" << music.getVolume() << " position is: " 
          << music.getPlayingOffset().asSeconds() << std::endl;
      }
    }

    renderWindow.clear();
    renderWindow.display();
  }
}

 

You’ll notice that loading a music file is pretty much identical to loading any other asset in SFML.  Keep in mind the Music class actually owns the underlying data of the music that is played so it is not a light weight class so be careful when they are created.  However since the Music file is played from disk instead of from memory, it is safe to allocated multiple concurrent Music files, such as one per song played, without being hugely wasteful.

 

The code itself is fairly self explanitory.  You can set the volume directly on a music file that is being played, you can control music playback using vcr style play/pause/stop() controls.  You can also control the position of the sound using a combination of getPlayingOffset() and setPlayingOffset().  As you can see there are also time operators built into SFML such as sf::seconds() or sf::milliseconds() making time based math extremely simple.

 

There is a great deal more you can do with audio files, but we will cover that in the sound effects tutorial.

 

The Video

 

Programming


See More Tutorials on DevGa.me!

Month List