Aftertile is game about a cute little ghost traveling a huge maze and using his ghastly powers to help other ghosts.

Post tutorial Report RSS Pixel Art Tiles

Another tutorial-devlog! On this episode, I give an insider's view of my conceptualization process, from paper to depression to mockup to asset creation.

Posted by on - Basic Design/Concepts

Hi everyone! I'm LOSTⒶLLOY's artist Maruki, and this is Aftertile's devlog/tutorial.

image


Name: Aftertile

Genre: floatformer

Team: @MarukiHurakami (me, art and art), @sugoidev (code and sounds) and Sounds for Pixels (songs)

Platform: pc, mac, linux



The mockup for the first stages have been one of the most difficult and fun things I’ve done (or rather, doing, because there are a few elements missing still). As said before, this is the first time I’m doing anything in pixel art, so more than half of my time I’m spending studying (and whenever anything nice comes out of it, I try to make it available as public domain). But, most of the time, work is pretty frustrating, as the pixels don’t seem to obey you and insist in showing a will of their own. This post is more a documentation piece that an actual log, but as I describe a mental process, it can be very useful to other beginners.

Aftertile happens inside a comet, the Ever-Floating Comet. It’s an eternal rock formation that came from space and stopped mid-air. It is populated by the Comet Mikos, who are responsible for the internal modifications of the structure and for the general maintenance of the place (more on that on a later post).

Comet Concept


Given that, the most important type of tile for Aftertile are rock tiles. Ghosty won’t be able to penetrate those tiles, so they have to give off the impression that they are impenetrable without looking harmful (if Ghosty touches them, nothing happens). I went through many rock sketches to get close to what I wanted:

rocks sketches


Those are some of the sketches I’ve done before I actually opened up Aseprite. I went from the closest to the reference (I was using comet surface pictures, they have strong shadows) to the farthest, already mixing what I had in mind to what I liked in the games that inspire me (in this case, Castlevania and Metroid). Then I chose the rocks that I thought look better and finally opened Aseprite.

chosen rocks


These are the ones I chose to use as a reference. I also kept a mental list of the characteristics of those rocks: round, more or less smooth, with sediment and cracks.

As it’s illustrated in the concept, the Comet main color is purple, so all rocks would be purple or akin to purple. From my 176 colors palette, I selected the ones that would better fit, created another one for the deep dark purple solid few, and selected an extra color for the stroke. The solid dark purple will be used as a filling for all areas that are not rocks, to simulate depth, as I chose the light to be coming from the outside of the rocks.

As for the stroke, I chose a color that won’t be used in any of the stages, in this case a cyan. I chose to include this stroke in all tiles that are not background or props, simply to separate and add more emphasis to them.

screenshot 2016 07 17 14 07 55


rock00 1


Direction of light


The full process step by step:

rock00


I'm working with two tile sizes, but for this one I started off with a 32x32. I used the darkest color for the inner part and drew a solid rock;

rock01


to which I added a solid shadow;

rock02rock03


from that shadow, I chose other two colors. One of them for light shadow and the other for the medium shadow, which I applied to “smoothen” the transition;

rock04


I added a lighter color where would be the lightest part;

rock05


then selected the darkest shadow to include a crack;

rock06


and with the lightest color I lightened up one of the borders of the crack. I also used these two colors to add more details;

rock07


I chose a very light lavender for the highlight;

rock08


using the shadow colors, I added sediment on both sides, also a bit of sand. I used the lighter colors 3 times too to simulate tiny shards;

rock09


and finally drew the stroke.

I also made tiles for transition (comet rock other types of tiles) using the shadow colors.

screenshot 2016 07 17 14 07 42


I followed this process for all rock tiles in level 01 and 02, and this is how both will look like:

Stage00 01Mockup2


Stage02 Mockup


While both levels have comet rocks (because all levels are inside the comet, so those tiles will be common for all levels), levels also have tiles that were designed according to the level’s theme. For example, the first level’s theme is stone, sand, soil, thus the brown stone plaques. The second one is located at the bottom of a waterfall, so its theme is water, thus the blue rock walls.

From the mockups I’ll extract the most suitable rocks to build tilesets, and then the level per se. We were going to used Tiled Map Editor, but after some extensive research, pondering and head beating we decided to use SuperTileMap Editor for Unity.

Next piece of new of tutorial will probably be about the main character!

Any feedback is welcome! Thanks for reading!

Comments
Galope
Galope

Nice tutorial, I loved the game art, its clear and harmonious. A suggestion would be to add how you created the tile blocks and how you made them repeat perfectly side by side.

Thanks for the tutorial.

Reply Good karma Bad karma+1 vote
Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.

Follow Report Profile
Icon
Aftertile
Platforms
Windows, Mac, Linux
Developer
LOSTⒶLLOY
Engine
Unity
Contact
Send Message
Homepage
Lostalloy.com
Release date
Game watch
Follow
Tutorial
Browse
Tutorials
Report
Report
Share
Related Games
Aftertile
Aftertile Platformer
Related Engines
Unity
Unity Commercial
Related Groups
LOSTⒶLLOY
LOSTⒶLLOY Developer
Unity Games
Unity Games Hobbies & Interests with 1,795 members