Friday, September 9, 2011

The Power of Finite State Machines: Concept and Creation

This two-part tutorial will cover creating a multi-state car using a finite state machine. We will start with Procedural FSM and progress into the State Pattern design pattern. Concept and creation will be our main focus during this first part; we will then proceed into application and extension during the second part.

Final Result Preview

Let’s take a look at the final result we will be working towards:

What Is a Finite State Machine?

Wikipedia defines an FSM (Finite State Machine) as a mathematical abstraction sometimes used to design digital logic or computer programs. It is a behavior model composed of a finite number of states, transitions between those states, and actions, similar to a flow graph in which one can inspect the way logic runs when certain conditions are met.

It has finite internal memory; an input feature that reads symbols in a sequence, one at a time, without going backward; and an output feature, which may be in the form of a user interface, once the model is implemented. The operation of an FSM begins from one of the states (called a start state), goes through transitions (depending on the inputs) to different states, and can end in any of those available – however, only a certain set of states mark a successful flow of operation.

In my own words, an FSM is a device used by developers to create objects that have different behaviors determined by the current state they are in. Depending on the input, the object can react and/or transition to a different state.

One good example would be a 1970 HK VP70Z machine pistol, which has three firing modes: safety, single shot, and semi-automatic three-round burst. Depending on the current mode you have it set to (state), the result (output) is different when you pull the trigger (input).

Tools: When conceptualizing an idea (the multi-state object you’re trying to create), it’s best to use a State Transition Table to know what states and actions for those states you will need to add.

Step 1: Setup

It’s time to start a new project. With FlashDevelop, create a new AS3 project. For the name, put CarFSM. Click “Browse…” and save it to your desired location. Go into the Package slot and enter “com.activeTuts.fsm”. Make sure the “Create directory for project” checkbox is selected then click “OK” to finish.

Guide to Mochi Media services – Leaderboards

Once you are able to set up a game with Mochi Media and enable it for live update and connect with Mochi Services and use Link Tracking, it’s time to learn something which will tie players in front of their monitors until they show the world how much they rock: leaderboards.

Mochi Media offers to developers a great set of features, allowing them to create they own leaderboards with all kind of social options.

First things first, so let’s start from the game dashboard, with the Scores section yet to be activated. Click on ACTIVATE and you are ready to enter the world of leaderboards [...]

Saturday, September 3, 2011

MochiLand: The Making of BioGems

BioGems: “The Making Of”

Introduction

BioGems is Mochi Media’s first in-house game, which can be found in the Mochi Media games catalog. It’s a puzzle battle game in which space pets fight to protect their planet. By matching gems on a board, the player gets his pet to attack the opponent, defend itself for a while, regenerate some health or energy, or fill up its Rage meter.

Building a Team

My name is Dominique Ferland and I’m the game designer of BioGems. Before I joined Mochi, I worked on console games for about 4 years in Montreal. My title was never clear – something of a mix between an artist and a game designer. Growing tired of large-scale projects, I started making games in my spare time. The last game I made is the gamer trivia title, Geek Mind, which put me on Jameson’s radar for a Mochi in-house title. As soon as Jameson made an offer for me to start a development team and make fun games, I said goodbye to my old job!

CEO and co-founder of everything Mochi, Jameson Hsu is the best boss in the world. His vision for games is pretty simple – making awesome games he’d love to play. As we shared our love for games and discussed our game ideas, it was clear that we’d make a good creative team. As you’ll see in this post-mortem, Jameson’s input in the design and in the production really helped keep BioGems simple and super fun.

As Jameson and I were developing our puzzle game idea, we realized we would need a super programmer to join the team – that’s when Jameson found Nico Tuason, Master of Flash. Based in the Philippines, Nico has been making games and other Flash projects for years. He really impressed us with his little indie gems, Desert Moon and SolarMax, which really showcased his creative programming skills. Each time he’d add something to the game, it would be super polished, animated and tweaked to perfection. And he’s just an awesome dude.

Brian McBrearty, musical genius, joined in a bit later in development to add all the bleeps and bloops, the loud gem explosions and the awesome music. He did it all with such ease and awesomeness that it was kind of scary. Brian has designed sound and music for tons of films, games and other media – check out his blog for all that craziness.

Enough about us, let’s talk about the game! [...]

Build an Isometric Map Editor With As3isolib

