LibGDX Tutorial 11: Tiled Maps Part 1: Simple Orthogonal Maps

16. April 2014

 

If you’ve never used Tiled read this first!

 

In this tutorial part we are going to look at loading orthogonal maps in LibGDX.  Orthogonal basically means “at a right angle to” which is a fancy way of saying the camera is looking straight at the scene.  Another much less fancy word for this style of game is “top down”.  Common examples include almost every single game from the 16Bit generation of consoles such as Zelda or MegaMan.

 

One of the first problems you are going to encounter is how do you create your maps?  One very common solution is the Tiled Map Editor which fortunately I just completed a tutorial on!  This tutorial assumes you know how to generate a TMX file, so if you haven’t be sure to go through the linked tutorial.  Fortunately LibGDX makes it very easy to work with TMX files.

 

First things first we need to copy the TMX and any/all tilemap image files used to your assets folder, like so:

image

You may notice unlike earlier tutorials I am currently using IntelliJ.  With the recent switch to Gradle it is much easier to get up and running in IntelliJ and I massively prefer it to Eclipse.  That said, everything I say is equally valid in Eclipse or IntelliJ and when there are differences, I will point them out.  If you want to get started with IntelliJ read here.

 

Alright, back on topic…

 

Now that you have the map and tilesets in your project, let’s jump right in with the code:

 

package com.gamefromscratch;

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Input;
import com.badlogic.gdx.InputProcessor;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.maps.tiled.TiledMap;
import com.badlogic.gdx.maps.tiled.TiledMapRenderer;
import com.badlogic.gdx.maps.tiled.TmxMapLoader;
import com.badlogic.gdx.maps.tiled.renderers.OrthogonalTiledMapRenderer;

public class TiledTest extends ApplicationAdapter implements InputProcessor {
    Texture img;
    TiledMap tiledMap;
    OrthographicCamera camera;
    TiledMapRenderer tiledMapRenderer;
    
    @Override
    public void create () {
        float w = Gdx.graphics.getWidth();
        float h = Gdx.graphics.getHeight();

        camera = new OrthographicCamera();
        camera.setToOrtho(false,w,h);
        camera.update();
        tiledMap = new TmxMapLoader().load("MyCrappyMap.tmx");
        tiledMapRenderer = new OrthogonalTiledMapRenderer(tiledMap);
        Gdx.input.setInputProcessor(this);
    }

