The stuff they don't tell you about making good graphics.

Game Discussion
Post new topic    
Page «  1, 2, 3  »
­Mogri
Super Slime
Send private message
 
 PostMon Apr 11, 2011 6:16 pm
Send private message Reply with quote
Nathan Karr wrote:
I like the grass tile from Seiken Densetsu, and have copied it endlessly since reading a tutorial that said it was good (and disagreeing with those it said looked better). Still, as you're showing, the blank green can work.
Seiken Densetsu had a pretty plain grass tile. Not blank, but nothing too fancy.



I can't help but think you meant SD2 or SD3.


Blank green isn't just "can work." It's actually a really good idea unless (and even if) you know what you're doing graphically.
Mega Tact v1.1
Super Penguin Chef
Wizard Blocks
­Skullduggery ­Studios
Metal Slime
Send private message
 
 PostMon Apr 11, 2011 6:50 pm
Send private message Reply with quote
Damn... I was in the middle of writing up something JUST LIKE this, but without the comparisons. Now rendered obsolete. Sad

Excellent so far, tho. More!
­Baconlabs
Liquid Metal Slime
Send private message
Horse Game is a visual masterpiece 
 PostMon Apr 11, 2011 11:32 pm
Send private message Reply with quote
Quick related thing I figured I'd mention: I'm working very hard right now for a mountain dungeon in my game, and eventually I'm going to have to move onto some rocky tilesets. I got to looking up the maps of other games to learn from them, and didn't really come to any conclusion. For reference, here are some quick pictures I found of rocky areas in Mother 3 and Final Fantasy VI, respectively.


