Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

9. February 2016

 

Today Amazon launched the Lumberyard Game Engine a modified and completely open source version of the CryEngine from Crytek.  Free.  So, what’s the catch?  You have to run your server component either on your own server or using Amazon’s web services.  Yeah, that’s it.  A pretty sweat deal all around.  So today I took a quick look at the contents of the engine as you can see below or in the video available at the bottom of this page.  I have only a couple hours experience with the engine, so don’t expect an in-depth review, this is just a quick hands on to give you an idea of what Lumberyard is and what you get.

 

Lumberyard installs as a 10GB zip file.  Simply extract the contents of that archive to folder on your system.  It’s contents look like:

image

Next run LumberyardLauncher.bat and you get this initial configuration window:

image

It unfortunately does not seem to play nice with high DPI displays :(.  Check all the features you require then click the next error.  You will then be informed what software you need to install:

image

Thankfully (for my cellular bill at least!) each component already appears to be locally available.  Next it’s going to ask you for a variety of SDKs.  Most of them are optional, such as Photoshop, Max and Maya plugin SDKs, but some are not such as NVidia and PowerVR SDKs.  Annoyingly, some of these require registering an account to download.  Both SDKs are small downloads, the the PVRTextTool will download 100+MB of files.

image

Finally you will be asked which plugins you wish to configure, and we are finally done the configuration phase.  Now simply click Configure Project to create a new Project:

image

 

This will launch the Lumberyard Project Configurator tool:

image

 

For now I’m simply going to click Launch Editor for the SamplesProject project.  Now we wait...

image

Ugh, another login:

image

Finally!

image

The Getting started guide link doesn’t work right now.  Instead use the URL https://aws.amazon.com/documentation/lumberyard/ to access the documentation.

 

I’m going to go ahead and create a new level.

image

Straight forward so far.

 

And finally the Lumberyard editor:

image

Again, high DPI support isn’t great as you can see from the cropped menu panel across the bottom.  Let’s take a look at a some of the included tools.

 

Terrain Editor

image

 

Asset Browser

image

 

Flow Graph (Visual Scripting)

image

 

Dialog Editor

image

 

Geppetto (Animations)

image

 

Database View

Img1

 

UI Editor

image

 

Obviously this is only a very surface level look at some of the tools that are bundled in the Lumberjack Game Engine.  It certainly has me interested in learning more.  If you are interested in seeing tutorials for this game engine, let me know and I will dive in deeper.  Even if I don’t create a tutorial series, I will certainly review this game engine in the typical “Closer Look” style.

 

There is a quick video hands on available, embedded below or in 1080p here.

Programming , ,

9. February 2016

 

In the first tutorial we looked at installing Superpowers, running the server and creating our first project.  In the next tutorial we got to know the editor, the relationship of Actors and Components and finally created a camera for our game.  In this tutorial we are going to draw a sprite on screen, then a sprite sheet which will enable animation.  So without further ado, let’s jump in.

 

There is one more important part of the relationships in Superpowers to understand.  As we’ve seen already, our Scene is composed of Actors, which in turn are made up of Components.  Components however can have Assets.  Assets on the other hand are NOT part of the Scene.  They actually exist at the same level as the Scene and can be used in multiple scenes.  Assets are declared on the left hand side of the interface.

 

Adding a Sprite to Your Game

On the left hand side of the screen click the page with a plus sign icon (the same we used to create the scene):

image

In the resulting dialog, select Sprite:

image

The sprite options will now be available in the inspection window on the right hand side of the screen.  In that window, select Upload and navigate to the image file you are going to use for your game.  We sure to use a web friendly format such as JPG or PNG.  Then set the grid size to the same dimensions as the Texture Size, like so:

image

 

You could also modify the pivot point of the sprite by changing the origin position.  The default of 50% will put the pivot point in the middle of the sprite, so this is the point the sprite will be drawn and transformed relative to.  You can also configure the opacity, how the sprite is rendered, etc.  The Grid Size parameter is used when you have multiple sprites in a single texture, which we will use later.

 

Adding a Sprite Component

Now that we have a sprite asset available in our game, let’s add one to our scene.  First on the left hand side, or using one of the tabs across the top of the editor, select your Scene.  Next create a new Actor, just like we covered in the previous tutorial, name it sprite or something similar.  Finally click the New Component button and select Sprite Renderer, then click Create:

image

Now there should be a SpriteRender component available.  From the Asset window on the left side of your screen, drag the sprite you added to the Sprite field of the Sprite Renderer in the Inspector, like so:

GIF

 

Tada, we’ve added a Sprite to our game world and it should now show up in the View in the center of your screen:

image

The sprite can be positioned using the transform widget, or directly in the Transform component on the right.

 

Running Your Game

Now that we’ve got a camera and something on screen, let’s take a moment to actually run our game.  There is a small amount of configuration we need to do.  On the left hand side of the screen, locate the “Settings” link, click away!:

image

 

In the resulting form, select your scene as the starting scene(via drag and drop):

image

 

We have one final task to perform.  Our Camera and our Sprite are both at the same Z location, meaning that at least initially, nothing will be in the view of the camera.  You have one of two options, you can either position all of your sprites at a –z location, or you can move your camera to z=1.  The later is the easier option, so I will go that route.  Select your camera actor, it’s transform component and set the Z value to 1:

image

 

Now we press either Play or Debug in the top left menu.  The debug option will load Chrome with the developer tools enabled, making it possible to detect errors in your code.  The Play option will run it in the Superpowers player.  Either way, we should see:

image

Congratulations on your first successful game!

 

Using a Spritesheet

Now let’s take a look at how we can used multiple sprites in a single texture, often known as a spritesheet.  I’m using this simple 3x1 sprite sheet:

sheet

 

Add it as an asset like we did earlier.  This time however, after we upload the image, we want to configure the grid size using this button:

image

 

When prompted enter the number of rows (1) and columns (3) in your image, or simply enter the width and height of each frame of animation in the text boxes.  Now lets create a new animation named walked.  Simply click the New button under animation, name it walk.  Then in the settings we set (I believe, the UI does not make it obvious), the first frame of the animation, the length and the number of frames to step by.  I also set the animation speed to 3 frames/sec meaning our 3 frames on animation will play once per second.

image

 

And the end result:

GIF

Ignore the twitch, that’s just me capturing the animated gif at the wrong end point.

 

Next Part

Programming , ,

3. February 2016

 

In the previous tutorial we installed the Superpowers game engine and created our first game.  In this tutorial we are going to get comfortable with the editor and create our first scene.  First let’s start with the editor, which we should have loaded at the conclusion of the last part.  In the top left corner, there is a control for managing assets.  Click the + page icon and select scene:

image

 

Then in the resulting dialog:

image

 

Now you should see your newly created scene in the list on the left hand side of the application:

image

 

By default (or by double left clicking the scene if not), your newly created scene should appear in the editor view in the middle of the screen:

image

 

Given that it’s currently empty, you just get a black screen.  For this example we are going to work in 2D, so switch to 2D mode:

image

 

Now that we have a scene created and loaded, we have new options on the right hand side of the screen.  Think of it this way...  the left hand side of the screen holds the assets that go together to make your game.  The right hand side holds the contents of each particular scene.  Switching between scenes will change the contents available on the right, but the assets on the left are available across your entire game.  Here is the right hand window for scene graph management:

image

 

Superpowers follows the common practice of being a component based game engine.  That means that the elements of your world are composed of various components and there is some kind of object that holds these components.  In Superpowers the component container is called an actor, and every object draw in the scene is ultimately an Actor.  Let’s add one to the scene now, click the Star with a + icon, pictured above.  You will then get a popup asking you to name your actor:

image

This Actor is going to be the camera, so name it accordingly.  Call it either Camera or Stephen, whichever makes more sense to you.  Personally, I went with camera.  Once created, you can see that all actors by default have a Transform component automatically attached.

image

You can also now see and position our actor in the scene view:

image

However, for now it’s just a manipulator widget, as there is no visible component attached to this actor.  You can use this widget for changing the position of the object within the scene, with each coloured arrow corresponding to a particular axis of movement, or by using the gray box in the center to move freely.  We will come back to this widget later, for now we need to make our camera a camera.

 

To create a camera, we simply add a Camera component to our newly created actor.   Down below the controls for controlling the actor’s position there is a button New Component:

image

Click it.

Now select Camera as the Component type:

image

You should now see a new editor for our newly added component:

image

Since we doing a 2D game, set the Mode to Orthographic, which means that images will remain the same size regardless to their depth within the scene. 

We now have a camera, and a scene.  Stay tuned for the next part where we will finally draw something on that screen!

 

Next Part

Programming ,

1. February 2016

 

Ever answered the question “If you could have any super power, what would it be?”  Myself, I’d go with whatever Superman has, as he seems to have the power to do whatever the heck he needs to have the power to do at any given time, so long as people don’t shove rocks from a dead planet at him...  However, if you answered “I want to have the power of collaborative game development!”  1) you need to think bigger 2) you are in luck!

 