    @Override
    public void render () {
        Gdx.gl.glClearColor(1, 0, 0, 1);
        Gdx.gl.glBlendFunc(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
        camera.update();
        tiledMapRenderer.setView(camera);
        tiledMapRenderer.render();
    }

    @Override
    public boolean keyDown(int keycode) {
        return false;
    }

    @Override
    public boolean keyUp(int keycode) {
        if(keycode == Input.Keys.LEFT)
            camera.translate(-32,0);
        if(keycode == Input.Keys.RIGHT)
            camera.translate(32,0);
        if(keycode == Input.Keys.UP)
            camera.translate(0,-32);
        if(keycode == Input.Keys.DOWN)
            camera.translate(0,32);
        if(keycode == Input.Keys.NUM_1)
            tiledMap.getLayers().get(0).setVisible(!tiledMap.getLayers().get(0).isVisible());
        if(keycode == Input.Keys.NUM_2)
            tiledMap.getLayers().get(1).setVisible(!tiledMap.getLayers().get(1).isVisible());
        return false;
    }

    @Override
    public boolean keyTyped(char character) {

        return false;
    }

    @Override
    public boolean touchDown(int screenX, int screenY, int pointer, int button) {
        return false;
    }

    @Override
    public boolean touchUp(int screenX, int screenY, int pointer, int button) {
        return false;
    }

    @Override
    public boolean touchDragged(int screenX, int screenY, int pointer) {
        return false;
    }

    @Override
    public boolean mouseMoved(int screenX, int screenY) {
        return false;
    }

    @Override
    public boolean scrolled(int amount) {
        return false;
    }
}

 

When you run the code you should see your map.  Pressing the arrow keys will scroll around the map ( and show bright red when you’ve moved beyond the extents of your map ) .  Pressing 0 or 1 will toggle the visibility of each of the two layers in your map.  ( See the tutorial on Tiled if that makes no sense ).

 

image

 

The impressive thing here is how little code was required to accomplish so much.  In a nutshell it was basically just this:

 

camera = new OrthographicCamera();
camera.setToOrtho(false,w,h);
camera.update();
tiledMap = new TmxMapLoader().load("MyCrappyMap.tmx");
tiledMapRenderer = new OrthogonalTiledMapRenderer(tiledMap);

 

We create an OrthographicCamera, set it to the dimensions of the screen and update() it.  Next we load our map using TmxMapLoader.load() and create a OrthogonalTiledMapRenderer passing in our tiled map.

 

In our render method:

camera.update();
tiledMapRenderer.setView(camera);
tiledMapRenderer.render();

Basically update the camera ( in case we moved it using arrow keys ), pass it in to the TiledMapRenderer with setView() and finally render() the map.  That’s it.

As you can see in our key handler:

 

@Override
public boolean keyUp(int keycode) {
    if(keycode == Input.Keys.LEFT)
        camera.translate(-32,0);
    if(keycode == Input.Keys.RIGHT)
        camera.translate(32,0);
    if(keycode == Input.Keys.UP)
        camera.translate(0,-32);
    if(keycode == Input.Keys.DOWN)
        camera.translate(0,32);
    if(keycode == Input.Keys.NUM_1)
        tiledMap.getLayers().get(0).setVisible(!tiledMap.getLayers().get(0).isVisible());
    if(keycode == Input.Keys.NUM_2)
        tiledMap.getLayers().get(1).setVisible(!tiledMap.getLayers().get(1).isVisible());
    return false;
}

 

Navigating around the map is simply a matter of moving around the camera.  We move in 32pixel chunks because those are the size of our tiles.  So basically we move the camera left/right/up/down by one tile each time an arrow key is pressed.  In the event the 0 or 1 key are pressed we toggle the visibility of that particular layer.  As you can see, you can access the TileMap layers using the getLayers().get() function.

 

In the next part we will look at adding some more complex functionality.

 

On to part two.

Programming , , ,




A look inside Unreal Engine 4

8. April 2014

 

Unreal shook the indie game developer world up recently when they announced they made Unreal Engine 4, with complete source code, available for $19/month as well as a 5% royalty.  I assume some of you are wondering what your 20 bucks a month gets you.  Well this post is intended as an overview of what is included in Unreal to help you decide if you will take the plunge.  By no means is it intended as a review, although I will make a few comments about quality where applicable.  Alright, lets jump right in!

 

Welcome to the Unreal Portal/Getting Started

 

Once you’ve signed up, entered and confirmed your credit card information, you will now be able to access the Unreal Engine portal.  This is where you can go about downloading Unreal Engine and access the community, wiki, source code and documentation, more on that later.

image

 

Click the download link to the right to download the downloader.  This initital download is quite small but that’s only just the beginning.  Now the proper download begins.

Unreal2

 

The initial download is about 7GB, the first patch was 4GB.  Fortunately download speeds are great, even on day 1 I got enough bandwidth to max on out 50MB connection.

 

Each time you launch UE4, you will be prompted for credentials.  ( Haven’t used Offline mode yet, so you shouldn’t require an online connection like CryEngine ).

image

 

Then once again back to the launcher.  This is a combination of news, community portal, marketplace and quick launch.

image

Coincidentally, in Windows 8.1, for some reason none of the news links actually work for me.  You can see down the left hand side there are a number of projects listed under My Content.  Most of these are actually freely available templates you can get from the marketplace.  Each of these is a one level game demonstrating a different concept, be it 2D, 3D, Blueprints, C++ coding, etc.  They range in size between 20MB and 800MB.  They are found in the marketplace:

 

image

 

There’s tons of high quality starter content here and right now almost the entire thing is free.  However, you can see the beginnings of a Unity style marketplace is planned if you look under the coming soon section, you can see a gun based asset pack that is going to be for sale:

image

 

Hopefully this is opened up to the community and becomes a viable competitor to Unity’s Asset Store.  Now let’s fire up the main editor.  See that big yellow LAUNCH button, yeah, that’s how.  I’ll open it up with the Strategy Game template, on of the more complex samples.

 

The Main Editor

 

This is where the magic happens and in a word, it’s polished.

image

 

Perhaps most impressive, notice the Play button in the top toolbar. at any time you can actually hit this and run your game directly in the editor instantly.

 

One word of warning here.  You level is basically running as a game in your engine at all times.  For most people this isn’t going to be a big deal, but to people like myself who develop on the go using a laptop it can be crippling if you arent near a plug.  The Unreal Engine is an absolute battery killer.  On my Windows laptop I can generally run Unity for 3 or 4 hours on battery, a bit longer if I try to stretch it out.  Unreal Engine on the other hand…

 

image

 

Ouch.  My 2013 Macbook Air faired even worse.  It went from fully charged to dead in just over 30 minutes.

 

That leads to an interesting question… how is performance, what kind of system do you need to use Unreal Engine?

 

Well the good news is you don’t need a ton of power, the tools actually ran on the Macbook Air, a 2013 Intel HD4000 GPU powered machine.  That said the experience certainly wasn’t ideal.  In all honesty, if that was my primary machine I would look elsewhere for an engine.  However on my primary Windows box, a Razer Razerblade 14” laptop ( i7, 8GB, nVidia 765m ) the performance is great, except of course the battery drain that is.

 

The editor itself is mostly for content placement, but there is a ton of power packed away.  Most tasks open up a dedicated editor of their own.  It keeps things uncluttered, but isn’t very alt + tab friendly for some reason.

 

Placing content is mostly a matter of drag and drop from the content browser to the scene.  Speaking of Content Browser, here it is:

image

Makes it easy to logically organize all your various game assets.

 

On the right hand side of the editor is the context sensitive details panel as well as a searchable scene graph.

image

 

For level editing, UnrealEd has it’s roots as a CSG ( Constructive Solid Geometry ) editor and that functionality is still there.  Basically CSG modeling works by creating complex shapes by adding and subtracting simple shapes, here for example is a box cut from another box in the editor:

image

These days however, CSG modeling is rarely used, but can be used to quickly prototype a level.

 

Of course there is a height mapped landscape editor built in:

image

You can push/pull the landscape to manipulate it, use brushes to quickly instance geometry and texture the landscape.  OF course you can still drag/drop from the Content Browser to a landscape you’ve generated.

 

This of course only scratches the surface of what the Editor can do.  You can also define lighting, environmental effects, Nav mesh volumes, etc.

image

 

The Editor itself could no doubt fill a book, or perhaps many, but Unreal have done a very good job of compartmentalizing the details.  Until you need something, it’s mostly out of your way, and if you’ve worked in Unity or any 3D applications, it should become pretty quickly intuitive to you.  One thing I really don’t like however is the hold control to do model.  So for example, if you want to paint the geometry, you need to hold down the Ctrl button while left clicking.  It is counterintuitive to me.

 

Remember how I said earlier that the editor is composed of a number of different windows.  One such window is for editing Blueprints.   Let’s take a look at that next.

 

Blueprints

 

So, what exactly are blueprints?  Well if you’ve used prior Unreal engines, it is the replacement for Kismet.  If you are completely new to Unreal, think of Blueprints like a visual programming language.  It works a lot like the graphing functionality in most 3D applications.  Don’t dismiss Blueprints early either, they are surprisingly capable.  Many of the sample games you can download are implemented entirely in Blueprints.

 

Blueprints can be accessed with the Blueprints button in the main interface:

image

 

Each level can have a Blueprint that responds to a variety of events or you can create Class Blueprints, which are basically exactly like C++ classes, except they are implemented as Blueprints.

 

Blueprints open as a completely separate window, like so:

image

 

Blueprints can be complex beasts.  Here for example is the Blueprint for controlling the character from the blueprint example:

image

 

One annoyance I have is the lack of zoom granularity control.  Zooming to fit just what you want on the screen can be a chore as you under/over-zoom due to the lack of granularity.

 

Think of Blueprints like massive flow charts that control, well, just about everything in your game.  Most classes and their properties in the game are exposed as Blueprints and you have a large library of functionality available to you.

image

 

This post is starting to get a bit long so I am going to split it into two parts.  In Part Two we look at the C++ programming side of the fence, explore the documentation available, take a look at the source and the community available.

 

On to part two.

Programming , ,




A look inside Unreal Engine 4: Part Two

8. April 2014

 

One of the vaunted features of Unreal Engine 4 is C++ support.  How exactly does that work?  First you need to have an external IDE installed, either Visual C++ on Windows or XCode on Mac.  The Express version will work but the helper toolbar is unavailable.  It’s mostly just a shortcut so it’s not a huge loss.  Integration is pretty solid.  In the Editor in the File menu there are a number of menu options:

 

C++ Coding

 

image

 

By selecting Add Code to Project… you can easily create a new game object using a wizard like sequence.  You select the base class:

 

image

 

Name it and you are done:

image

 

Once you click Create Class, you will be prompted to edit the code:

image

 

You will be brought to your IDE of choice.  From this point on, its just like working with any other Visual Studio or XCode C++ project.

image

 

The result of your project is a DLL file, build as per normal and your game will update in the editor.  It’s only when adding ( like we just did ) a new class do you need to restart the Unreal Engine Editor.  Otherwise a simple refresh should suffice.

 

The actual C++ libraries are fairly massive and far beyond the scope of this brief overview.

 

Building Unreal Engine from Source

 

One of the big advantages of Unreal is you have complete access to the source code.  The code is available in multiple parts, a couple of zip files with most of the external dependencies then the remaining code is available of Github.  You have to associate your Github account with your Unreal account, but the process is basically instant.

 

The GitHub repository is about what you would expect.

image

 

The actual source isn’t that big, about 120MB, while the supporting zips measure in at a couple GB, but they shouldn’t regularly change.  Unreal make a bleeding edge release available for the brave of heart.

 

The actual process is about as simple as it gets.  You do a git pull, download and extract the supporting files into the same directory, then run a script that generates the project or solution file.  Then, in the case of Windows, simply open the SLN file in Visual Studio:

 

As you can see, the solution contains full sources for every tool in the SDK:

image

 

This is nice, when they say with source code, it’s the ENTIRE source, nothing is hidden from you.  On the other hand, have some patience, the build process isn’t exactly fast.  On my machine it took about half an hour, I cant even imagine how long it would take on the MacBook Air, probably a couple of hours.  Then again, I remember the bad old days of all day builds, so this is really a first world problem.

 

Have a fair bit of drive space available too, as building from source is going to require a fair bit of space:

image

 

I’ve only scanned the code but from what I’ve seen it’s pretty clean and well commented.  For the majority of devs, you probably wont ever need to modify the code, but being able to run it in debug mode is certainly invaluable.

 

 

The Documentation

 

A project like this lives of dies on it’s documentation and I am please to say Unreal Engine is well documented.

 

First there are a series of video tutorials.  Even without a membership you can check them out.  As of right now there are 64 video tutorials available.

The documentation is broken down like so:

image

 

Under the Samples & Tutorials some are currently just placeholders.

image

 

The Programming Guide is pretty comprehensive.

image

 

Reference documentation is again detailed:

image

 

They also provide the AnswerHub, a StackOverflow like portal for asking and answering questions.    As you can see from the screenshot below, answers come very quickly and devs are very active in solving problems.  If you run into a problem, you are very well supported:

image

 

In addition to AnswerHub, there is also a full Wiki:

image

Currently it is a bit sparse, but expect it to grow over time.

 

Finally there are the forums.  One of the nice things about having to pay to be a member is it gets the signal to noise ratio way down.  This means the only people on the forums are people that are using or evaluating Unreal Engine.

image

 

The forums are also very active and developers actively participate.

 

Summary

 

This of course only scratches the surface of the functionality available.  There shader support, skeletal systems, etc… all nicely integrated in the editor.  What I will say is I am actually shocked at the level of polish of not only the Engine and supporting tools, but also the community they have fostered and the level of support they are providing.

 

When I first downloaded UDK I was actually somewhat underwhelmed with what was included.  Level level of polish present in UE4 shows they are taking this release very seriously.  Don’t get me wrong, UE is NOT a beginner friendly product, this is some seriously powerful but also sophisticated tech you are being given here.  That said, Unreal have done an amazing job making it as accessible and well supported as I could have imagined.

 

Is it worth 19$ a month?  Most certainly, if only just for the learning experience it represents.

Programming , ,




LINQ for C++ with cpplinq

4. April 2014

 

When it comes to programming languages, I literally use dozens, but when it comes down to an all other things being equal decision my go to language of choice tends to be C#.  One of the big plus sides of C# is the wonderful LINQ ( Language Integrated Query ).  LINQ makes heavy use of lambda (closures) a feature lacking until recently in C++.  Now with lambda expressions part of the C++ language LINQ for C++ is now a possibility.  It exists as a single hpp file you add to your project.

 

If you aren’t already familiar with LINQ, here is a simple example in C#.  It’s a simple scoreboard that sorts the results by name, then by score, then totals and averages all of the scores.  As you can see, it’s a very compact and clean way to access data.

 

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

namespace ConsoleApplication1
{
    class Entry
    {
        public Entry(string name, int score)
        {
            this.name = name; 
            this.score = score;
        }

