next »

[denzgd]

Hello, friends!

I am inching closer and closer to a playable build of the game I'm working on, but I feel like the puzzle tiles still need something to really make them POP! The Red, Blue, Green, Yellow, and Black tiles all have the same function, and are the most basic tile type that appears in the game. The White/Pink tiles flip over at various points in the game, and are two sides of the same tile; the Purple/Cyan tiles are the same way, but groups total:

 - Red, Blue, Green, Yellow, Black
 - Orange
 - Cyan/Purple
 - White/Pink

I'm fairly satisfied with the symbols, and deliberately made them large and unique so that they could be differentiated at a glance - particularly for colorblind players. But I want the tiles to also clearly communicate that each tile group has a different function, and help unify tiles which fall into a particular group. Right now, they all look too similar to me. What all can I do to fix this?

Any suggestions or input are greatly appreciated!

[Pineapple]

I played with it a bit and came up with this

[denzgd]

I played with it a bit and came up with this

I really, really like the idea behind the pink/white tiles, actually. But the bold outlines are part of the game's visual style, so I'm not so sure about the pseudo-flat look. I also like the rounder look to the icons.

I also didn't realize how terrible my original pic looked, with the dark BG; looked fine on my monitor, but on my phone, everything looks too dark.

[Zorg]

The outline idea from Pineapple is pretty clever, imo.

I guess you should use the same color combination for both sides of the flipable tiles. You could use white/black and red/white for those special tiles. The normal tiles have white symbols (on RGBCMY) so a third type of tiles could have black symbols (on orange, violet?).



P.S.: What does the symbol on the red tile mean? Bird?

[denzgd]

I guess you should use the same color combination for both sides of the flipable tiles. You could use white/black and red/white for those special tiles. The normal tiles have white symbols (on RGBCMY) so a third type of tiles could have black symbols (on orange, violet?).

My main concern with making the flippable tiles the same color is that they each have entirely different, almost opposite uses. I feel like if I made them the same color, it would be more confusing. The cyan and purple tiles basically act as the trigger mechanism for the flipping, but also a bunch of other specific effects, including the battlefield changing color.

How did you do the shading on your picture, though? It looks much better than how mine turned out. Did you just pick darker colors off the color wheel? I notice the black tile appears to be using kind of a dark blue for shading, rather than a darker gray like in mine.

P.S.: What does the symbol on the red tile mean? Bird?

It means "Peace among worlds"

Jk each of the 5 main symbols represents a faction in the game. That one in particular is supposed to be an abstract hellfire symbol.

[Zorg]

I focused on the groups you mentioned and tried to make each group visible in grayscale. If the symbols have kind of the opposite meaning, inverting the colors would be an option (Pineapple's approach, more exaggerated):



_____________________________________________


What you noticed is called Hue shifting, which makes color ramps interesting. In pixel art, leaves on a tree are often colored with a green main tone, but the highlights tend to shift towards yellow and the shadows towards blue (because of the sun and blue sky). If you would just add white and black, the color ramp will look dull.



The colors i picked are far from perfect, in fact i'm not good at it so don't take the following hints literally!. I was lazy and used the same hue for the highlights as for the midtones, i just added brightness and desaturated the color (move up and to the left in the HSB color model). For the shadows i moved in the opposite direction, less bright and more saturated (move down and to the right), additionally i shifted the hue slider, on the right, towards blue. This is not a general rule! I just picked what looked interesting and did not balance all colors (for cyan i simply forgot to manipulate the hue, for others i shifted too much).

TL;DR google "hue shifting".

[denzgd]

I guess my mastery of colors still needs work. This hue shifting thing is still going over my head, as far as how it's implemented. I get the general idea behind it, but am I just eyeballing it, screwing around with the hue value? Most of the Google results turned up forum posts for me. Here's where I'm at so far:



I messed around with the borders and shading levels, as well as modified the brightness and saturation. I tried the hue shifting on a few of the tiles, but again, I'm not super great at it. Or even competent for that matter.

Was there any design reason behind making the tiles all taller?

[Ramos]

I like the simplistic look of Pineapple version and i also like the high quallity vers from zorg, they both made good versions.

As for colors you might find this of good use, its a online color generator :
https://coolors.co/2f241c-a0ca92-1c120b-75b09c-e0be36

Hope it helps

Good luck

[denzgd]

After all the help, this is where I'm at. It looks pretty coherent to me, at this point. Buuuuut I've been staring at this, and other graphics, for the last like three days. I'm really liking how the purple and cyan tiles look now, compared to before. But I'm not entirely satisfied with the orange tile. I will work on more designs.

Thank you all for the help!

[Zorg]

Was there any design reason behind making the tiles all taller?

Sorry, missed that question. It was just for "eye candy" reasons, to get some offset in depth.

In your last version, the special tiles stick out more, which is good. But despite the yellow pumpkin face the orange tile still matches the other colored tiles more than the black tile. Maybe just change the eye's background to white+any color and the halloween face to white on white+black or yellow+black.

[denzgd]

In your last version, the special tiles stick out more, which is good. But despite the yellow pumpkin face the orange tile still matches the other colored tiles more than the black tile. Maybe just change the eye's background to white+any color and the halloween face to white on white+black or yellow+black.

This is currently what I'm working with. I started with black outline for the face, and white inside, but ended up inverting it at some point. I also added a dotted line, because I was trying to create a kind of "stitching" look to it. At one point I did make one with white eyes and mouth, yellow for the tile, and orange for the border - giving it a kind of candy corn look that I thought looked cool, as well.