Tag[][]: graphics

Tags:dweller graphics
The goal: to have randomized "clutter" that can be deployed in a sensible manner, knowing only the initial seed type, for example "rock, brick, grass, furniture, blood", etc.

There were a few ways to do this - one, you could create many sprites (which I just learned how to use and implemented in weapons) for each randomization and deploy them. However, this means that variety is limited by however many tiles we make, and you hit diminishing returns pretty quickly. Once you have say 10 tiles (for each clutter type!), you'd have to start doubling to see any impact.

Instead, I wanted to create a way to make just a few simple patterns (not for furniture clutter, but for more stackable things like rocks, splatters, scratches, dents etc) and then draw them to the screen on top of each other to create a new pattern each time without having to craft it by hand. This also has a bonus of (for combat FX) of showing where a fierce battle was fought by repeated applications of the "decal".

However, juggling layers sounded like a pain in the butt until Nathan pasted this doozie:


class MonsterGraphic extends Graphic {
public var creatureSprite:Spritemap;
public var armorSprite:Spritemap;
public var weaponSprite:Spritemap;

override public function render(target:BitmapData, point:Point, camera:Point):void {
creatureSprite.render(target, point, camera);
armorSprite.render(target, point, camera);
weaponSprite.render(target, point, camera);
}
}


Turns out you can override the render method of an entity's graphic (graphic being the default manner in which the entity is represented on screen) to do pretty much whatever you want. In the above example, the "graphic" is actually 3 different spritemaps, all rendering in the same spot, which neatly solves my dilemma of having to manage layers on an entity-by-entity basis: I just add decor, and this class takes care of rendering it.

This is for NPCs though, and just renders 3 sprites in one location. For decor - which needs to be a multilayer canvas - I just changed it to this:

override public function render(target:BitmapData, point:Point, camera:Point):void {
for each (var i:Tilemap in layerArray) {
i.render(target, point, camera);
}
}

This lets me have as many layers as I want (currently four); I added extra controls so that the new "graphic" would know which layer it is on at every location on the map, and we're set. This will now add layers up to 4 and then ignore any further requests to draw there. I will be creating another layer for static entities (the aforementioned furniture) in a similar fashion.

As to deciding which set of tiles to draw from, that will be served simply by organizing the tileset appropriately as a 20 columns by Y rows, with each row being a new set (forest, snow, stone, brick, etc) and the 20 being the random variations. We can get as complicated with this as we want, with each row being even a corner, or one wall, with many different varieties; if we don't have 20, we can just repeat a small set until we hit the limit, but having 20 leaves room for future expansion.

I'm pretty pleased with how it turned out. Next, enabling this for monsters. After that, it's time to work on saving/loading levels for traversal to make this an actual multi-level game.

Oh yeah, and I found out Armor doesn't actually exist. All those graphics are placeholders. Oops!