Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

6. December 2016

 

A couple years ago I did a detailed text tutorial on how to use a debugger which oddly is a massively important skill that simply isn’t taught.  Given that this article is still popular two years later I’ve decided to follow it up with a video version.  This video, Debugging 101, walks through the basic tasks involved in debugging.  It used Visual Studio 2017 and C++ but should be applicable in most languages and IDEs.  The video shows how breakpoints and conditional break points work, how to step into, over and out of your code, how to use the local and watch window, call stacks, how to do memory debugging and more.  Basically the video shows you how to get started using a debugger.

 

The following is the code used in this example.  There is nothing special to this code, it’s extremely contrived, but it enabled me to show the various features available in most debuggers.

#include <iostream>

// These two functions are used to illustrate how the call stack works
// As well as how step into and step out of behave.
int innerFunction(int input) {
	int meaninglessCounter = 0;
	for (int i = input; i > 0; i--) {
		// First show stepping through the loop
		// Set a conditional breakpoint that breaks when i is a certain value.
		meaninglessCounter++;
	}
	return input;
}

int outerFunction() {
	int i = 42;
	return innerFunction(i);
}


class Demo {
	std::string stringValue;
	int intValue;
	bool booleanValue;

	public: 
		Demo(std::string a, int b, bool c) : stringValue(a), intValue(b), booleanValue(
		c) {};
};

int main(int argc, char ** argv) {
	// Callstack demo, jump into, jump over example
	int someVal = 0;
	someVal = outerFunction();

	// Data example -- simply create a char buffer, fill it with 'a' then null 
	terminate it so 
	// it can be treated like a string.
	char * data = new char[1000];
	for (int i = 0; i < 1000; i++)
		data[i] = 'a';
	data[999] = 0;
	std::cout << data << std::endl;

	//set a watch on d.  Demonstrates watches and drilling into complex object
	Demo d("Hello", 42, true);
	
	std::cout << "End of demo" << std::endl;
	delete[] data;
	// delete[] data;  Calling delete again will trigger an exception
}

Programming , , ,

29. November 2016

 

Welcome to the next part in the ongoing BabylonJS Tutorial Series.  In the previous tutorial we created our first simple scene which contained a simple camera.  In this tutorial we are going to explore the concept of camera’s in more depth.  As always there is an HD video version of this tutorial available here.

 

In the previous example we created a Free Camera.  A Free Camera is a camera that can be moved around using the mouse and keyboard.  Often of course you are going to want to be able to customize which keys are used to move the camera.  Here is an example that configured the camera to respond to the WASD keys.

 

var canvas = document.getElementById('canvas');

        var engine = new BABYLON.Engine(canvas, true);

        var createScene = function(){
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3.White();
            var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0,
            0,-10), scene);
            camera.setTarget(BABYLON.Vector3.Zero());
            camera.attachControl(canvas,true);
            camera.keysUp.push(87);    //W
            camera.keysDown.push(83)   //D
            camera.keysLeft.push(65);  //A
            camera.keysRight.push(68); //S


            var box = BABYLON.Mesh.CreateBox("Box",4.0,scene);
            return scene;
        }

        var scene = createScene();
        engine.runRenderLoop(function(){
            scene.render();
        });

 

This code running:

1

When we create the camera, we pass it’s initial location within our scene.  In this case the position is (0,0,-10) or –10 down the Z axis.  Of course we also pass the scene the camera belongs to into the constructor as well.  Next we set the target of the camera, in this case the origin (or a Zero vector).  Finally we need the camera to actually receive input controls from the canvas.  This is simply done by calling attachControl.  This will result in input (such as mouse and keyboard) being passed to the camera for processing.  There is a member of the camera for keys representing up, down, left and right movement.  To each we pass the appropriate key scancode for the each key in the WASD combination.  When you run this code, you can now navigate around the scene using the WASD and free look using the mouse.

 

Another common camera type is a camera that orbits an object.  That is the camera revolves around the target in a circular orbit.  This is accomplished using an ArcRotateCamera.  Keep in mind however, you could also implement this camera in any other camera object available in Babylon, it would however be your responsibility to implement the functionality.  The follow is the code to create an ArcRotateCamera:

        var createScene = function(){
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3.White();

            var box = BABYLON.Mesh.CreateBox("Box",4.0,scene);
            var camera = new BABYLON.ArcRotateCamera("arcCam",
                    BABYLON.Tools.ToRadians(45),
                    BABYLON.Tools.ToRadians(45),
                    10.0,box.position,scene);
            camera.attachControl(canvas,true);

            return scene;
        }

 

