Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
28. June 2018


Lately we’ve featured a couple RPG Maker style game engines targeted at creating JRPG style games, including RPG In a Box and Smile Game Builder.  Today we are looking at RPG Playground, the work of a single developer.  RPG Playground is built using the Haxe programming language and the Kha framework, another topic we’ve covered recently.


Right now RPG Playground isn’t incredibly full featured, it’s got world building tools, a nice collection of tiles and animated sprites to work with and a basic game scripting system.  In time the developer intends to add the ability for artists to add their own content while giving programmers the ability to extend the engine and create a game with no need for an artist.  Here is the developers ultimate master plan for the project from the Road Map:

  1. Build a tool that allows anyone to make their own Role Playing Games, and easily let others play their game.
  2. Make sure artists can make an RPG using their own graphics, without the need of a programmer.
  3. Make sure programmers can make a game without the need of an artist.
  4. Programmers will extend the engine, so any game type can be build at this time: platformers, 3D, … .


If such a project sounds interesting, be sure to check out our hands-on video with RPG Playground.

General, Design

26. June 2018


We’ve been running a series called Five Great Game Development Websites for some time now, currently up to Volume 6.  This post is intended to bring those 30+ site recommendations together in one place!  The top most link is a link to the video itself, followed by the 5 recommended sites in that video.


Volume 1:

Volume 2:

Volume 3:

Volume 4:

Volume 5:

Volume 6:


Series YouTube playlist available here.

Art, Design, General, Programming

3. May 2018


Unity 2018.1 was just released and one of the major new features is Shader Graph, a new visual programming language for creating shaders.  In this article we are going to look at how to enable and use Shader Graph.  There is also a video of this tutorial available here or embedded below.


First off, to get started using Shader Graph, be sure to be using Unity 2018.1 or later. 

Next, start Unity and create a new project.  I used the following settings:

image

Shader Graph is fully compatible with the new light weight render pipeline.  For the record, Shader Graph does NOT work with the current HD pipeline, this feature is under development. There is no need to add any new packages… yet.  Once ready, click Create Project.  Once your project is loaded, go ahead and create a new scene.

image


We need some kind of object to apply our shader to, simply right click the newly created scene in the Hierarchy view, select Create->Sphere.

image


Now we need to enable Shader Graph functionality in Unity.  Click Window, then select Package Manager.

image


In the resulting window, select All, then Shadergraph, then Install.  This will take a few seconds.

image


Now that Shadergraph is enabled, let’s create one.  In the Project panel, I created a new folder called Shaders.  Right click the newly created folder and select Create->Shader->PBR Graph.

image


I called mine MyShader, name yours whatever you want.  Except Dilbert; that’s a stupid name for a shader!

image


One more small bit of setup before we start creating shaders!  We need to create a material that we will attach our shader to and ultimately apply to our sphere mesh.  Right click the Materials folder and select Create->Material.

image


I called mine MyMaterial, again, name yours whatever you want… even Dilbert.  Make sure your shader is selected and showing in Inspector, then simply drag and drop your newly created shader on it.

ApplyingShader


Finally drag your material to the Sphere you created earlier.  Phew… ok, time to create our shader.  Simply double click the shader and the Shader Graph editor will be create.  A new project should look something like this:

image

You can zoom the design surface in and out using the mouse wheel, hold down the middle mouse button to pan the surface around.


The PBR Master can be thought of as the ultimate output of the shader.  You have a choice between Metallic and Specular by dropping down the workflow tab.  The blackboard is the section to the top left and can be used to configure parameters as we will see in a moment.  The bottom right region is a preview of the shader, this window can be resized.


Create a shader is now a matter of creating a network of nodes and connecting them together.  Let’s show a simple example of connecting a texture map to the Albedo channel.  Right click an empty point on the canvas, select Create Node->Input->Texture 2D Asset.

CreatingATextureNode


Now click on the red circle to the right of out and drag to an empty portion on the canvas.  Select Input->Sample Texture 2D, then connect the RGBA out pin to the Albedo in pin on the PBR node, like so:

ConnectingTheTexture


At this point, we have the equivalent of a diffuse texture defined in our shader, now head back to the Texture 2D Asset, click the little circle to the right of the texture field and select a texture to apply.  Pick a compatible texture from your project. 

