Label Textures (Graphics)

[andreasb242]

The Labels of the Settler UI Should be resizable, because different dimensions are needed for the UI. The original game only has 3 type of labels, so we should create similar looking but "scalable" images.

The graphics should be split up into different parts:

• Background, which is repeatable (I used some free stone Texture, stretched it, and applied some speed filter)
• Some half transparent foreground image, which colorize the background a little bit, this image is scretched, so the complete image does not look repeated
• The images for the border, has to half transparent and should be splitted up into corners, horizontal and vertical lines

Or if there a better / easier solution: tell me.

@abledbody Something for you? ;-)

[abledbody]

Is there a way I can get ahold of the original textures for the buttons and backgrounds, ect? Making them repeatable should be trivial.

[michaelzangl]

We can access them but the main problem is a license issue: We do not want to pack any original files with our game.

I like the idea of creating our own stone background. Doing this should not be too hard and we can reuse it easier. I could also think of some marble texture for the background. We can also update the color scheme to be a bit more modern, make the button corners a bit round, make buttons have a different color than the background and so on.

This would be great for Android as well. Android uses 9-Patch images. Writing a library that let's you use 9-patch images in swing is not difficult.

[andreasb242]

OK, Michal was faster...

I think this is not allowed, because if we do this, we have to distribute images which are based on original one, this is may a license problem.

So you have to create new images, I have choosen some stone texture as base. Here the ticket: #268 here you can see the label on the Original settler background (not scaleable): https://cloud.githubusercontent.com/assets/822958/12153599/f7991ea4-b4ba-11e5-91aa-9265f800013a.png

Here my scaleable version: https://cloud.githubusercontent.com/assets/6422616/12525261/6525b4e6-c163-11e5-8b65-bf8a93561c19.png

All the textures I used are created by me, so there is no licensing issue, e.g. Fist the Stone pattern (I made it repeatable with GIMP): https://github.com/andreasb242/settlers-remake/blob/new_swing_gui_stephan/jsettlers.main.swing/src/jsettlers/lookandfeel/ui/img/test-pattern-bg.jpg And I add the license information to all images, so I know what I did ;-) https://github.com/andreasb242/settlers-remake/blob/new_swing_gui_stephan/jsettlers.main.swing/src/jsettlers/lookandfeel/ui/img/test-pattern-bg.txt Original Image: https://www.flickr.com/photos/shaireproductions/3596320988

And then I put this image on top of it (Multiply it with the B&W Stone): https://github.com/andreasb242/settlers-remake/blob/new_swing_gui_stephan/jsettlers.main.swing/src/jsettlers/lookandfeel/ui/img/stone-background-colors.jpg

I would do something like this with the buttons...

e.g. use something like this as base: http://bgfons.com/download/4048 (Didn't look like I would like it ;-))

[abledbody]

I have made the following: Do with it what you will. The only stipulation about the texture I've used is that it must not be distributed as anything other than part of the game. Next up: Buttons...

EDIT: Oh, just realized, you were gonna stretch the shading, hold up...

[abledbody]

Alright, so, I did a few things.

↓ High quality texture, just used a black and white version of the original. ↓ https://cloud.githubusercontent.com/assets/15258765/14229874/f70258ea-f8f6-11e5-8717-e18e9030704e.png

↓ Modified Background flourish, to match the original colors better. ↓ https://cloud.githubusercontent.com/assets/15258765/14229877/f78ae67e-f8f6-11e5-8e73-3913d5486e94.png

↓ Brightened version of that, just in case the texture makes it too dark. ↓ https://cloud.githubusercontent.com/assets/15258765/14229875/f7330076-f8f6-11e5-9324-01ad6938ba99.png

↓ Heavily modified texture. Can't remember why I decided to do this. ↓ https://cloud.githubusercontent.com/assets/15258765/14229876/f763bfe0-f8f6-11e5-848d-b8b07ac1b7e6.png

[andreasb242]

Ok, thank you, I will try how it looks. Can you may also create the button border (3D-Effect?) in a separate image?

[abledbody]

So, this is what I came up with for buttons, but I've taken some precautions just in case. ↓ "Hard Light" overlay. Use this only if you can replicate the Hard Light shader. ↓

↓ Soft transparency. If you can't do that, just use this as a normal image to go over the background. ↓

↓ Hard transparency. If you need it to have solid transparency this is the alternative. ↓

Since I'm not quite familiar with the buttonizing process I leave it to you to figure out how you want to get this tiled.

[abledbody]

Oh, and I wasn't quite happy with how the background texture looked all put together, and I realized why. Here's a more contrastive version, hopefully it looks better. https://cloud.githubusercontent.com/assets/15258765/14241135/c78e4f3e-f9fe-11e5-97d9-8c373213b404.png

I also changed the scale to what I think is the appropriate size.