Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

17. April 2014

 

I suck at texturing.

 

There, I said it.  I love 3D modeling, I even enjoy rigging and animating.  While not my favorite activity, I am even OK with UV unwrapping…

 

But texturing, I suck at texture mapping.

 

Over the years I have tried a number of solutions that make texturing easier going back to the early days of 3D Studio Max plugins that allow you to paint directly on your models.  Since then, those tools have become progressively more built in to the base package but at the end of the day, the vast majority of texturing still takes place in Photoshop and I still suck at it.

 

Enter Substance Painter.  It appeared on Steam about a month back and I’ve been playing around with it ever since.  I intend to cover it in more detail soon, in fact I would have already if it weren't for the massive influx of goodies that came with GDC this year.  Anyways, stay tuned for more details shortly…image

 

For now, a spot a of news.  Beta 3 was just released.  Oh, and if you buy during the beta it’s 50% off.

 

Enough talking, so what exactly is Substance Painter?

 

Short version; it’s the program that makes me not completely suck at texturing.  That’s about the biggest endorsement I can give.

 

Long version, well, I’ll use their wording for that:

 

Substance Painter is a brand new 3D Painting app featuring never before seen features and workflow improvements to make the creation of textures for modern games easier than ever.


At Allegorithmic, we have a long history of working very closely with our customers, from the small independents to the largest AAA studios. Today we want you to help us design the ultimate painting tool and bring innovation and state of the art technology to every artist out there at a fair price.

 

Today, as the title suggests, they released Beta 3.  As to what’s new in BETA 3:

Testing focus

  • 2D View
Change list
  • Added: Seamless 2D View!
  • Added: Bitmap layer masks
  • Added: Environment exposure control
  • Updated: Fill Layers now use the Tools windows to set their properties
  • Updated: Materials can be applied to Fill Layers
  • Updated: Added more stencils in the stencil library
  • Updated: Particles presets updated for faster computation
  • Updated: PBR shader optimization and quality improvement for lower quality settings
  • Fixed: Layers thumbnails are linked to the currently selected channel
  • Fixed: Lots of crashes

 

Sound interesting?  Here is a video of Substance Painter in action:

There is also a free trial available.  It’s a stand alone program, although some of the import options are disabled right now ( I used OBJ personally, from Blender ).  Keep in mind it is a beta, and feels Beta-like at times.  Some features are currently missing and performance can occasionally suffer.  On the other hand, outside of some missing features, it feels production ready.  I hope to have a more detailed preview available soon.

 

If you try it out, let me know what you think.

Art, News ,

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

15. April 2014

 

One very common requirement for even the most simple game is a level editor.  The level of sophistication required varies massively from game to game but a lot of the functionality is pretty common.  At the very base level, you need a tool to layout the graphics that make up your world.  Slightly more advanced, you need to define layers, properties and collision volumes.  Often people roll their own solution but you certainly don’t have to.  One very popular 2D level editor is Tiled Map Editor which exports in TMX format, perhaps the most supported 2D game format ( Cocos2D, LOVE, LibGDX and many others all support TMX out of the box ).  As I am going to be writing a tutorial about using tiled maps in LibGDX, I figured I would give a quick introduction to Tiled first.  Keep in mind, we are only going to scratch the very surface of what Tiled is capable of.

 

First off, download and install Tiled.  It has binaries available for Windows and Mac and a source (and daily builds) release available for Linux.  You can download Tiled here.  The documentation is available here.

 

The Tiled UI is pretty straight forward, although it looks quite different across platforms.  Today I will be using the MacOS version.

 

T1

 

A tiled map is fundamentally simple.  You are basically making a grid of tiles.  A tile is a fixed size image within a larger image.  The larger image is called a tile sheet.  It’s somewhat like working with legos to make a level.  Here is an example tilesheet ( taken from here ):

 

Tilesheet

 

It’s a 512x512 image composed of a number of tiles that we are going to paint our level with.

 

Now that we have our tiles, let’s create our map.  Tiled has the ability to create Orthogonal ( straight on or “top down” perspective maps ) or IsoMetric ( angled perspective ).  In this example we are creating a Orthogonal map.  Next you need to decide how many tiles your map consists of in each direction.  Yes, tiled maps are always rectangular in shape.  Finally you need to decide your tile dimensions in pixels.  Looking at the tile map above it isn’t clear how large each tile is, but that is because some of the larger constructs are actually composed of a number of tiles.  You will see how that works in a few seconds, for now simply select 32x32 pixels for tile size and 32x32 tiles for map size.  In real pixel terms, this makes our map 1024 pixels by 1024 pixels.

 

T2

 

Now we need to load our tile set into Tiled. Select Map->New Tileset

 

T3

 