image


You shader preview should now show the updated texture:

image


Now what if you wanted the texture to be defined as a parameter in the editor instead?  This is where the Blackboard comes in.  In the Blackboard, click the + icon to the right side, then select Texture.

image


Name it however you want, I called it SourceTexture in my case.  Also optionally provide a default texture value using the example same process we just did above.

image


Now let’s replace our hard coded texture with a parameter instead.  You can remove a node by left clicking it and hitting the delete key.

ConfigureAProperty


Now this parameter can be defined in the editor.  Select the Sphere we created then applied our material too in the Hierarchy view.  In the Inspector under the Material, you will now see a new parameter matching the name you just provided:

image


You can also easily see the source code generated by a shader by right clicking the output node and selecting Copy Shader.

image


The HLSL code of the shader will have just been copied to your clipboard.


So, that’s the basics of using Shader Graph.  Now it’s mostly a matter of creating the appropriate input nodes, modifying them and connecting them to the appropriate in pins on the PBR Master output node.  Getting into the details of how this works is beyond the scope of this tutorials, shader programming is a VAST subject and could fill many books.  I’m not going to just leave you hanging though…  now that you know how to enable and use the tools to create Shader Graphs it would be an ideal time to get your hands on some samples and dig deeper.  Thankfully Unity have provided exactly that, available for download here on Github.


The Video

Art, Design

6. December 2017


GameMaker is a seminal game engine, with roots dating back to the late 1990s.  It is a cross platform 2D game engine with tools that run on Windows and Mac machines while capable of targeting both desktop operating systems as well as Ubuntu Linux, Android, iOS, UWP, HTML5, XBox One and PlayStation 4 consoles.  GameMaker is commercial software with a free trial available, we will discuss pricing shortly. 

The closer look series is a combination of overview, review and getting started tutorial aimed at helping you decide if a given engine is the right choice for you.  As always, there is an HD video version available here and embedded below.

Let’s jump right in with GameMaker Studio 2!


The Tools

GameMaker Studio is an all in one integrated environment for creating games.  It includes everything you need in a single application with a tabbed working environment and a unique virtual desktop style approach supporting multiple editing windows at once.  The all in one all tools at hand nature of GameMaker is probably one of it’s greatest selling points.


The Main Interface

image


Side and bottom panels can be collapsed down to give more room:

image


The primary work area is tabbed, supporting multiple open views at once:

image


As mentioned earlier, GMS has a workspace setup that enables you to work with and pan between multiple editors at once, like a giant virtual desktop.

GMSDesktop


The resource panel is commonly used across the various editors and contains the various assets that make up your game.  You can also drag and drop assets onto this window to import them for use in your game.  For example, dropping in an image file will create a new Sprite entity for you.

image


You can also create new entities via the dynamic right click menu.  For example, right clicking the Tile Sets area will bring up this menu:

image


The Room Editor

image

This is your traditional level editor, where you can create various layers of entities that compose your game level.  A top left you have the layers controls, enabling you to create/delete/hide the various layers that make up your game.  Layers can be composed of instances (objects), backgrounds, tile maps and paths.  The editors below the layer controls change dynamically based on what kind of layer is selected.


Selecting a tile layer brings up the tile map editing tools, including a palette of tiles you can paint with.

image

GMS even has support for auto tiling, if your tileset is compatible.


The Sprite Editor

image

This editor enables you to define how a sprite is imported, the various frames of animation if any as well as a preview of the sprite or animation.  Additionally, clicking Edit Image brings up a full blown image editor within GameMaker.

image

This is a full blown sprite editing package with a variety of brushes available, full layer support, the ability to paint across frames, several tools such as text tools, polygon tools, a magic wand selection tool, mirroring tools and more.  Pretty much all the functionality you would expect for creating or editing sprites is available directly in GMS.


Sound Editor

image

You also have control over sound effect details via the sound editor/mixer.  Supported audio files include wav, mp3, wma and ogg.


Tileset Editor

image


As mentioned earlier, the room editor has full support for tileset layers.  There is an editor for defining tilesets as well as defining auto tiling support.  There are also editors for defining tile animations and creating predefined tile brushes.


Path Editor

image

