Category Archives: Tutorials

Let me teach you something new!

Loading Ogmo2 Levels in FlashPunk

2 Replies

This is a quick tutorial on loading Ogmo2 levels in FlashPunk. As an added bonus, I’ll cover how simple it is to layer tile sets in your game world.

NOTE: I used Oryx’s free tile set for the tutorial.

Okay let’s get started! You’ll need to download the tutorial project zip as a starting point for this tutorial. The archive contains everything, but at this point you just want to turn your attention to the Ogmo project and level files found in the assets folder.

PRO TIP: As of this moment in time, there is a bug in Ogmo 2 where if you resize the window the tiles will disappear. In order to combat this, resize your editor window to the desired dimensions prior to loading a level. If you don’t heed this warning and you get invisible tiles, simply close the project and reopen it.

Above is the level file you will find in the archive. As you may have noticed, I have two tile layers – one for the bottom (or “floor”) tiles and the another for the top (or “detail”) tiles. This allows you to place other tiles on top of each other without the bottom one being over written. As you will see below, you just need to make second tile layer with the same properties to achieve this.

Okay, so how do you actually get the level into your project you ask? Well it’s quite simple really.

You’ll want to add a new class to your project that extends FlashPunk’s entity class:

You’ll need a variable to hold the parsed XML data, one for each tileset, and one for the grid.

Many people who have seen Zach’s tutorial use a slightly more verbose method of getting the XML data. However, since that video a function in FP called FP.getXML() has been added that simplifies this process, which I’ve used my my constructor.

In this next block of code is the added() function of the entity, which will be loading up our tilesets:

Here we want to initialize the tilemaps with the width and height values from the XML data of the Ogmo level. Then use the loadFromString function available in the tilemap class which loads tiles from a string, which is exactly how Ogmo formats it. How handy! Then we just have to construct a graphic list and assign it to our graphic.

 

PRO TIP: I’d like to take the time to point out that you use the “@” when you want to access a value within an XML tag. For example:

To get the “name” value from the company node: “data.company.@name”. If you want to get value between XML tags, leave out the “@” and use the name of the root node. So to get the employee name: “data.company.employee”.

 

Next we’ll want to use the same principles to load the grid. Keep in mind this is still within the added() function of our Level class:

However, note that Ogmo doesn’t use the FP default comma (“,”)  for the column delimiter. You’ll need to pass in double quotes for the delimiter parameter so it is loaded correctly.

Finally, we need to add our entities. Typically, you have more than just one instance of any given entity, so we’ll want to loop through each one and add it to the game. We can do this by creating an XMLList and assigning a parent node to it. Then all we need to do is loop through the list and add each entity:

You can also pass other XML values into the constructors of your entities if they have other properties. For example, let’s say our coin has a “pointWorth” value:

Just make sure you define the property in your Ogmo project as well!

That concludes the tutorial! If you have any questions, please leave a comment, email me, or find me on the FlashPunk forums.

 

StatSystem: Inventory and Item Management

Leave a reply

[This is a tutorial for my AS3 stat library which can be found here. You can find the full documentation here.]

As of version 2.1.0, StatSystem contains inventory and item management features! This tutorial was created to introduce these new features. As usual, when functions and properties are mentioned, they will be linked to their respective location in the documentation.

The new features summarized in one sentence: an Inventory is a collection of ItemStacks, each of which hold an amount of an Item.

The Item class contains three basic properties:

  • name – the name of the item as a string
  • type – the type of item (this can be anything e.g. weapon, consumable, potion, and etc)
  • stack – the maximum stackable amount for this item in an ItemStack
  • stats – the StatSystem for the item

To create a new Item simply pass the desired name, (optional) item type, and (optional) max stack of the item. Here I’ve created a new item called “Health Potion” that is a “potion” type item and stacks to the maximum of eight.

PRO TIP: If you set the max stack of an item to -1, there will be no limit. This happens to be the default value if you do not pass a value in the constructor.

