Building a Game with Dart and StageXL — Part 1

An introduction to the Dart programming language

If you’d like to skip to the start of the tutorial, jump down to the “Getting Started with Dart” section.

Why Dart

When deciding to make a game, you have many different choices ranging from what language to use to what platforms to target. Should you build your own game engine or use a “drag-and-drop” program? Just looking at free game engines, there’s more choices than you can count and that’s not even looking at the commercial ones.

So, why choose Dart? Well, it doesn’t cost anything so that’s a good start. It’s a programming language developed by Google but is open source. It has the backing of a major company while also allowing others to influence its growth.

Dart can be compiled to JavaScript so it can run on a browser. It can also be run on a regular computer, IoT (Internet of Things) devices like Arduino (see note for updated information), mobile platforms and more.

JavaScript: The Good Parts vs. The Definite Guide

Why not JavaScript?

Don’t get me wrong, I sling JavaScript for my day job. But I’m not super into the language. For one, it was designed and developed in just a week or so and it has multiple problems as a result. One example is that you shouldn’t ever use the equality operator

==

and should always use the strict equality operator

===

JavaScript has the advantage that it is much more widely known with many thousands if not millions of lines of code being written every day. But all that comes at a cost. Do a quick Google for “JavaScript fatigue”. After that, search for “JavaScript fatigue fatigue”. Seriously. It’s all kinds of messed up.

Dart solves a lot of JavaScript’s problems by being a language that has more than a modicum of thought being put towards language ergonomics, developer productivity and performance.

Getting started with Dart

To install the Dart SDK and get going, I’ll defer to the official Dart site.

If you’re already familiar with programming, feel free to skim.

Dart is a programming language inspired by Java, C#, JavaScript and other like-minded languages. That means if you’ve seen code from those languages, Dart should be pretty easy to grasp.

I’m going to assume no knowledge of programming just so we can build a base for these tutorials.

Don’t worry, we’re not doing this.

Computers 101

Computers need to be told what to do, otherwise they would just sit there and burn up electricity. The main work horse of the computer is the CPU. This is the piece if hardware inside your computer that is usually made by Intel or AMD.

The CPU only thinks in a limited set of instructions. These instructions are things like “multiply these values together and store the result somewhere”.

As a resource, the CPU has access to “registers”. These act like the CPU’s workspace. Almost every instruction deals with changing the information in these registers in one manner or another (like multiplying them as in the previous paragraph).

As another resource, the CPU has access to “memory”. Memory is like the CPU’s table. It can store and retrieve information from memory.

Programming 101

To tell the CPU what instructions to run, people used to have to directly write the instructions using “machine language”. Essentially writing ones and zeroes that the CPU could understand.

They got tired of that quickly and created “assembly language”. This was pretty much just taking the ones and zeroes of machine language and turning them into words that humans could understand. For example, instead of having to write

10110

To mean “multiply” they would write

mult 1, 2

All of a sudden, humans could look at code and actually read what it was doing!

Of course now the CPU couldn’t understand it so the people had to write a “compiler”. A compiler essentially translates code into a form that the computer can understand.

Well, this assembly language was great, but it was still hard to program more abstract ideas, so some people came up with an idea to create another language that would compile to assembly language which they then could compile into machine code.

And so languages like C were born. Now programmers could write a multiply like this

x = 2 * 3

Which is even easier to read than assembly language! Plus, it has the benefit of abstracting away the underlying CPU making it easier to take code written for one type of computer and have it work on multiple types of computers.

Programs were written in a procedural style, meaning the program was executed starting at the top of the file and going line by line to the end. To help with solving more complex problems, a new style was invented: object-oriented.

This allowed the programmer to think of code as discreet pieces of functionality and then to combine that functionality in new and interesting ways.

Eventually programmers got tired of doing the low level work required by those languages like having to manage memory and worrying about pointers so they invented languages that handled memory and pointers for you.

