Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
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


19. November 2015

 

Just a quick note to announce a new series I have started, The GameDev Toolbox.

Toolbox

 

The series is intended to bring exposure to a wide variety of tools used in game development.  This includes graphic creation packages, IDEs, audio tools, design tools and more.  Basically if it isn’t a library, framework or game engine and it’s used for game development we will probably take a look at it.

These are not reviews, nor are they tutorials.  They are meant as a quick introduction and overview and nothing more.  For now the series is video only, but I will be creating a text based version in the near future.  There is a playlist for the series available here.

It currently consists of:

 

This video shows the premise of the series:

Art Design General Programming


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


28. August 2015

 

Hello All,

 

Just a quick note on what’s coming up at GameFromScratch.com.  First up, the end of summer is fast approaching and I think it’s time for a road trip vacation.  Last year I took a similar trip and it rained every single day, so this year I’ve learned from my mistake and I am bringing along a laptop and will be doing a little work while lounging by the pool ( or more likely locked inside watching the rain ).  This isn’t exactly a hardship, as I enjoy what I do after all.

 

Since it is a vacation however, I am going to be taking a somewhat different approach to what I am working on.  First off, there will be no videos produced, since I wont be bringing the proper equipment with me.  Second, traditional series will be on hold until I get back, so don’t expect any updates to existing tutorial series for at least a week, although I should get an in progress “Closer Look at” post out before I depart or shortly thereafter.

 

Instead I am intending to do exploratory work on a pet project I’ve been kicking around in the back of my head…  There is one topic that is incredibly underserved when it comes to books and tutorials.  One that is incredibly popular, but due to it’s massive nature, most people don’t really get into it for one reason or another.  Computer Roleplaying Games.

 

I have considered doing an RPG tutorial ( CRPG I suppose) for ages.  It was games like Ultima, Bards Tale, Might and Magic, Wizardry, Autoduel, Wasteland, etc… that truly got me hooked on gaming.  It’s the genre of game I personally am also the most interested in developing.  There are a couple problems about doing a tutorial series about RPGs.

 

First off, I will have to learn a ton to actually cover the subject.  I have never created an RPG before, so this is obviously going to be one of those “learning as I go” projects.  This isn’t really a huge concern to me to be honest.  It’s not actually a hugely complicated project, just a ton of tiny intricate moving pieces that need to be organized.

 

Second, they are massive.  There are so many subjects to cover and to be frank, a lot of what makes a roleplaying game work is actually the tooling behind it.  World editors, scripting systems, world state, databases, this kind of stuff.  You quickly find yourself creating your own game engine, scripting language, adhoc database, etc…  and quite frankly, the value of doing this is minimal, and the value of doing it in tutorial form even less.  Not many of you are going to want to use my poorly rolled engine ( I’m a fervent believe in the Make Games not Engines ethos… although I think making tools is a brilliant use of time ).

 

On the other hand, if I use an existing engine, my demographic is going to be small as well.  Right now I think the most popular engine in terms of potential readers is probably Unity.  So the series that might appeal to the most users is “Creating an RPG in Unity”.  This has many problems.  First is easily explained with a handy Venn diagram.

GFSUnityRPGVenn

 

The Dark Blue portion is the most engaged audience, this represents the portion of the community that use Unity and are interested in RPGs and read GameFromScratch.  As you can also tell, it’s the smallest portion, although this is generally the way these diagrams work.  There are the two slightly lighter blue areas, and those represent people that have 2/3rd interest in the project.

 

Simply put, by picking a game engine, it narrows down the potential audience substantially.  On the other hand, as I said earlier, not using an engine is a very bad choice.  Also to be completely honest, without a serious amount of modification ( which would require a source license ), Unity doesn’t actually seem like a great choice for an RPG, at least for small teams.  Of course some exceptional games have been made using Unity, such as Wastelands 2, Pillars of Eternity and Shadowrun Returns, but they all had huge teams and most likely had source licenses.

 

It’s this limited audience that has always kept me away from the idea; and a lack of time has kept me from simply working on my own game.  This is one of the challenges of running GameFromScratch.com, I need to work on either a broad variety of topics, or on topics of interest to a large enough segment of the community.  This keeps me from spending a ton of time developing my own game.  This isn’t really a big deal, I actually enjoy teaching more than I enjoy development these days.

 