To clarify the “type” property: In RPGs, there are often different types of items – weapons, shields, armor, consumables, food, and so on – each that have a different set of stats. If you are familiar with FlashPunk, you can think of it the same way the Entity’s “type” property.

Now back to our Health Potion! Let’s say all of our potions in our imaginary game have following stats – health, mana, and worth. Since this our Health Potion obviously affects health, we’ll give it a value of 20, mana a value of 0, and lets make it an expensive by setting the worth to 500:

The reason we still add the “mana” stat to the health potion is because we want all “potion” type items to have the same stats (but they don’t have to have the same value!) so when we need to do something with it, we don’t need have have any special cases and use a “catch all” code block. For instance, take this code snippet for example:

Other good examples are weapons in rouge-likes since they often have a multitude of different attributes:

Now that we’re overflowing with cool items, you’ll likely want to store them all somewhere. This is where ItemStacks and Inventories come in handy!

First off, let me make it clear that an Inventory is a collection of ItemStacks, not Items. ItemStacks are stacks of identical items. If an item contains a property that changes over time (such as, charge, durability, etc) or can be changed by the player, you’ll want to set the max stack of the item to 1. For example, say you find a Steel Sword that has 10 points of durability left and you have a Steel Sword in your inventory that has full durability points. If the max stack isn’t set to 1, that almost broken Steel Sword will have max durability once you add it to your inventory since it will be added to a stack. Now here’s to actually use ItemStacks and Inventories.

An ItemStack has two properties : the item it contains and the amount of said item. So say we wanted to create a stack of Health Potions for a trip down into the dungeons:

PRO TIP: It’s also worth mentioning that ItemStacks have three methods for altering the amount – add(), remove(), and setAmount() which should all be self explanatory.

Now we need to create an Inventory to hold the stack. Inventories have only one property – the maximum size. So let’s create a small inventory of size 5 and then add our stack of potions:

PRO TIP: the size of an inventory is the number of slots, not the number of items it can contain.

Since our inventory was empty when we used addItemStack(), our stack of potions will take up the first slot. You can also add items via the addItem() method which takes an Item instead of an ItemStack and the amount of the Item to add.

To get our stack of items back from the inventory, we can use getBySlot() which returns an ItemStack at a specified slot in an inventory but doesn’t remove the ItemStack. Since our potions are in slot one, we’d pass “0″ into the parameters as the inventory slots are zero-based. To remove an ItemStack from a specified slot, use removeBySlot() by simply passing the slot and amount to remove in the parameters.

There will be other occasions where we won’t know where an item is in an inventory. This is where the removeByName() method comes in. The function takes a name and the amount to be removed.

This concludes the introduction to the item and inventory management features!

StatSystem: Experience and Level Management

Leave a reply

[This is a tutorial for my AS3 stat library which can be found here. You can find the full documentation here.]

Typically when stats are involved in a game, there are also levels and experience that alter them. This tutorial will teach you how to implement an experience system using the library. When functions and properties are mentioned, they will be linked to their respective location in the documentation.

So let’s say we have a hero who should gain levels by meeting the required experience per level. First we must set up our stat system for the hero:

The health, mana, speed, and strength stats should be nothing new if you’ve completed the previous tutorials. The level and experience stats are what we are interested in.

The level stat will hold the player’s current level while the experience stat will hold the player’s current experience towards the next level. As you can see in the above code, the player is currently at level one with a max level of 100. Experience is currently at 0 with the requirement of 50 point in order to reach the next level.

Now we need to add one additional detail to the experience stat in order for this to work – the onFull function:

This property takes a function that is executed once the stat’s value meets the max max value, which just so happens to be very useful in occasions like this.

PRO TIP: There is also an onEmpty property that is executed once a stat is equal to zero. This can be useful for when a player’s health runs out!

Here’s how our levelUp function should look:

The above code block introduces two new functions – setValue and setMaxValue. Each of which sets the respective variable to the value passed in the parameter as opposed to adding via the addValue/addMaxValue functions.