Dart is one of those languages: it’s higher level than C/C++, it has its own garbage collector (memory management) and is object-oriented. The downside to those nice things? Performance. Languages like Dart are slower than C/C++ which is slower than assembly language. But the trade off is developer productivity.

Dart 101

Let’s start with a simple program. All programs exist to solve some problem, so let’s define a problem to solve:

As the developer, I want the phrase “Hello, world!” to appear on my monitor.

Granted, this isn’t a problem like world hunger, but I always find it helpful to fully define the why of my programs so I can be sure I’m working towards the correct goal.

Now that we have defined our problem, let’s talk about how to solve it using Dart. I’m going to assume some basics here: we’re developing on a computer that has a keyboard and monitor and has Dart available to use.

Dart can be run by typing “dart” in your terminal and hitting enter. (If you need help at this point, like you don’t know how to get to your terminal or you can’t run Dart, do some quick googling and you should be able to figure out.) You should see some information on how to use Dart.

Unfortunately Dart doesn’t know about our problem and isn’t very helpful yet because we haven’t told it how to solve the problem. Let’s do that.

Open a text editor; you’ll want to use something that saves as plain text. Something like Notepad. In this text editor we’re going to write the Dart instructions to “fix” our problem.

All Dart programs need to have a “start”, this is called the “main” function. Write the following (or copy and paste it):

main() { }

Let’s talk about what this means. The word “main” is special to Dart and says to start here. The parenthesizes () mean that this is a “function”. Functions are a way to break up our code into smaller pieces. There’s more to them, but we’ll just accept that for now and move on.

Next up is the curly braces {}. Curly braces are used to group lines of code together in a “block”. Basically it tells Dart that the code inside the braces belongs all together. Here it means that all the code in-between them belongs to the main function.

Believe it or not, but we have a complete program! Let’s run it! Save the program and in your terminal navigate to where the code has been saved and type “dart file” (replace file with whatever you named it). Congratulations! Nothing happened!

Remember those curly braces from the main function? And how they’re supposed to group code together? Well, we totally failed to put any actual code in there so Dart dutifully did exactly as we commanded and did nothing.

How about we put something in there? Going back to our problem, we need a way to make text appear on the screen. In Dart, the way to do that is to use the “print” function.

The print function is a function just like our main function. But unlike our main, we’re not going to define it, rather we are going to use it. This is the beauty of functions. Instead of writing the same code over and over, we can just define a function that has the code and use that function over and over!

The print function has already been defined for us because it’s such a common thing that the Dart creators put one built-in to the language. On to how to use it and, by extension, how to use functions in general.

We use, or call, functions by typing the function name, followed by an opening parenthesis “(“, then anything we want to tell the function and then closing with the matching parenthesis “)”. For our problem, it would look like this:

print("Hello, world!")

Exciting! Now, what’s up with the quotes around our sentence? Well, computers can’t tell the difference between the words we’re using to write the program and the words we want to say. To solve that problem, we use something called a “string”. A string in Dart is text surrounded by quotes (you can use single- or double-quotes as long as the start and end match).

For us, that means that we want the string “Hello, world!” to be printed to the screen. We put that in-between the parenthesizes because we’re telling print what we want it to do.

Let’s add that line to our program:

main() {

print("Hello, world!")

}

Now save and run it again like before. What? Now it’s complaining? Ah yes, we forgot one thing. Just like when you’re reading, you like to be told when a sentence is over with a period. In fact, I just used one! Well, Dart feels the same way about the code you write. It wants you to tell it when a command ends. In Dart, this is done by having a semicolon “;” after the code. Note that it doesn’t go after blocks! Just the individual lines of code.

Here’s our code with the semicolon:

main() {

print("Hello, world!");

}

Save and run that. Success! We have now “solved” our problem! And you’ve successfully written your first Dart program! Now was that so hard?

I’m using Windows, but you can see my code and then what happens when I run it. This will look different on Mac and Linux, but should essentially be the same.

That wraps it up for this part of the tutorial. In the next part, we’ll dive into making much more interesting programs to solve much more interesting problems.