Now in the resulting dialog name it and otherwise we keep the defaults.  Our tile set is made up of 32x32 tiles, so those values work.  The background colour is used if you use a particular colour colour to mark transparency.  In this case we are using the alpha channel to determine transparency, so we don’t need to set a colour value.

 

T4

 

Now if you look at the bottom corner of Tiled you will see a grid of tiles available.  You simply select a tile, then paint in the right window with it.  

 

T5

 

Let’s start by quickly paint our entire map with a grass tile.  Click a grass tile in the tile sets window, like so:

 

T6

 

Now in the left hand window, select the Fill Tool ( or hit F ), then click in the window, and it will be filed with the tile selected filling our level with a nice grass base.

 

T7

 

Now lets say we want to quickly fill in some roads.  The road tile is actually composed of four separate tiles.  This is easily handled in Tiled, simply click the top left tile in the tile set window, then holding SHIFT, click the bottom left, like so:

 

T8

 

Now you can draw with all four tiles at once by simply clicking on the map.  First select the Stamp tool, then draw out the tiles as you desire:

 

T9

 

So, what about the tiles with transparent sections like these ones?

 

T10

 

Well these are designed to be layered over top of other tiles.  Which leads us nicely to layers.  If you have ever used Photoshop or GIMP, you probably already have a pretty good understanding of layering.  Basically layers are drawn over top of lower layers.  So for example, what you draw in Layer 2 is drawn over top of what you draw in Layer 1.  

 

Right now, we only have a single layer, let’s add another one.  In the top menu, select Layer->Add Tile Layer.

 

T12

 

Now in the Layers panel you should see a second layer available.  Clicking the checkbox to the side of the layer shows/hides it’s contents.  Clicking the layer itself makes it active.  Click Tile Layer 2.

 

T11

 

You can now paint “over” the grass and road layer, like so:

T13

 

Congratulations, you’ve just created your first map.  Now we simply save it.  

 

T14

 

 

Next we will take a look at using this map in code in LibGDX.

Programming ,

14. April 2014

 

This press release just arrived from Autodesk:

 

Autodesk Maya LT 2015 to Launch on Steam

 

Today Autodesk announced that Maya LT 2015 is coming to Steam, Valve's popular entertainment platform. Maya LT brings its powerful animation and modeling feature set to Steam's active community of over 65 million gamers, developers and artists to help them create 3D game assets to personalize their games and bring them into popular Steam titles like "Defense of the Ancients 2" (DoTA 2) or to create assets for use in their own games.

"The Valve community is unique, because it includes a very engaged mix of both gamers and developers working together to mod titles and generate content. We hope Maya LT will further that creative spirit and help a Steam user of any skill level to create high quality 3D game assets," said Frank Delise, imagedirector, games solution, Autodesk. "We're engaging with the community on day one by participating in forums, answering questions and offering custom tutorial content for DoTA 2 fans. We can't wait to try new things with the community and see how they push Maya LT to its limit and beyond."

A unique solution for professionals and hobbyists alike, Maya LT boasts a targeted feature set developed from the ground up for the indie game industry, like powerful modeling tools to help create and alter 3D assets of any size and a simplified workflow with the Unity 3D Engine. When purchased on Steam, developers will have access to a full commercial Maya LT license, allowing assets created in the tool to also be exported for use in any game on PC, console and mobile.

An online entertainment platform, Steam hosts over 2000 games in all genres. Users can not only instantly download and play games, but also create and share content through the Steam Workshop.

Available April 22, 2014, Maya LT term licenses will be available monthly for $50 USD and will be available in select countries. To learn more or purchase the product on Steam, visit: http://store.steampowered.com/app/243580 .

To check out all the custom DoTA 2 content and Maya LT 101 tutorials, visit the Autodesk Steam community hub: http://steamcommunity.com/app/243580/ .

 

Steam is quickly becoming the online hub for game development tools.  Maya LT is becoming much more feature complete from when it was originally released, much of it based on user feedback.

News ,

10. April 2014

 

Somehow missed this announcement in the chaos of the last few weeks.  It was only via this comment I became aware of the release.  Anyways Havok have released a pretty massive update to Project Anarchy, their free for mobile, cross platform gaming engine.  The star of the release is integration of Autodesk BEAST lighting solution and a new water system, but that’s only a small part.  Post below verbatim is the contents of the release:

 

We are happy to announce the release of Project Anarchy v2014.0.5. It is now available to download. This release contains a host of new features and improvements. The v2014.0.5 release also adds Autodesk® Beast® as a fully integrated component at no charge and includes a new mobile water shape.

Additionally, you can find a number of usability improvements for vForge such as better gizmos and a new transform panel. For easy and quick prototyping we have added several primitive assets that are directly shipped with the Project Anarchy package.

Below you’ll find some highlights for the changes in v2014.0.5. For a full list of changes please take a look at our documentation.