This editor is used to define paths, either straight line or curves.  Often used for AI paths, the generated paths can be used and editing directly in the room editor.


Script Editor

image


This is the built in editor for developing games using GameMaker Script.  It has syntax highlight, code suggestions and a selection of other features.

image

The code editor is also used for shaders.


Drag and Drop Editor

In addition to GMS scripting, GameMaker also provides a drag and drop programming option.

image

You can use drag and drop from the toolbox to script your programs behaviour.  We will cover both programming options in more detail shortly.


Font Editor

image


Enables you to import and preview fonts for use in your game.  Fonts can be in either true type or open font formats.


Object Editor

image

The Object Editor is where you will start to tie your various resources together.  For example, your main character will be an object that connects to a sprite, while handling various different events.  Objects are created in the Object Layers in the room editor and generally represent the entities that make up your world.  We will look at objects in a bit more detail later.


Programming In GameMaker

You may be wondering at this point how exactly you implement gameplay logic in your GameMaker game?  Essentially you attach logic to objects in the game world.  When you edit an object you will notice there is an Events option.

image


Click the Add Event button and you will see the various events you can respond to in your game:

image


These are called at various points by the game engine and are analogous to the game loop in other engines.  Step is called once per pass through the game loop and is most commonly where you will handle update logic.  There are also events for when the object is created, destroyed, etc… as well as various options for responding directly to events such as collisions, touches, etc.


You can also wire up code to be called when a Room is created, via the Creation Code button:

image


Next it’s a matter of deciding HOW you want to program in GameMaker, via Drag and Drop as well as directly using GameMaker scripting.


Scripting

Scripting is done using Game Maker Language, or GML, which is a C like scripting language.  The syntax is fairly simple and if you’ve had any prior C, Python, C++ or similar language experience, picking the language up should be fairly simple.  There are built in methods for most functions you would want to perform such as graphics drawing, audio code, networking, platform specific tasks like in app purchases etc.  There are also built in data types such as Stacks, Lists, Maps and Queues.  Actually teaching GML is beyond the scope of this document but you can access the language reference here.

If functionality is lacking it may be available on the GameMaker Market Place or you can add it yourself by creating a native extension.  You can add new functions to GML in this manner.


Drag And Drop

Programming via drag and drop in GameMaker is your other option and is a great choice for people that just want to jump in and figure things out on their own.  Don't worry too much about performance as the DnD code is ultimately generating GML script so performance should be roughly the same.  In fact, you can switch freely between the two programming methods at will within the same project or call GML directly in your DnD script.

Creating scripts in DnD is as simple as dragging in predefined functions to create a flow chart of sorts that occurs top down, like so:

GMLDnD

Once again, you can freely switch between the two methods.  Additionally, in any script your can right click and select Convert To Drag and Drop.  A reference of all the drag and drop tiles is available here.


The Price

GameMaker is commercial software, so that means there is a price tag attached.  There are multiple versions available for GameMaker as well as addition platforms coming with an additional price tag.  Pricing (as of today, 12/6/17) breaks down as follows:

image

image


In addition to these various different platforms, there is also now a new $39 per year ( most of the above non-console licenses are permanent buy once ) Creator Edition aimed at hobbyist developers.  It is fully featured but requires you to choose Windows or Mac and also requires your game display a splash screen.  There is also a heavily limited free trail available.  For more information on pricing or to download the trial visit here.


Community and Documentation

As you might expect for such a long lived game engine, there is also a very well established community.  The forums are available here.  With almost 20K registered users and 230K posts, the forums are quite active and contain a wealth of knowledge, although much of it is for earlier 1.x versions.  Questions seem to be answered fairly quickly.  In addition to the forums there is also the YoYoGames help desk containing several guides and how-tos.

There is also a fairly comprehensive GameMaker Studio manual available online which can be opened directly within Studio.

Additionally, there are several books available for GameMaker Studio such as:


In addition there are several tutorials and start kits available on the online marketplace, which we will talk about…


Online Marketplace

Quickly becoming the must have feature of modern game engines, GameMaker has an online store available, containing free and commercial assets including demos, scripts, sprites, shaders, extensions and more.

image

You do not need to have GameMaker Studio installed to access the marketplace, you can browse it in your browser here.


Conclusion


