12. April 2015

 

A video only version of this tutorial is available here.Untitled 7

 

In this part of the Unreal vs Unity Tutorial Series, we are going to take an introductory look at Unreal Engine.  A bit of a guide tour of the interface as you will need to understand it to make 2D games.  I assume at this point you’ve downloaded and installed Unreal Engine already.  If not, go do so!  It is now completely free, but you will have to register before downloading.

 

Once you’ve finished the install, you will have one icon to deal with, Epic Game Launcher.

image

 

Click this.

 

The Launcher

 

This will load up the Launcher, like so:

image

 

There are currently three tabs across the top, one for Unreal Engine, then one each for the in development games Unreal Tournament and Fortnite.  Generally what you want is the Unreal Engine Tab and simply click the Launch button.  However it is also a good idea to look through the Learn tab to see the wealth of learning materials available for Unreal.  ( this tab is selected in the image above ).  The Marketplace is another great place to browse, full of free and paid assets you can drop into your game, including models, animations, blueprints, sample levels and tutorials.

 

For now though, click Launch.  Don’t be surprised if you have to download an update, there are frequent updates.

 

Once you click Launch, the following dialog should appear:

image

 

If you want Unreal to auto reload the project you are currently working on, instead of this dialog, be sure to tick the “Always load last project on startup” dialog.

 

In our case though, we are going to create a simple project today, although the details are probably going to be in a second post to keep things from getting too long.  Click the “New Project” tab.  Then fill it in like follows:

image

If you want to change the location, you need to click the drop down arrow icon at the bottom right to get additional options.

 

In this dialog you can start from a number of different templates, using either Blueprints or C++.  Templates include starter projects such as FPS, Flying game, Racing Game, etc.  In our case though, we want to start from scratch, so we chose Blank.  Additionally there is a bunch of content to get you started.  We however do not want it right now.  You can easily import it after the fact if you prefer.

 

Once you click “Create Project” the Unreal editor itself should finally load.

 

Unreal Editor

 

Welcome to Unreal Engine!  This is where you are going to spend a great deal of your game development life going forward, so let’s take a quick tour.

 

First, lets start with a shot of the entire editor, then we will break it down into sections.

image

 

Unreal is one of those applications that absolutely eats screen space.  It also supports multiple Windows and you will often have several editors open at once.  This is one of those applications that justifies your extremely expensive, ultra-wide monitor setup!  If you haven’t discovered the joy of multiple monitor development, you really need to!

 

Let’s break the screen down into easy to digest pieces.

 

Modes Panel

 

image

For a 2D game, this is a panel you are rarely going to use.  The tabs across the top are Place, Paint, Landscape, Foliage and Geometry Editing.

 

The last four are almost all entirely used for 3D games and we will be ignoring them.  Place however is used for placing game assets in your game, and we will be using it.  You can quickly add new objects using the Search Classes dialog, like so:

1

 

Once the item you want to place is selected, you can simply drag it into your scene.

 

The Content Browser panel

 

image

 

The Content Browser is critically important.  This is how you get assets into your game.  All the various files that go into making your game, such as models, textures, etc… can be drag/dropped into the right side of the Window.

 

2

 

The left hand folder hierarchy can be organized however you like.  Collections are a way of keeping similar things together.  You can also easily create new content by clicking New or Right clicking:

image

 

Now, remember earlier when we unchecked Include Starter Content?  Well, let’s say you want something that included with the engine itself?  Well fortunately that’s quite simple.

image

Selecct View Options, then check Show Engine Content. 

Now you will see an additional folder in the Content Browser:

image

 

You can then copy this content into your engine and turn it back off again if you wish.

 

The final, and perhaps most important feature of the Content Browser, are the right click context menu when you click game assets, such as the image we dragged in earlier:

image

 

These menus are context sensitive to the type of file you’ve clicked.  As you can see from this being an image file, the top half of the menu is populated with the Texture Actions menu.  Choosing Edit for example, brings up the Texture Editor window:

image

 

Basically the Content Browser is where you add, manage and edit game related assets.

 

The Toolbar

 

image

Across the top of your screen you have the convenient toolbar.  Most of the buttons are self explanatory, but a couple deserve further mention.  Buttons with drop down arrows have additional options, like you can see with the expanded Play button above.  Play runs your game, either in the current viewport, in a new window, as a stand alone game or in the mobile simulator.  Launch on the other hand is used for running your game on an actual device, such as an iPad.  Blueprints and World Settings are very handy, but we will cover both in more depth shortly, so stay tuned.

 

