Show Posts

This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.

Messages - Arachne
Pages: [1] 2 3 ... 31

General Discussion / Pixel art tile set templates
« on: July 02, 2015, 08:56:02 pm »
Hey, everyone! ;D I posted this little guide at the TIGSource forums a little over a year ago (didn't realize it had been that long :o), and I've been told it's useful, so I'm sharing it here as well.

I thought I'd share some templates for creating pixel art tile sets, since that's something I always use when I make tiles. Also, I'll add some general advice when it comes to constructing sets with a ridiculous tile count. ::)

The tools

If you use a pixel editor such as Pro Motion, Pyxel Edit or GrafX2 to create your tiles, you can simply draw over the templates I've made, and all the identical tiles in the map will be updated as you draw.

You can also easily erase all instances of unneeded tiles. This can save a lot of time and effort, and allows for a more polished result. Otherwise, I would recommend using only the first three or four tile groups I've listed below.

The tiles are 16 by 16 pixels in size and have been drawn with a thick border for readability. This border style is going to add a lot of complexity (mainly sets 5, 8 and 11). In order to limit the tile count, you can try to replace tiles with their closest equivalent. However, this will also increase the amount of transitions between the remaining tiles. Another significant source of complexity is the addition of double slopes (2:1 and 1:2), which will add complexity to a game engine as well.

All the tile set templates are licensed under a Creative Commons license.

Set 1: Base tiles

This is a good starting point. I always start with the center tile to make sure it tiles well with itself before it's connected to the other tiles.

As you can see, the tiles are color coded to make it easier to gauge the amount of work you can save by flipping the tiles. If you don't want something too repetitive, you can still use the flipped tiles as a starting point for further modifications.

Set 2: Concave corners

By adding these, you can achieve a semi-diagonal impression by using stair step patterns. The resulting set is nice for top-down maps where you want transitions between multiple terrain types without having too many tiles in total.

Set 3: Thin structures

These are nice when you want more details in a smaller space, such as single-tile platforms for a platformer game. This rock tile set from Dinothawr uses only sets 1 and 3, but as seen in this screenshot, it's still possible to achieve structures from set 4, for instance, if you make sure all the transitions work with the existing tiles.

Set 4: Thin structures with corners

Many more combinations are possible now. This is a useful set for walls in a top-down roguelike, for instance.

The templates used so far
Tiles so far (29)

Set 5: More concave corners

Now we get to attach thinner structures to the base tiles. These are used in this ice tile set. Once you start adding this type of tiles, it'll no longer be possible to use the automapping feature in Tiled due to the complexity of the rules needed.

Set 6: Simple slopes

The simplest kind of slopes. These tiles are nice for making your levels look less blocky, although there's not much flexibility with just these four tiles.

Set 7: Simple slopes with added borders

I don't really find the single-block tiles that useful at this size, but they could be handy for a game where the tiles are larger relative to the resolution.

Set 8: Simple slopes with concave corners

How much complexity you'll add when you introduce these tiles will vary. You can try to use the perpendicular, concave corner tiles found in the previous sets. Otherwise, add diagonal variants as needed. Here's the finished rock tile set from the animated example further up, as an example of a sloped set.

The templates used so far
Tiles so far (89)

Set 9: Double slopes

Notice how this set consists of four times as many tiles as the simple slope set. This does not bode well. D:

Set 10: Double slopes with added borders

Even though this adds a lot of tiles, the amount of transitions to other tiles is fairly limited. You get some very thin platforms this way, which may not fit if you want a chunkier style.

Set 11: Double slopes with concave corners

Look at all this stuff! :wah: In this case, it'll be more difficult to reuse the corners from previously, so a lot more types are needed. With these tiles added, you can start making tile sets such as this complex rock tile set. I've made sure to reuse tiles as much as possible, so I'm not using nearly that many different tiles. Some of the tile count is from duplicate tiles. In practice, you'll want multiple versions of certain tile types for variation, so that inflates the tile count.

Tiles from sets 3 and 4 are used in the corresponding leaf set, but not for the rocks (except for the solitary block). Depending on your style, you can pick and choose between the types of tiles you add. There's no single solution there.

The full set of templates
All the tiles (197)

Note that this is not an exhaustive collection of tiles. You may still find some additional transitions I haven't covered. You can even add triple slopes if you won't mind the resulting tile count.

You're unlikely to need every single tile from the more complex sets, so don't worry about having to make all the tiles you've selected right away. It's better to add them on a need-to-have basis.

The example tile sets can be found here.

Tile sheets with various selections of tiles:

First three sets
First four sets
First two sets and slopes (1:1)
First four sets and slopes (1:1)
First two sets and both slope types

Let me know if there's anything I can add or anything else I can do to make this more useful. :)

Pixel Art / Re: [WIP] Forest assets and palettes
« on: May 06, 2015, 10:20:45 pm »
Hey, all. ;D I've started working on this again after a break. I'm trying to go for something slightly less ambitious, so that might make it easier to follow up on feedback more regularly.

The pines look slightly flat and washed out, maybe try to add/redistribute some highlighting to the branches closest to the viewer for more sense of volume?

I'm barely using the highlight color at all in those trees, so I'll try to bring out the center branches a bit more.

I think this gets to the heart of this issue in general, all of these assets are beautiful, but in a holistic sense are kind of of fighting for my attention. At least in the immediate background, further back then that looks very pleasant, but your inner most background is a bit distracting in terms of all of it's sharp detail & bright highlights . This may be less of an issue if you plan not to have character or object assets over the top, but it's something to consider it you wish to take this further.

Yeah, the over-detailing became obvious when I started adding sprites to the mix, something I should have done much sooner. I suppose the front layer assets could still be useful in a title screen or something similar where they don't have to compete with sprites for attention.

I made a quick and dirty edit to show some simple ways to tone down the details..
It's really hard though, because details look great when you look at them individually and instinctively you want to keep them.

But some more drastic measures might be required as it's still amazingly sharp in a lot of places.
Maybe tweaking the palette and saturation of the darker shades might help take some edge off?

That looks much better, especially with the more muted middle layer. I also think the darker rock tiles look nicer, but it was tricky getting the darker style to work when I started working on additional tiles.

maybe you could make the grass and leaves different tones? (like in autumn) That might help to break up visuals.

The grass and leaf ramps are separate now, which should help make the separation between platform and scenery more obvious.

Or you may just want to put the trees into the parallax layer, and have ledges as the platform layer.

I like this approach, mainly because it's simple, but I think creating a separate asset set for the foreground greenery will make it easier to reduce clutter.

will u be adding slopes and stuff?

I'm going to add 1:1 slopes next, yeah.

All right. The new tiles are 32 x 32 pixels, so one third of the size of the old ones. The main disadvantage is that they're much more repetitive and uniform, so I'll have to add more tiles of the same type for variation. I want to try to reintroduce some of those larger rock planes somehow, while keeping the tile count limited. That's going to be tricky, but editing the tiles will be a lot easier now.

As much as I liked the larger tiles, they were extremely tedious to create and iterate over. The initial set was going to be those three original tiles combined with three more. I darkened the bottom tiles by limiting myself to the darkest colors, but I found it difficult to achieve the same level of detail that way. They also were a little too dark compared to the rest of the assets, mainly because the tile size also resulted in really large platforms.

It also become much clearer just how simple the old grass was. I tried to squeeze in another grass color in the old tiles, so that I could swap the green ramp in the trees with the grass, but it turned out easier to start from scratch, as the platform parts of the old tiles weren't uniform enough and would have to be changed anyway.

Here's a mockup using an older version of the new tiles. I tried to reduce the contrast in the middle layer by darkening the highlights and brightening the shadows and also pushed the shadows more towards blue for stronger atmospheric perspective.

I've added some floating platforms, which means the assets are distributed more in the vertical direction, unlike in the old mockups. It looks a bit more game-like this way, I guess, but there's also no clear horizon anymore. Adding slopes might make it easier to achieve a more horizontal geography.

Here I've tried to reduce the clutter in the rocks a bit. I've been struggling with elimination of the grid while at the same time keeping some variation in the tiles.

Here's the current iteration of the player sprite. I've tried to make her dress look mushroom-like, something that resembles a mushroom cap in texture. I'm also trying to limit the color ramps for sprites more than for the tiles (which mainly use 4-color ramps) to make sprites cleaner and easier to animate.

What I'd like to do next is add a few more sprite elements and then try to add some more greenery to the front layer, but in a way that doesn't compete with the platform parts. Maybe greenery as platforms would work?

Pixel Art / [WIP] Forest assets and palettes
« on: February 22, 2015, 05:16:00 pm »
Hey, everyone! ;D

Here's a set of assets I've been working on for a while. I don't have any specific plans for it, so at the moment it's merely an experiment which will hopefully turn into something useful.

I wanted to make a set of non-tiling assets for a change. I ended up with tiles for the ground, but I made them much larger than my usual tiles to keep the tile count low and reduce the number of transitions. Drawing larger assets means more work, so I'm trying to make the most of them through palette swapping and layering. There are three layers at the moment. Eventually, I'd like to add another layer in the back (mountains or something) and another one in front (some greenery to break up the monotony of the rocks).

Middle layer

Back layer
The two layers in the back simply use color swapped versions of the main asset set.

Progress animations: medium broadleaf, small broadleaf, large broadleaf large spruce, rock tile.

I chose a simple workflow for the assets. The color count is low, and I've tried to keep the different ramps clearly separated in the assets so that I have more freedom when palette swapping. The later assets are a bit more polished.

I've made a set of six different palettes for the set so far. The palettes are each divided into six main ramps: leaf ramp, with two alternative ramps for color variation; bark ramp; apples and toadstools; small mushrooms and toadstool stalks; grass, which I've made a subset of the default leaf ramp; and rocks. In addition, there will be a sky ramp, but for now it's only a single color.

The front layer uses the most colors. In the middle layer, some of the palette entries have the same color in order to reduce contrast. The back layer uses only two colors, which may look out of place with a more detailed sky.

The snow palette differs a bit from the other palettes as I have some of the palette entries in the front layer also share a color in an attempt to hide the grass structure.

This is the initial palette. Relatively saturated, warm and sunny.

With rain added

Here I've used less saturation overall. Foggy atmosphere means less contrast, but I'm also trying to give the impression of wet, reflective surfaces by brightening the highlights. I think the middle layer works best, since I feel that the leaf highlights reflect the sky color more closely there than in the front layer.

The original assets were drawn against a neutral background color brighter than the assets themselves. Making the assets work with a darker background is tricky.

Here I added a separate ramp for the fir trees in the middle layer. I also changed the rock color to make it differ from the grass and leaves.

This is mostly just a desaturated fall palette. With less saturation in the front layer, it doesn't stand out from the middle layer as much anymore.

This was an experiment that worked better than I expected.

Initially, I was more focused on the creation of the assets themselves and how to create different moods with palette swapping. The set as it is right now doesn't feel as functional as it should. For instance, using the dark end of the leaf greens for the grass seems counterproductive in retrospect, as the grass should stand out as a collision element in a game. Also, the width of the grassy parts is inconsistent. In other words, I think it's time these assets got an overhaul, so any suggestions are welcome, both for the palettes and the assets themselves. ;D

I'm studying for exams at the moment, so I probably won't be able to give in-depth feedback such as edits, but feel free to PM me if you want some quick pointers. :) I also hang out in the IRC channel every now and then.