Superpowers is a recently open sourced collaborative game engine for making 2D and 3D games, using TypeScript initially with Lua a WIP.  It’s built around HTML5 web technologies but isn’t really a browser game engine.  It’s available for Windows, Linux and Mac OS and it’s completely free, although I’m pretty certain the devs would appreciate some financial support should you find yourself digging it.

 

This on the other hand, as in this document you are reading right now, is the first part of a multi part tutorial series teaching you how to use Superpowers.  We are going to break this tutorial series across several posts, each covering a particular theme.  By the end though, you should be pretty well equipped to make your own game using the Superpowers engine.  So without further ado, let’s begin.

 

Gaining Superpowers

 

Getting the Superpowers Engine

First things first, we need to download and install the Superpowers engine.  There are two ways to go about doing this, from source on Github or the easy way.  We will take the easy way, because hey, it’s easy.  Simply click here and download the most recent Superpowers release.  You have the option of kicking in a bit of cash to help the developers at this point, but you don’t have to.  The key thing is, grab the version that is right for

image

 

I personally chose the Windows 64-bit version, mostly because I’m running 64bit Windows... 

Now that you’ve got the file downloaded, simply extract it to whatever directory you want to run Superpowers from.  In my case I chose d:\dev so Superpowers is installed in D:\Dev\superpowers-0.19.0-win-x64. 

