Requesting Radio Buttons

[fabi]

I have recently implemented support for radio buttons.
We use currently the images for the checkbox buttons,
but images in the same style and size but round would be much nicer.

Regards, Fabi

[dipseydoodle]

How's this for now? I can make it transparent.

Edit: subsituted that one for this-

[Crow_T]

Here's my attempt

radio.png (660 Bytes) Viewed 5812 times

Here is a quick mockup of a selected button It is from rhyging5's flames, but only about half the frames.

radio.gif (1.88 KiB) Viewed 5809 times

...or we can just do an X

The flames may be a bit excessive, but maybe a glow or something would be nice.

[doofus-01]

For some images, I think layered "source files" make sense[*]. While you could back-engineer these buttons from PNGs, even non-PA images, it would make updating or expanding the set significantly easier if the original layered images were readily available. I'm attaching some files for an example of what I mean, though I don't think they are commit-worthy.

radiobutton-active.png (702 Bytes) Viewed 5801 times

radiobutton-pressed.png (754 Bytes) Viewed 5801 times

radiobutton.png (622 Bytes) Viewed 5801 times

radiobutton.xcf

(3.3 KiB) Downloaded 452 times

I should say that I don't think you need to go to any of the efforts I mentioned above to get your radio buttons, but going forward, it would lower the barrier for other Wesnoth GUI projects.
On a similar note: how many of those button images can be replaced by some image-path function? Blitting would make the layered thing quite relevant.

[*] - It doesn't make any sense for a portrait or landscape, or even a sprite, but these GUI things are different.

[LordBob]

Here's my own attempt. It doesn't feel as clean as the original checkbox, though: pixel art really isn't my forte.

@Doofus: I'm not sure what you mean by "layered sourcefiles". If need be I can provide either the full .psd archive for someone else to modify, or any number of .png layers each corresponding to a part of the button, which can then be arranged and modified independantly. Whichever works best.

[artisticdude]

And here's my go.Standard, enabled (mouse hover), pressed, and disabled variations, for both the unchecked and checked variations, all at 20x20 pixels. I figured the checked and unchecked versions would probably share the same 'pressed' image (?), but I could add a separate one for the checked variation if it's necessary.

EDIT: See my post below for an updated version.

[Crow_T]

Here is an active and hover. I can do a fade in/out animation if it is wanted. I think even a <5 frame animation could look pretty decent. Or I can add an X.

[Iris]

Here is an active and hover. I can do a fade in/out animation if it is wanted. I think even a <5 frame animation could look pretty decent. Or I can add an X.

State transition animations could be trivially done on the engine side without any additional art if we wanted.

The only question is, why did you break consistency with the overall Wesnoth GUI color scheme and style?

[Crow_T]

The only question is, why did you break consistency with the overall Wesnoth GUI color scheme and style?

The base icon is picked directly from the current checkbox- I was just exploring some variations and having some fun. The new maps look slick, why not some other tweaks? As I've mentioned I can easily stick an X in there.

[Iris]

The new maps look slick, why not some other tweaks?

If one GUI element’s color scheme changes, all the other elements would need to be changed as well for consistency. Either way, I would not use red for the Wesnoth GUI, but this is ultimately a thing that should be decided by our art team, not me.

[artisticdude]

Here's a new version of my attempt, with a radiobutton-checked-pressed variation, since I've done a little more research I've come to the conclusion that the checked and unchecked variations ideally shouldn't be sharing the same image for the 'pressed' state. Also fixed a few niggles with the shape and shading in places.

[vultraz]

I support using LordBob's, and if not, artisticdude's. But LordBob's ones are really elegant.

[fabi]

Okay, I have already commited Lord Bob's version but I do not claim to have the final word on the issue.

Some art guru will have to give the final blessing.

Artisticdude came up with 8 variants of the buttons, the engine currently supports only 7:

• Normal -- Not pressed and no mouse pointer hovering above it.
• Pressed -- Pressed and no mouse pointer hovering above it.
• Active -- Not pressed but mouse pointer hovering above it.
• Active-Pressed -- Pressed and mouse pointer hovering above it.
• Touched -- The button is clicked but the user did not release the mouse button yet.
• Disabled -- Button is disabled and not pressed
• Pressed Disabled -- Button is disabled and pressed

Note that the "Touched" state is fresh implemented, I am sorry to have forgotten to tell you about it.
The states correspond to how QT and GTK+ work, you can see the check mark being transparent if you test with firefox or gimp for example.

Thus I need another image for Lord Bob's set if it will stay the chosen one.

Vultraz already provided me with a touched version of the checkbox images.
If another touched image is created it needs either to be in the same style as Vultraz's one or come in pair with a new touched checkbox one.

This is Vultraz's version of the touched checkbox.

checkbox-touched.png (852 Bytes) Viewed 5481 times

edit:
Thanks to all the artists who participated with their works in this thread.

[LordBob]

Here's a "touched" version for the radio button. I went for a flashy blue, but maybe it's not different enough from the active-pressed. So if you'd rather I changed it, don't hesitate to ask: it's really easy to modify.

[vultraz]

LordBob, you should really do more pixel art. This is Jetrel-quality stuff you've been making