Pixel Art Feature Chest / Re: Forest tileset...
« on: November 28, 2014, 03:11:46 pm »
I really like where you're going with this. ;D

As I see it, the main issue with the saturation is that the darker shades are too saturated. I think the brighter shades are fine by themselves, but that they look washed out in comparison. In general, less light means less saturation. If you reduce the saturation of the darker shades, the brighter colors will also stand out a bit more.

Also, the dirt looks like a separate element, as it differs a lot from the grass both in hue and brightness. If you bring the dirt and grass shades closer together in hue, especially where the darker dirt shades meet the darker grass shades,  they won't clash as much.

I agree that a more subtle background would be more suited for a game, and I liked EvilEye's desaturated shift towards blue, so I applied it to the darker end of the green ramp. Also pushed the darker dirt shades a bit towards green.

Challenges & Activities / Re: The Daily Sketch
« on: August 24, 2014, 03:11:55 pm »
Trees! ;D

Some inspiring low-color work, there. :0' I really like the green/brown/gray combination.

Pixel Art Feature Chest / Re: Sotra landscape
« on: June 06, 2014, 10:28:29 am »
I notice your rocks are very angular. Something you should consider, if you want something more uniquely Norwegian, is to include a more obviously glacier-molded landscape. The glaciers not only formed the fjords, but also made the bedrock very smooth. Long grooves made by rocks being dragged along by the glaciers is another characteristic. They're parallel, as they indicate the direction of the flow of the glacier. Of course, chunks of rock will be broken off in places and give you more angular sections, so you can still have some variation. If you look for these things in photos, I'm sure you'll see what I'm talking about. ;D