Autodesk Beast Plugin

With Project Anarchy v2014.0.5 we include our integration of the powerful global illumination lighting solution Autodesk Beast.

With Beast, you can generate amazingly realistic lightmaps and lightgrids directly from within vForge, and even distribute the computation workload among multiple machines using DistriBeast. The features of Beast can be considered as a superset of the default vLux integration. Summarized, it has the following strengths when compared to vLux lighting:

  • Faster computation times that scales well on n-cores and in some cases orders of magnitude faster if global illumination is enabled
  • Support for new light shapes: window light, area light
  • Tighter packing on lightmaps to save texture memory
  • Realtime preview through eRnsT tool
  • Better scalability for larger scenes with its support for instanced geometry

The Beast integration can be used for free in the context of Project Anarchy.

In order to activate Beast, open any scene, go to the menu Lighting->Active Lighting Tool and checkmark “Autodesk Beast”. Once this is done Beast will be used when you re-calculate the lighting.

New Mobile Water Shape

A specialized mobile water shape has been added in v2014.0.5. This shape implements specially optimized water rendering for mobile devices. For more details see "Mobile Water Introduction" in the Project Anarchy documentation.

The mobile water shape is located in the effects shape section and can be added to your scene by dragging and dropping an instance of the mobile water shape from the shape creator panel.

New Search Bar in Shape Panel

There is now a search bar in the Shape panel that can be used to filter all objects by name.

Asset Browser Improvements

  • The path to a file can now be copied from the asset browser.
  • When Perforce is used assets can now be checked out directly.

  • Particle Effects are now shown in the asset browser and can be added to the scene via drag & drop.

  • Static meshes are now also shown while dragging them from the asset browser into the scene and snap-to-grid is now also working while dragging meshes into the scene.

New primitive meshes for easy prototyping

In the base data directory there are now some primitive meshes that can be used for quick and easy prototyping and blocking out of a level. Material sets are also available to facilitate color coding sections. On a static mesh instance, see the properties, there is a property called 'CustomMaterialSet', which contains variants for different colors.

New Transform Bar

We have added a 'transform bar' to the bottom of the viewport. The transform bar allows quick and easy changing of the position, rotation and scaling of selected objects. Values can be input both relative to the current value, or absolute.

New Script List Panel

There is now a 'Script List' panel, which shows all the scripts that are used in the scene. You can open the scripts in the script editor directly from that list and you can see which shapes use that list and select them.

vForge Grid Improvements

The grid in vForge has been improved with a number of visual and UX improvements:

  • In ortho mode it now consistently displays in the viewing plane and the grid gets less detailed when zooming out.
  • Lines can be highlighted at user-defined regular intervals.
  • In perspective mode the grid now follows the camera and the grid size is fixed.

Improved Gizmos and ‘Stick to Ground‘ Feature

  • The 'Stick to Ground' feature for the move gizmo has been improved significantly. It can now correctly handle indoor levels comprising of different stories or levels.

  • The scaling gizmo has been improved. Scaling is now much smoother and the center handle of the gizmo now does uniform scaling dropping the need for an extra mode.
  • The translation gizmo now shows helper lines to make it easier to place objects.

General vForge Improvements

  • In the Visual Shader Editor, you can now zoom in with CTRL+Mousewheel.
  • vForge now automatically makes a backup of the scene when entering Run-in-Editor or Play-the-Game mode. Should that crash the editor, on the next start vForge will prompt to use that backup or continue.
  • The multi-user editing dialog will now retrieve more descriptive errors from Perforce in case connecting or workspace resolving fails.

Scaleform Integration Improvements

  • The access to the ActionScript state has been refactored.
  • The new VScaleformValue and VScaleformVariable classes now also allow invoking functions and accessing class members.
  • As opposed to VScaleformValue, an instance of the VScaleformVariableclass represents an ActionScript variable and its value is always kept in sync with the value in the movie.

General Improvements for Programmers

  • Double Tap via remote input is now supported.
  • Cubemap Textures that use the PVR format are now loading correctly.
  • The depth-fog settings are now exposed to Lua, so they can be changed at runtime from script.
  • There is now a new function on the ragdoll component to apply a force or impulse to bones that are inside a sphere. This can be used to create explosions and other effects that push or pull objects within a defined area.

News ,

Month List

Popular Comments

Construct 2 Release r240
Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon


16. November 2016

 

Construct 2, a popular “code-less” HTML5 based game engine, just released the beta release r240.  As this is a beta release, you know the story… expect warts, don’t use for production, etc.  The biggest feature in this release is basic WebGL 2 support, which was just turned on by default in Google’s Chromium browser.  The release also saw new functionality in the form of new triggers and pointer events.

 

Full change log of the release:

image

GameDev News

blog comments powered by Disqus

Month List

Popular Comments