AuthorTopic: Sprites and tiles and UI bits, oh my!  (Read 14361 times)

Offline cels

  • 0010
  • *
  • Posts: 380
  • Karma: +1/-0
    • http://pixeljoint.com/p/32715.htm
    • View Profile

Re: Sprites and tiles and UI bits, oh my!

Reply #10 on: April 20, 2021, 09:46:58 am
Huh, I guess different programs have different ways of displaying hue. Grafx2 and MS Paint come up with different values for your hues. However, they both display the exact same hue for your three darkest greens.

It's definitely a big improvement from the original. Looking back at SeinRuhe's edit, I think he really did a great job with contrast. Moving forward, what area do you need the most feedback on? I'm not sure if all the tiles and items represent your latest work and I don't want to spend time editing something you're already planning on changing.   :)

Offline eliddell

  • 0001
  • *
  • Posts: 52
  • Karma: +0/-0
    • View Profile

Re: Sprites and tiles and UI bits, oh my!

Reply #11 on: April 20, 2021, 01:32:43 pm
(I've been working on code-related rather than art-related stuff for the past couple of days with respect to this project, so nothing to show yet.)

Several of the items are going to need to be redone to account for the shift in light source.  The wands (second row), amulets (third row), and most of the weapons (fifth row) other than the rock and the bone club that needs to be redone from scratch are fair game for crit in their current forms.

The tiles are a bit complicated, because a lot of them are not meant to be shown on their own, but stacked one on top of the other—frex, take the first tile in the second row, stack the first tile in the seventh row on top of that, and then the second tile of the third row on top of *that*, and you've got a hole full of water.  Omit the topmost tile in the stack, and you have a dry ditch.  Replace it with the second tile from the fifth row, and you have a ditch full of lava.  The engine also does some recombining of quarter- and half-tiles to make things fit together smoothly.

The truth is that most of the tiles aren't the greatest.  The dirt tile was a reject from a different project and consists of brown pixel noise, and I need to break up some of the darker clusters near the top.  I've never been able to draw a water tile I liked, so I went as simple as possible here in order to get something that at least wouldn't result in violent revulsion.  The lava tiles are duplicates of the water tiles, which is a bad idea for gameplay reasons (a colourblind player might not be able to tell them apart).  The ice tiles (that's the fourth row) are just lazy.  The floor tiles have the same problem as the water—I just cannot get one that I like.

The only ones I'm okay with are the wall, stair, and ditch tiles, and I'm aware that those are grainy, but I don't think it's worth the effort to re-work them again (other than fixing the light source thing) and then having to fix the edges and quarter-tiles until everything joins smoothly again.

So if anyone has any advice on those damnable floor tiles, it would be appreciated.  :'(
If anything I've said here has been useful to you, please pay it forward by critting someone else.

Offline fskn

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

Re: Sprites and tiles and UI bits, oh my!

Reply #12 on: April 20, 2021, 03:09:24 pm
I have next to zero experience on doing this kind of thing, buuut... I think your wall tiles look too overly detailed when compared to the floor tiles. The top ones don't seem to be lit properly, and they really look like someone piled up some rocks there. They don't look like cave walls, if you were going for that.
The bottom ones where the rocks seem to fade into the shadow do look nice. Perhaps because they look more regular, not so much like blobs.
Not that those should be regular too, but the way you've done them, I can't feel the form.

As for your lava tiles, I would suggest adding bubbles, as if it were a big bowl of thick soup. But I don't know if that's too cartoony. Maybe.

And I mean, you could always look at some reference for all of that. Both in terms of photographs of caves and such, and of tiles from similar games that you like. And tutorials such as those by saint11, slynyrd or sadface_rl.

https://saint11.org/blog/pixel-art-tutorials/
https://www.slynyrd.com/blog
https://www.deviantart.com/sadfacerl/gallery/66636178/tutorials
« Last Edit: April 20, 2021, 04:04:30 pm by fskn »