Scene Outliner

 

image

 

This is your scene graph.  This is where you create actual instances of your game assets to put together a level.  Think about it this way…  imagine playing with a set of Lego to build a world.  The individual different lego pieces… the big flat green thing, the 4 post bricks, the 2 post bricks, etc…  this are you building blocks and would be the analog of stuff that appears in the Content Browser.  The actual individual pieces, those that you use to build your house or whatever… those are what would appear in the Outliner.  The minute you drag an item from the Content Browser into the scene, it will appear in this list (technically tree).

 

As you can see from the screenshot above, there are a number of options for selecting each instance, editing it’s code, modifying it’s visibility, etc.  You can of course remove items from the level using this interface as well.

 

The Details Panel

 

image

 

Going hand in hand with the Outliner, the Details panel enables you to edit the individual properties of each object instance in your game world.  It is completely context sensitive, as you can see in the screenshot above, these are the details with the Lightsource selected in the outliner.  All of the editable attributes of each component that makes up the selected object can be edited here.

 

The Viewport

 

And finally… the biggest one for last, the Viewport.

image

 

This is the 3D representation of your scene.  You can drag objects from the Content Browser to the viewport to add them to the scene ( they will also appear in the Outliner ).  You can select, move, rotate and scale objects.  Speaking of moving, rotating and scaling, those can also be controlled using these buttons:

image

 

You can also use the W, E and R keys respectively.  ESC to unselect.  Use the left mouse button to select an object.

 

Here are translation, rotation and scaling in effect.  As you can see, each axis is represented and colour coded in the widget:

3

 

A quick note on scene camera controls.  In Perspective mode you can freely move the camera around.  The controls are as follows:

 

Zoom in/out : Scroll wheel or ALT + RMB

Orbit Camera: Hold RMB + move

Pan Camera: MMB + Move

 

 

There are a number of very important menus for the viewport controls.  The first is the one that lets you switch between the different predefined views, or the free form perspective mode:

image

 

Clicking the drop down arrow at the top left corner contains a series of very important configuration menus, including the ability to change the layout:

image

 

If you prefer the traditional quad view like 3D Studio MAX, you can click the icon in the top right corner to toggle between a quad and single view mode, like so:

image

 

Finally, you will often want to switch visibility modes.  Sometimes you want your scene textured and lit.  Often in 2D you want it textured and unlit.  In a large scene, or working behind something else, wireframe is often handy.  They can all be toggled with this menu:

image

As you can see, the majority of those settings also have a quick Alt + # hotkey available as well.

 

Conclusion

 

So, that is a basic guided tour of the Unreal Engine tools.  In the next text tutorial, we are going to create a simple Hello World scene with a sprite, camera and even a blueprint controlling it all.

Programming , , , ,

8. April 2015

 

The first tutorial in the Unreal Engine vs Unity tutorial series is now live.  In this tutorial we look at using Unreal Engine.  It’s an introduction to Unreal Engine, a guided tour around the editor, then we create a simple Hello World application using Blueprints.

 

I will be creating a companion text tutorial to go along with this video shortly.

 

You can see the video in full 1080p here.

 

The Video

 

Programming , , ,

7. April 2015

 

In this video tutorial we continue to look at 3D programming in LibGDX.  First we look at how to convert a 3D model to work with LibGDX using fbx-conv.  We then write the code to display that model and look at displaying animations.  The fbx-conv application can be downloaded here.

 

The data file used in this example can be downloaded here (zip format).  If you are interested in learning more about the process of creating the model click here.

 

The video is available in HD here.

 

The source code, and an embedded copy of the video, are available below.

 

 

Source Code

 

package com.gamefromscratch;

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Files;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.PerspectiveCamera;
import com.badlogic.gdx.graphics.g3d.Environment;
import com.badlogic.gdx.graphics.g3d.Model;
import com.badlogic.gdx.graphics.g3d.ModelBatch;
import com.badlogic.gdx.graphics.g3d.ModelInstance;
import com.badlogic.gdx.graphics.g3d.attributes.ColorAttribute;
import com.badlogic.gdx.graphics.g3d.loader.G3dModelLoader;
import com.badlogic.gdx.graphics.g3d.utils.AnimationController;
import com.badlogic.gdx.utils.UBJsonReader;

public class ModelTest extends ApplicationAdapter {
    private PerspectiveCamera camera;
    private ModelBatch modelBatch;
    private Model model;
    private ModelInstance modelInstance;
    private Environment environment;
    private AnimationController controller;