PRO TIP: The setValue function will not allow a new value less than zero or greater than the max value and will execute the onEmpty and onFull functions respectively. Similarly, the setMaxValue function will not allow a new value less than zero, but has no positive limit. It will also scale the base value if it exceeds the new max value.

We’ll use addValue to reset the current experience to 0 and then just add a level-based amount to the max value. Using this method, the required experience for level2 will be 60, level3 will be 84, level4 134, and so on. However, you can use any formula you wish to calculate experience values. You can even use a preset array or vector for this too:

This concludes the experience and level management tutorial!

 

StatSystem: Getting Started

Leave a reply

[This is a tutorial for my AS3 stat library which can be found here. You can find the full documentation here.]

This tutorial is meant to be a quick overview of the library. When functions and properties are mentioned, they will be linked to their respective location in the documentation.

Okay, let’s get started! In order to begin, you need to create a new stat system:

From here, you can add as many stats as you want with addStat which takes a single parameter – a stat. Create a new Stat and set the first parameter as the desired name:

PRO TIP: You can also remove stats via removeStat function, however, you probably won’t use this too often as stats typically don’t disappear mid-game.

Congratulations, you have created your first stat system! However, you’ll probably want to know how to manipulate the values of the stats. Above we initialized our stats with only a name, which means all their values are currently 0. So let’s add some value to them. First, we need to retreive the stat from the stat system with getStat:

The function retrieves stats by name, so make sure you use the same spelling and capitalization, otherwise it will return null. To alter the value of the stat, we use the addValue function:

Our speed stat now has a value of 100! To remove value from a stat, simply pass a negative value:

PRO TIP: You can initialize a stat with as starting value by passing a second paramater into the Stat constructor. For example, to initialize a stat with a value of 9:  myStats.addStat(new Stat(“awesomeness”, 9)).

Stats not only have a basic value, but also a max value. When the max value is set, the basic value will never be allowed to exceed the max value. Right now, the max value is at zero, so there is no limit to how high the stat can reach. Use addMaxValue to set the max value:

As you may have noticed, the max value is now less than what we had set the basic value to previously. However, the addMaxValue function scales back the basic value if it exceeds the max value. So right now the max value and the basic value are set to 40.

To get the basic value and max value, you can use the read-only variable value and maxValue:

PRO TIP: You can initialize a stat with as max value by passing a third paramater into the Stat constructor. For example, to initialize a stat with a value of 9and max value of 10 : myStats.addStat(new Stat(“awesomeness”, 9, 10)).

There will also be situations where you may want to save a stat or an entire system to a string, such as, saving a characters current progression to a file.

To save a entire stat system to a string, call saveToString:

The above output is the result of our stat system up to this point. To load a this output into a new system, simply pass the string into the loadFromString function of the new system:

PRO TIP: You can also save/load individual stats by calling their own saveToString and loadFromString functions respectively.

This concludes the getting started tutorial!

StatSystem: Modifiers

Leave a reply

[This is a tutorial for my AS3 stat library which can be found here. You can find the full documentation here.]

This tutorial will cover on how to use modifiers. When functions and properties are mentioned, they will be  linked to their respective location in the documentation.

Modifiers can be thought of as temporary stat effects that can be removed at a later time. Say, for example, you put on the “Boots of Blinding Speed” which has a +50 speed effect and -10 field of view effect. This effect isn’t permanent as it should only be active when the boots are being worn. Such cases are where modifiers come into play.

Adding a modifier is easy! First you must of course have an existing stat system:

Now the boots have two effects: a +50 speed boost and a -10 FOV penalty. So we’ll need to apply a modifier to each stat by using the addModifier function:

The modifier constructor takes several parameters – a name, the value, and the type. Let’s just look at the name and value for now, the type will be discussed later.

The name property is works the same way as a Stat - anything goes as long as you retain the same spelling and capitalization later when you want to retrieve or modify it. The value property is the amount that the modifier should add to the stat or the amount it should remove if the value is negative.

