Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
15. November 2015

 

We already have motion controls, audio control and of course tactile control, what about controlling a game with your emotions?  It sounds far fetched but it really isn’t, in fact it’s here today.  Just about every single modern gaming device has a front facing camera available in some form or another.  Well, Microsoft Research lab Microsoft Project Oxford just announced the release of the emotion tool which enables you to detect emotions on a persons face.

 

Basically you send it a picture and it returns the probability of various emotions.  For example, I sent it this image here and it returned the following results:

image

 

Basically you feed it an image in URL form and optionally a rectangle selecting the face, and it returns a JSON result with the probability of each emotion.  In this case Microsoft determine with 99.99% likelihood that this baby is sad, with a 0.001% chance that it’s angry instead.  I fed it a handful of pictures and it did a remarkably accurate job.

 

You can use it as a REST API now ( or just play with the playground ) right here.  Otherwise the SDK can be downloaded here.

 

So the tech is actually here already and works pretty well.  The question remains… would gamers embrace having a camera constantly scanning their emotions?  I actually can think of a few genres or tools where they might.  How many “you mad bro?” apps can we expect to flood the market now? If nothing else, it’s a fun tool to play around with on a Sunday afternoon!

Programming, Totally Off Topic

14. November 2015

 

CastleDB is a light weight database written in Haxe with data composed of sheets.  It makes storing structured data extremely simple, much like working with an Excel spreadsheet and much simpler than a traditional database.  The resulting data is stored in JSON making it easily used in almost any game engine or programming language.   Most interestingly you can treat 2D game levels just like any other data using the newly built in level editor.

 

There is an HD video version of this guide available here.  It covers mostly the same details as this tutorial but goes into a bit more depth of using the level editor.

 

Let’s first take a look at the database side of things.  Even without the level editing abilities, games are often in need of simple database services.  Simply download and extract the archive for your appropriate platform:

image

 

Then run cdb.exe.  The interface looks like this:

image

 

Start by creating a new sheet by clicking Create a sheet.  This is comparable to creating a new table in a database.

image

 

Simply name your sheet and click Create.

 

Next we add some columns to our newly created sheet, same basic process.

image

 

Next pick the column type.

image

 

Optionally tick Required if the field cant be left empty.

image

 

You could select List and link to another database creating complex relationships.  Now we can populate a a database using the “New Line” command.  Select a type like Sprite (Image) and the appropriate dialog is displayed.

image

 

Now save the cdb file somewhere and you can access the data with code relatively easily.  First create a source file with the following contents, the black magic that links your cdb file to haxe code.

package com.gamefromscratch.castledemo.db;
private typedef Init = haxe.macro.MacroType < [cdb.Module.build("new.cdb")] > ;

 

And now you can consume it like:

package com.gamefromscratch.castledemo;

import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.Lib;
import haxe.Resource;

import com.gamefromscratch.castledemo.db.MyData;
class Main 
{
	
	static function main() 
	{
		
		#if js
		MyData.load(null);
		#else
		MyData.load(haxe.Resource.getString("new.cdb"));
		#end
		trace(MyData.myDB.get(Lich).HitPoints);
	}
	
}

 

Pretty simple over all.  Now what was that about a level editor?

 

Well… remember back when you created the first sheet?  You may remember a little checkbox “Create Level”.

image

 

Well this creates a table just like any other with some prepopulated values:

image

 

Width and Height are the number of cells that compose your level, the rest will be populated shortly.  Notice the Edit button that appears now?  Click it.

image

TADA!  Level editor.

The level editor can work in tiles or objects, let’s start with a single object layer for our background image.  Click the New Layer button at the top right.

image

Name it then click create.  Now click the File… button and we will select our background tiles.

image

 

Your image will now appear ready for painting, like so:

image

 

In Tile mode, simply select the tile, or tiles you wish to paint with like so:

image

 

Now back on your layer make sure you are in Tiles mode:

image

 

And paint away:

GIF

 

You can also work in object mode, which allows you to place sets of tiles without being confined to the grid.  First, define a set of tiles as an object:

GIF2

 

Now you can switch your level to object mode and draw using the created objects instead.

 

Now perhaps coolest of all, you can also instance data easily enough.  For example, we could add and place NPCs on our map, first we extend the map sheet to have an addition field, a List called npc, like so:

image

The List contains a reference to our monster table for example, x,y coordinates and an id.  Now if you head back to your map, you will see you’ve got an additional layer created:

image

 

Which you can now use to place NPCs or other data in your world.  You could do the same thing for collision data, whatever you wish.

This is only scratching the surface of what the level editor can do, there is even auto-tiling support built in.  Be sure to watch the video version for a more in-depth idea of the level editors capabilities.  Then when you are all done, it’s ultimately just data that you’ve been working with.

 