This code running:

2

The three major parameters to the ArcRotateCamera are the alpha, beta and radius.  Radius is straight forward, this is the distance to orbit the target.  Think of the target as the mid point of a circle.  The radius then defines the size of the circle the camera will follow.  Alpha is the rotation angle around the X axis, while beta is the rotation angle around the Y axis.  Note that both take their parameter in radians instead of degrees, so we have to convert using the ToRadians() helper method.

 

The final kind of camera we are going to look at is the FollowCamera.  This camera does exactly what you’d expect, it follows a given target.  Let’s look at some code:

        var canvas = document.getElementById('canvas');

        var engine = new BABYLON.Engine(canvas, true);

        var createScene = function(){
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3.White();

            var box = BABYLON.Mesh.CreateBox("Box",4.0,scene);

            // Create a second object so we can actually witness the movement
            // Make this one wireframe to distiguish the difference.
            var box2 = BABYLON.Mesh.CreateBox("Box2",4.0,scene);
            var material = new BABYLON.StandardMaterial("material1",scene);
            material.wireframe = true;
            box2.material = material;

            box2.position = new BABYLON.Vector3(0,5,0);

            var camera = new BABYLON.FollowCamera("followCam",BABYLON.Vector3.
            Zero(),scene);
            camera.target = box;
            camera.radius = 100;
            camera.heightOffset = 0;
            camera.attachControl(canvas,true);

            scene.activeCamera = camera;
            return scene;
        }

        var scene = createScene();
        engine.runRenderLoop(function(){
            scene.getMeshByName("Box").position.y += 0.1;
            scene.getMeshByName("Box").position.x += 0.1;
            scene.render();
        });

 

This code running:

3

This code contains two rendered cubes, the second a box with a wireframe material attached.  This was done so you could actually detect movement!  We will cover the specifics of materials shortly so don’t sweat the details.  Notice in the creation of the FollowCamera we pass in a target to follow (box), how far away we should follow from (radius) and there is also a control for how height the camera should be relative to the target.

 

It should be noted these are only a few of the possible cameras implemented in BabylonJS.  There are a good dozen other cameras available out of the box with features like touch or gamepad control, VR rendering and more.  The basic principals remain the same regardless to camera type.

The Video

Programming , ,

23. November 2016

 

A conversation just happened on /r/gamedev with the confusing title “What don't new game developers know that they don't know?”.  Essentially it was a question asking what important advice new developers don’t know (for lack of experience) but should.  My answer seems to have been extremely well received and the question is quite good, so I figure I would replicate the answer here for those of you that don’t frequent reddit.

So essentially what follows is my advice I would give my beginner self if I owned a time machine. 

  • most people fail and fail hard. Perseverance is probably the most underrated but required skill of a successful game developer.

  • learning tasks in parallel is rarely productive. While I know you want to learn everything now... don't. Learn one task/language/skill to a base level of competency before moving on to the next. It's hard because everything is shiny and new, but it's critical. Trying to learn too many things at once results in learning nothing at all.

  • when you are 90% done, you're actually 50% done. Maybe... if you are lucky.

  • there is no ego in programming, or at least there shouldn't be. A plumber or carpenter come into a job with a toolbox full of tools, and don't limit themselves to a number three hex drive because "it's cool". They use the best tool for the job and sometimes that tool is a horrific hack and that's ok too. Programmers... have often failed to learn this lesson. People invest themselves in "their language" and this frankly, is stupid. Working in C++, Java, Haskell, F#, Go, Rust or whatever other language doesn't make you cool, just as working in GameMaker, Lua, JavaScript doesn't make you uncool. Only exception, PHP. %#@k PHP. Moral of the story... use the right language or tool for the job. Sometimes that means performance, sometimes that means maintainability, sometimes that means quickness, sometimes that means designer friendly and sometimes it means using the tool the rest of your team is using. Be pragmatic, always be pragmatic. I personally would never hire a programmer who claimed there was a "best" language. If you have been programming for several years and don't have several languages in your arsenal, you are probably doing it wrong.

  • if it feels wrong, it probably is. If you encounter such a code smell, even if you can't fix it, comment on it and move on.

  • even if you work alone, comments are good. But comments for the sake of comments is worse than no comments at all. Take the time to write legible code, take the time to smartly comment what you've written. Six months or six years down the road, you will thank yourself.

  • version control or at least automatic backups. Do it. Now.

  • premature ejac.... er, optimization is the root of all evil. Yes, you need to be mindful of performance on a macro level, but don't sweat the micro level until you have to. If you are just starting out, but your primary concern is performance, you are doing it wrong.

  • learn how to use a debugger. Early. It will be an invaluable skill and will help you understand how your code works better than any other single task you can perform. Also learn how to use a profiler and code linter, these will give you great insights into your code as well, but you can do this later. If you have learned the basics of a programming language but haven't groked debugging yet, stop everything and dedicate yourself to that task. For a somewhat generic debugging tutorial start here. Seriously, learn it, now.

  • if you have access to a peer, TAKE IT. Peer reviewed coding, while at first annoying, is invaluable. Even if there is a large skill mismatch between the two people. Even just having someone go through your code and ask "why did you do this?" forces you to explain it... and often you realize... hey... why did I do that? Many programmers are solitary creatures, so the idea of peer code reviews or paired programming is anathema. Or people can be very shy about showing their code... it's worth it to get over it. Of course not everyone has access to another programmer to use as a sounding board and not being in person makes it a lot harder and a lot less useful.

  • books are great, as is a gigantic collection of links to great articles on the web. That said unfortunately, you can't just buy a book and learn via osmosis... you actually have to read the thing. More to the point, if you are following a tutorial or video, DO THE WORK. You will learn it a great deal more, develop muscle memory of sorts, if you actually do it. This means typing out the code and getting it to run, instead of just loading the project and pressing play. Trust me, you learn a lot more actually recreating the project.

 

