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


28. October 2015

 

So I find myself needing to create a new website and this created a world of complications with one very easy solution, which I’m assuming you can guess from the title above…

 

I started GameFromScratch.com some 5ish years ago and the state of the web has changed a great deal since then.  I had a dedicated server from other projects, so the sky was the limit when it came to choosing a server technology.  I had little idea what GFS would evolve into or how much control I would require over my CMS, so as a programmer I went with the language/technology I was most comfortable with at the time, C#/Asp.net.  Instead of doing everything myself I built the site around BlogEngine.  It’s served me well enough, but in this age of mobile, SEO and responsive design, it’s a needlessly complicated mess.

 

I did a recent redesign of the site, but in the end I want to do a clean break.  Problem is, you can’t.  I have years of Google search engine juice, thousands of in-bound links and many other things that would break if I ported to a new site.  Beyond that, ugly or not, creaky or not, GameFromScratch is still my baby and I couldn’t just put her out to pasture.

 

After some thought on the subject I figured out how to go forward.  GameFromScratch is going to continue exactly as it is.  I will continue hosting 100% of my content here, I will add new blog posts and tutorial series here just like normal.  However, “finished” tutorial series will also be available on another home.  With the exception of perhaps pissing Google off due to duplicate content, I think it’s the best of both worlds.  People can continue to enjoy GameFromScratch.com as it is today, while people using it for straight reference material can enjoy a much cleaner and hopefully faster site.  Also it gives me the opportunity to introduce a slightly shorter and more accurate URL.  Win/win for everyone I hope.

 

This however lead me to the same challenge I had years ago… choosing a technology.  Now though I have come to realize less is more.  I have no desire to use a gigantic bloated CMS like Wordpress or Drupal.  More to the point I have absolutely no desire to install another server or database technology (and potential security loophole) on my servers.  I also had, have and always will continue to have a gigantic aversion to PHP, which winnows down the field a heck of a lot.  On the other hand, I also have little desire to manually craft a site from scratch.

 

Enter Jeykll.

jekyll-logo-light-solid

Jeykll is what you could call a “Static Site Generator”.  Basically its the framework to create a site within, couple with some tools that generate the site for you.  No database, no server technology, nothing.  The end result is simply a folder full of clean, modern HTML that can be deployed however you want.  This means no added security risks, no performance overhead and extremely simple backups.  It does however provide a framework of local tools that make your development process a heck of a lot faster than just writing HTML.

 

I am still very new to Jekyll, but so far it ticks all of the boxes I need.  The only real complication in the scenario is Ruby, the language it depends on.  As a language/ecosystem, Ruby seems horrifically fragile and it’s 10x worse on Windows where it is a bit of a red headed step child.  Point blank, getting and keeping your Ruby stack running is going to be by far the most challenging part of the process.

 

Anyways, if you find yourself needing to create a website, consider checking out Jekyll, I’ve created a small video about it available here or embedded below.

 

I looked at a few other options that you might wish to be aware of and why I personally didn’t go with them.

 

  • Adobe Muse
    • It was a nice editor and with it’s themes provided a great deal of what I needed.  The resulting code though wasn’t extremely clean, it has a rather hefty pricetag, and worse of all, once you commit to Muse you have to stick to Muse to generate new versions of your website.
  • Siteleaf
    • Siteleaf is very similar in basic process to Jekyll.  With a few major differences.  First, it includes web hosting options as well as an in cloud content editor.  Second, it’s got a price tag attached.  Third, it simply didn’t work on Windows… bit of a deal breaker there.  It’s not really Siteleaf’s fault, it’s Ruby, but still a rather large deal breaker for me.
  • Dozens of other static site generators
    • You certainly aren’t starved for choice in this category.  That said, if in doubt, go with the one with the biggest community.  That’s Jekyll.  I was tempted to find one that was built on top of Node instead of Ruby for a better Windows experience, but with Jekyll releasing version 3 with less dependencies and a smoother Windows experience, this became unimportant.
  • Wordpress/BlogEngine/Drupal et al
    • What can I say, they are still an option.  Jekyll certainly isnt for everyone.  Each of these CMSs is absolutely huge, some are downright dinosaurs at this point.  On the other hand… there is no scaffolding, no hosting requirements, a huge community of people you can contract work out to, etc.  If you are not moderately tech savvy, these are still most likely your best best.  Just be aware, you pay for that convenience when something goes wrong… it goes REALLY wrong.  Then again, you can also hire someone to fix it.