Now the downside is, there is no level loader when you are done.  So whatever engine or game you are importing the result into, it’s still just data.  It’s going to be your responsibility to display it all on screen.

 

The Video

Programming

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 , ,

3. November 2015

 

In today’s Closer Look we are looking at the open source C# based 2D game engine Duality.  The Closer Look series is a combination of review and getting started tutorial that is aimed at helping a developer decide if a game engine is the right choice for them.

 

There is also an HD video version of this guide available here.

 

First I need to start with a confession.  A few people mentioned Duality to me in the past and each time I dismissed it, very quickly.  An open source C# based, non-cross platform Unity-wannabe developed by a single guy?  Yeah right… pass.  These types of projects are a dime a dozen until people quickly realized that developing a product like Unity is actually a hell of a lot harder then they thought, even if they just focused on 2D.

 

Well, let me just start by saying I was wrong… very wrong.  A bit of a spoiler alert, but Duality impressed the hell out of me and I think it will impress the hell out of you.  There is one thing to be aware of right up front from that previous paragraph… “non-cross platform”.  Right up front this is the biggest flaw of Duality so no sense wasting a ton of time if this is a deal breaker.  That said, it’s not the huge problem it used to be as there has been a lot of work underway to make Duality cross platform.  It’s built on top of OpenGL and the entire core as well as all class libraries are now portable class libraries.  In theory this means, aside from the editor which is tied to WinForms, a duality project should be able to run on any modern C# capable platform with OpenGL support.

 

Getting Started

 

Getting started with Duality is easy but may add some complications for integrating with source control, updating or collaborating with others.  The duality download is the engine, and the tools AND your game.  When you spawn a new project in Duality, it downloads and sets up another Duality environment.  You can download the latest version right here. (That’s a direct link by the way).

 

The download is simply a zipped folder.  Extract it somewhere, it’s contents should look something like this:

image

 

Simply double click DualityEditor.exe to get started.  After launching and agreeing to the MIT license, you will be greeted by this window:

image

 

Dont worry, it should only take a few seconds depending on your internet speed.  A full install currently weighs in at around 120mb.  Once done downloading the editor Dualitor should now be loaded:

image

 

I suppose this is a good time to point out that you need to have Visual Studio 2013 or newer installed and with patches applied.

 

The Editor

 

The editor is extremely straight forward, let’s do a quick guided tour of it’s features.  It should be noted, the entire editor can be docked/undocked, hidden or shown as desired, so the layout is completely up to you.

 

Editor View

image

 

You can have multiple instances of the scene view running and you switch between them using the tabs at the top:

image

 

You can also rearrange the views however you wish, such as:

image

 

In addition to the Scene Editor where you compose the entities that make up your scene, there are two other options available in this view:

image

Game View and RigidBody Editor.  The game view is like a running preview of your game, while RigidBody editor is for defining physics shapes, which we will see later on.

 

Scene View

This is your game’s scene graph.  This is where you can select the entitles that make up your scene as well as the components that compose them.  Additionally you can create new entities or add new components here.

image

We will cover this process in a bit more detail later on.

 

Project View

The Project View is essentially the assets that compose your game, things like images, fonts, audio files, etc.

image

New assets can also be created here, using either the right click menu or via drag and drop from Explorer.  We will also cover Project View in more detail later.

 

Advisor View

Advisor view is basically a context sensitive help, like a stationary and in-depth tool tip.  As your mouse location or keyboard cursor change, the context switches and content is updated.

image

 

It’s handy while learning your way around but will probably be turned off in short order to free up screen real estate.

 

Object Inspector

The contents of this window changed based on the currently selected item.  If an entity is selected in the Scene View, the properties of all the components that make up the entity are shown, like below:

image

 

While selecting an asset will show the corresponding editor, like this one for ttf font files:

image

 

Note in this case all of the values are grayed out because I selected one of the built in non-editable assets.  Note the font preview at the top of the window… neat.

 

Finally there is the menu and toolbar across the top:

image

 