    @Override
    public void create() {
        camera = new PerspectiveCamera(75,Gdx.graphics.getWidth(),Gdx.graphics.getHeight());

        camera.position.set(0f,100f,100f);
        camera.lookAt(0f,100f,0f);

        camera.near = 0.1f;
        camera.far = 300.0f;

        modelBatch = new ModelBatch();

        UBJsonReader jsonReader = new UBJsonReader();

        G3dModelLoader modelLoader = new G3dModelLoader(jsonReader);
        model = modelLoader.loadModel(Gdx.files.getFileHandle("model.g3db", Files.FileType.Internal));
        modelInstance = new ModelInstance(model);

        environment = new Environment();
        environment.set(new ColorAttribute(ColorAttribute.AmbientLight,0.8f,0.8f,0.8f,1.0f));

        controller = new AnimationController(modelInstance);
        controller.setAnimation("Mixamo.com", -1, new AnimationController.AnimationListener() {
            @Override
            public void onEnd(AnimationController.AnimationDesc animation) {
            }

            @Override
            public void onLoop(AnimationController.AnimationDesc animation) {
                Gdx.app.log("INFO","Animation Ended");
            }
        });
    }

    @Override
    public void dispose() {
        modelBatch.dispose();
        model.dispose();
    }

    @Override
    public void render() {
        Gdx.gl.glViewport(0,0,Gdx.graphics.getWidth(),Gdx.graphics.getHeight());
        Gdx.gl.glClearColor(1,1,1,1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT|GL20.GL_DEPTH_BUFFER_BIT);

        camera.update();
        controller.update(Gdx.graphics.getDeltaTime());

        modelBatch.begin(camera);
        modelBatch.render(modelInstance);
        modelBatch.end();
    }
}

 

Video

 

Programming , , ,

3. April 2015

 

The open source, C++ based, cross platform game engine and editor Godot have just released version 1.1 beta.  GameFromScratch.com has a fair bit of contentNewImage about the Godot engine, including this ongoing tutorial series, if you wish to learn more.

 

 

So, what’s new in 1.1 Beta?

 

 

Well, I’ll use their own words:

 

 

Godot 1.1 Beta is Out!

Time to get serious again!

After three months of hard work, our first new release is out! This beta prepares the road for the 1.1 release, expected sometime in late April.

New features include:

  • Rewritten Auto-Completion in the Code-Editor. Supports a lot of scenarios and perform smart-completion of node types if a scene where the script is being used is open.
  • Visual Shader Editor (Edit shaders connecting nodes)
  • New API in OS for managing the screens and window, with multi-monitor support.
  • Largely rewritten 2D engine, with support for:
    • Shaders (Visual and Code)
    • 2D Materials
    • 2D Independent Z ordering per-node.
    • 2D Lights
    • 2D Shadows with Polygonal Occluders
    • 2D Normal Mapping
    • Back-Buffer compositing for shaders that read from screen (allows all sorts of post-processing effects).
    • Improved Isometric TileMap Support (proper Z ordering of tiles and children nodes).
    • Distance-Field font support.
  • New 2D Navigation Polygon support, for efficient 2D pathfinding. Navigation Polygons can be edited visually and combined, disabled, etc.
  • Improved Usability in 2D Physics API:
    • Area2D and RigidBody2D can receive input events
    • Area2D can detect overlap with another Area2D
  • New Dark Theme
  • Large amount of bug fixes and smaller improvements.

Please remember that this new version is BETA, so this is your time to report everything that doesn’t work to GitHub as Issues, contribute PRs with fixes or annoy Juan and Ariel to fix what is not working for you.

Godot 1.1 Beta1 can be obtained in the Downloads section, or source cloned at GitHub.

Happy Testing!

 

 

Very cool stuff!  

 

There are actually some pretty major changes in this release.  The improved auto completion is certainly nice, but the rewritten 2D engine is probably the biggest change.  One of the major components of this is the Visual Shader Editor.  As someone who hates writing shaders, this is a welcome addition.  Here it is in action:

ShaderEdit

 

 You can build shader networks by connecting nodes together.  Of course the new 2D navigation stuff is an excellent addition.  I’ll be looking in to this new functionality closer in the near future.

 

You can download Godot here.  The complete source code is available on Github.  As mentioned earlier, to get started there is a complete tutorial series on this very site.

Programming

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

Month List

DisqusCommentsSummary