Learning To Design With Baha : Let’s Talk About Tiles (Part1)

Hi I’m Baha, a slowly developing artist…?  wait my field’s music.  Hi I’m Baha, a slowly developing musician…? hold on does it count if I can’t play an instrument?  Hi I’m Baha, a slowly developing general designer.  I want to make a kickass game one day and a guy needs his assets.

The title might be confusing so just to be clear, this is about me learning to design stuff not teach it. I’d like to write about sound and coding adventures too, so it’ll be 2D art one day.  Learning Blender another, whatever it takes to make something really cool and I think would be fun to write an article about.

Today I want to talk about tiles.  For 2D design they help out a lot.  I guess you can also say my style tends to be granular.  I love the idea of taking the smallest elements, maybe a collection of pixels or musical fragment, duplicating it a bunch of times in slightly different positions until it transforms into something that seems both different and quite large.

My first idea came with a little warm up challenge in this GIMP course I’m going through : using only the pencil tool, black and white and a 32 x 32 grid, make a random pattern.

This is what I drew (enlarged for visibility) :

Nonsymmetricpattern.png

I thought it looked alright while doing it, but intentionally made it non-symmetrical.  If you look at them as a pair of triangles, the upper one is larger than the one below.  There’s a checker pattern on one side, lines on another, a tiny little triangle on the right and random diagonal streak.  I also sort of has a border which although I wasn’t thinking tiles at the time, looked decent enough.  I started thinking : is it even possible to make something resembling a tile like this?

After a few duplicates and rotations, I ended up with something resembling a tile :

patternexpanded.png

Enlarged :

patterntileLG.png

Tiled like this it looks to me like it would be great as a representation of maybe computer components or an overhead city outline.  Getting that to work though would probably require more precise manipulation and additional tiles from slightly different patterns.  For now how does it look on a 10 x 10 grid?

Background.png

Whoa my eyes!  It’s starting to look like some kind of optical illusion.. but let’s run with it (you’ll see me run with the stupidest ideas all the time btw).  Let’s pretend these are flat floor tiles and we’re making a scene that almost looks like one of the dungeons in Startropics.

Maybe this could make a good floor for something intense like a boss encounter.  Character and monster design/animation are things I haven’t worked on yet, but I know how to play with layers, so let’s see if we can make a mockup combat scene.  First I needed a character, so I quickly drew a 32 x 64 sized person as the main character :

Layer.png

Yeah it’s horrible, let’s just pretend it’s a poorly drawn pixel art Dean Ambrose

 

DeanAmbrose.jpg

I totally see the resemblance.  Anyway I got my guy.  I had also just finished lessons in making a small palette, mine a collection of blues I really wanted to use that palette, so when the next lesson said I’ll be making little pictures of fire, another thing I suck at drawing, I decided to stick with my blue palette and run with it.  One of those fires I decided would make an alright decoration, maybe obstacle so I pasted a few copies of it around the top.  The next issue was the matter of ‘what am I fighting?’.  For consistency I stuck with the same blue palette and put together some kind of tentacle blob.  I only had < an hour don’t judge.  When it all came together it looked like this :

MockupScene1.png

 

Some of it works, some of it doesn’t.  Part of the fire sprite is supposed to look like little embers coming out of the flame, but it’s not working with this floor.  The floor also needs to be reduced, maybe 10 x 5 tiles might look better, and have the rest filled with a different tile arrangement.  But it’s just practice.  For the first draft of this article there was one more experiment I wanted to try, but let’s dial it back to the very start where I had only a square non-symmetrical pattern :

Nonsymmetricpattern.png

 

And this time let’s pretend we’re making a side scrolling game.  I’ll just paint what looks like a black background with thin clouds a full moon and some kind of mountain (clearly I need the practice), while our pattern is now a ground cross-section :

SecondMockup.png

 

Everything else sucks, but the now the pattern functions as a sort of ground cross-section.

For now I’m out of time, but I’m not done playing with tiles (or even floors) yet.  Next time I’ll make a second, similar pattern, tile it and try to combine the two into more interesting floor designs.  I also want to try something entirely monochrome.

See you next time!

Comment Here. DO IT!