Ok, Some time ago I made a platformer framework for Flashpunk. So far it has been used in 3 games, two of mine and one by Jonhan Peitz
- Thelemite – my first indie game
- Bathos – Ludum Dare 21 entry by Johan Peitz
- Santa Chomp – A total crap by me
This time, I’ve looked through the code, commented it, and decided to make a tutorial to facilitate using it. IMO it’s pretty usable. In this tutorial I will assume the following:
- You do know a programming lanuage, no matter which one.
- You have some basic knowledge on how do game making work in general
- You don’t need to know of AS3 or flash or how this works
- You don’t need to know any of the software used in this tutorial
- You can draw stuff
Ok, let us begin!
Step 1 – Things you will need
- The framework
- Flash Develop
- Flashpunk (included in the framework)
- Graphics Gale
- Tile Studio (included in the framework)
- Irfan View
Step 2 – The Almighty Flashpunk
Ok, I told you you don’t actually need to know either AS3 or Flashpunk at all. So this is the part you get to know them if you already didn’t.
This step is simple: Visit the Flashpunk homepage and go through the basic tutuorials.
After completing this you will have enough knowledge of how FP works and you will have a Flash Develop set up and running.
Also, make sure you have Flashpunk API reference in bookmarks!
Step 3 – Overview of the framework
- Download the framework
- Unzip to a convenient location
- Double-click Framework.as3proj
When you have if open and running in FD, you can hit F5 at any time to run and test it. Try it and see how it works. You should see a tile-based world with a boxy player graphic in the middle. Let me overview the files that are in the framework now:
- Main.as – The entry point, it loads the world and sets stuff up
- Levelworld.as – The game world / scene. It manages whatever is inside it
- DynamicTilemap.as – The level tilemap. Manages rendering, loading and collisions of the tilemap
- Gamer.as – Basic Gamer class. All game entities, such as Player, Enemy, Coin etc should derive from that class
- Player.as – Player class, derives from Gamer
- Ai.as & Collectible.as – Empty Gamer derives
Now, go through all of the files and read comments inside them. The files are really tiny and the largest ones doesn’t exceed 150 lines. Look how stuff is executed etc. This should be a fairly easy step. Once you feel familiar with it, move on to the next step!
Step 4 – Integrating with Tile Studio
Tile Studio is a pretty neat tool to get tile maps done and fast. There is an integrated map and tile editor. You can use the tile editor to get quality tiles almost effortlessly. I preffer drawing them in an external application, such as Graphics Gale. Tile Studio supports that too, and you can refresh tile graphics from disk with a single keystroke (F5). For now, run the Tile Studio from tiled subdirectory and navigate to src/gfx to load ponyland.tsp project file.
I’ll quickly overview essential features of this thing
- There are 2 main areas – the map editor and the tile editor, you can switch through them. The tilesets are superior to maps. I’ll explain that in a moment.
- You can have multiple maps. However, each set of maps applies to one tileset.
- You can have many tilesets and each tileset can have many maps. That’s why I said that tilesets are superior.
If you want to start a new project, you first need to draw tiles or import them from a bmp file using File menu. If you imported the tileset, you can reload it at any time pressing the F5 key!
When you have a tileset ready, you have to add a map. Then, just edit the map and export it. To export a map, Go to Map menu, choose Export map… at the very bottom, and make sure you choose 8-bit, 0 based from the drop down list at the save file dialogue. If you need more than 256 tiles, use 16-bit, 0 based, and remember to change readUnsignedByte to readUnsignedShort at line 58 inside DynamicTilemap.as and 0xff to 0xffff at line 69.
Okay, now to run a quick test! Make some changes to the map, export it into testmap.bin, switch to Flash Develop, and hit F5, and here you go! You have your changes applied!
Few hints for working with the Tile Studio:
- After you export a map there is a bug that will corrupt the display! Switch to tile mode and back to map mode to fix it.
- I encourage you to use the built-in tile editor, or at least try it out. Check out the HTML tutorial in tiled/tutorial and visit their website to learn how to make really cool stuff with it!
- Right-click is a tile-picker. So when drawing a map, you draw with left button and pick tiles from the map using right click. It makes all lives easier. However, you can’t right-click pick from the tile list at the botton, I tend to get caught on that all the time.
- The thing is GPL IIRC, so if you want the source, visit Tile Studio SourceForge website to get it. Also, it’s in Delphi, so you don’t want it.
- The copy-paste thing on the map is tricky, try it few times to get the feel of it.
- The transparent tile color is the color of the first (top-left) pixel on the tileset when importing. Always keep the zero-tile blank!
- The blank tiles are saved as 0xff (256) instead of 0. The DynamicTilemap.as handles that.
- Create enemies and other objects as tiles. draw them on the tileset and place them on the map. Extend DynamicTilemap to instantiate objects instead of creating tiles.
Step 5 – Integrating with Graphics Gale
Graphics Gale is an awesome piece of software by Human Balance! Initially it came only in Japanese, but it’s so cool, that people started using it without knowing Japanese :P It comes in two flavours:
- Free – Full of win, everything is there
- Shareware – As above + it has GIF, ANI and ICO format exporters supporting animation
Grab the free version for now (the 2.0 beta version!), and if you do like it and use it in the future, I encourage you to get the shareware version. Anyways, I’m going to quickly go through the basics of this thing!
For now, install it, run it, and drag’n’drop pedd.gal into it. you should see something completely different from that below :P
Let me explain the stuff that’s in there and point out some cool features.
- Layers – you can have as many as you want to. Each layer can have a different transparency mask color. Each layer can have a separate alpha channel too. You can easily enable and disable them.
- Frames – frames are superior to layers, so that each frame has it’s own separate group of layers
- History – a list of stuff you did, good thing to look at when you’re about to undo few times!
- Pallete – a pallette capable of holding up to 256 colours. You can pick two colours,l but actaully you draw only with one. The right click is a color picker. A cool feature is easy gradient maker. Set up two colors, set them as first and second, and from the drop-down menu, pick Make Gradient… and it will interpolate the two colors across the palette.
- Preview – you can preview your frames. Press play/pause on the toolbar to toggle animated and not animated preview.
- Toolbar – Well, it has tools :) Cool stuff there includes magic wand, color replacer and grids.
- This is the image you are editing
GG has it’s own format .gal. You should always use it to keep source files. If you would save the pedd.gal file as bmp, it will only save what you see on the edit window. To export spritesheet, use Export tool from File menu. You can choose number of rows, but since Flashpunk can take any number of rows, use whatever looks good for you.
Also, there’s this this bug, that will make transparent color go white when exporting, so always make sure you have a blank bottom layer filled with the transparent cvolor and with transparency disabled!
Since I wanted to show you how to make it work with Tile Studio, bring up the tile.bmp file into the GG. You can enable 32×32 grid to have a clear view of where is what. If you edit this file, save and reload in Tile Studio (simply hitting F5) you will see the changes (might only work with new projects, not the one included, probably a bug).
But, to use a file in a Flash project, you need to convert it to PNG and add transparency. This is pretty quick.
- Make changes to the tilemap.bmp
- Save the file
- Open tilemap.bmp using Irfan View
- Click save icon on the toolbar
- Navigate to framework/src/gfx directory (it will remember it)
- Choose file type as PNG from the drop down list (remembers that too)
- Tick Show Options Dialog below (remembers that three)
- Tick Save Transparent Color (and that is indeed remembered)
- Don’t change the file name, save as tilemap.png
- Use mouse to pick the transparent color
- Go to Flash Develop and hit F5, and yay! The changes are there!
This looks like a lot of clicking, but as you set stuff up, let me now describe how is everything integrated, and how to work with that uberquickly!
Step 6 – Test the integration!
Have GG, TS and FD open at the same time, and this is how you make quick changes and test them:
- Edit tilemap.bmp in GG and save
- Hit F5 in TS, edit map and export
- Open tilemap.bmp with iView, click save and pick the color
- Go to Flash Develop and hit F5
Wooooooooooo! 4 steps! You can’t get more Ludum Dare than that!
Step 7 – Adding enemies and stuff
This is simple and I’ll keep it short. To create an enemy:
- Totally disregard Ai.as and Collectible.as
- Copy-pasta Player.as into a different file, name it Enemy.as or whatever
- Remove camera stuff from update() (lines 42-43)
- Replace all keychecks from input() with random checks (if (FP.rand(2)) ret|=UP;)
- Change color to differentiate the box from player (add 3rd parameter to Image.createRect())
- You can alter Gamer’s properties in the constructor (see Gamer.as)
- Go to DynamicTilemap.as and add a condition to create the enemy based on a tile
- Mark the enemy tile on the tile map and reload from Tile Studio
- Place few enemies on the level and export the map/li>
- Go to FlashDevelop and hit F5, clean any errors and see your enemies!
Use Flash Develop debugging features (place breakpoint) or Flashpunk console (hit ~ key to debug entities) to help you if anything went wrong!
When you’re done, you got yourself a new game feature. It should take no more than 15 minutes! and every next enemy is going to take at most half of that!
Step 8 – The end
Yay! If you went through all that, I hope it’s going to be helpful! Please let me know if you’re using the framework anywhere. I don’t require a credit and stuff, I’d just love to know!
Bonus – Santa Chomp source package!
The code is a total mess, and some of the assets are not mine, but still I hope it helps!
Looking forward to helping anyone with Ludum Dare this weekend with that!