This tool bar enables you to load the source in Visual Studio ( the C# icon ), compile + run, compile + debug, or preview in the editor.

 

All told, a streamlined and somewhat minimal but highly configurable editing environment.  I never once experienced a crash or lock up in my time with Duality, so at least for me, stability and performance seem pretty solid.

 

Creating a Game

 

So that’s the editor covered, let’s take a look at using it to actually create a game.  You may have guessed at this point that Duality uses a component based design.  The entities that make up your scene are in turn composed of components that provide that functionality.  The top level entity is called a Game Object and you can create one in the Scene View by right clicking and selecting New->GameObject.

 

image

 

The other options simply create a pre-populated GameObject for you.  Your newly created entity will now be available (and re-nameable) in the Scene View:

image

 

Now let’s right click our game object and add some components to it.  We want to be able to position our object in the world, so let’s first add a transform component.  Simply select New->Transform.

image

 

Let’s make this a sprite, right click again, then select new->Graphics->SpriteRenderer.

image

 

Your entity should now look like:

image

 

Plus if you look over at the editor window, you will see a sprite now appears using the default sprite:

image

 

While in the object inspector you can now edit the two components attached to our object:

image

 

You can also edit the translation, rotation and scale of the sprite in the editor view using one of the cleanest 2D widgets I’ve yet experienced:

movewidget

 

Now let’s add our own sprite, simply drag and drop from Explorer to the Project view, like so:

DragDrop

 

Now if you select the newly created pixmap, you will see it’s settings in the Inspector window:

image

 

Notice like fonts there is a preview of the asset file.  Now we can update our SpriteRenderer’s SharedMaterial property by dragging our new asset over, like so:

ChangeTexture

You will notice that Duality automatically created two new assets, a Material and Texture definition.  You can go a great deal deeper if you wish, for example changing the draw technique that is used to renderer the material to screen, which in turn you can drill down and define your own vertex and fragment shaders, etc.  The details are nicely hidden away from you, but if you want to drop down into the technical details you easily can.  That is beyond what we are going to cover today however.

 

Now we have created a sprite game object that can be positioned in the scene, now let’s go ahead and make it do something.  Let’s add a physics RigidBody component to it by selecting New->Physics->RigidBody:

image

 

As you can see in Inspector, once the rigid body is added, there are a number of values you can configure in the component:

image

 

In this case however we are going to stick to the defaults.  You can also edit the physics bounding shape if desired.  With the game object selected, in the editor view switch to RigidBody Editor, and you can now define a new rigid body shape.

rigidBody

 

Notice will editing the rigid body, the Inspector window has yet a different set of options available:

image

 

Now, lets go ahead and preview our handy work.  If you want to see a more accurate result, switch to Game View, then click the play icon:

image

 

And you should see:

Running

 

So we’ve got a physics enabled sprite being drawn with almost zero effort, pretty cool.

 

The Coding Experience

 

So, that’s the editor down.  Let’s take a look now at what the coding experience is like.  Click the C# icon to load your project in Visual Studio:

image

 

Your starting project is extremely straight forward:

image

 

Your “game” itself is actually implemented as a plugin, that is what the class CorePlugin.cs is.  The contents are incredibly sparse:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Duality;

namespace Duality_
{
  /// <summary>
  /// Defines a Duality core plugin.
  /// </summary>
  public class Duality_CorePlugin : CorePlugin
  {
    // Override methods here for global logic
  }
}

 

This is where the global logic and variables of your application reside.  The majority of game logic however will be in the form of components.  A default component is created, YourCustomComponentType.cs, which contains the following code:

using System;
using System.Collections.Generic;
using System.Linq;

using Duality;

namespace Duality_
{
  public class YourCustomComponentType : Component
  {
    
  }
}

 

That's about it, not a lot of boilerplate code required.  Do a compile for your project in Visual Studio.  Now if you go back to editor and add a component to a GameObject you will already see this type is available through the powers of reflection:

image

 

Now let’s add our own new Component, this one for adding WASD controls to our entity.  Simply create a new class called WASDControl.cs with the following code:

using System;
using System.Collections.Generic;
using System.Linq;

using Duality;
using Duality.Components;

namespace Duality_
{
    [RequiredComponent(typeof(Transform))]
    public class WASDControl : Component, ICmpUpdatable, ICmpInitializable
    {
        Vector2 position;

        public void OnInit(Component.InitContext context)
        {
            position = new Vector2(0, 0);
        }
        
        public void OnUpdate()
        {
            var transformComponent = this.GameObj.GetComponent<Transform>();
            position.X = 0; position.Y = 0;

            if (DualityApp.Keyboard.KeyReleased(Duality.Input.Key.W))
                position.Y -= 10f;
            if (DualityApp.Keyboard.KeyReleased(Duality.Input.Key.A))
                position.X -= 10f;
            if (DualityApp.Keyboard.KeyReleased(Duality.Input.Key.S))
                position.Y += 10f;
            if (DualityApp.Keyboard.KeyReleased(Duality.Input.Key.D))
                position.X += 10f;

            transformComponent.MoveBy(position);
        }

        public void OnShutdown(Component.ShutdownContext context)
        {
        }
    }
}

 

This example illustrates a couple of things.  First if your component requires the existence of a certain component, you can define that using the RequiredComponent attribute.  Next you can see I inherited from two additional interfaces, ICmpUpdatable and ICmpInitializable.  The first class tells Duality that your game implements Update() and should be called each frame.  The second indicates you have initialization or cleanup code and thus implement OnInit() and OnShutdown().

 

Otherwise the code is quite simple.  Your component has access to it’s parent game object in the form of GameObj and can access child components using GetComponent().  The component also has access to the engine itself through the DualityApp class, which is used in this example to poll the keyboard state.  This component can now be added in the editor to any game object that has a transform component making for easy code reuse.

 

Given the amount of space already used, I can’t go into extreme detail about what Duality can and can’t do from a programming point of view, but you can get a pretty good idea from looking at the class reference documentation.  The video version also has a bit more in depth on the coding experience if you are interested.

 

Documentation and Community

 

The primary documentation for Duality is the wiki available here.  It’s a collection of tutorials covering most of what you need to get started.  Perhaps most important piece of documentation is the reference material that is included with the engine, however I could not find an online version.  The reference material is fairly comprehensive and while a bit light in places, for the most part has what you need well documented.

Another aspect of Duality is the samples.  These can be downloaded directly within the editor via File->Manage Packages:

image

The code for these projects is also available on Github here.

The community is small but active.   The primary source of help is going to be the forum.  Fortunately it seems like the vast majority of questions receive and answer and the author seems quite active.  Of course the source is available as well.

 

Summary

 

I have to say, I love being surprised by engines and Duality certainly surprised me.  It is a very focused 2D only engine and the requirement for Windows for a development machine.  This is of course going to turn many off.  For the rest though, Duality represents a great, free, open source C# 2D engine.  It’s polished, well documented, well supported and well designed.  There's not much more you can ask for in an engine.

 

The Video

 

Programming ,

26. October 2015

 

In the previous tutorial we look at the process of using sprites in SFML.  Today we are going to look instead at using a sprite sheet or texture atlas.  The process is very similar to working with a normal sprite, except that you have multiple sprites on a single texture.  Loading and swapping textures in memory is an expensive operation, so holding multiple sprites together can greatly improve the speed of your game.

 

As always there is an HD video version of this tutorial available here.

 

Many game engines have implicit support for spritesheets and sprite animation, however SFML does not.  There are however libraries built on top of SFML that provide this functionality or you can roll the required functionality yourself with relative ease.  Before we can continue we need a sprite sheet, which is simply one or more images with multiple frames of animation.  This is the one I am using:

dragonFrames

 

This isn’t the full sized image however.  The source file is actually 900x1200 pixels in size.  It should be noted that this size isn’t actually ideal.  Power of two texture dimensions should be preferred ( such as 512x256, 1024x1024, 2048x2048, etc. ).  In earlier version of OpenGL including OpenGL ES 1.x, a power of two texture was actually required.  These days, it is no longer a requirement, but a PoT texture generally will perform better.  As to file dimensions, you can fairly safely go up to 2048x2048 and support even rudimentary GPU’s like the Intel HD3000 series, but sizes of 4096x4096 are generally possible on most modern desktop and mobile GPUs.   You can notice from this image that it contains 12 textures, each 300x400 pixels in size.

 

Now we need code to extract a single frame from the texture and as you will see, it’s actually remarkably easy:

// Demonstrate creating a spritesheet
#include "SFML/Graphics.hpp"

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

  sf::Event event;
  sf::Texture texture;
  texture.loadFromFile("images/dragonFrames.png");

  sf::Sprite sprite(texture,sf::IntRect(0,0,300,400));


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

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

 

This will draw just a small rectangular portion of our source texture, representing the first frame, like so:

image

 

Really that’s all that there is to it.  To add animation, we simply change the rectangular source after the fact, like so:

// Demonstrate creating a spritesheet
#include "SFML/Graphics.hpp"

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

  sf::Event event;
  sf::Texture texture;
  texture.loadFromFile("images/dragonFrames.png");

  sf::IntRect rectSourceSprite(300, 0, 300, 400);
  sf::Sprite sprite(texture,rectSourceSprite);
  sf::Clock clock;

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

    if (clock.getElapsedTime().asSeconds() > 1.0f){
      if (rectSourceSprite.left == 600)
        rectSourceSprite.left = 0;
      else
        rectSourceSprite.left += 300;

      sprite.setTextureRect(rectSourceSprite);
      clock.restart();
    }

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

 

And when run:

GIF

 

You may notice right away that animation doesn’t look right and that’s a keen eye you’ve got there.  In this example we are simply going across the top three frames of animation from left to right.  The proper animation should actually be 0,1,2,1,0 not 0,1,2,0,1,2.  That said, in a proper game you would either roll your own animation class or use an existing one.  When we get to the process of creating a complete game, we will cover this process in detail.

 

In the above example we change frames of animation by changing the sprites source texture rect with a call to setTextureRect().  As I mentioned in the previous tutorial you could actually generate a new sprite per frame if preferred, as the sf::Sprite class is very light weight.

 

The Video

Programming , , ,

Month List

DisqusCommentsSummary

Course-specific creative-The Complete iOS 9 Developer Course - Build 18 Apps