Otter2D Top-Down Adventure Tutorial (Part 1) - An Intro to Otter2D, a 2D Framework Using SFML.NET

I recently started poking around a new 2D framework that uses SFML.NET, named Otter2D, by Kyle Pulver. I don’t know Kyle personally, but I do know that he was an avid FlashPunk user, like myself. It seems he was looking to move on from Flash, and thus, Otter2D was born. Don’t get me wrong, I still love FlashPunk, and give it my highest recommendation, especially if you’re just getting into Flash/AS3. However, I prefer to code in C#, and Otter2D came around at just the right time for me to fiddle around with some new technology. I intend to write a series of small tutorials introducing you to Otter2D, teaching you how to get some entities up on the screen, animating, shooting projectiles with particle effects, and more!

Otter2D is completely free, and the source code can be found hosted on BitBucket. Kyle has already provided a couple of videos that demonstrate how to get a basic pong clone up and running. The source code for this pong clone can also be downloaded via the web, and is a good starting point for learning some Otter2D basics. However, for this tutorial I will still be starting from the very beginning with installing Visual Studio 2012.

Before I go on, I’d like to note that I won’t be teaching C# in these tutorials. If you are looking to learn C#, or just brush up on a few things I suggest checking out these tutorials.

Ok, let’s get to the fun stuff.

First, I assume you are starting from scratch and using Windows (I actually code on a Mac running Parallels). Head on over to the Microsoft website and download Visual Studio Express 2012. You don’t have to use Visual Studio Express 2012. Personally, I’ve worked in both VSE 2010 and VSE 2012, and I prefer the look and feel of VSE 2012. If you truly are starting from scratch, then I believe the Visual Studio install should install everything you need, including the .NET framework. Lastly, you don’t have to use an Express version of Visual Studio. If you prefer a premium version, they too work just as well, if not better.

Once the install has finished, start up Visual Studio Express if it does not do so automatically. From the welcome screen, select New Project–>Visual C#–>Windows–>Console Application. You can name your project whatever you choose. I have gone and named mine ‘OtterTutorial’. Click 'OK’ once everything looks good, and Visual Studio will go ahead and create your project’s template. Woohoo, progress!

Now that your project’s skeleton has been created, you should go ahead and download Otter2D if you haven’t already. Unzip Otter2D into a convenient location, as it is going to be referenced in our OtterTutorial solution. Next, right-click your solution, go to Add–>Existing Project, and navigate to your Otter.csproj file. Select the csproj file, and click OK to add Otter to your solution.

Unfortunately, there is still another step to go before you can start coding like a rock star. Currently, you have your OtterTutorial project, and the Otter project in your solution. Our OtterTutorial project must be made aware of the Otter project in order to use it. This is accomplished by adding a reference to Otter in the OtterTutorial project. To do so, right-click the OtterTutorial project within the solution, select ‘References’, and then click ‘Add Reference’. From here, expand ‘Solution’, and highlight ‘Project’. Check the box next to Otter and click OK.

You should now have a basic solution, containing both Otter, and your OtterTutorial project (or whatever you chose to name it). Time to write some code! \:D/

I want to keep each entry in this series as short as possible. Hence, I am only going to cover getting a blank screen up and running. This is already documented in the Getting Started guide on Otter’s website. If you feel you already have these steps down, then please feel free to skip ahead to the next tutorial.

Open the Program.cs class in Visual Studio. Replace your Program.cs with the following:



// Must include Otter in your project, so we add this line

using Otter;



using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;



namespace OtterTutorial // This can be anything you choose, I opted for my project's name

{

public class Program

{

static void Main(string[] args)

{

// Create a new Game object, 640x480 pixels in size

// The window will run with the title "OtterTutorial"

Game tutorial = new Game("OtterTutorial", 640, 480);

// You can set the actual window size to something different than the Game's resolution.

tutorial.SetWindow(640, 480);



// Start the game \:D/

tutorial.Start();

}

}

}

I have gone and added comments in the code above that should thoroughly explain things. Save your work, and hit the Start/Run button. You should now have an awesome, yet boring (we will get to the fun stuff soon!) black box on your screen, like this one:

Well, that should do it for part one. I feel like we have covered enough for a basic intro. Next time we will learn about scenes, create our game’s title screen, and try to take over the world.

Cheers!

Take me to part 2 of the tutorial!

Download the source code to this tutorial here.