Now that we’ve covered quick and easy asset creation techniques, we can apply this approach to developing a full-fledged 2D environment. For this example, I’ll be creating a simple room that may contain treasure, a mischievous shopkeeper, or just some rocks and a broken barrel.

While this tutorial is generating art in Flash/Animate, general principles will be discussed that can be applied to any 2D scene, regardless of your engine or preferred tool.

To begin, I will create a tileset fitting the theme of the area I’m creating. Grass, cave, stone, city tiles and more are in my arsenal to mix and match. While my own method for tileset creation is intended to keep things simple and quick (I am a one man dev for Axis, mind you) I definitely recommend checking out saint11′s recent .gif tutorial on “Making Tiles”. I find never sticking with just one tileset helps alleviate the simplicity of my approach. Throw in a few tiles that blend together with one another and you’ve got a fluid set of tiles that can fit any form you’re looking for.

1. Using your preferred art tool, create 3 tiles of equal width/height that wraps, or matches up, on the appropriate sides. Flat should wrap left/right, Nook should wrap on two adjacent sides, and so on.

Upon completion you can duplicate individual tile objects to create a series of tubes that define your environment ground/walls/ceiling!

2. If you find yourself looking at repetitive patterns in your tiles, mix it up a bit and create some different variations for each tile. Ensure you don’t draw over your wrapping and you’ll be on your way to victory. Time spent fleshing out variations of each tile will help make your environments look visually appealing. It is worth it to invest this time and effort!

3. Now we can begin defining the depth of our environment’s backdrop. Here, I’ll be using 3 layers of content to add a sense of space to the scene. Drop in some appropriate sky color, some clouds, a brilliant vista with a castle on a hill, you name it. This is your call to make depending on the context of your area, obviously. My example is a cavern on a floating island so clouds are a must.

4. Next we begin defining a foreground silhouette whose high contrast will help some of our clutter and lighting objects really pop against the backdrop. In Flash/Animate I draw an outline of the silhouette and fill it with the Paint Bucket tool. If you haven’t already, check out my previous tutorial to explore my own approach to creating art assets in Flash/Animate. If you haven’t tried it, give it a go, you might be surprised how quick and powerful the tools are!

5. Next we get into clutter, prefabs, and tricks we can use to make the same object look completely different from its twin. By creating a single grass, rock, barrel, cloth or rope asset and manipulating its color, texture, rotation and more we can make it appear completely unique. In Flash/Animate, we can use Tint color effects and layer clutter among the strong silhouette in the background. This not only breaks up that form and ups the interest level, but reuses a single asset without needing to create a variation.

Even a slight rotation or flip can go a long way in making that prefab, or instanced object, unique or efficient. I’ll direct you to a wonderful Gamasutra article by Paul Mader that discusses Modularity and Level Design using this same approach.

6. The finishing touch is all in the lighting. Unity and other engines can recreate this effect with an actual light, but I use a radial gradient ramp with 0% transparency on the outer rim. This creates an omni-like light asset that I can transform, tint and manipulate to blend appropriately in any scene I make.

Utilizing the Tint color effect alongside the Blending mode “Screen” has really great outcomes for this object and really defines Axis Descending’s overall look, I feel. It provides those subtle gradients and brilliant colors. Flash Pro tip: set that object to “Cache as Bitmap” if you don’t want a FPS hit from these. The transparency is not friendly and caused a LOT of headache before I realized how to fix it.

Done! The level layout for this sample wasn’t very interesting, but it hopefully demonstrated how just a couple of layers and lights can really make a room stand out. Even if it just a box! Regardless of your art tool, you can export out individual layers, add some animation to your clutter, or even get some parallax scrolling going on. The world is your oyster.

For more complicated methods of exporting, like for animations and sprite sheets, stay tuned! I’ll be delivering animation tutorials and more in the near future.

In the meantime, please support articles like this by heading over to my Patreon page! Like, follow, pledge. Thanks!

- Mars. Indie dev. Professor. Dad.