PDA

View Full Version : Tiles for Games (Pixel Art)



FishNChips
01-20-2014, 12:55 PM
hello

So a few people here know that I'm doing this, but I'm learning how to use the Unity's 2D game engine as well as scripting for games in C#. It's a new hobby of mine that I'm really excited for.

I want to ask if anyone knows anything cool/helpful regarding making pixel art tiles.

What I'm looking to start working on is some derpy little dungeon crawler/shooter that plays in a top-down perspective, kinda like these:

http://pobierzgryprogramy.pl/PobierzGryProgramy.pl/upload/screenshot1153-1.jpg
http://media.pcgamer.com/files/2013/02/Hotline-Miami-game-image.jpg

What I'm basically going to be doing is adding a series of floors tiles, walls, and static objects to Unity and building a little something around that.

Does anyone know what I could do to create these assets? I've never done pixel art, and I know there's a pixel art thread already, but there doesn't seem to be any links regarding creation for games specifically, i.e. Tile Sets and Sprite Sheets.

Bark
01-20-2014, 02:33 PM
This (http://www.dinofarmgames.com/the-art-barn-the-cool-rules-of-spriting/) is more useful for characters but I thought I'd throw it in anyway.
Here (http://gas13.ru/v3/tutorials/sywtbapa_almighty_grass_tile.php) is a really good one with tiling.
More tiling (http://rpgtoolkit.net/tutorials/graphics/lotuswares-pixel-art-tutorial/).

FishNChips
01-20-2014, 03:28 PM
This (http://www.dinofarmgames.com/the-art-barn-the-cool-rules-of-spriting/) is more useful for characters but I thought I'd throw it in anyway.
Here (http://gas13.ru/v3/tutorials/sywtbapa_almighty_grass_tile.php) is a really good one with tiling.
More tiling (http://rpgtoolkit.net/tutorials/graphics/lotuswares-pixel-art-tutorial/).

Ah! You are a wonderful being. :>

These'll help me out for sure, I'm reading through them right now. Thanks!

I may or may not update this thread with what I come up with. Or I might just make it part of that sketchbook thread I've been meaning to make, I guess?

Hardrockangel
01-20-2014, 04:35 PM
((Quickly going to put a post in here to remind myself to check this when not pulling all-nighters for exams.))

Bark
01-20-2014, 06:33 PM
Ah! You are a wonderful being. :>

These'll help me out for sure, I'm reading through them right now. Thanks!

I may or may not update this thread with what I come up with. Or I might just make it part of that sketchbook thread I've been meaning to make, I guess?

No problem c:

Here's (http://wayofthepixel.net/pixelation/index.php?topic=3467.0) a big list of stuff.
Another (http://opengameart.org/content/les-forges-pixel-art-course) general overview that also includes stuff on tiles.

Kanagrooboy
01-20-2014, 08:40 PM
As far as making things tileable, it's good to have a solid color scheme with little variations, as well as avoiding very distinctive features, such as harsh highlights and unique shapes within the tile as they will become very noticeble in gameplay. One thing I have learned, as far as making a texture tileable is making use of an offset filter, if possible. Set the filter to half your image dimension (example: image is 512x512, set the offset at 256 horizontally and vertically) and when applied, the edges will be at the middle of the image file. If there is a distinctive + going through it, cover it up. At this point, you can either save it as-is, or reapply the offset back to move your edges back to where they were.

FishNChips
01-20-2014, 10:02 PM
As far as making things tileable, it's good to have a solid color scheme with little variations, as well as avoiding very distinctive features, such as harsh highlights and unique shapes within the tile as they will become very noticeble in gameplay. One thing I have learned, as far as making a texture tileable is making use of an offset filter, if possible. Set the filter to half your image dimension (example: image is 512x512, set the offset at 256 horizontally and vertically) and when applied, the edges will be at the middle of the image file. If there is a distinctive + going through it, cover it up. At this point, you can either save it as-is, or reapply the offset back to move your edges back to where they were.

I did some looking, Is this what you mean by offset filter (https://www.youtube.com/watch?v=MFvsRvo_78Y&feature=player_detailpage#t=658)?

Unfortunately I'm not a Photoshop user. :[ Or do other programs have this kind of functionality?

Anyway, thanks for the tips!

This week (or the next) I'm looking to getting a start by making a metallic sci-fi floor and putting it into Unity. Perhaps with a re-usable wall piece to go alongside it.

I'm really stumped on what scaling I should use, though. I mean, I know about the use of dimensions that are always divisible by 2 (64, 128, 256, 512, etc), but, eeeh, well, I'm just thinking in game scaling and performance-related stuff here at the moment.

Thanks again!

Kanagrooboy
01-20-2014, 10:21 PM
I did some looking, Is this what you mean by offset filter (https://www.youtube.com/watch?v=MFvsRvo_78Y&feature=player_detailpage#t=658)?

Unfortunately I'm not a Photoshop user. :[ Or do other programs have this kind of functionality?

Anyway, thanks for the tips!

This week (or the next) I'm looking to getting a start by making a metallic sci-fi floor and putting it into Unity. Perhaps with a re-usable wall piece to go alongside it.

I'm really stumped on what scaling I should use, though. I mean, I know about the use of dimensions that are always divisible by 2 (64, 128, 256, 512, etc), but, eeeh, well, I'm just thinking in game scaling and performance-related stuff here at the moment.

Thanks again!

Yes! Exactly what I meant. That filter will do wonders for making textures tileable.
GIMP should do the trick, it does have an offset filter available. (plus no money out your wallet!)
http://www.gimp.org/tutorials/Tileable_Textures/

For metals and stuff, I'll have to dig up a lot of my own past work when I studied it, but a good pointer is use of strong highlights and shadows to really emphasize the reflectivity. I'm not too sure about the dimensions for a pixel art texture, but I've always been told to work at around 512 to 256, 1024 being mainly for high def (mind you, my focus was in 3D, and texture sheets could be used for multiple items per single file). But if it's any indication by the tutorial video you linked, 128x128 might do. After all the direction is pixelation, rather than trying to obscure that with larger dimensions and anti-aliasing.

FishNChips
01-21-2014, 09:07 AM
Yes! Exactly what I meant. That filter will do wonders for making textures tileable.
GIMP should do the trick, it does have an offset filter available. (plus no money out your wallet!)
http://www.gimp.org/tutorials/Tileable_Textures/

For metals and stuff, I'll have to dig up a lot of my own past work when I studied it, but a good pointer is use of strong highlights and shadows to really emphasize the reflectivity. I'm not too sure about the dimensions for a pixel art texture, but I've always been told to work at around 512 to 256, 1024 being mainly for high def (mind you, my focus was in 3D, and texture sheets could be used for multiple items per single file). But if it's any indication by the tutorial video you linked, 128x128 might do. After all the direction is pixelation, rather than trying to obscure that with larger dimensions and anti-aliasing.

I remember Gimp! I never used it for anything outside of doodling when I was an absolute beginner to drawing, though. I'll try this or whatever else I may find.

I'd like to see your past work! :>

And yep, I'm looking for pixelation. Like, really noticable retro pixelation that you'd see in Hotline Miami or Minecraft, not pixel art that tries to look less pixelated like you'd see in old RPGs.

ur the best

FishNChips
01-21-2014, 11:07 AM
Update:

I'm now using Paint.Net! I'm creating my pixel tiles at 32x32 and I intend to have them enlarged by 300% when in use by Unity. I'll figure out how to do that later.

Here's a tile I just made, zoomed in 300%:

http://puu.sh/6sTdm.png

It's supposed to be a plated metal floor tile.

I think it looks okay but in all honesty I have no idea what I'm doing lel.

Anyone got any pointers they could give me at this point? .u. Bit of critique would be super cool. Note that these tiles I make are meant to be repeated over and over again and fit together nicely.

FishNChips
01-21-2014, 02:35 PM
MOTHERFUCKING UPDATES, BITCH.

I finally figured out a little bit about how to import it into Unity.

http://puu.sh/6t4or.jpg

As you can see, it's been cloned 6 times to form a rectangle, and it is also lit by a warmish yellow light.

Isn't that just lovely.

Though I'm thinking out loud here, but I'm kinda worried about how I should set up my sprites for game use. Sprites being cloned over and over again from the same file are not GPU intensive, but are CPU intensive.

I think I'll have to make spritesheets out of this sprite that allows me to select a singular huge piece (e.g a 2x5m square) so I only have to place it once, and therefore only called once and can be used as a part of the game's floor. At least I think so.

I also set unity's pixel scale to 96 pixels (from the default 100) to represent 1 meter in the "game". Now my 32x32 tile imports as 3 times its original size, making the pixels, well, bigger.

I may or may not change this later.

The next thing I'll need to do is work on making a playercontroller that can move around on these tiles whilst the camera is attached to it. It'll be either a randomass blob or an overhead view of some pixel guy.

Kanagrooboy
01-21-2014, 02:50 PM
That's actually pretty solid right there! About all that needs is some shadow running along the opposing edges to really tie all of it together and give the tiles more dimension. Keep it up Goobs!

As far as my work, I'll have to pull it up later. I'm making this post on my phone, my power line is out for maintenance. :P

FishNChips
01-21-2014, 02:56 PM
That's actually pretty solid right there! About all that needs is some shadow running along the opposing edges to really tie all of it together and give the tiles more dimension. Keep it up Goobs!

As far as my work, I'll have to pull it up later. I'm making this post on my phone, my power line is out for maintenance. :P

Thanks! Yeah, I'm looking forward to doing better work on these pixels but I'm quite satisfied how they're turning out so far. :D Wouldn't have done it without you guys' advice.

I'll take your critique to heart, I think I see what you mean! I tried to do the diffuse thing but I don't think it worked very well... so I'll go back and edit the sprite and instead just give it a darker value along the opposite sides!

I'm getting really excited now! And I'd love to see your stuff. :>

Edit:

I've changed the sprite a bit. I removed the dark dots and instead put a bit of opposing shadow on the tile.

This is it "in game".

http://puu.sh/6t8Gh.jpg

This is the actual individual tile at its original size and also without any lighting:

http://puu.sh/6t8KC.png

FishNChips
01-21-2014, 06:21 PM
Update, more pixel art!

I realise that I'm kinda using this as some kind of sketchbook thread for my pixel and unity work.

Anyway, here:

http://puu.sh/6tkdk.jpg

I made a prototype sprite for a player character.

It looks like shit. That can be remedied at another point in time. I'm confident with tiles and some objects, but PEOPLE/MONSTERS LOLNO.

What I've done here is import the player sprite at 96 pixels-to-1m scale, and the sprite itself was made on a 32x32 canvas and scaled at twice its original size. Its pixels are smaller than the ground tiles' which IMO is wonderful.

The camera is fixed to the player sprite. Wherever the sprite moves, the camera is fixed in place above it, and it even rotates with the player sprite as you can see in the image.

I'll have to see about making a C# script to make the sprite move along the X/Y axis depending on player input, as well as make the sprite rotate with the mouse movement.

This is my sprite:

http://puu.sh/6tkOM.png

Kanagrooboy
01-22-2014, 03:55 AM
Very nice! The extra shading really helps those tiles POP. I assume by diffuse, you're talking about setting the texture to diffuse in Unity, yes? If so, the diffuse setting is for showing the texture exactly how it appears, a colormap, simply put. There are other settings, that when set to, will change how that texture is rendered in the engine for additional effects to add to the diffuse map.

Also, now that I DO have electricity (and I'm back from work), here's a couple of small things I've worked on:
http://i.imgur.com/jOm1PhV.png

http://i.imgur.com/GsbQMLi.png

http://i.imgur.com/pW4DDIc.png

http://i.imgur.com/6l8uX6l.png

FishNChips
01-22-2014, 04:29 AM
Those are really nice!

You did the models AND the textures, right? I've always liked the low-poly handpainted look. :> Torchlight II and Planetary Anhilation have wonderful arts like that.

And by diffuse I meant dithering in pixel art. I made that mistake because I'm an idiot. But I did use diffuse for sprites! Seems to work. I'd like to work on a more interesting shader, though. The one I'm using is bog-standard and is what you see pictured.

Anyway, yesterday I managed to make the little dude move with WASD/Arrow keys no problem, but getting him to turn with the mouse is pissing me off. God, all that time I spend working through books and videos feels wasted. I mean, I get the basics and how C#/OOP works, but if I want to actually do something I'm pretty stumped.

I'll figure it out later.

Kanagrooboy
01-22-2014, 04:59 AM
Ah I see what you mean, now. I thought it was some sort of pattern you were using for the tile. Though that would work for turning the floor into a grated floor. The change is much better, though. The 100% black should only be used if it's necessary.

And thanks much on the work! The models and textures were all me. Though the computer stuff was done with photos pulled from a texture resource site, then worked over with color adjustments, overlays, filters and such. But I am extremely fond of low-poly, painterly styles. I find the look far more fun than photorealism.

Although UV unwrapping is a BITCH. I was terrible at it, and was barely rudimentary at my abilities after 3 years. Luckily you're working in 2D, so that will never trouble you. :P

An additional shader I'd recommend using would be lightmapping. It enables parts of textures to completely ignore the environmental lighting and appear lit up even in dark spots without having to eat up precious data with placing in an in-world light. For example, the little status lights and screens on the computers in my top picture. Setting the shader to diffuse/lightmap, you place the actual texture in the diffuse, and your lightmap in the appropriate spot. Lightmapping is simply painting black over places you don't want lit up, and white where you want it to glow. Hell, you could even use gradients to create a falloff.
http://i.imgur.com/uKDbXSk.jpg
Unfortunately, the extent of my studies in game development was purely from the artistic side and focused on environments. Coding is all Greek to me. :/