In this tutorial, I will introduce you to the concept of isometric content creation and the basics of designing with it, using the open source library As3isolib. We will use these skills to create a simple level editor, suitable for an isometric game.

Final Result Preview

Let’s take a look at the final result we will be working towards:

The SWF has been squashed slightly to fit in the page; click here to see it full-size.

Step 1: What is Meant by “Isometric”

First, it’s important to know what we mean by isometric. Isometric is a Greek term which means having equal measurement: all measurements are to scale, no matter how far close or how far in the distance they are from the viewpoint. So in mathematics, isometric projection is a type of projection which preserves distance along objects.

Suppose you are in an isometric view; you will have a 3D view (e.g. when a camera takes a photo of you) where no matter you are, you will be shown at the same scale according to that camera. This is in contrast to a true perspective, where you will be reduced in size when you are far away from the camera.

As3isolib handles all the underlying math involved in creating your scenes and views, so don’t worry about the math!

Step 2: What Does Tile-Based Mean?

Tile based is a term used for any graphical content that uses tiles as a fundmental element. The concept itself is a bit old — it was used in older games for technical reasons — but this doesn’t mean that tile based games are now dead; these days 3D rendering is, but these 3D games can be tile based (and many are). This is where isometric games come in. Tiles are usually rectangular, but there are also square tiles, triangular tiles and even hexagonal tiles (as in some Civilization titles).

Step 3: Rectangular Maps vs. Isometric Maps

Rectangular tiles are the easiest of all to work with, though most of the time, when working in rectangle land, you use square tiles. You can use other sizes, of course, but square seems to be a favorite. The point of view for games with square tiles is usually top down or overhead. This just means that all your graphics must be drawn as though you are looking down on the object. Sometimes you can give your game a slightly angled view so that you are looking mostly down, but you can see some of the front or back.

Another point of view for square tiles is the “side-scroller” view, where you are looking at the world from its side. This was very popular among older action games like Super Mario Bros and the original 2D Duke Nukem. In a rectangular map, moving along the X-axis means moving east, and moving along the Y-axis means moving south. In an isometric tilemap, depending on its type, moving along the X-axis might mean moving southeast, and moving along the Y-axis might mean moving southwest. In isometric tiles we still use rectangular areas to contain the tiles; this is not going to change. What will change is how you will render them.

(Editor’s note: a great guide to different types of perspective can be found here.)

Step 4: Isometric Map Types

There are three types of isometric tilemaps: slide, staggered, and diamond. Each has its own set of quirks, its own methods of rendering, its own way of representing a tilemap, and its own method of navigating them. I will introduce them briefly in this step.

Slide Maps: The slide tilemap is probably the easiest to render, navigate, and interact with. Unfortunately, it has limited uses. It’s mainly used to scroll action games. Usually, a slide map has a horizontal X axis and a diagonal Y axis, although it is possible to have a vertical Y axis and a diagonal X axis. The tiles are blitted in horizontal rows top to bottom.

Staggered Maps: Staggered maps works perfectly in turn-based strategy games. It is also very useful in simulating a round world; it is best suited for maps that wrap around (move from one edge to the other). Each new row of the map is alternately shifted one-half of a tile left or right, which results in a zigzag pattern of tiles. The X axis is usually horizontal (increasing to the east), and the Y axis is southeast and southwest. Staggered maps are the most irregular of the three. The tiles are blitted in horizontal rows, top to bottom.

Diamond Maps: This type of map is very popular in real-time strategy games. These maps are the least offensive; slide maps have “tattered” tops and bottoms, and staggered maps have “tattered” edges, so diamond maps are the smoothest. In diamond maps, the only requirement is that both the X- and Y-axis are diagonal, so you can increase X-axis or Y-axis as fits you, like the X axis increasing to the southwest and the Y axis to the southeast [...]

Thursday, September 1, 2011

movieMonitor: an AS3 performance monitor with 10.1 features

Do you want to know how your latest Flash project is performing?

Here is movieMonitor, a little widget useful to display FPS, memory usage, stage size and number of children.

It’s based upon Hi-ReS-Stats by Mr.doob, but I added some new features to fit my needs, using some of the new System properties introduced by Flash Player 10.1

The usage is simple: just add

stage.addChild(new movieMonitor());

And you’re done. You can change stage with any DisplayObject if you want.

Look at this example:

Let’s see what do these figures mean:

FPS: current amount of frames per second (after the “/” you can see the amount of frames per second set in movie properties)

Minute average: the average amount of frames per second in the latest minute

ms per frame: the amount of milliseconds needed to draw the current frame

Direct: the amount of memory (in Megabytes) currently in use that has been directly allocated by Flash Player

Max direct: the maximum amount of memory allocated by the Flash Player so far

Total: the entire amount of memory (in Megabytes) used by the application, including the memory used by the container application, such as the web browser

Garbage: the amount of memory (Megabytes) that is allocated but not in use. This unused portion of allocated memory fluctuates as garbage collection takes place

Width: the width of the stage, in pixels. The width is calculated based on the bounds of the content of the stage (after the “/” you can see the stage width set in movie properties)

Height: the height of the stage, in pixels. The height is calculated based on the bounds of the content of the stage (after the “/” you can see the stage height set in movie properties)

Children: the number of DisplayObjects in the movie.

This is the script [...]

Saturday, August 27, 2011

Create a terrain like the one in Tiny Wings with Flash and Box2D – adding textures

If you are following the series about the creation of a Tiny Wings-like terrain, you should know one of the most popular requests once I placed a car running on the hills was how to get rid of the debug draw graphics and use your own textures.

First, you need a seamless texture, or a texture without seam at least horizontally. I suggest you to pick a texture of the same length of the hills (640 pixels in this case) or a texture which width divides the lenght of the hills.

I used a rock texture taken from 40 watt.

Then, as soon as you place the polygons representing the hill slices, you also have to draw on a sprite the same shape you are giving your hill.

This will act as a mask for your seamless texture. And obviously remember to remove both the mask and the texture when they leave the screen to the left side.

This is what you will get:

Use UP and DOWN arrow keys to control the cart, and LEFT/RIGHT to balance it while in the air.

This is the fully commented source code: [...]

Thursday, August 25, 2011

Operator Overloading in AS3 With Realaxy Editor

In the previous post about Realaxy Editor we spoke about the Traits language, which lets you take advantage of multiple inheritance. Now we turn to another noteworthy opportunity: operator overloading.

Realaxy ActionScript Editor (RASE) is available here (for Windows, Macintosh OS X, and Linux). Note: if it is your first experience with the editor, please read the RASE how-to.

Intoduction

One of the major features added to the RASE beta 10 is operator overloading support, allowing developers to change how the operators (*, +, etc) behave in different circumstances. This feature, as well as multiple inheritance, is an object of a holy war between ardent supporters of two different programming paradigms.

The advantages of overloading operators are obvious:

Compact style. Your programs might become shorter and more readable; for example, it's much easier to use something like a*b*c than a.multiply(b).multiply(с).
Code often looks more natural. Well defined operator is easier to understand and remember than the name of function a function name. For example, combining two variables of type Point you would prefer to see something like point1 + point2, but not point1.plus(point2).

The real argument against operator overloading is the losing of the control over your code. It is unclear, sometimes, where an operator is overloaded, and where it is not. Adding an overloaded operator invokes changes in the behavior of existing code that might lead to some unexpected consequences.

Operator overloading is not included in ActionScript (ECMA3) even though it is proposed for Standard ECMA4. Java does not support operator overloading but both Groovy (“Java with syntactic sugar”) and Scala do. Furthermore, C#'s operators may be overloaded.

One cannot say whether it is a good or bad thing. However, it is also practically assured that sometimes it is a virtual must-have. For example, when chaining multiple mathematical operations, operator overloading really makes code much more concise, thus improving your understanding of the way it works. But enough theory — let's refer ourselves to practice.

We talk about a language extension overloadedOperators that was introduced in RASE since Beta 10 (build 8145+).

An easy way to import it (or any other language) to your project is to press Ctrl+L (Cmd+L) within Realaxy Editor.

By the way, overloadedOperators in RASE is just a port of the overloadedOperators language from the Jetbrains MPS platform. We just decided not to reinvent the wheel and after investigating the target application domain, came to the conclusion that the Jetbrains solution appears to be sufficient, and meets all our needs. We have added some small bonus features from us.

We believe, that this is the right way of the Language Oriented Programming that takes the best from other languages and customizes it for own needs. Read more about this later in our forthcoming articles on the creation of language extensions.

Step 1

Create a new project with a module inside.

[...]