Aside from an obvious difference in setting (grass has already been talked about here), take a look at the textures on the rock walls.
Compare and contrast: Holy smokes, that's a huge difference. Call me crazy, but when I looked up close at Final Fantasy's mountain, it was so extravagantly detailed and complex-looking that I honestly thought it looked butt-ugly. This kind of detail on something as simple as a rock wall seems very distracting to me. (EDIT: However, it does not actually distract from the experience of Final Fantasy VI because the entire game looks like this, and I'm sure consistency is another issue altogether) I'm extremely biased on this matter, by the way, because very soon I'm going to have to construct my own mountain from the ground up, and the way that Mother 3 takes simplistic graphics and makes them look good is very inspiring. It gives me courage that even someone like me, working alone on their own little game, can make something presentable and pretty without sweating unnecessary details that would drive me mad.

I'm in a bit of a hurry right now, and I may need to come back and re-evaluate my opinion on this, but my current thoughts are as follows:
Leave the high-definition graphics to the experts - people who can churn out masterpieces in the blink of an eye, who may or may not base their careers around their artwork. Us small-time game makers need to make graphics in a way that neither wastes time nor detracts from quality, which shakeyair may be prepared to talk about shortly.
­Bob the ­Hamster
Liquid Metal King Slime
Send private message
 
 PostMon Apr 11, 2011 11:48 pm
Send private message Reply with quote
Being able to do graphics fast is important. I think that is one of the reasons we tend to get a lot of great stuff out of our 8-bit contests.
­Willy ­Elektrix
Liquid Metal Slime
Send private message
 
 PostTue Apr 12, 2011 1:22 pm
Send private message Reply with quote
James Paige wrote:
Being able to do graphics fast is important. I think that is one of the reasons we tend to get a lot of great stuff out of our 8-bit contests.


This is a very important point. It's a good idea to develop a simplified style (at least for 1 person development projects). In my opinion, variety is more important than detail. It's much better to have lots of different tilesets than one really good one. And most importantly, it's better to have an completed game than a demo a with really slick graphics.
shakeyair
Slime Knight
Send private message
 
 PostWed Apr 13, 2011 12:39 am
Send private message Reply with quote
Wow! A lot of comments and I'm left not sure what to talk about next! I think first we'll address msw188:

Quote:
Just commenting that I agree on getting rid of the horizontal white lines.

As a matter of taste, I'm not a big fan of the doorway looking so huge now. In fact, usually the place where I end up disagreeing with others on graphics is precisely this - the enlarging of 'significant' details (the old 2pixel eyes and large face versus body is the main offender). Sometimes I feel I'm the only one who feels this way though.

If that paragraph isn't clear, consider: the 'real' doorframe is about twice as tall as it is wide, and yet the OHR doorframe looks square. Contrast this with the screenshot from Genesis, with doors that are probably nearly square when counted pixel by pixel, but don't look at all square to me in the screenshot. I have no clue how - I see the 'top' windows are less pixels than the bottom ones, and I wonder if this has managed to cheat my eyes somehow.


Firstly, Genesis uses, I believe, 16 pixel width doors, it might be a little more/less I just counted from the screenshot. So it's not a trick that makes you view them as a rectangle.

But secondly, you are right. Both of those were not the best of design decisions. Lets start with taking out the white lines

[/quote]

And actually, now might be a good time to take about layers. Here are the tiles I'm currently using:



(Sorry for the first screenshot being small. I'm back on the Mac now and I forgot I have to do screenshots a different way. Also, I've been keeping obsolete tiles in the tileset so I cropped those out and I think the picture is 2 pixels down from proper alignment) 34 tiles seems terribly inefficient at first glance, but when things like this start happening:



It actually becomes more tile efficient. If you are only using layers like the old overhead tiles, you're missing out on a lot of their functionality. If these were for a real game, I'd split the tiles up onto different sets at some point during maptile creation, based on what layer(s) that tile was used in.

But more importantly, it lets me do things like:



And a building like that is a thousand times more interesting than a building which is just a simple box. Yes, theres an inside corner tile missing that I'm going to have to make, but for the most part it uses a lot of tile recycling.

This screenshot also shows that windows placed right next to each other have unfortunate, ugly spacing. I am going to fix this in the background, I think, as the windows just need to be slightly smaller. I don't think theres anything important about this beyond pointing it out so its recognized. A lot of making things look good is recognizing little things that look bad and fixing them.

Like.. Door aspect ratio. This is interesting, because there are really only 3 schools of thought for the aspect ratio and I wouldn't particularly say any are absolutely correct.

The first one is what we have currently. A perfectly tile sized door. This is visible on any of the previous screenshots. Next is, genesis-style, 16 pixel sized door:



The thinking behind this door is that walkabouts often use all 20 pixels of height but very rarely use all 20 pixels of width. This is a very walkabout-sized door, while maintaining a better aspect ratio.

And the last way:



This preserves the width of the tile, but is slightly taller. I tend to find this works well with open black entrances (my usual style) But as this example shows, it looks HUGE when the door is shown. But here's an example from my current project showing it in a way that I think works pretty well:



This is obviously very different stylistically, but "style" isn't really something I think is worth going into yet. Style as I'm going to come to use it will be a combination of many different choices, and it would be silly to touch on it until said choices are introduced separately!

However, this screen shot is also indicative of something that I think is important to realize, and indeed one of my main points that I don't think is driven home in tsugumo's tutorial as much as I'd like:

It is not about the individual tile!

I think this post also set a good precedent, in that I think its more helpful if I acknowledge mistakes I make, and show a few different ways of trying to solve them. This will also help because it lets you look at my different screenshots and see clearly how things improve, especially when its a more subtle change.

I know I already kind of did a 'background change' with the windows and the doorknob. The doorknob I just felt was too big, but that alone is a stylistic choice. However, I also switched what side its on. This also really doesn't matter, but the thinking behind it was:

1. It makes the door look more centered in its frame.
2. Public buildings often have a knob on the left, while homes have a knob on the right. (This is not always true and I don't think its a rule, but I have taken note of it in my everyday life)

And the windows have a clear shot where it shows how poorly they sit when tiled right next to each other. The new, slightly smaller ones are much better:



(This screenshot shows also what happens if I drop the building's roof down a whole tile. It looks better in some ways and worse in others, but its worth noting what it does to the building, making it very clearly one story.)

So. Perhaps doing things this way will make certain points clearer and obfuscate others a bit. What I'll likely do is clean the tutorial up for a Hamsterspeak version, while letting this thread preserve its 'raw' roots. The thread is ultimately going to be more in depth and informative, while the magazine version will be quicker, better edited, and more to the point.

(And yes, if its not clear, I'm making these posts in a very 'live' sort of manner.)[/quote]
shakeyair
Slime Knight
Send private message
Re: Horse Game is a visual masterpiece 
 PostWed Apr 13, 2011 12:54 am
Send private message Reply with quote
To baconlabs:



Here is another way of doing mountain tile sets which is sort of in between those methods. (This is a screenshot from The Aftermath, which is my epic RPG that I simply decided

1:I want more features in the OHR
2:I need to learn a lot more about making a game
3:I want a much more developed script

before I legitimately start work on it.

This screenshot shows me doing graphics in a way that the tutorial won't get to covering for a long, long time. (I'm planning on getting to a certain point with concepts, then going all over different specifics, so I'll be taking stylistic requests eventually.)

I would put this example about halfway between Mother 3 (totally stylized) and FF6 (totally realistic--to the extent tiles can be)

In this tileset, I defined every rock individually, but they are all a little more "plastic" than real rocks (when taken in individually, together they make a decently rock like texture) And then there's a "buffer" of smaller rocks. (Buffer tiles are probably some of the most important tiles there are, so don't skimp on them! I will do a whole feature on them eventually)

This was just to let you see another option, baconlabs, not to convince you to do your rocks any certain way.

EDIT: But yes! (I keep getting ahead of myself!) certainly picking a way of doing things that lets you get things done is important! Having a "REAL WORLD" is so much more important than a "REALISTIC LOOKING WORLD" so both baconlabs and james have a great point, and this is what I hope this tutorial will do for people. Show them how to make the best looking graphics that fit in line with their artistic abilities.

And, maybe I should edit this into the first post:

Unless you have a really good understanding of spacial relationships, editing your tiles tile-by-tile in the OHR editor is a BAD way to do it. You WILL try and confine features to a tile that should take up more than one. (I am of the opinion, even though Genesis can prove this wrong easily, that doors should always take up more than one tile, because a doorframe is important) It will also make you spend far more time than necessary on 'the' wood tile or 'the' grass tile, and the individual tile is not important it is important how many tiles fit together to make a nice setting. I will have a really good example of this (using trees) when I come back, but I'm out of time right now.

EDIT2: I also think Mother 3, more than any other game, should be the first place to look for 'how can i make this look good?' if making your game look good is what you struggle with. Mother 3 is an astoundingly beautiful game, and in such a simple way. Little things, like how the plan-green (mostly) grass meets the trees, and the way those rocks work, just look so good.

More than that, it doesn't take a graphics genius to look at it and replicate the style decently. Its clean, readable, consistent, and very very pretty. More than that even, the game MAKES you take it seriously. It is the most emotionally taxing game I've ever played, and it does this without any sort of graphical grittiness.

This is awesome, because most people into RPGs have played this, and people who used to see these super clean graphics and be like "oh thats a kiddy game with no real significance" have now played Mother 3 and eaten their words several times over. This means you can emulate that style without fear of people not taking your game seriously. And that is a great thing for indie RPGs on the whole.
­Baconlabs
Liquid Metal Slime
Send private message
yaay 
 PostWed Apr 13, 2011 1:27 am
Send private message Reply with quote

I really like where this is going.

Before the end of the month, I hope to get to work on some tiles of my own and present them here, describing what I learned over the course of this lesson and how I applied them. (Assuming that shakeyair keeps up with this feature for the whole month, which, I think everyone agrees, would be great.) On another note, will these "demonstration" map tiles eventually end up in a separate "free sprites" page, like in Hamsterspeak 48?
Also, I love this quote.
shakeyair wrote:
People who used to see these super clean graphics and be like "oh thats a kiddy game with no real significance" have now played Mother 3 and eaten their words several times over.
shakeyair
Slime Knight
Send private message
Re: yaay 
 PostThu Apr 14, 2011 1:13 am
Send private message Reply with quote
Baconlabs wrote:


Before the end of the month, I hope to get to work on some tiles of my own and present them here, describing what I learned over the course of this lesson and how I applied them. (Assuming that shakeyair keeps up with this feature for the whole month, which, I think everyone agrees, would be great.) On another note, will these "demonstration" map tiles eventually end up in a separate "free sprites" page, like in Hamsterspeak 48?


Ooh! Doing a separate set of OHR member in-depth techniques would be great, especially if people are okay with me doing slight edits to their tilesets to demonstrate things we're talking about.

I can't imagine why anyone would want the demonstration tiles, their main purpose is to show the growth and change of maptiles as we apply different ideas (and later, visual styles) But in a pretty limited capacity.

However, I have been thinking that, especially due to limitations in tileable 20x20 squares, I'm going to make some templates. These will start with things like the bricks in the demonstration tiles, which are basically always the exact same linework from game to game. Maybe it will extend to somewhat generic ways of representing a lot of things, for either:

1) coloring and dropping in a game
2) having a jumping off point if you want to go into another style
3) assembling maps before your tilework even starts, so you can focus more on how your tiles fit together as opposed to making 'wall tile' 'dirt tile' 'grass tile' because there will already be a testmap to see it in action.

Part of what I want to talk about when things get to that point is squeezing out tileable organic-looking buffer tiles, because buffer tiles are arguably the most important in terms of getting a game to look like a world, and not a collection of pictures assembled together.

But that will have to wait until I have time! And geez I think I need to formalize my setup a bit it is very easy to forget where I'm supposed to be going! At least I'll have a second try when re-assembling and re-ordering for Hamster Speak, haha.
­Sh4d0ws
Slime Knight
Send private message
 
 PostThu Apr 14, 2011 1:30 am
Send private message Reply with quote
Simply put, this tutorial is great. I'm really surprised that you even mentioned the style of graphics, -so many tutorials push realism over style, and this bothers me deeply. Of course, basic elements of realism, such as capturing depth, lighting, shading, perspective, etc. are important to any style, and make a great base for any tutorial; style is just too underplayed. I do love that you compared the simplicity of Mother to the realism and detail of FF6, and hope to see more of this.

I'm also intrigued by that the first thing you get the reader into is a building, rather than natural stuff like trees, rocks, etc. That a building is so much less abstract than a tree or rock makes it such a better starting point. Not sure if this was intentional or not, but I appreciate it.

I'm curious as to what and how far you'll be covering things. Are there any plans for discussing color management and atmosphere, shadowing techniques and detail, pattern recognition and the player's response to it, etc. or are you mostly planning on taking this to a very basic level of achieving an understanding of why this or that is done?

(I've been trying to post this reply for two days now, an error's been stopping me, so I apologize if I'm sounding redundant here.)
­Mystic
Metal Slime
Send private message
 
 PostThu Apr 14, 2011 7:04 am
Send private message Reply with quote
I'm a big fan of this tutorial because it teaches me how to make passable/good graphics without learning how to draw.
shakeyair
Slime Knight
Send private message
 
 PostThu Apr 14, 2011 11:36 pm
Send private message Reply with quote
Mystic wrote:
I'm a big fan of this tutorial because it teaches me how to make passable/good graphics without learning how to draw.


This sort of sums up my mission statement. I want to highlight what, in my opinion, are the things that non-visual artist sort of people just don't have any way of knowing. I also want discussion so that things I missed can come to light. Hell, if you want to do a mini tutorial or show an example in this thread, feel free. Just know that if its something I disagree with, I'll probably offer a counterpoint.

Ideally, this thread is anything and everything in the way of a graphics tutorial for OHR users EVENTUALLY. While the Hamster Speak version will be slimmed down to being very direct and more immediately useful.

Sh4dOws: Yes, style is a HUGE deal and most tutorials don't even hardly acknowledge it. My plan is to get through all of the things all styles have in common before I touch on anything specific. The plan is to do a segment eventually that takes the 'generic assets' I build up during the more conceptual tutorial, and talk about how I change them to 'fit' a style. (Likely styles based on commercial games. Maybe I'll let people vote for which ones?)

As for color management, I'm working on a palette which is organized into color ramps, as opposed to straight rows of colors. I think I'm about to switch my 16-color game into using it, for testing purposes. When I feel its decently generic, yet has visual interest, I'm going to release it and start talking about color simultaneously. (Thats the plan, if its done sooner I'll release it quietly then get into why I chose those colors later) Atmosphere is a little more broad, and I'm not totally sure how to approach it, but I would like to touch on that as well. Shadowing techniques in the OHR are very, very limited, but I'll talk about those at some point, remind me! Pattern is actually my next big post, hope to have it up (late) tonight.