At the end of the day, GameMaker Studio faces a challenging new world as it is facing increasing competition from free and free to start game engines.  Is it worth it?  That is impossible for me to answer, as value is very subjective.  Game Maker is certainly a very complete 2D engine with a vibrant community and tons of resources.  Compared to the previous versions, the 2.x editor contains a great deal more polish and most every tool you would need is included out of the box.   Game Maker has certainly proven itself a production capable engine, having powered such titles as Hotline Miami, Undertale and Spelunky, all titles that have seen commercial success.

A proven catalog of game is always a strong selling point.

Personally, if you are working on a 2D title using Windows or Mac, Game Maker is certainly worth considering.  Do keep in mind however that as you add more platforms, you also add more cost.  In many cases though, this means you are ready to commercialize your title, so hopefully cost isn't as much of a concern.  I do think however they are making a mistake in charging for the Creator Edition.  Personally I would do away with the trial completely, make Creator free and charge people to deploy to additional platforms.  If this was the case it would be a great deal easier for me to recommend you check out GameMaker yourself.  Without a free option, its hard to recommend in the face of so many free/free to start options out there.  The engine is great, productive, proven and easy to learn… just saddled with a bit of a dinosaur business model.


The Video

Programming, General, Design , , ,

8. October 2016

 

Welcome to the next chapter in the on-going Closer Look At game engine series.  The Closer Look series is aimed at informing you quickly if a given game engine is a good fit for you or not.  It’s a combination of overview, review and getting started tutorial that should give you a quick idea of a game engines strengths and weaknesses.  Today we are looking at Clickteam Fusion, a codeless game engine that has been around in one form or another for over 20 years.  I have to admit up front, this guide isn’t as in-depth as previous entries as I am rushing a bit to get it out to you.  This is because as ofctf25 publish date (Oct 6/2016) Clickteam Fusion 2.5 is heavily discounted in the Humble Bundle.

 

As always, there is an HD video version of this guide available here.

 

About Quickteam Fusion

 

Quickteam Fusion is a 2D cross platform game engine that takes a codeless approach in a similar vein as Construct2 or Stencyl.  First released as Klik and Play in 1995, it was later rebranded The Games Factory, then Multimedia Fusion then finally Clickteam Fusion.  Clickteam tools run on Windows, and via various add-ons and modules is capable of targeting Windows, iOS, Android, Flash, HTML5 and Mac OS.  Note that several of these modules have an additional price tag from the base package.  In terms of pricing, here is the current ( 10/6/2016 ) from Steam.

image

 

Please note however that those prices are in Canadian dollars.  Also Clickteam is frequently discounted up to 75% or more, so do not ever pay the full price.  The free version is mostly full functioning minus extensibility and the ability to generate a game that runs outside of Clickteam itself, along with a few in game resource limitations.  The Developer Upgrade removes the requirement to display that the game was authored in Clickstream ( via Splash screen, credits, etc ) as well as adding some more controls inside the engine, most of which aren’t game related.

 

There are some fairly successful games that have been authored using Clickteam Fusion, the most famous of which is the Five Nights at Freddy’s series.  Other games include The Escapists, Freedom Planet and a few dozen more games available on Steam, Google Play or the iOS App Store.  So this is a production ready game engine, although only suited for 2D games.

 

Inside Clickstream Fusion

 

The strength of Clickteam is certainly the tooling it comes with.  All work in Clickstream Studio is done in the editor:

image

 

One of the biggest faults against Clickstream has got to be it’s aging UI.  While not particularly attractive, it is for the most part effective.  On the left hand side you’ve got the Workspace Toolbar, which can be thought of as your scene graph.  “Scenes” in Clickstream are somewhat confusingly referred to as Frames.  You game is made up on one or more frames, and when you select a frame you see the level editor shown on the right.  This is used for placing and interacting the various items that compose your scene frame.  On the bottom left you see the Properties panel, this changes based on what object is currently selected.  Also shown here is the editor for Active objects.  Actives are very important to CTF as we will see shortly.  There are also windows for controlling layers, for selecting built in assets, etc.  Windows can be undocked, pinned and move about the interface easily.

 

CT1

 

The primary editing service can be used to easily create levels or maps via simple drag and drop.

CT2

 

You can also insert new items into the frame:

image

 

