Pixelation

Critique => Pixel Art => Topic started by: araknidkid on November 27, 2006, 07:24:18 pm

Title: Help with tiles.
Post by: araknidkid on November 27, 2006, 07:24:18 pm
Alright, here's my problem. I'll create a tile like this one: (http://img.photobucket.com/albums/v448/araknid_kid/tileexample.gif)

Looks fine as a single tile, right? (for the sake of this topic, let's say it looks fine. :P )

But when I line them up 2x2, it looks bad: (http://img.photobucket.com/albums/v448/araknid_kid/doubledtileexample.gif)

So, I guess I'm asking for help with making tiles transition into each other without being able to detect a lot of repetition.

Also, I need help with creating depth in tiles. Making the rocks look like they're kinda rising out of the ground...I really want to get better, so any and every peice of help is greatly appreciated. Feel free to edit my examples.
Title: Re: Help with tiles.
Post by: ter-o on November 27, 2006, 07:35:53 pm
Buy ProMotion and use its Auto Tile Completion feature. That's the answer for all the tiling problems.
Title: Re: Help with tiles.
Post by: pkmays on November 27, 2006, 08:41:27 pm
Buy ProMotion and use its Auto Tile Completion feature. That's the answer for all the tiling problems.

Seconded, but only if you are really serious about pixel art and have $80 to burn. Pro Motion Lite ($30) is missing tile features, so you'll have to go all out. There just happens to be a new video demonstrating some of the tiling features here:

http://www.wayofthepixel.net/pixelation/index.php?topic=2144.msg31503#msg31503

The other option is to use the original gangster method, which works in any program.

(http://img59.imageshack.us/img59/7452/tiledde3.gif)

(http://img234.imageshack.us/img234/947/tiledbeforeafteryw7.gif)
1. Image to be tiled.
2. Image is split in half, left side moved to right, right side moved to left.
3. Cleaning up lines in center. Stay away from the left and right edges of the image, they already tile correctly.
4. Split in half again, top and bottom swapped.
5. Clean up in center. Don't touch top or bottom edges.
6. Left and right swapped again, ditto with top and bottom. Back to original tile, but now the edges will tile.

Next image shows old tile and new tileable tile.


Final results. This was a quick rush. More effort in means better results out.
(http://img234.imageshack.us/img234/5097/tiledfinalod4.gif)

This technique works with any image, in any program, whether it be pixel art, or something more high res like a game texture. If the tile only needs to repeat horizontally or vertically, only swap in the direction needed.

Hope that helped.
Title: Re: Help with tiles.
Post by: araknidkid on November 28, 2006, 09:47:11 pm
Any more help is greatly appreciated!
Title: Re: Help with tiles.
Post by: Larwick on November 28, 2006, 11:22:30 pm
Any more help is greatly appreciated!

Dude that's harsh, i think what pkmays wrote is pretty great help, and perhaps all that you need. It's actually helped me too  :y:
Title: Re: Help with tiles.
Post by: araknidkid on November 28, 2006, 11:42:47 pm
This is only one reply though, and from what I've seen on these forums I'm sure there are other methods.
Title: Re: Help with tiles.
Post by: Helm on November 28, 2006, 11:44:26 pm
There might be other replies. How about putting what you've learned to good use while you wait?
Title: Re: Help with tiles.
Post by: Kren on November 29, 2006, 01:09:51 am
This is only one reply though, and from what I've seen on these forums I'm sure there are other methods.
If you are going to ask C+C and not appreciate them why is the point of asking >:( you should atleast try it out and show your result..
Title: Re: Help with tiles.
Post by: araknidkid on November 29, 2006, 01:54:41 am
Here, I did the gangster method but it still looks horribly tiled.
I know there is a better way to do it because I see awesome looking tilesets out there. And I never I said I didn't appreciate pkmays method, I'm just asking for other tips.

Heres the result:

(http://img.photobucket.com/albums/v448/araknid_kid/example2.gif)
Title: Re: Help with tiles.
Post by: sharprm on November 29, 2006, 02:18:46 am
I think you'll find thats the only way to do tiles. Thats how I do all my tiles pretty much. My method is shown on the right. You
first make the tile, then paste it four times like shown (only without gaps), then make sure it lines up. Same as pkmays method but
maybe quicker.

(http://i39.photobucket.com/albums/e199/sharprm/rock.gif)

Its probably a lack of practice/effort thats leading to dodgy tiles, not the method.
Title: Re: Help with tiles.
Post by: Fly on November 29, 2006, 02:36:00 am
Hey there..My main job right now is making tiles for games.

What you should do is this... (first of all use Sharprm's method because thats what I use)

Also what you want to do is probobly go ahead and start with a bright pink or bright what ever color square which ever size tile you want, 32x32, 25x25....then you take the tiles and use a black pencil tool.

Just worry about the shape first. It seems like you're worrying about the texture from the beginning. After you get your first lines in and clean them up thats when you work on the texture.

Try to stay away from making a pattern on the tile if its rocks... Keep it random.

OH AND ONE BIG THING..... This really helped me when I first started...
Say you are making a 25x25 pixel tile.   Draw the shape of some rocks you want in about 50x50 size of pixels.. (do not copy paste 4 of the tiles) Just draw one big one... After you draw the big one... Find an area inside the 50x50 of a 25x25 piece that looks pretty unpaternized. This way your edges wont look so straight.

You're just new and making the edges straight because you arnt use to it yet... So try that trick. If you dont get what im saying ill upload a picture.. I'm just in a rush. reply if u need an illistrated explination.

Hope that helps man..good luck tiling
Title: Re: Help with tiles.
Post by: araknidkid on November 29, 2006, 08:19:39 pm
thanks for the help, though now I need assistance with another tiling topic

texturing!

You know, making grass look like grass, dirt look like dirt (that one is really hard for me) and especially water.
Title: Re: Help with tiles.
Post by: baccaman21 on November 29, 2006, 09:25:59 pm
Hey there..My main job right now is making tiles for games.

What you should do is this... (first of all use Sharprm's method because thats what I use)

Also what you want to do is probobly go ahead and start with a bright pink or bright what ever color square which ever size tile you want, 32x32, 25x25...then you take the tiles and use a black pencil tool.

Just worry about the shape first. It seems like you're worrying about the texture from the beginning. After you get your first lines in and clean them up thats when you work on the texture.

Try to stay away from making a pattern on the tile if its rocks... Keep it random.

OH AND ONE BIG THING..... This really helped me when I first started...
Say you are making a 25x25 pixel tile.   Draw the shape of some rocks you want in about 50x50 size of pixels.. (do not copy paste 4 of the tiles) Just draw one big one... After you draw the big one... Find an area inside the 50x50 of a 25x25 piece that looks pretty unpaternized. This way your edges wont look so straight.

You're just new and making the edges straight because you arnt use to it yet... So try that trick. If you dont get what im saying ill upload a picture.. I'm just in a rush. reply if u need an illistrated explination.

Hope that helps man..good luck tiling

25x25??? what kind of crazy ass pixel dimension is that???? please explain... 20years+ making video games and as far as I can remember pretty much everything I've ever done has fallen into nice clean binary numbers... divisible by 8? you know, 8's 16's 32's 64's 128's - where the hell does 25? fit into that?

as far as tessalation is concerned - (back OT) it's pretty straightforward... the other guys have explained it well enough so I won't bother going over it again...

as far as texturing is concerned... don't fall into the trap of creating 1 tesellating tile and repeating it ad infinitum... over the entire screen and then falling for the next trap which usually follows which is creating a bunch of other tessalating block variants in an attempt to 'break up the pattern' - it never works... unless those blocks are pretty big in the first place and cover the majority of the screen area... OR the pattern you create is nice and subtle... instead... look here for nice example of subtle tiles... (http://www.wayofthepixel.net/pixelation/index.php?topic=2562.0) 
Title: Re: Help with tiles.
Post by: Fly on November 30, 2006, 03:32:04 am
Quote
25x25??? what kind of crazy ass pixel dimension is that???? please explain... 20years+ making video games and as far as I can remember pretty much everything I've ever done has fallen into nice clean binary numbers... divisible by 8? you know, 8's 16's 32's 64's 128's - where the hell does 25? fit into that?

as far as tessalation is concerned - (back OT) it's pretty straightforward... the other guys have explained it well enough so I won't bother going over it again...

as far as texturing is concerned... don't fall into the trap of creating 1 tesellating tile and repeating it ad infinitum... over the entire screen and then falling for the next trap which usually follows which is creating a bunch of other tessalating block variants in an attempt to 'break up the pattern' - it never works... unless those blocks are pretty big in the first place and cover the majority of the screen area... OR the pattern you create is nice and subtle... instead... look here for nice example of subtle tiles... (http://www.wayofthepixel.net/pixelation/index.php?topic=2562.0) 


first of all im not an idiot.. I know everything is divisible by 8.. I personally would never do it 25x25 thats fucking retarded..


I worked on a game a few months ago where I did tiles 25x25. The program could stretch the tiles.. I could make a tile that was 256x256, and then a tile that was 2x2 and we could use them both... I could make 57x23 size tile..and it would stretch...

oh and btw, in programing...25x25 is a fucking power of 2... 5*5 (5^2) = 25 ...so you can use 25.

25x25 you are right is retarded...and there is no reason for it. But the main thing is, this was an example... im pretty sure its easy for the human mind to understand in numbers of 5's... It would be easier to explain something with 5, 10, 15, 20, 25, ..... Instead of 8's.

so please..dont bash people. I was trying to help someone ..I didnt tell him to fix his tiles by making them 25x25.

understand now?
Title: Re: Help with tiles.
Post by: TehSilentOne on November 30, 2006, 03:50:32 am
mm...

2^5 = 2 to the 5th power (power of 5)..
2^2 = 2 to the 2nd power (power of 2)

it doesn't matter what the person thinks in, as the computer thinks in binary.
Title: Re: Help with tiles.
Post by: robalan on November 30, 2006, 04:12:52 am
Sorry to continue a line of conversation that didn't need to start, but 25 is not a power of 2.  It's a square, sure, but not a power of 2.  Powers of 2 are 2^n.  Squares are n^2.  2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, etc. are powers of 2.  You're also right that the human mind understands things in fives well.  That's why the roman numeral system is based on fives.  Of course, we use tens, but whatever.

@TehSilentOne: I'm not sure what you meant to type, but what you typed was not correct.  Both of those are powers of 2.

Enough about math and common tile sizes.  Lets see some new tile attempts from araknidkid and move on.
Title: Re: Help with tiles.
Post by: EyeCraft on November 30, 2006, 06:03:44 am
Reducing the visibility of the grid in tiles...wow, what is the technique for that...I don't exactly know what I do to minimise it happening in the tiles I make, it kind of just came with practice. You basically don't want any details on the tile that stand out any more than anything else on the tile (this is for ground tiles and the like), and also, you want an even distribution of detail, highlight and shadow, so no one area of the tile is much darker than any other part. They all need to blend and be faceless, pretty much, so when you tile them over and over no detail which stands out stands out 1000 times or whatever.
Title: Re: Help with tiles.
Post by: baccaman21 on November 30, 2006, 09:35:57 am
first of all im not an idiot.. I know everything is divisible by 8.. I personally would never do it 25x25 thats fucking retarded..


I worked on a game a few months ago where I did tiles 25x25. The program could stretch the tiles.. I could make a tile that was 256x256, and then a tile that was 2x2 and we could use them both... I could make 57x23 size tile..and it would stretch...

oh and btw, in programing...25x25 is a fucking power of 2... 5*5 (5^2) = 25 ...so you can use 25.

25x25 you are right is retarded...and there is no reason for it. But the main thing is, this was an example... im pretty sure its easy for the human mind to understand in numbers of 5's... It would be easier to explain something with 5, 10, 15, 20, 25, ..... Instead of 8's.

so please..dont bash people. I was trying to help someone ..I didnt tell him to fix his tiles by making them 25x25.

understand now?

 :o :-[

Hmmm...  :'(  ???  :huh: :-[  ::)

right... fly... heads up buddy... 

1. I'm 36 - I have no reason to flame anyone or bash anyone... I'm past all that shit...  So, please don't feel I was bashing you - I wasn't - seriously, I wasn't... my tone was meant to be... WTF?!? as in HUH!? as in OMG!? as in "Well I never... that's a strange dimension" (in a stiff upper lip kind of british ww2 film kind of way) - my tone is always meant to be jovial... kind of "hey there chap...", Slap on the back... matey punch...

2. I never said anything about you being an idiot... you've interpreted that I'm afraid... :S

3. I was just curious that's all as I've never come across such a bizarre pixel dimension. forgive me for making you feel that had to come back an flame me in such a fashion... reading it back I can see how tone may have been misconstrued so I forgive you for your use of language...

4. Yeah I dig what you're saying about you using that number as an example... (that's all you had to say tbh... :))

I can only assume that the game you were working on - a few months ago - (that stretched the textures) probably did so prior to compiling to make sure that they conformed to the dimensions I'm referring to... sounds curious either way - :S

(I think I should put in my sig that I always speak in a kind of "Jovial" manner... It makes me sad when people misinterpret my posts as me bashing them... I guess it's hard to get that across in the written word...) :(
Title: Re: Help with tiles.
Post by: Brian the Great on November 30, 2006, 10:28:17 am
The way I make tileable tiles is by making use of the scroll function that moves and wraps the image around.

(http://i63.photobucket.com/albums/h132/Napolenguin/tile.gif)
Title: Re: Help with tiles.
Post by: eqko on November 30, 2006, 10:33:08 am
just for the record, what IS it with people misinterpreting bacca's posts lately ??
I for one did read it exactly as he meant, a genuinely interest in the dimensions he hasn't heard of before ...

oh well back on topic ...

small tip perhaps if you use photoshop for pixeling (me ducks for cover) you can use filter -> other -> offset
to get the efffect of getting the edges of the tile in the middle while having the middle at the edges to be able to paint away the edgetiling (did that make sence ?)
Title: Re: Help with tiles.
Post by: Ai on November 30, 2006, 11:34:32 am
(me ducks for cover) you can use filter -> other -> offset
to get the efffect of getting the edges of the tile in the middle while having the middle at the edges to be able to paint away the edgetiling (did that make sence ?)

You mean this effect, of course:
(http://img.photobucket.com/albums/v449/neota/sshots/offset.gif)
;)

In gimp, that is layers->transform->offset. And it includes a 'offset by x/2, y/2' button which is exactly what is needed for tiling.

Reminds me.. time to create a little plugin that does that without the dialog popup so I can just shortcut it..

The effect only applies to the current layer, so you can float a tile out of a tileset to work on it with the help of offset.
Title: Re: Help with tiles.
Post by: eqko on November 30, 2006, 12:45:37 pm
ofcourse ! that is the effect I am talking about.
Thank you for giving a visual representation of that, eventhough it's in a different application.
Title: Re: Help with tiles.
Post by: baccaman21 on November 30, 2006, 01:09:09 pm
Right ALT + 1, 2, 3, & 4 - scrolls in 1 pixel directions (left right up & down) in Pmotion... simple & easy way to sort tesselation... by hand...
Title: Re: Help with tiles.
Post by: pkmays on November 30, 2006, 02:34:57 pm
Actually it's Ctrl+Alt+[1-4], and I didn't know that, until now. Thanks baccaman.
Title: Re: Help with tiles.
Post by: baccaman21 on November 30, 2006, 05:20:19 pm
hmmm... you're right...  :y: :y: (I didn't know that!)  ;D

But I was referring to the Right Alt key ;)

Use that one and you don't need to press Ctrl... (which saves ...ooh... all of about 1 milliionth of a microsecond...)  :lol: - or maybe not... no sod it... I'll use ctrl + alt = that way I don't have to pull my hand off the mouse...

cheers me dears!

:) :)

(did that come across as bolshy... I'm getting all worried about my posts now?)
Title: Re: Help with tiles.
Post by: ptoing on November 30, 2006, 05:24:29 pm
What I did is remap the shortcuts to ctrl+cursorkeys

WAY, WAY more logic and fast.
Title: Re: Help with tiles.
Post by: Silver on November 30, 2006, 05:36:13 pm
just for the record, what IS it with people misinterpreting bacca's posts lately ??

ditto
And thanks sharprm for that method, It kinda made things look much clear to me  :y:
Title: Re: Help with tiles.
Post by: baccaman21 on November 30, 2006, 06:52:35 pm
What I did is remap the shortcuts to ctrl+cursorkeys

WAY, WAY more logic and fast.
meh! :P

Where's me shuriken?