Author Topic: FlxTilemap Color Bitmap Loading (And Basic Platformer) Tutorial  (Read 6121 times)

Arkeus

  • Contributor
  • ****
  • Posts: 321
  • Karma: +1/-0
    • View Profile
    • I, Arkeus
This week I wanted to try out switching to using both FlashBuilder and GitHub. However, in the process I also switched from using my own color bitmap loading to using Flixel's new built in version. I ended up turning my tiny project into a tutorial project that people looking to either make a simple platformer or looking to learn about the new load from color bitmap functionality can use. I've documented the source and placed it up on GitHub for you to use. Note though, that in order to take advantage of the new tilemap loading, you need to use either the beta or dev versions of Flixel.


Codename Lumberjack


Play The Game
View The Source


However, don't expect anything amazing. It was just a project for me to learn some new tools after all. :) Also the code is spread out through different packages because I structured it as I would a full game, so I can add new features in the future without it getting too messy. But everything you need should be under src/com/arc/lumberjack. Let me know if you have any questions!

KunoNoOni

  • "Never tell me the odds"
  • Active Member
  • ***
  • Posts: 170
  • Karma: +0/-0
  • Code is Love
    • View Profile
Wow! Thanks for the tutorial. I checked the source code and I picked up a few tips I'm going to implement into my games :)

As always, superb job Arkeus!


-KunoNoOni

Seagaia

  • happens to be a
  • Active Member
  • ***
  • Posts: 112
  • Karma: +0/-0
  • Howdy
    • View Profile
    • twitter
Hey thanks, this is helpful with map creation - I've only briefly looked through this.

This is my understanding of color bitmap loading. It may be completely wrong:

-You draw out your tiles somewhere. These tiles all map to some different hex code. You draw your map in a map editor, and then later in your code, flixel, using those hex codes, converts your map into a string so you can do tile-by-tile logic, e.g. collisions with coins, spikes, water, etc.

Some questions:

1. How do you generate the TILES array in World.as, with the Hex codes for each tile? Is that some sort of mapping from the set of your drawn tiles to hex codes? (if so, what if two different tiles map to the same hex code?)

2. If you wanted walk-through tiles, would you have to make some second layer (something like your CoinMap.png) and then make those tiles act accordingly?



« Last Edit: Mon, Sep 12, 2011 by Seagaia »
making anodyne, a zelda-like (with flixel!)
anodynegame.com

camasthecat

  • Contributor
  • ****
  • Posts: 461
  • Karma: +0/-0
  • WOW! 400+ Posts!? Jeez! Do I have a life!?!?
    • View Profile
    • My site for thermalJS, an HTML5/Javascript engine kinda-like flixel:
Nice art - I like it!

Arkeus

  • Contributor
  • ****
  • Posts: 321
  • Karma: +1/-0
    • View Profile
    • I, Arkeus
Hey thanks, this is helpful with map creation - I've only briefly looked through this.

This is my understanding of color bitmap loading. It may be completely wrong:

-You draw out your tiles somewhere. These tiles all map to some different hex code. You draw your map in a map editor, and then later in your code, flixel, using those hex codes, converts your map into a string so you can do tile-by-tile logic, e.g. collisions with coins, spikes, water, etc.

Some questions:

1. How do you generate the TILES array in World.as, with the Hex codes for each tile? Is that some sort of mapping from the set of your drawn tiles to hex codes? (if so, what if two different tiles map to the same hex code?)

2. If you wanted walk-through tiles, would you have to make some second layer (something like your CoinMap.png) and then make those tiles act accordingly?

1. When you are making your map and tiles, you decide which hex value maps to which tile. Each hex value is a color, so for example, I choose a random brown color that I want to map to a dirt tile and put it in that array, and then when I am making my map, anywhere I want dirt I use that specific color.

