AuthorTopic: GR#023 - Hud/Tileset  (Read 12956 times)

Offline Dusty

  • 0100
  • ***
  • Posts: 1107
  • Karma: +0/-0
    • View Profile

GR#023 - Hud/Tileset

on: April 27, 2010, 09:08:59 am
I've been bored lately and thought I'd start doing some RPG stuff to pass time.

First is the HUD I started. It's fairly early in design, and I'm not exactly sure where I'm going to take it. The idea was to keep it simple, with an icon for HP and MP, with numbers to represent the values, and an experience bar in the center.

This isn't the screensize it's intended to be displayed it, though... so my concern is that at larger resolutions it will become too spaced out and make it troublesome for players to easily grab the info they need when it's spaced out on each side of the screen. However... I don't like the idea of placing all the info on one side as I feel that would clutter one side and leave the other empty. Also, I did the heart first, and eventually did the orb(it took me a while to decide what sort of object best represented magic like a heart represents health)... so between that time I think I started towards a new border design. Right now I think the border on the heart is skinny compared to the orb, and that bugs me. I'm not sure if it's bad enough to warrant a redo, though. Also, the numbers are not my design. I took this image:

And scaled it up 125%, then AA'd and fixed them up to my liking. As well, you may notice the image uses a lot of alpha channels. I'll note that I actually pixelled and AA'd the images on a white background and simply took my AA and fixed it up to work on any background... so technically it's still all my pixel work. The only thing I didn't manually do is the drop shadows on the numbers.

Anyways... next up is the tileset I started on.

And the tiles themselves:

I was having a hard time getting grass I was happy with, and I'm not sure if I'm content on how many tiles I ended up with. At first it was simply 4 tiles, but I established that by taking the 4 tiles and moving them around and then flipping them horizontally, I ended up with 8 tiles that worked great together and killed the monotony the original 4 had(when straight tiled). Then I took those tiles and removed the highlights to add a little more variety. I think it came out looking alright. However, I'm not exactly sure about the flowers.

Also worked on these rocks:

I started off with one rock design. Then I started a new design with a new color scheme, then again once more. Then I took those 3 rocks and recolored them with the other rock palettes. Then for safe measure I recolored them all gray(ya, I didn't start with all gray rocks, as you might expect). I'll be the first to admit I'm horrible with volumes, so these might not make much sense from a technical standpoint. That doesn't mean I won't try to fix them if they need it, though.

And lastly, for safe measure, a blob I started a little while ago.

I'm not happy with this, so I might just start over from scratch.

So help is welcome!

Update(April 28th):
Added a new big boulder and started on the dirt and transitional tiles.

I realized with this boulder how much my skills were lacking when it came to volumes and such. I had started with a blob and thought it would be easy to shape and flesh it out... I ended up just scribbling and refining until it looked semi-decent in my eyes. This disappoints me, to be honest.
« Last Edit: May 05, 2010, 05:11:01 am by Dusty »

Offline Dusty

  • 0100
  • ***
  • Posts: 1107
  • Karma: +0/-0
    • View Profile

Re: RPG GUI/Tileset fun

Reply #1 on: April 29, 2010, 01:12:21 am
And I guess I have enough right now to throw it together:

Offline Mathias

  • 0100
  • ***
  • Posts: 1797
  • Karma: +2/-0
  • Goodbye.
    • http://pixeljoint.com/p/9542.htm
    • View Profile

Re: RPG GUI/Tileset fun

Reply #2 on: April 29, 2010, 02:03:11 am
What up, Dustay. Tileset time. I'm interested to see how far you take this!

Well done so far. On the HUD (GUI= graphical user interface, those icons aren't interactive, therefore I'd term it a simple heads-up display), I assume you're going to top-left-align the heart, top-center-align the green bar and top-right-align the blue orb. Your concern is easy and quick info retrieval when resolution becomes wider. Then, just hardcode the resolution; don't make it fluid (so that it's always a fixed 320x240, 640x480, etc)  -OR-  just top-left-align all HUD elements and code in your own arbitrary padding to space them as desired. (not a new idea to you, but the only options I see)

Heh, why the concern over what's purely manually done . . . oy. Why ever manually make a drop shadows these days . . .

Grass does look nice. But looking close I see many repeated clusters per tile variation.

Flowers a bit jarring; contrast perhaps too much; draws the eye a lot.

Rocks are lovely. Volumes are convincing enough. If only there was a little shadow cast by them for enhanced "grounding", though the little grass blades surrounding their perimeters do well.

Is your light source straight upward; 90 degrees?


Overall, I wish the grass and dirt were less noisy, but I'm one of those minimalist ZELDA: ALTTP fans.






And for those viewing this thread, wondering how Dusty is doing his tiling, since it can be confusing for beginners wanting to try, here's a couple animations some idiot made that may help reveal the truth of tiling to the unbelievers:




« Last Edit: April 29, 2010, 02:04:55 am by Mathias »

Offline Dusty

  • 0100
  • ***
  • Posts: 1107
  • Karma: +0/-0
    • View Profile

Re: RPG GUI/Tileset fun

Reply #3 on: April 29, 2010, 02:37:39 am
Well, lightsource is towards the bottom left.

I agree about the flowers, I always have concerns with contrast, so maybe I overcompensated this time. I'll try to tone them down and see what happens :). I think the rocks pose the same problem as well with their shades of color. I can probably desaturate them and still achieve the same effect. Shadows and such may come later, as I might render them a different way than having them part of the graphics(also, the tiles for the rocks don't have enough space, I think).

I too, and a minimalistic person when it comes to graphics, typically, but I wanted to go with something more traditional(RPG-wise) this time around. It's a good break from what I normally do.

To elaborate on the tiles. I tend to have this sort of layout first:

But also to ease the effect of the sharp corners that can render(even if you apply the above concept, it just doesn't seem enough for me), I also add these tiles:

I am already using the above layout in my screenshot I posted, even though I haven't posted the actual tiles yet. Whether this benefits it enough or is overkill I'm not entirely sure. I should mention, since you brought it up, Mathias, that LttP also uses this method :) Now, they don't really put them to great use, but the tiles are definitely there.
« Last Edit: April 29, 2010, 02:39:34 am by Dusty »

Offline Olothontor

  • 0010
  • *
  • Posts: 238
  • Karma: +0/-0
    • View Profile

Re: RPG GUI/Tileset fun

Reply #4 on: April 29, 2010, 11:57:10 am
I got the same disambiguation runthrough by Mathia the first time I ever tried a TD tileset, and let me tell you; it helped.

Go Mathias!
"In a mad world, only the mad are sane." - Akira Kurosawa

Offline Dusty

  • 0100
  • ***
  • Posts: 1107
  • Karma: +0/-0
    • View Profile

Re: RPG GUI/Tileset fun

Reply #5 on: May 05, 2010, 05:08:48 am
I haven't forgotten this, I'm just completely stumped on where to take it.

Here's my attempt at fixing the flower issue. I'm not exactly sure what direction to take them without jeopardizing the color.


And here's a house I tried to start, but again, I have no idea where to take it.


edit: Decided to start on more props, so the start of a well:
« Last Edit: May 05, 2010, 06:59:19 am by Dusty »

Offline Jad

  • 0100
  • ***
  • Posts: 1048
  • Karma: +0/-0
    • View Profile

Re: RPG HUD/Tileset fun

Reply #6 on: May 05, 2010, 08:22:35 am
reusing your different rock colors in other rock structures to make them more vivid and not waste the colors is a great idea, do it lots, do it more!
' _ '

Offline Gil

  • 0100
  • ***
  • Posts: 1543
  • Karma: +1/-0
  • Too square to be hip
    • http://pixeljoint.com/p/475.htm
    • View Profile
    • My Portfolio

Re: RPG HUD/Tileset fun

Reply #7 on: May 05, 2010, 07:00:22 pm
A million years ago, Miascugh made a monochrome tile for a game that is still sort of under development. Over time, the old tiles really didn't fit anymore, so I recolored/edited most of them.

This is an example of the stone tiles:


It reminded me of your well. As you can see, I like to introduce the multihue aspect of stone by blending the colors, instead of coloring one brick green and the other blue.

If it were me, both on the well and the stones themselves, I would use all hues for all stones. You want the stone to be green? Use mainly greens, not only green.

Am I making sense?

Offline Reo

  • 0010
  • *
  • Posts: 200
  • Karma: +0/-0
  • aka MechaBarbarian
    • MechaBarbarian
    • http://pixeljoint.com/p/11318.htm
    • View Profile

Re: RPG HUD/Tileset fun

Reply #8 on: May 05, 2010, 07:24:29 pm
Though I must admit I digg the feeling i get from thr rocks now, like in this world there are different colored rocks, and the way that they've all been used to make the well really makes it come together for me, if I make any sense here.

Offline Dusty

  • 0100
  • ***
  • Posts: 1107
  • Karma: +0/-0
    • View Profile

Re: RPG HUD/Tileset fun

Reply #9 on: May 05, 2010, 08:09:34 pm
A million years ago, Miascugh made a monochrome tile for a game that is still sort of under development. Over time, the old tiles really didn't fit anymore, so I recolored/edited most of them.

This is an example of the stone tiles:


It reminded me of your well. As you can see, I like to introduce the multihue aspect of stone by blending the colors, instead of coloring one brick green and the other blue.

If it were me, both on the well and the stones themselves, I would use all hues for all stones. You want the stone to be green? Use mainly greens, not only green.

Am I making sense?
I'll admit I'm not very good with colors and such. Do you mean simply interchanging hues as shades instead of limiting them per-brick use? I can see that working with the well, but I'm not exactly sure how that would apply to the rocks. The rocks could possibly use some more drastic hue-shifting?

I'm not against playing with the colors, though. I want some variety of not only shapes but colors, but I think that can be achieved more subtly than the method I'm using right now. I'm definitely play around and see what I can achieve, though like I said, I'm not amazing with colors.

Figured I'd throw in this WIP as well since it's one of the rare times I have enough copies of my back-ups to make one. I'll admit it isn't as thorough as most WIP I see floating around are, but I think it could still prove useful for those interested.


edit: Okay, I threw this together sort of quickly to see if you meant something like this:

I didn't want to jump in and do anything drastic without knowing if you meant this.
« Last Edit: May 05, 2010, 09:24:31 pm by Dusty »

Offline Mathias

  • 0100
  • ***
  • Posts: 1797
  • Karma: +2/-0
  • Goodbye.
    • http://pixeljoint.com/p/9542.htm
    • View Profile

Re: RPG HUD/Tileset fun

Reply #10 on: May 05, 2010, 10:51:30 pm
New well version is cool. More organic/natural now. Color dissemination is good.

*edit   Gil will be along shortly to disagree with me.
« Last Edit: May 06, 2010, 12:37:05 am by Mathias »

Offline Jad

  • 0100
  • ***
  • Posts: 1048
  • Karma: +0/-0
    • View Profile

Re: RPG HUD/Tileset fun

Reply #11 on: May 06, 2010, 07:58:34 am
Mathias, you are paranoid. But I like it when you guys disagree. It's turning into a trademark of sorts. Err. No, my wording is craps

Dusty, a way to blend between rock colors might be to dither slightly. I know that your current style is very non-dithery, but dithering between colors of the same value and saturation but different hue might give satisfying results.

Man, I love extremely-low-contrast dithering * 3 *
' _ '

Offline Lizzrd

  • 0010
  • *
  • Posts: 273
  • Karma: +0/-0
    • View Profile

Re: RPG HUD/Tileset fun

Reply #12 on: May 06, 2010, 12:01:25 pm
New well looks swell :3

And jad, I believe the word you are looking for is gimmick.
Photocopier: the fact that arne can also code so well
Photocopier: is horrificly unfair

Offline Gil

  • 0100
  • ***
  • Posts: 1543
  • Karma: +1/-0
  • Too square to be hip
    • http://pixeljoint.com/p/475.htm
    • View Profile
    • My Portfolio

Re: RPG HUD/Tileset fun

Reply #13 on: May 06, 2010, 02:58:05 pm
New well version is cool. More organic/natural now. Color dissemination is good.

*edit   Gil will be along shortly to disagree with me.

No, I think I'll agree here. It's looking better now. I had a go with the regular rocks, but the hues don't really mix that well without the whole thing looking like paint was thrown around. When level designing (or making a mockup or whatever), be careful not to throw all sorts of different colored rocks together. Try to cluster them a bit per color.

I'm really liking this project btw, good AAing on everything. Remember that big grassy fields tend to look bad in any game. That's not because your grass tile fails (it's beautiful), but because it looks unreal to have that much grass. Try studying the amount of grass tiles used in the great games and you'll notice they break it up with lots of dirt patches, trees, etc. You don't want the grass to overpower everything else.