There you go, 11 hard earned pieces of wisdom for new developers, hope you find them useful.  Anything you you would add or anything you disagree with?  Let me know in the comments below!

Programming

9. November 2016

BabylonBannerSplattered_thumb[3]

Welcome to the GameFromScratch.com tutorial series covering the BabylonJS HTML5 game engine.  The home page of the series is available here.  For each tutorial in the series there is both a text and video version available.  In this post we are simply going to introduce the BabylonJS engine, the scope of this tutorial series and discuss why you might want to use the Babylon engine and also some of the alternatives available should you decide not to.  If you’ve already decided on using the BabylonJS game engine, jump forward to the next tutorial.

 

BabylonJS Overview

I’m not going to go into a great deal of detail on the functionality included in BabylonJS as I have already featured this game engine in the Closer Look game engine series.  Instead we are going to take a quick top level look at the engine features.

 

Why Choose BabylonJS

So, why is the BabylonJS game engine a good choice for you?

  • Open source (Apache 2 license) and free to use
  • Full featured 3D game library (scene graph, physics, particles, models, sprites, etc)
  • Compatible with most modern WebGL browsers
  • Excellent tooling, including level editor, Unity exporter, model converters
  • Good documentation, samples and other learning materials

You can read the full feature set here.

 

Why Not Choose BabylonJS?

So we mentioned a number of Babylon’s strengths, but why would you *not* choose to use BabylonJS?  Well, beyond the fact you may not like how they implement things the biggest reason all comes down to your priorities.  WebGL performance isn’t on par with desktop OpenGL or even OpenGL ES, so there is a bit of a performance penalty at work here.  While HTML5 applications can be wrapped to run as applications on various mobile devices, again there is a price to be paid, in both performance and labor.

At the end of the day, personally, I think a lot of it comes down to your primary target.  If you are creating a browser game first and foremost, I recommend working in a browser native library such as BabylonJS.  This has the most direct workflow, is easiest to debug, etc.  If on the other hand the browser is just another target for you you are probably better off working in a game engine that also targets HTML5, such as Unreal or Unity.

 

Alternatives to BabylonJS

Shockingly there aren’t actually a ton of HTML5 3D game engines or frameworks like BabylonJS.  The most direct alternatives are:

 

By no means is that an exclusive list, but it does represent some of the most common 3D engines with WebGL as their primary target.

In addition to these engines several 3D engines offer HTML5 as a target including Unreal, Unity, Godot and many more.  The primary challenge with these options is the generated code is often illegible, acting almost identically to a compiled binary.  So if things don’t work right you are dependent on the engine developer to fix things.  Or if you wish to use a native browser feature, you are again dependent on the engine developers to support it in some form.

 

Enough overview, lets jump into the technical details.  I am aiming to keep each tutorial somewhat short and concise, both text and video versions.  Stay tuned for the first tutorial covering getting BabylonJS up and running.

 

The Video

Programming , , , ,

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

Month List

Popular Comments