I hit upon an idea however that I think might be useful to the greatest number of people.  To appeal to enough readers to justify the time spent, to be effective enough you could actually use the results, to be productive enough that you could actually finish a game and be interesting enough that I would actually enjoy working on it.  That’s a lot of enoughs eh?

 

To start out making an RPG engine of sorts, you would need a number of moving parts to start from.

  • a game engine/collection of libraries to handle the technical bits.  Rendering, input, that kind of stuff
  • a scene graph, world storage format.  Basically the data structure in memory and on disk that your game will reside in.  This could be part of the engine you chose, but for an RPG, you will probably want more control or possibly to decouple it from the engine for a variety of reasons.
  • a world editor.  This one is big.  HUGE in fact.  My thought at first was to create if from scratch, but that could literally take a single developer years.  More on this point later, as again, it’s a big one.
  • RPG logic.  There’s all kinds of things that are somewhat unique to RPG games, from massive state driven game levels, time management, to simple random generators, dialog trees, class abilities, game entities, etc.  Basically the common logic that goes into an RPG that makes an RPG and RPG, regardless to if its 2D/2.5D or 3D, sci/fi or high fantasy.
  • misc tools…  conversation / internationalization tools, sprite effect tools, world item asset creation/database, etc.  Some of these could be part of the engine, some could be part of the editor, some could be stand alone and all may depend on the RPG logic layer.  File this section under miscellaneous/everything I forgot.

There are many different choices, but all of have their strengths and weaknesses.

 

An immediate thought would be LibGDX.  From the game engine side of things, it certainly ticks almost all of the boxes.  There are three big downsides to this choice however.  First, I run into the Unity factor again… if I go with LibGDX, I lose all readers interest that don’t want to use LibGDX or Java.   Second, there is a lack of out of the box scripting support.  I wish there was Lua ( or jLua, or whatever the Java equivalent is ) support out of the box.  I think it would be easy enough to add in support for a scripting language for the LJGWL target, but once you start getting into Android and then the RoboVM trickery then we are talking a layer of black magic I currently do not possess.  It may not actually prove to be that difficult, but this is a portion of LibGDX that I’ve always just let others wrap their brains around.  Finally, and one of the big ones…  no level tool, at least not yet.  There is Overlap2D, but it’s just not there for me yet.  Plus frankly, trying to extend it with the ECS and MVC design its chosen… this would be nightmarish.

 

Those end up being the big two sticking points for me, the availability of a scripting language, but one that has to be optional… and a solid base to build a level editor upon.

 

In terms of level editor, one of the most immediately obvious answers is TileD.  I like Tiled… I actually looked at the source a number of times considering doing exactly this very thing… and I decided it would be WAYYYYYY too much work.  Tiled’s code is nice and clean Qt C++, that’s not really the issue… the issue is the pure amount of work you would have to do to extend it.  I believe they are refactoring towards extensibility, but this is a WIP.

 

Of course Unreal and Unity can be turned into level editors, but this will start feeling like a hack right away, and without Unity source you are quickly going to be stuck in the Unity design model, which for an RPG, would lead to an organizational mess almost right away.  With Unreal you get the source, but realistically you aren’t going to want to extend the editor, at least not with a fairly large developer team.  Plus that API is changing A LOT, so expect huge breaks every time there is a new release.  Pretty much ever major game shipped on one of these engines pretty much locks to a version and sticks with it…

 

You could also extend a content creation platform too… this is actually a pretty popular choice.  You could extend an app like Blender, Maya or Max to use as your authoring environment, but this again is a highly specialized development and of interest to a very small segment of the community.  Also it can very easily get hackish fast.

 

Of course, I wouldn’t have shared this massive wall of text unless I thought I had an idea now would I?  Well, it’s that idea I am going to flesh out during my vacation, decide if it’s viable, both from a tech perspective and a time perspective.

 

So… what are my thoughts?

 

Godot.  Or perhaps, sorta Godot.

 

Godot ships with a Unity-like 2d/3d editor, and a game engine capable of providing the technical bits in a cross platform manner.

 

More importantly, Godot editor is mature, 2D/3D friendly, scriptable and most importantly, modular and extensible.  In fact, the entire GDScript language is implemented as an extension module for Godot.  Therefore it should be possible to create RPG tooling ( creature editors, pathing, item inventory, conversation tools ) that can plug into Godot, but not require users to build the editor from scratch.  Basically it would enable me to create an RPG world editor using Godot, that enabled people that arent even interested in using Godot game engine, without having to fork Godot itself.  Of course you could use Godot the editor and Godot the engine to create your game.  However you could potentially use Godot the editor and say… LibGDX, or Phaser or SFML, Ogre, jMonkeyEngine, Paradox, Mono, whatever…. to implement your engine.

 