And done.  Not exactly the most difficult install process you are going to encounter, eh?

 

Using Your Powers Wisely

Now locate the file superpowers (+ .exe on Windows) and double click it.

image

This is the Superpowers welcome screen, it may not be immediately obvious but click on the image of the kids to launch the engine proper.

Now we are brought to the Superpowers server window.

image

Creating a Server

Next create a server.  Simply click the ‘Add server’ button.  Don’t worry, we only need to do this part once.

image

You will then be prompted to name your server, do so.  By the way Superpowers team, you’ve got a bug in your button label here...  Once you’ve named your server, click ‘Add Server’

image

It will then prompt you for an IP address, and defaults out to 127.0.0.1:4237, which is a loopback or friendly way of saying “this machine”.  If you don’t have any reason to change this, don’t.  If you are running on a server and are going to be working externally with other developers you will use whatever your servers external IP address is instead. Click ‘Add server’ again.

image

 

TADA, you’ve got your own Superpower server:

image

 

Now double click your server to launch the Superpowers project manager.  We will be asked to create a user account:

image

 

After you click Log in:

image

 

Creating a New Project

Now we create a new project... bet you can’t guess how.  Ok, here’s how, click New project.

image

 

Next name your project, optionally describe your project and pick wether to use a template or not.  When complete click Create:

image

And finally, TADA, the Superpower editor:

image

 