Totally Off Topic


22. October 2015

 

As part of the ongoing Tiled Map Editor tutorial this part looks at using Object Layers, which can be used to interface your tiled map with your games code.  This particular example includes the code using TypeScript and the Phaser game library.  If you need more information on Phaser I’ve done a tutorial series here.

 

The video of this tutorial is available here or embedded below.

 

The Code

index.html

 

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Hello Phaser</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="phaser.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <div id="content"></div>
</body>
</html>

app.ts

/// <reference path="phaser.d.ts"/>


class ObjectEntity {
    height: number;
    name: string;
    properties: any;
    rectange: boolean;
    rotation: number;
    type: string;
    visible: boolean;
    width: number;
    x: number;
    y: number;
}

class SimpleGame {
    game: Phaser.Game;
    map: Phaser.Tilemap;
    layer: Phaser.TilemapLayer;
    player: Phaser.Sprite;
    winZone: Phaser.Rectangle;

    constructor() {
        this.game = new Phaser.Game(640, 480, Phaser.AUTO, 'content', {
            create: this.create, preload:
            this.preload, update: this.update, render: this.render
        });
    }
    preload() {
        this.game.load.tilemap("ItsTheMap", "newMap.json", null, Phaser.Tilemap.TILED_JSON);
        var img = this.game.load.image("HF2_A2", "HF2_A2.png");
        this.game.load.image("Decepticon", "decepticonLarge.png");
    }
    update() {

        if (this.winZone.contains(this.player.x + this.player.width/2,this.player.y + this.player.height/2))
            alert("You Win!");

    }
    render() {
    }
    create() {
        this.map = this.game.add.tilemap("ItsTheMap", 32, 32, 64, 32);
        this.map.addTilesetImage("HF2_A2","HF2_A2");

        this.map.createLayer("Background").resizeWorld();

        this.player = new Phaser.Sprite(this.game, 0, 0, "Decepticon");
        this.player.width = 64;
        this.player.height = 64;
        this.game.world.addAt(this.player, 1);

        this.game.camera.follow(this.player);

        var something = this.map.objects["GameObjects"][0];
        var start = <ObjectEntity>this.map.objects["GameObjects"][0];
        var end = <ObjectEntity>this.map.objects["GameObjects"][1];


        this.winZone = new Phaser.Rectangle(end.x, end.y, end.width, end.height);

        this.player.position.set(start.x, start.y);

        this.game.input.keyboard.addKey(Phaser.Keyboard.LEFT).onUp.add(() => {
            this.player.position.add(-32, 0);
        });

        this.game.input.keyboard.addKey(Phaser.Keyboard.RIGHT).onUp.add(() => {
            this.player.position.add(32, 0);
        });

        this.game.input.keyboard.addKey(Phaser.Keyboard.UP).onUp.add(() => {
            this.player.position.add(0,-32);
        });

        this.game.input.keyboard.addKey(Phaser.Keyboard.DOWN).onUp.add(() => {
            this.player.position.add(0, 32);
        });
    }
}

window.onload = () => {
    var game = new SimpleGame();
};

 

 

The Video

 

Art Design Programming


14. October 2015

 

Tiled is a popular open source map editor for creating 2D maps using tiled graphics.  I have used Tiled in several previous tutorials and no doubt will be using Tiled in several future series, so instead of covering it partially over and over again, I decided to do a Tiled video tutorial series that I will simply link to.  This is that tutorial series.  As I add new tutorials I will link them below.

 

Right now the contents consist of:

 

An earlier text based introduction to Tiled from GameFromScratch is available here.

If you are interested in learning out to make isometric tiles in Blender check this tutorial.

 

Previous tutorials that have used Tiled include:

 

Direct version of the videos embedded below:

Art Programming


GFS On YouTube

See More Tutorials on DevGa.me!

Month List