Bitmapfill based tile scrolling

This post shows a more elaborate prototype of a bitmap fill based tile scrolling approach in ActionScript 3 using Tiled and the parser from Pixelpracht to parse the maps. The graphics are from the original Gods game on this page.

Some features demoed:

  • bitmapfill based fluid scrolling without a backing store (saves a lot of time)
  • parallax scrolling with a single tile layer (so the background parallax is only rendered at the spots it has to show)
  • fluid performance on fullscreen / iOs
  • the fact that it’s bitmap fills makes it easy to transform the mesh being painted, meaning that environment transformations (eg blastwaves with rolling ground stones) are fairly easy to implement without the CPU overhead that a displacementmap for example would incur.
  • nice character effects such as flames/ices for powerups

Read more

Hexagon tile grids

A small demo of how you interact with a tilebased grid. Documented source code included and the math behind it is fairly basic. Basically it builds a grid from code, rotates for 5 seconds every 5 seconds and highlights the tile your mouse is over. I couldn’t find a good example online so here it is.

Read more

BSP Dungeon generation

Just a short post to demo a map generation mechanism. Full source included, but no absolutely no support. Feel free to play around with it. The dungeon generator is very crude, I put it together in a couple of hours yesterday, and it has no concept of walls, walkable tiles etc, just pointers to graphic tiles.

Basically what it does is:

  • takes a large rectangle
  • randomly divide it horizontally / vertically
  • keep doing this until each room left is considered small enough
  • convert each room (a rectangle) into a 1 d array containing all rooms, rooms are converted by entering codes for the room into the array, such as TL (top left corner), T (top row), TR (top right etc).
  • now that all the rooms are in the array we process each room, by giving it a door in a random location connecting it to another room (on some occassions we have a secret/magic unconnected room)
  • finally the tile independent map is converted to a specific tileset. We put one together using the LostGarden indoor tileset again, which we manipulated into several large building blocks to make generating rooms much easier 😉

Basically that is all there is to it, on my pc it generates about 20000+ rooms in a second, on the iPad it takes a bit longer, but still manages a nice 50-60 fps without Starling (then again this is still very simple and basic without any interactivity).

Read more

Flag effect in ActionScript 3

What better image to use for a flag effect than an image by Derek Riggs (which you already have on your living room wall right? Not?)

Click on the flag !


Anyway, in this example I've experimented with using perlin noise as a displacementmap, and overlaying the same displacement map for a lighting effect. The lighting effect was tweaked using a colortransform, and the falloff on the flag (the right side is much more affected by the wind than the left side) was realized by mixing the perlinnoise map with a gradient.Here is the complete example with sourcecode included: Flag Effect (3657). Note that Example1.as to Example4.as should be run from the flashdevelop project nummero uno, while this example (example5) should be run from project nummero duo. Example 1 - 4 just experiment with the basics, and the last example puts it all together with documentation.

Download sources: Flag Effect (3657)

Wrapping BitmapData in Actionscript 3

Sometimes you overlook the easiest solutions. I had implemented a wrapping bitmap in actionscript 2, by some complex copyPixels code, which would cut 1 to 4 pieces from the original image and put them together again, providing you with a bitmap that wraps.

Then I realized that there is a much easier solution, with more functionality as well (not only wrapping but tiling too). But surprised however that it performed much better too. Surprised because I would have thought that 4 copyPixel operations would have been faster than using the drawing API combined with beginBitmapFill.

I’ve wrapped (no pun intended) the idea into two utility classes, the first WrappingBitmap is a simple sprite which takes a bitmapdata as source and creates a tiling wrapping display object that you can scroll.
The second is a WrappingBitmapData class which subclasses BitmapData and overrides the scroll method to wrap.

Read more

Visual Reflections in ActionScript 3

I migrated the actionscript 2 version of my reflection class some time ago, but hadn’t gotten to posting it yet. I managed to whip up some examples of this new as 3 version. It’s not as feature rich as the as 2 version due to some changes between as 2 and as 3, but just as easy to use.

Some features:

  • simple setup, just do addChild (new Reflection (myContent)); and you are done
  • respects masks, scaling, etc and automatically adjusts to the correct position
  • allows you to grab (live) bitmap data of the reflection for those times you only need a bitmap
  • can be updated manually or automatically
  • simple samples included

Download the sources and examples here: As3 Reflection (585)

NOTE: the examples are FlashDevelop projects. The security is set to network, so they won't run locally unless you compile and run them once through flashdevelop (FlashDevelop will update your security settings while running).