Obviously that just covers the editor/engine portion of the scenario… this leaves two very big missing pieces.

 

RPGLib.  Right now I am thinking it would be smart to provide generic RPG-esque functionality as a C++ library.  This would be usable then by the vast majority of programmers, regardless to the language they want to work in.  ideally I will use 3rd party libraries as much as possible to offload as much work as I can.  Think of this layer like the run-time that provides generic RPG-esque services to the underlying game ( the Godot editor would be a consumer of services provided by this layer ).  This layer wouldn’t care what engine you are running in, if your game is 2D, 2.5D or 3D.  It would be use to provide things like persistence, algorithms like pathfinding, a database of sorts, etc.  In theory you should be able to slot it in to a variety of games and build upon it. 

 

WorldFormat.  This one is tricky and is going to require a fair bit of brain juice…  basically I want to decouple the world format from the game engine.  In fact I want to decouple the world format from the game, but I dont think this is even close to possible.  Basically a world is a database, graph or tree of entities in memory.  The other side of this coin is, it also needs to be saveable to and loadable from disk.  Think about how the Tiled editor has the TMX format and all of the various game engines capable of loading it?  This would be like that, but with a great deal more database like behavior.  This would enable you to write a loader/importer for your favourite game engine of choice, and make use of Godot as your world editor of choice, but load it in whatever game engine you desired.  Of course this loader would be responsible for populating your game engines scene graph…

 

Think roughly this…

RPGDesign

 

Now one major downside is my C++ is meh at best and extremely rusty.  Then again, only way to brush off the rust is practice, no?

 

The end goal is to keep each layer dependent only on the layer below it, and have zero dependencies back to the Godot editor layer.  This means a user could take and make use of just the services layer.  Or the Game Format + Services layer.  Or simply the output from the level editor and ignore the rest.  Or they could use the provided loader, the Godot editor, the RPG services, etc… and have a turnkey solution to build an RPG upon.

 

 

…anyways, that’s the thought bouncing around my head right now.  On my vacation I plan to tackle two key points.  First, I want to see if the Godot editor is in fact as easy to extend as I think it is.  Second I am going to start defining as best as I can what functionality goes into what layer.  One final thing to keep in mind out of all of this… I am not intending to reinvent the wheel.  An RPG for example requires animated sprites or models, playing sound effects and music, etc…  these are NOT the responsibility of any of this, that’s left for the game engine or game implementer to handle.  The closest this comes who thing comes to any of those services is perhaps providing resources via the Game Engine Specific loader.

 

Of course, I’d be interesting in know if you guess out there would be interested in a series like this?  It would take a very long time, as I will be continuing to generate the kind of content you would expect from GameFromScratch.  It would however be a fairly good sink of my time, so I want to gauge the level of interest before a dump a ton of time into this.  Also, do you see any glaring flaws in my early concept so far… and recommendations or changes you would make?

 

Or frankly, does this all look like the ramblings of a mad man desperately in need of a vacation? Smile

Programming News General Design


2. April 2015

 

Overlap2D, a 2D Level/UI editor built over LibGDX has recently gone open source.  We hosted a tutorial here on Gamefromscratch on using Overlap2D several months back.

 

From the announcement:

Overlap2D is now open source!

So yeah, after intense re-factoring, we are finally ready to give Overlap2D sources to our fantastic community!

Github URL: https://github.com/UnderwaterApps/overlap2d

From now on, you will be able to fix or add anything and for everyone.

We are going to see tons of new features in near time, starting from bug proof editor with performance improvements and finishing with crazy addons like terrain editor, custom shaders, polygons, advanced asset manager and much more. With so much going on, you may be asking yourself – how can I help?

And seriously, we really need your help. 

So, here are some ideas you can try out if you feel generous:

We hope this will make editor better, and that in turn will enable you to make amazing 2D games!

Head to github, fork us, explore the code and make some pull requests!

 

Nope, this is not a late April fools joke.  You can see Overlap2D in action in the video below:

 

 

Very cool news guys!

Design News Programming


AppGameKit Studio

See More Tutorials on DevGa.me!

Month List