        public string name { get; set; }
        public int score { get; set; }
    }

    class Program
    {
        static void Main(string[] args)
        {
            List<Entry> scoreEntries = new List<Entry>();
            scoreEntries.Add(new Entry("mike", 42));
            scoreEntries.Add(new Entry("bob", 99));
            scoreEntries.Add(new Entry("doug", 99));
            scoreEntries.Add(new Entry("steve", 12));

            var sortedByName = scoreEntries.OrderBy(item => item.name).ToList();
            Console.WriteLine("Sorted by score");
            sortedByName.ForEach(item => { Console.WriteLine(item.name + " " + item.score); });

            Console.WriteLine("\nSorted by name");
            var sortedByScore = scoreEntries.OrderBy(item => item.score).ToList();
            sortedByScore.ForEach(item => { Console.WriteLine(item.name + " " + item.score); });

            var totalOfScores = scoreEntries.Where(item => item.score > 0)
                .Sum(item => item.score);

            var averageScore = scoreEntries.Average(item => item.score);
            Console.WriteLine("\nTotal of scores == " + totalOfScores + " Average Score == " + averageScore);

            
        }
    }
}

 

Now let's take a look at the C++ version using cpplinq:

#include <string>
#include <list>
#include "cpplinq.hpp"
#include <iostream>


class Entry{
    public:
        Entry::Entry(std::string name, int score){
            this->name = name;
            this->score = score;
        }