Alright, that’s it for this tutorial.  We now have Superpowers installed, running and created our first project.  Click Next Part below to continue on to the, um, next part.

 

Next Part

Programming , ,

25. January 2016

 

I am currently embarking on a rather massive “from scratch” beginners game programming series over on YouTube.  One thing that can make the process a hell of a lot smoother for a beginner or veteran alike is a good development environment.  As a result I’ve created this page, a summary of the best editors and IDEs for development in Lua using Love specifically.  This list contains both full blown IDEs as well as text editors that can be configured to work better with Lua or Love2D.  Of course the line between text editor and IDE can be extremely blurry at times, so the distinction doesn’t really matter.  Unless otherwise stated, all options on this list are cross platform and have a free version available.

 

ZeroBrane Studio

If in doubt, select this one.  It’s probably the easiest to configure and perhaps the most Lua and Love focused option out there.  With the least amount of effort you will get the most amount of functionality including code highlighting, autocompletion and most impressively, debugging support.

 

IntelliJ IDEA with Lua and Love2D plugins

Probably not the ideal choice for beginners, as the IDE itself is rather complicated and you have to configure two different plugins to get things up and running.  That said, this is the IDE I will be using for the tutorial series simply because it has an excellent presentation mode, making it good for video demonstrations.  With the plugins you get full autocompletion, syntax highlighting and can run your app directly from the IDE.  You can’t unfortunately debug.  I have done a video on configuring IntelliJ for Love development available here.

 

Sublime Text with the Love2D Package

Sublime Text is well named, it’s a great text editor, that through package support can get awfully close to full IDE capabilities.  It was my go to general purpose text editor for years and is still a very solid option.  With the Love2D package you get syntax highlighting, autocompletion and the ability to run your app directly in the editor.

 

Atom Editor with the Love-IDE collection of packages

Atom is another editor, very similar in scope to Sublime Text with probably even greater extensibility.  The Love-IDE extension brings together a collection of Lua and Love2d plugins to give Atom the ability to run from within the editor, autocompletion and syntax highlighting.  I personally find atom kind of slow though, especially to start up.  As I find myself loading and closing editors constantly, this becomes a more pronounced negative over time, at least to me.

 

Notepad++ with Autocompletion Plugin

Another free text editor that can be extended to support Lua and Love development.  Using the linked extension it is possible to get autocompletion, however the file is out of date and has only been updated up to Love 0.8.0.  There may be a more modern implementation somewhere.  As it stands, unless you are invested in Notepad++, I have trouble recommending it over the other great options in this list.

 

Eclipse and the LDT Plugin

The Eclipse IDE can also be extended to support Lua development using the LDT plugin.  I would rather swallow razor blades while juggling live hand grenades than use the Eclipse IDE, but hey... I’m trying not to let my bias show, so I added it to this list.  Some people love working in Eclipse, so this may be an option for you.  Warning though, Eclipse is extremely unfriendly to beginners, requiring a PHD in Obtuse UI design before mastering... oops, bias showing again. 

 

Decoda Lua IDE

This is the only option on this list I have no prior experience with.  It started life as an editor for Lua scripts for the game Natural Selection, then was released as a commercial Lua IDE, then finally was made free and open source.  Following these instructions it can be made to debug Love code.  Decoda is available on Windows only.

 

Visual Studio with BabeLua Plugin

Visual Studio is perhaps *the* IDE for Windows based developers and thanks to the somewhat recently released Community Editions, it is now available for free.  With the BabeLua plugin you get the full package, autocompletion, syntax highlighting and best of all, debugging.  For a beginner however, Visual Studio can be a bit daunting, not as bad as Eclipse, but probably comparable to IntelliJ in complexity.  Thanks to SiENcE for the heads up.

 

 

There are of course a few hundred other options including the ages old VIM and EMACS editor, or for those that like pain, you can use the text editor including with your OS such as Notepad or TextEdit, but you will certainly be leaving a lot of functionality on the table!  Did I miss a popular option?  If so, let me know!

Programming ,

Month List

Popular Comments