Offline cels

  • 0010
  • *
  • Posts: 380
  • Karma: +1/-0
    • http://pixeljoint.com/p/32715.htm
    • View Profile

Re: Sprites and tiles and UI bits, oh my!

Reply #13 on: April 21, 2021, 08:59:25 am
Hi, I'm cels and I have no idea what I'm doing.

Trying to increase readability, reduce noise, create larger chunks and shapes.

I think one potential issue is that if you have too few pixels (e.g. 24x24 canvas) to imitate a large item, like a spear or a staff, then there's really no way to make it visually interesting. It just ends up as being 2-3 diagonal lines of different colours. So I think one key problem is to figure out how to make items visually interesting by either increasing canvas size, creating more elaborate designs or something like that. I think you have to go out of your way to make the items more visually appealing. Instead of showing a top down view of a square amulet with squares on it (which... is a bunch of squares), I think it's better to make it a 3D shape with cracks and gems or something. Find a way to pimp it, basically. That's what I would do, if I was a professional. Which I'm not.  :-[

Offline fskn

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

Re: Sprites and tiles and UI bits, oh my!

Reply #14 on: April 21, 2021, 01:29:27 pm
cels, you're doing a top notch job. *chef's kiss*

Looks like eliddell is using a 32x32 px grid:



But I don't know how much of a margin he needs between items, if any at all. How much depends on where the items are going to show up, how they're going to be displayed. If he doesn't need margins, then there's a bit more room for larger items.

In some cases he may not need to show them fully, though. For something like a spear you may only need to show the tip, really.

Like:


Or something else representative of that object.
Swords, on the other hand... D:
« Last Edit: April 21, 2021, 01:37:20 pm by fskn »

Offline SeinRuhe

  • 0001
  • *
  • Posts: 84
  • Karma: +0/-0
    • @SeinRuhe
    • http://pixeljoint.com/p/127850.htm
    • View Profile

Re: Sprites and tiles and UI bits, oh my!

Reply #15 on: April 22, 2021, 04:50:32 am
Finally I have time to read the forums!

Listen to Fskn and Cels with the items, those are really valuable tips, the only thing I may have to add is to draw the items in perspective when they are too big or when you want to give them extra interest! A sword may be too big for your 32*32 size unless you spit(n) it and make it fit  :-* (Aaaaand that came up way too nasty and it's not representative of who I am)

Now... Tiles! For what I see the main aspect to improve is noise, although I get why you use it. Stone, dirt and other textures we find in natural environments tend to have lots and lots of small details, which may be seen as noise, the idea here is to resemble that noise without killing any parents, so no orphans which mean no Batman on this forum.

A good way to replace that noise with clusters (Besides the obvious one, grouping pixels) is to shift the hue of a color while trying to maintain the value, so they kinda blend but not entirely, this can make subtle textures that will read as dirt, wood, etc.

Also, when it comes to dirt, is better to have lots of tiles to avoid pattern recognition from the player's part.

Namely, texture on A is easier on the eyes than B. The example I'm posting is not exactly tiled but you get the idea, shift hue a little, value a little, make clusters not batmans, a little shading here and there, some random cute clusters to emulate noise, and that's it! Bear in mind that the example is far, far, far away from finished, sadly I don't have time for more due work :ouch:



Hope this helps and again, eager to see the progress of your project!

PD: Start using imgur to host your images, it's pretty good.
« Last Edit: April 22, 2021, 05:38:27 am by SeinRuhe »

Offline cels

  • 0010
  • *
  • Posts: 380
  • Karma: +1/-0
    • http://pixeljoint.com/p/32715.htm
    • View Profile

Re: Sprites and tiles and UI bits, oh my!

Reply #16 on: April 22, 2021, 07:31:26 pm
(Aaaaand that came up way too nasty and it's not representative of who I am)

Indeed? The NSFW portion of your Pixelation portfolio is suspiciously absent. Or perhaps it was censored by the mods. :-\

Offline eliddell

  • 0001
  • *
  • Posts: 52
  • Karma: +0/-0
    • View Profile

Re: Sprites and tiles and UI bits, oh my!

Reply #17 on: April 23, 2021, 01:53:12 am
Finally caught up with myself again.  First, some rear and side goblin views:



I'm not sure whether the side view with the flexed legs (matches the front view better, but not really the rear one) or the side view with the straight legs (probably makes more visual sense) is the better one to go with.  I'm not thrilled with the legs of the rear view, either.

Items:  yes, these are 32x32 (same size as the tiles), no margins required.  These are representations for viewing on the map, to indicate "there's a rusty knife on this square" (or whatever)—the items menu has a space reserved for larger pictures, but I'm not looking at those again until I have the items menu coded.  I don't intend to make armour/helms/shields visible on the sprite or in animations for version 1.0, and I'm undecided about how to handle weapons during the attack animations.  The cop-out would be to use an early-Final-Fantasy-style "shake the weapon in the direction of the enemy" animation and sub a weapon sprite in, but realistically there should be different animations for stabby and cutting/bashing weapons.

I'm not sure about using only parts of the items.  I don't think it's quite the right thing to do here.  I'm aware that this is going to mean that some items aren't quite to scale (but then some of them would be nearly invisible if I drew them to scale, so . . .)

The format of the amulets was a (likely bad) worldbuilding thing.  The goblins are still stone-age and have almost no access to wood (only small quantities of driftwood), so most of the items they have are made of rock or bone.  Hence, simple bone amulets, with carved surface grooves filled with earth pigments.  However, 1. the goblins could easily have access to clay (and do have fire), making crude ceramic objects possible, and 2. some of the amulets could have been dropped by human adventurers.  So I hadn't thought that through as thoroughly as I maybe should have.

cels, I like your axe and knife with the "very bone" handles.  They convey the materials better even if they're not strictly realistic (judging from all the time I spent staring at stone knives courtesy of Google Image Search, although I think a lot of those were actually antler handles).  I'll see what I can do with that idea at some point.

fskn, thanks for the tut links!  There's some there that I haven't seen before.

Okay, now back to the dirt tiles.

The truth is, back before XMas, I was already struggling with the damned dirt tiles (although this wasn't the project they were intended for).  Among other things, I looked at a whole bunch of dirt tiles from commercial games (granted, mostly older ones).  Nearly all of them consisted of pixel noise.  Those that didn't, tended to be a single solid colour.  The best I was able to come up with was this, which I located today in a file containing a mixture of stuff-I-didn't-use:



Tile + variation loosely based on a tile from one of the SNES-era Breath of Fire games.  Anyway, definitely not pixel noise, but it didn't work with the grass tiles I was also working on at the time, so I shelved it.  Now I'm trying to figure out how to create useful transitional tiles from this.

And finally, image hosts.  I don't use imgur because I not-infrequently run into situations where something hosted there just won't display for me.  For instance, in the currently running "Barbarian sprite with NES specs [C+C]" thread on this board, I can't see the image in the opening post (or any other pics except the one in cels' most recent post).  I don't know whether imgur hates Pale Moon, or Linux, or my ISP, or my high-security no-Javascript-or-cookies-unless-specifically-permitted setup, or what, but there's obviously  something not quite right.  Postimages is obnoxious in a number of ways, but I've never seen them completely flake out that way.
If anything I've said here has been useful to you, please pay it forward by critting someone else.

Offline SeinRuhe

  • 0001
  • *
  • Posts: 84
  • Karma: +0/-0
    • @SeinRuhe
    • http://pixeljoint.com/p/127850.htm
    • View Profile

Re: Sprites and tiles and UI bits, oh my!

Reply #18 on: April 23, 2021, 03:40:20 am
Quote
I looked at a whole bunch of dirt tiles from commercial games (granted, mostly older ones).  Nearly all of them consisted of pixel noise.  Those that didn't, tended to be a single solid colour.

Be especially careful when doing this, the graphics for your game strikes as current, not old style. Referencing nostalgia is really important but it's better to look at contemporary pieces to develop graphics, looking backwards not considering 20 to 30 years of common knowledge growth on pixel art may not be the best dirt path to take :blind:

Regarding the Goblin, seems like the new side view struggles more than the first one ??? You are taking into account the centre of balance but not masses and poses, what makes it seems like he's going for a doodoo is the position of the spine and head, a way to fix this is to have a clear picture of the pose in your mind and add a little tilt to side poses, so it's a 3/4 instead of a full side view, this only for the standing frames, when walking you can go full side view since there's movement.

I don't think I have the time to do an edit on your piece this time so I'll add a really quick sketch of a rotation for my render of your character for you to check. The very best advice I could give you is to work on a software that has layers or a timeline, in that way you can switch layers or frames to see the rotation and possible inconsistencies in volume and positions (Onion skin is not that useful when doing this rotations).

« Last Edit: April 23, 2021, 03:43:36 am by SeinRuhe »

Offline fskn

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

Re: Sprites and tiles and UI bits, oh my!

Reply #19 on: April 23, 2021, 12:00:07 pm
Items:  yes, these are 32x32 (same size as the tiles), no margins required.  These are representations for viewing on the map, to indicate "there's a rusty knife on this square" (or whatever)—the items menu has a space reserved for larger pictures, but I'm not looking at those again until I have the items menu coded.  I don't intend to make armour/helms/shields visible on the sprite or in animations for version 1.0, and I'm undecided about how to handle weapons during the attack animations.  The cop-out would be to use an early-Final-Fantasy-style "shake the weapon in the direction of the enemy" animation and sub a weapon sprite in, but realistically there should be different animations for stabby and cutting/bashing weapons.

I'm not sure about using only parts of the items.  I don't think it's quite the right thing to do here.  I'm aware that this is going to mean that some items aren't quite to scale (but then some of them would be nearly invisible if I drew them to scale, so . . .)

Them being out of scale isn't really a problem. The important part is that they must be readable. In which case, and if you want them to be items on the map, you could simplify them to the point where they're basically just silhouettes.

I'm thinking of something like the Legend of Zelda Breath of the Wild interactive map, and iconography for that game in general (UI-conography? :ž)
https://interfaceingame.com/wp-content/uploads/the-legend-of-zelda-breath-of-the-wild/the-legend-of-zelda-breath-of-the-wild-map.jpg
https://interfaceingame.com/wp-content/uploads/the-legend-of-zelda-breath-of-the-wild/the-legend-of-zelda-breath-of-the-wild-bow-zoom.jpg

They do use fully rendered depictions of those items too, though, when they want to be more specific:
https://interfaceingame.com/wp-content/uploads/the-legend-of-zelda-breath-of-the-wild/the-legend-of-zelda-breath-of-the-wild-buy-items.jpg
https://interfaceingame.com/wp-content/uploads/the-legend-of-zelda-breath-of-the-wild/the-legend-of-zelda-breath-of-the-wild-food.jpg

Old-ish maps also have single color icons to represent what's in a certain spot.
TSR used to do this for D&D too, back in the day.
https://i.pinimg.com/originals/6f/5c/27/6f5c278de97b3703cb3ffc561c2e32da.png
(BIG image warning: 3565 x 2894 px, 4.29 MB)

But I think it would be wiser to design the screens completely in Photoshop or whichever graphic program you're using so that you can first have a good overall look of the whole thing, and also so that you can change things quickly. Then design icons that would fit that layout.
(I'm assuming you're doing the other way around, designing icons first.)

---

EDIT:

Changed the squatting goblin to what I think would look more in line with the front and back facing sides.





Changed the posture, made the nape not too low, longer head, changed the position of the feet, shape of the arms... smaller nose, gave him more of a muzzle... Tried to make his feet look like they're pointing outward not straight forward...
« Last Edit: April 23, 2021, 01:15:06 pm by fskn »