        std::string name;
        int score;
};


int main(int argc, char **argv)
{
    std::list<Entry> scoreEntries;
    scoreEntries.push_back(Entry("mike", 42));
    scoreEntries.push_back(Entry("bob", 99));
    scoreEntries.push_back(Entry("doug", 99));
    scoreEntries.push_back(Entry("steve", 12));

    using namespace cpplinq;
    
    auto sortedByName = from(scoreEntries)
        >> orderby_ascending([](const Entry & entry){ return entry.name;  })
        >> to_vector();
        
    auto sortedByScore = from(scoreEntries)
        >> orderby_descending([](const Entry & entry){ return entry.score;  })
        >> to_vector();

    std::cout << "Sorted by name" << std::endl;
    from(sortedByName)
        >> for_each([](const Entry & entry){ std::cout << entry.name << " " << entry.score << std::endl; });

    std::cout << std::endl << "Sorted by score" << std::endl;
    from(sortedByScore)
        >> for_each([](const Entry & entry){ std::cout << entry.name << " " << entry.score << std::endl; });

    auto totalOfScores = from(scoreEntries)
        >> select([](const Entry & entry){ return entry.score; })
        >> sum();

    auto averageScore = from(scoreEntries)
        >> select([](const Entry & entry){ return entry.score; })
        >> avg();

    std::cout << std::endl << "Total of scores == " << totalOfScores << " average score == " << averageScore << std::endl;
    return 0;
}

 

A few obvious differences.  Cpplinq statements start with the from methods defining the type of data source to perform on.  In this case I used the default from() which takes a standard C++ STL type.  There are also from__array() and from_range() for working with arrays and iterators respectively.  Next the . (dot) operator has been replaced with the >> operator.  Of course the lambda syntax is different as well ( C++’s is much uglier ), otherwise at the end of the day, it is very similar to LINQ in both look and execution.

 

If you are new to C++ and are struggling to wrap your head around the uses for lambdas, give cpplinq a shot and you will quickly see their value!

Programming




HOLY CRAP! MOAI isn’t dead! In fact, they just released v1.5

27. March 2014

 

Wow, I gotta say this announcement pretty much broadsided me.  I wrote Moai off for dead, which was a huge shame, as I did a tutorial series on the subject, and frankly found MOAI to be some of the cleanest C++ code I had ever read.  So to hear of a new release certainly makes me happy.

image

So then, what’s new?

 

Feature merge from Zipline:

  • Massive rework of the garbage collection system to simplify object tracking
  • Reworking of the AKU Modules API
  • New SDL host to complement the GLUT host
  • A flag to MOAIAction to disable auto-stop on no children

A New Build System:

  • The CMake build system that was in place for the linux and blackberry hosts was extened to include all hosts
  • Luajit support was added to all platforms (via cmake scripts)
  • create-project-* scripts were created that allows you to generate vs2008->vs2013 and xcode project files.
  • Changes to a project can be recorded once in the relevant cmake script and all platforms should work instead of maintaining 6+ build configs
  • Plugin support was added for installing modules which are outside the moai sdk (other repos) [More]
  • Custom host support was added for compiling a host outside of the repo [More]
  • Support for compiling with Ming-w64 for a completely open source experience on Windows (no more vcruntime to distribute)

Additional Features:

  • Vector Pathfinding (MOAIVecPathGraph)
  • Box2D Closest Raycast Exposure
  • Twitter support in android
  • MOAIShader was enhanced with the 4x4 matrix and given access to UNIFORM_WORLD_VIEW
  • A faster and smoother android host with working keyboard support.
  • MOAISafariIOS is now MOAIBrowserIOS and MOAIBrowserAndroid added
  • Visibility can now be inherited!
  • Google Play Services
  • Updated Tapjoy and Vungle
  • MOAISim showCursor and hideCursor support
  • Documentation improvements
  • Chartboost for IOS and android
  • You can now EnqueueJoystickEvent from the host.
  • New HTML/JS host based on emscripten

Fixes:

  • Android logging support repaired
  • VFS works correctly on all platforms
  • A heap of lua stack overflows
  • Fixes to JSON parser and encoder
  • Textbox string bounds calculations fixed
  • PVR support working now

 

Certainly some nice new features in there, and hopefully this new release will breath renewed life into this project that frankly always deserved a better fate.

 

You can access the MOAI source code here.

You can read a more complete release notes here.

News, Programming ,