Constructing a tile from 4 pieces - to create single entity of adjacent letters in a word game

Question

I work an a Scrabble-like word game for Android, where yellow translucent letter tiles are placed on a white game board:

I don't want to to use boring rectangle tiles - and at the same time can not make my game too complicated... so I have come up with the following graphical assets (created with InkScape, exported to bitmap and then split in 4 pieces with ImageMagick):

As you can see above, there are round.svg and square.svg and I split them in 4 pieces:

• round_0.png
• round_1.png
• round_2.png

• round_3.png

• square_0.png

• square_1.png
• square_2.png
• square_3.png

And as you can see in the screenshot of the app, I then use these pieces to seamlessly layout the adjacent letter tiles.

My question is: for round.svg (and shadow.svg) I have just used 2 linear gradients at north-west and south-east corners - and that does not look good.

Does anybody have a good idea for my setup, how to better design the round.svg?

Answer 1

How are you building the app? I'm not as familiar with Android, but in iOS I'd probably consider building this with Phonegap and simply using CSS for everything. With CSS, all I'd need is the DIV. I can then style it with the gradient, color, rounded corners and drop shadow. No need to chop and dice images.

I imagine you can do the same with the UI tools within whatever particular coding framework you are using.

Bottom line, don't use images, you should be able to render these in code.

UPDATE:

OK, I think I get what you are doing now.

That said, my answer still stands, I think you'd ultimately have an easier time handling this in code vs. hard assets.

That said, I think what you need to do get the 3-D effect you want is to not use a gradient, but as Takkat points out, a highlight along the contiguous top and left edge of the grouped tiles and a shadow line on the contiguous right and bottom edge of the grouped tiles.

This means you will likely need more tiles.

For example:

• square0 = top highlight (for groups of more than one row)
• square1 = left highlight (for groups of more than one column)
• square2 = bottom shadow (for groups of more than one row)
• square3 = right shadow (for groups of more than one column)
• square4 = top highlight, bottom shadow (for groups of one row)
• square5 = left highlight, right shadow (for groups of one column)

Even after all of that, though, you'll still have issues where you have inside corners. Ideally, you'd also then have a set of squares with just corner highlights and shadows to accommodate all the inside corner combinations: top left highlight, bottom right shadow, top right shadow-to-highlight transition, bottom left shadow-to-highlight transition, then the combinations (top left and bottom right, bottom left and upper right)

At this point, I'd say things are getting messy and I'd suggest one of two options:

• see if you can do this with code logic instead
• rethink the aesthetic and perhaps go with a flat-design rather than 3-D to save you the headache of all these separate graphics.

Answer 2

To add a simple bevel effect to a flat shape we can add light and dark reflections at the (rounded border) by drawing a white and a black transparent line:

Then we apply a blur effect to this line to make it smoother to obtain the following icon (may be cut to desired pieces):

Note that we then did not apply a gradient to the object fill.