Then choose from the dozens of built-in object types available:

ctf3

 

Perhaps 90% of the time, what you are going to use is an Active object, which is essentially Clickteam’s version of Entity or Sprite.

image

 

Double click the newly created Active and you get the active editor:

image

 

This tool combines several different tools into one.  There is a full paint package in here with fairly advanced tooling.  There are tools for doing common tasks like setting the Active’s pivot point and direction of facing, and there are tools here for defining and previewing animations.

 

In addition to the built in objects, there are several other extensions that can be added using the Extensions manager:

image

 

Additionally Clickteam offer a store for additional extensions that are both freely available and for sale:

image

 

Confusingly there is no direct integration between the store and Clickteam.  Therefore you have to download and manually install extensions and assets purchased this way.  The Store’s contents are mostly free and also showcase games created using Clickteam, tutorials, game code and more.

 

“Coding” in Clickteam

At this point you should have a pretty good idea how you compose the assets of your game to create levels… how do you actually add some logic to it?  That is done using these four tools:

image

Left to right they are the Story Board editor, Frame Editor, Event Editor and Event List Editor.

 

Story Board Editor

image

This one is pretty simple.  It’s just a top level overview of the Frames that make up your game.  Remember your game is ultimately composed of multiple frames, like so:

image

 

Frame Editor

image

The Frame Editor is simple the level editor we’ve already taken a look at.

 

Event Editor

image

 

This is where the “coding” happens.  Essentially its a top down flow chart/graph of events that happen in your game and what those events happen to.  Here for example is the “code” to select a Flying Saucer Active in the game “Saucer Squad”:

image

On the left hand side are the events (38 and 39, 36 is a group heading and 37 is simply a comment).  That first event triggers when the user left clicks on the Saucer object.  The right handle side of the screen shows the action that occurs when that happens.

image

 

So for the event on Line 38, then the user clicks the left mouse button on Active type Saucer, it plays the sound sample Button_1, among other actions.  It’s essentially these events and actions you use to create your game.  Let’s create a very simple example… lets create an action that simple plays a sound effect when the frame (scene) is created.

First select Insert->Condition

image

 

This will bring up the conditions dialog:

image

 

In this case I clicked the Storyboard Controls (the chessboard/horse icon), then chose Start of Frame.  The creates a new action that will fire when the frame is started.  Now to the right hand side, select the space below the Speaker icon, like so:

image

 

Right click and all of the available options will be displayed:

image

 

Next the appropriate editor will be shown

image

 

Event List Editor

This editor performs the same functionality as the Event Editor, but instead of in a somewhat unwieldy grid view, it represents the events in a much more readable list form:

image

 

One last editor of note is the expression editor, for creating much more advanced logical conditions:

image

 

Individual entities within the frame can also have their own events, set in the properties panel of the selected item:

image

Clicking edit will bring you back to the exact same interface we just discussed.  Also in the properties panel you can define variables:

image

 

These values can then be interacted with in other event controllers.

 

Community and Documentation

Documentation in Clickteam is decent.  Built in there is an integrated CHM based help system, as well as 4 multipart tutorial games to get started.  There are also a wealth of tutorials available to download (mostly free) on the Clickteam store.  There are also a fair number of Clickteam tutorials on YouTube, although many of them are quite awful.  There is an active forum as well as a wiki.  All told, for every problem I faced, I found a solution quickly enough online.

 

Summary

So what ultimately do I think of Clickteam Fusion?  For the most part it is what it’s advertised to be, a code free 2D game creation kit able to target multiple platform.  There is of course a learning curve, but it’s a relatively short one.  As a code focused programmer, I don’t find the coding process extremely productive, but I can see how it would be so for a more visual oriented person and especially for a non-coder.  Clickteam tools are certainly getting a bit long in the tooth, a lot of the legacy cruft is showing it’s age and the UI could certainly use an update.  My biggest hesitation is wondering how well this development system would scale with system complexity.  If you’re game isn’t easily broken into scenes or is sprawling in complexity, I can see Clickteam becoming incredibly cumbersome.  That said, I think this is a successful all in one development tool that can take you a very far way in a very short period of time even with minimal to no development skill.

 

The Video

Programming, Design , ,

See More Tutorials on DevGa.me!

Month List

Popular Comments