2. I assume walk-through means that they are solid from one direction but passable from another (since there are some tiles in there that are completely not-solid). If so, then having another image is one way to do it. Though since it's probably linked to a particular tile (a specific bridge tile always has the same solid-directions set), so after loading the map I would just set them manually using setTileProperties. Perhaps I misunderstand your question though, since I'm not sure it's possible to set properties for a specific tile in the map rather than a specific tile type.

camasthecat

  • Contributor
  • ****
  • Posts: 461
  • Karma: +0/-0
  • WOW! 400+ Posts!? Jeez! Do I have a life!?!?
    • View Profile
    • My site for thermalJS, an HTML5/Javascript engine kinda-like flixel:
Well I got it working! Thanks for the code! :)

The Turnip Master

  • Member
  • **
  • Posts: 26
  • Karma: +0/-0
    • View Profile
    • Nerdspiel
Very nicely done.  I especially like the water and lava movement mechanics.  They have a nice feel to them.

werem

  • Member
  • **
  • Posts: 79
  • Karma: +0/-0
    • View Profile
I was looking for this feature so long. The thing is, I can't make it work. Wich version you used to create it?

This is the error I'm getting once I get it running.

TypeError: Error #1009: Cannot access a property or method of a null object reference.
   at org.flixel::FlxTilemap/overlapsWithCallback()[C:\proyectos\FlashBuilder4.5\Codename Lumberjack\src\org\flixel\FlxTilemap.as:952]
   at org.flixel::FlxObject$/separateX()[C:\proyectos\FlashBuilder4.5\Codename Lumberjack\src\org\flixel\FlxObject.as:989]
   at org.flixel::FlxObject$/separate()[C:\proyectos\FlashBuilder4.5\Codename Lumberjack\src\org\flixel\FlxObject.as:964]
   at org.flixel.system::FlxQuadTree/overlapNode()[C:\proyectos\FlashBuilder4.5\Codename Lumberjack\src\org\flixel\system\FlxQuadTree.as:566]
   at org.flixel.system::FlxQuadTree/execute()[C:\proyectos\FlashBuilder4.5\Codename Lumberjack\src\org\flixel\system\FlxQuadTree.as:500]
   at org.flixel.system::FlxQuadTree/execute()[C:\proyectos\FlashBuilder4.5\Codename Lumberjack\src\org\flixel\system\FlxQuadTree.as:515]
   at org.flixel.system::FlxQuadTree/execute()[C:\proyectos\FlashBuilder4.5\Codename Lumberjack\src\org\flixel\system\FlxQuadTree.as:513]
   at org.flixel.system::FlxQuadTree/execute()[C:\proyectos\FlashBuilder4.5\Codename Lumberjack\src\org\flixel\system\FlxQuadTree.as:509]
   at org.flixel::FlxG$/overlap()[C:\proyectos\FlashBuilder4.5\Codename Lumberjack\src\org\flixel\FlxG.as:967]
   at org.flixel::FlxG$/collide()[C:\proyectos\FlashBuilder4.5\Codename Lumberjack\src\org\flixel\FlxG.as:991]
   at com.arc.lumberjack.state::Play/update()[C:\proyectos\FlashBuilder4.5\Codename Lumberjack\src\com\arc\lumberjack\state\Play.as:63]
   at org.flixel::FlxGame/update()[C:\proyectos\FlashBuilder4.5\Codename Lumberjack\src\org\flixel\FlxGame.as:635]
   at org.flixel::FlxGame/step()[C:\proyectos\FlashBuilder4.5\Codename Lumberjack\src\org\flixel\FlxGame.as:585]
   at org.flixel::FlxGame/onEnterFrame()[C:\proyectos\FlashBuilder4.5\Codename Lumberjack\src\org\flixel\FlxGame.as:453]


axcho

  • Active Member
  • ***
  • Posts: 174
  • Karma: +0/-0
    • View Profile
    • Evolution Live!
Heh, I didn't realize that this feature existed in the dev build of Flixel. :P

I ended up writing my own in December, with support for autotiling at the same time as well as loading color data from a "legend" image. I'm planning on releasing it later in February. :)

I could release it earlier though. What do you think?