Dinothawr on Google Play
Dinothawr on GitHub
A simple cross-platform puzzle game with 50 levels. I did graphics and a bunch of levels. Haven't heard of anyone solving the final level so far. >:D

It's there, but empty at the moment. Not that I would use it for actual secrets, but it might be good for some reverse psychology/Streisand effect based marketing, I guess? :P

Pixel Art Feature Chest / Re: INFilstrUcTURE (gameboy, scifi)
« on: January 20, 2014, 06:13:08 pm »
For the most part, the tiles have a nice and clean feel to them. Some of the wall tiles seem inconsistently lit, though, with the light source coming from various directions without any local light sources to explain the change.

I second the part about the outlines making the sprites look flat. The bright outline dominates the sprite, making the volumes of the shapes within less apparent. I think a better approach is to get rid of the outline and use the brightest shade to increase contrast. Whether you should brighten the darkest shade as well depends on the dominant background color. Most importantly, you'll have more room for details. One pixel is a lot at that size.

As shown here, bright and dark together stands out against both the dark tiles and the brighter ones. The brightest version looks a bit more flat, but stands out more against the darker tiles. I also found the feet hard to read, so I made them larger.

I also got rid of the lighter shading on the floor tiles in order to further emphasize the sprites. By keeping the floor as simple as possible, it's easier to spot the sprites. If you feel the floor looks boring, I think it would be better to add some more wall tiles or similar variation to break up the monotony that way. Otherwise, I would use the darkest shade for variation instead. I also tried to get rid of single-pixel noise, leaving just enough pixels to give the impression of rivets.

What do the smaller sprites represent? The leftmost one is a little dark in my edit, so I also added one which is brighter along the edges to show its full size better. I think a better alternative is the rightmost version using the two brightest shades.

For the wall tiles, I made the highlights along the edges thinner to match the style of the other tiles.

Pages: [1] 2 3 ... 31