And Yes, I picked a building very consciously. There are as many different ways of representing a tree as there are... I dunno. There's A LOT of different methods but I have some ideas in terms of efficient ways of covering the most common ones.

But I might talk a little bit on trees, anyway, since I think I'm not going to hit them in detail for a while:

If trees are a point anyone struggles with, Mogri has a post... somewhere... (hype your game thread? I can't find it)

Anyway. he found a picture of a tree, shrunk it down to the pixel size he wanted it, and did some cleanup. People on pixellation might yell at you for this, but I think its a good idea. Bonus points if the source picture is a tree at 3/4 perspective! Haha.

But even moreso, the secret trick to a good looking tree is drawing it outside the maptile editor, in GraphicsGale or GIMP or Photoshop or whatever. Preferably something that allows pixel by pixel work. (I use GraphicsGale on Windows, and curse my life in Photoshop on my Mac.) But trees are BIG. And you will make a much better tree if you're not drawing it in 20x20 chunks. This is true of any larger element, but especially organic ones.

Why is that so important? Well, people like things contained. There were people in my drawing class even this year (Drawing 6!) who would make sure in every class drawing they got the entire figure or figures on the page, even though thats rarely a good idea compositionally. Drawing in the tile editor makes you want to make EVERYTHING as one tile contained as possible. All of a sudden your trees just kind of end up with straight lined sides and a point on the top. This looks weird! (Not for every style of game, of course, but usually)
­Mogri
Super Slime
Send private message
 
 PostFri Apr 15, 2011 12:45 am
Send private message Reply with quote
To be more specific, I found a silhouette of a tree and recolored it after shrinking it. I think this is probably a better method because it eliminates ugly antialiasing and palette problems.

[img]http://www.slimesalad.com/forum/files/phantom_tactics0002_126.png[/quote]
(again, notice the textured grass causing contrast problems with the trees)
Mega Tact v1.1
Super Penguin Chef
Wizard Blocks
shakeyair
Slime Knight
Send private message
 
 PostFri Sep 30, 2011 12:52 am
Send private message Reply with quote
Not to get people too excited by replying to this thread, I don't have a new tutorial but I do have some helpful links. I fully plan on getting back to this at some point. Maybe I'll do some stuff on the gameboy game graphics I've been doing.

Anyway, I'm gonna start off with a thread I just found on Pixeljoint.

Pixeljoint's NOOBTORIAL: http://www.pixeljoint.com/forum/forum_posts.asp?TID=5692

Then their pixelling FAQ: http://www.pixeljoint.com/forum/forum_posts.asp?TID=9378

WANT TO LEARN TO DRAW?

http://conceptart.org/forums/forumdisplay.php?f=42

Conceptart.org is incredible. Holy crap there is not a more artistically talented community anywhere, I don't think. This link is to their tutorials/tips and tricks forum. Just look all through there and there is everything you could ever want to know. But it will still be work-- a lot of work. But less work than to just keep trying without having a specific direction. You need to know what exactly to work on to focus on it well, you know?

Plus, and OK I'm feeling a rant coming on. I'll put it in code so its easy to skip.

Code:

There is a view from people outside any discipline looking in at people inside a discipline and thinking "wow they are GOOD at doing that thing!" this is very true about drawing. Drawing, is not a single skill. Just as football is not a single skill and gaming is not a single skill. Football, as an extremely simplified example, involves skill in:

running, catching, throwing, tackling... etc etc

but what about catching?

awareness, reaction time, fine motor skill ability... etc etc

So what does this have to do with drawing, or, pixelling or whatever? Well. Drawing is like football. Its not a single skill. To be good at drawing (from life specifically here), you need to learn how to:

See contour lines
Reproduce those same contour lines (generally at a different size)
-Which means you can accurately visualize said line when no longer looking at the object AND
-you have the motor skills to recreate the line you visualize accurately (much harder than you'd think)
Exaggerate aspects of those contour lines to give a clearer form/silhouette
See subtle changes in value
Reproduce those same changes (but really-- redefine your brightest color as white and darkest color as black and sort of remap colors accordingly)
-again, this is both visualization AND motor skill coordination to put the pencil down with the right pressure
-and when you introduce colors... holy crap!
--being able to accurately predict the hue of 2 colors... often with pigments that don't mix evenly
Exaggerate those changes in values for
Yada yada yada

See subtle variations in light (many people don't even notice reflected light until someone explicitly tells them its there)

Render (which is accurately depicting light hitting objects)
Model (which is INACCURATELY depicting light hitting objects, to further define form or mass)
-All great life drawings are both RENDERED and MODELED in areas, because it enhances our view

Then there's a whole bunch of things which are even harder to explain, like

Giving a figure 'weight,' giving a drawing 'weight.' I know 'weight' when I see it, and I am fairly successful in gesture drawings of getting fairly good 'weight' but I sure as heck don't know how to describe it.
Line weight. Where to let lines be thick or make them thinner.
Blah blah blah etc

But what I mean is, BRUTE FORCE trial and error is a terrible way to learn. Imagine if in math class, on the first day of first grade, the teacher asked you "What is the square root of 205?" Then you answer "uhmmm... 4?" and she says "well that is an okay answer but it is not right. try again."

That is definitely a piss poor way to learn math! So why do people think they can learn to draw like that?

"but my best friends uncles girlfriends dogs babies mommas uncles brothers sister taught herself to draw by herself with NO HELP"

yea. you can. but its a game of luck and PAYING ATTENTION TO EVERYTHING. and its definitely not the easiest way. Letting someone tell you where to go takes out somewhere from half to most of the work. but even if you took/are taking some art in whatever school you're in (unless you are a college-level art student), teachers just.. well. mostly. don't teach very well. Not that their bad, but they want to be nice (high school art teachers are always so nice) and have been beaten down by a thousand kids who are taking art as a blowoff class. They think their words fall on deaf ears, so they stop talking. The way to learn something is by PRACTICING THE BASICS. Until they are a part of you. Until you couldn't get them wrong if you tried. (well, ok, if you tried pretty hard you could...)

And with drawing... once you learn how to SEE, the world is never the same. your eyes don't get any better... you are just more aware of details and colors. SEEING, is a hard thing to teach, is the trouble. And most people don't even know its part of the battle. Going back to the first grade math example, you probably didn't even know what a square root was. It's like that. Every drawing.. theres a chance you happen to get something right and basically learn by accident... but its a lot easier to learn what a square root is, than see a bunch of mistake answers and work backward. yuck.

I guess this rant is aimed at people that see the HUGE amount of tutorials and want to shy away.. it seems like a lot, but you can go at whatever pace you like. its not so bad.


Then some stuff thats strictly pixel technique:

http://www.pixeljoint.com/forum/forum_posts.asp?TID=11299

This is a thread by Cure, and he goes over the basic basics of pixeling in great detail. Usually there is one or two little nitpicks I have, even if its just stylistic differences, but Cure is extremely spot on, not to mention thorough. I don't think there is a sentence in this whole tutorial that any accomplished pixel artist would disagree with.

One thing he doesn't go into quite enough detail about is banding...

http://www.wayofthepixel.net/pixelation/index.php?topic=8110.msg92041#msg92041

this has some similar stuff, but man, Helm goes OFF on banding. Everybody hates banding (even if they don't know it yet) but Helm HATES banding.

As much as Helm hates it though, banding is sometimes a necessary evil in pixel art. Basically, don't let it happen if you have a choice.



QUICK TIPS:

Block out forms with color-- don't start from outlines. It will help you see forms much better. Smile

Let your trees be big! If you must draw them in the OHR, draw them in the large enemy graphics window. Export and place into a backdrop. Better still is to get GRAPHICSGALE. I have so much love for graphicsgale. Now that the OHR has a Mac version, graphicsgale is literally the only reason why I still have a windows partition. It is simply the best.

RANDOM STUFF:

Create an RPG party challenge on PixelJoint, some cool entries:
http://www.pixeljoint.com/forum/forum_posts.asp?TID=13020&FID=6&PR=3

Actually I recommend looking all around that site... some incredible stuff!
marionline
Metal Slime
Send private message
 
 PostSat Oct 01, 2011 5:15 pm
Send private message Reply with quote
Thanks for the cool Tutorial!
+
Perfect timing! Grin

Just yesterday I stared drawing some tilesets.
Display posts from previous:
Page «  1, 2, 3  »