In order to get the value of the stat with modifiers, you must use the valueTotal property instead of the value property. The value property only returns the base value of that stat, that is, the amount without any modifiers (even if there modifiers present). The valueTotal property on the other hand, returns the value of that stat with all affecting modifiers. You can also get the total value of  just the modifiers by using the valueModifiers property. For example, if a stat has a modifier that adds +4 but also a modifier that removes -2, then the valueModifiers property will return 2.

Say you are tired of running around blind and would like to regain your vision, so you take off the boots which means you also need to remove the modifiers. To do so, use the removeModifier function:

PRO TIP: The removeModifier function also returns the removed modifier just in case you need it post-removal.

PRO TIP: The modifier class also contains saveToString and loadToString functions just in case you would like to save them.

As previously mentioned, modifiers also have a type parameter. Modifiers have two types as defined by the constants VALUE and MAX_VALUE in the Stat class. VALUE type modifiers affect the basic value of a stat while MAX_VALUE type modifiers will affect the max value of a stat. Why should there be two types?

Simply because there are situations where you may want to alter the max value of a stat rather than the basic value. For instance, say you put on a “Ring of Health” that grants +10 health points. Typically, you don’t want such an item to affect the current health but rather the total amount of health overall. This is when you use the MAX_VALUE type modifier:

This concludes the modifier tutorial!

 

Flash To Air

1 Reply

I recently started looking into how to package an Flash based game in AIR, and surprisingly there is a lack of straight forward tutorials on the matter. Thankfully, the whole process is actually quite simple! So here’s a little tutorial on getting started for Flex users making games in FlashDevelop. You’ll also need the latest version of Adobe Air.

Standalone Executable

You’ll want to create a new project, specifically an AIR AS3 Projector.

Once you’ve created the project, you’ll end up with a familiar project template with the exception of the included bat files. Simply copy and paste your “src” folder from your other project into the new one your just created.

You should now be able to compile and run the project with no problems! Yes, it’s as easy as that. However, you’ll want to read further as there are a few more steps to actually packaging the project into an air file.

You will want to go into the “bat” folder and open up the “SetupApplication.bat” file. Here you’ll want to change the “CERT_PASS” value to something else besides the default value.

Next you’ll want to open up the “application.xml” file in the project root. There you can change the options such as the window title and such. If you rename your swf, you’ll also need to come here and change the file name and ID.

Once you’ve done that, right-click on the “CreateCertificate.bat” and click “Execute”. This will create a certificate which you’ll need in order to package your application. Next, execute “Packager.bat”. This will create a new directory called “air” which will contain your application packaged as an Air file! This is the file you’ll want to distribute to people.

Android App

Making an Air application for the Android platform is essentially the same method as above, with a few exceptions.

You’ll want to create a new Air Mobile AS3 App.

You’ll want to use the same method outlined above for creating your certificate.

However, if you open up the “Run.bat” you’ll see that there is a bit more options that you can fiddle with. The most important ones to take note of are the ones under the “target” label which instructs the batch file which platform you are packaging the app for. To change platforms, simply uncomment the one you want and leave the rest commented. By default, the desktop platform should be uncommented. This runs the app just as it would in a standard AS3 project.

In order to test the app on an Android device, you’ll need to have the SDK, the OEM drivers for the device, and the device to test on. You’ll also need to turn on the USB debug feature. To do this, go to Settings > Applications > Development and enable USB debugging (on an Android 4.0 device, the setting is located in Settings > Developer options). You can read more into this here.

Once everything is set up, you can uncomment the “::goto android-debug” line. When you compile and run your app, flash develop will essentially install the app on your phone for you to test.

You also should be aware of the available screen sizes, which is found under the “desktop” label. By default there are only two, with the NexusOne line uncommented. However, you can find more screen sizes in the comment just under the label.

I unfortunately do not own any iOS devices so I can’t share my knowledge on that topic, but there is a great tutorial here which covers the process.

Other than that, your app is ready to go! Hopefully this tutorial has made figuring out the first few steps of packaging an Air application much easier for you than when I was poking around with it by myself.