Lights Off Tiles
2009.05.23 in code, gnome, and summer of code
Today more or less officially starts coding for GSoC; however, I'm leaving for Barcelona (for UDS) at 10AM. To offset the fact that I'm going to be missing for the first week, I started hacking on the clutter-0.9/modern-seed version of Lights Off. You can check it out [Ed.: merged into gnome-games Git] if you want, you'll need a recent version of Seed and a patched Clutter (the patch is in the Seed repo, under /patches). I'd suggest you wait, though, because all of the shiny (animations and such) is currently broken (looooong airplane flight tomorrow, we'll see what happens!).
Anyway; the Lights Off tiles from the video are from six months ago, and were made in a matter of minutes in Inkscape, designed to look as much like the physical copy of the game as I could achieve (I am not an artist). Robb has since been trying to convince me to try again, suggesting that they might not be the most Gnome-y tiles in the world. I decided to grab the nicer, Tango-colored tiles I made for my Seed port of Same Gnome, create a black tile, and see how that looked (redesigning most of the rest of the somewhat-minimal UI in the process)...
In any case, I'm not sure what to use! I'm pretty sure I'm going to have a few swappable themes, but I don't know what to use as the default... or even if either of these were the best we can do. In the meantime, I figured I'd let you guys vote between the two, and if you have any ideas for improvement (or, even better, SVGs!), send me a note!
Newer style is on the left, the originals (from January) are on the right. Click away (your last vote is the one that counts, and voting is immediate when you click the link)!
[Ed.: voting is closed]
Comments (legacy)
tretle
left :D
You really shouldn't open "Taste" to a vote, most people haven't got any.
Style and design should be picked by people who have an eye for it, rather than people who want everything to be "ooooh shiny"
anon
Maybe something in between. The one to the right is definitely too shiny for gnome. Well, maybe it is not too shiny, but the shinyness just seems wrong.
Mike
Have you considered trying the "off" black tiles of the left type with the "on" light tiles of the right type? The right side just feels too busy at the moment, but perhaps if the dark tiles were fully black it would help you more easily distinguish between the states, and so work better?
If you were able to have the main color of your theme used for the tiles, then I think that would be perfect integration. For instance, the tiles would be brown on an Ubuntu box with the human theme, green on a Foresight box with the green Foresight theme, and so on.
left, the white gloss is too white and makes you looking at the bottom half of the box to know with state it has.
Christopher
You seem to be auto-redirecting from the vote to the HTTP Referer. Which breaks horribly if there's no referrer sent (such as me clicking it from Google Reader over SSL).
Definitely left. And have fun at UDS ;)
Adil & Yoan & anon: For some reason, the 'dark' tiles are much shinier in this picture than they are in the video or in the actual program; still, I agree, the shiny definitely doesn't fit in :-)
Karl: I don't know any of those people! haha
Mike: I might have to try that! (I like the dark tiles from the left one the most out of all the things I've tried so far...)
Alexandre: I might try to hack something like that up while stuck in JFK for 5 hours today, but it sounds like a great idea (assuming, of course, that brown tiles look even remotely reasonable). At least for LO. Won't work for Same, where you need a bunch of different colored tiles...
Christopher: True. Quick voting scripts, that was a silly mistake. Fixed (hopefully); thanks for figuring it out!
Runa: I promise! It's my first one, and I've always wanted to go to Spain, so this should be an awesome week.
Oliver Charles
Neither. The idea is that there is a light behind the button, right - but neither of these actually show that. I'd vote for something akin to the left screenshot, but using a radial gradient from the middle, to show there is a central light behind the tile. Then some basic light/shadows to convey that this is a 3d button.
And good god, not the right design, whatever you do
I quickly put this ones together, give them a spin ;)
http://dl.getdropbox.com/u/212852/Tiles.tar.gz
jef Spaleta
Avoid glass effects entirely. Glass effects try to hard to pretend the tiles are physical tiles. They aren't. Glass effects as seen on the right just end up looking unphysical in the context of any ambient lighting.
For the right set of tiles where is the light source located relative to tiles to produce the psuedo-optical glass effect that you have tried to simulate? It's not clear, the artistically rendered glass-like effect isn't physical. Physical optical effects which depend on ambient lighting are difficult to do correctly. Unless they are fully and self consistently rendered..there is a wrongness to them. Just avoid them.
If you still want lighting effects you can imagine the tiles as back-lit tiles with a textured or curved glass in front of them. Like traffic signals, or the back lit panels from the older Simon Says game.
Oliver is right on the money in his description of what the buttons look like in handheld Lights Outs games, The handheld Lights Out games I've seen uses this sort of individual back lit button..red lights in semi-translucent plastic blue buttons. Lighting effects rendered entirely from light being emitted from an individual tile will feel far more physical..especially if you consider the tiles sunken into their own pockets and can't interact with light emitted from neighboring tiles.
-jef
Kris Thomsen
Hi Horton,
I gave it a try - 'cause I think that your left-idea is too boring and flat, and the other one is too shiny :)
http://code-geek.baah.dk/inkscape/lightsoff_tiles001.png
Hope you like it.
Kris Thomsen
And I played a bit with the colors, and it works even better now:
http://code-geek.baah.dk/inkscape/lightsoff_tiles002.png
Kris Thomsen
Sorry again, I couldn't resist to try to make my idea better:
http://code-geek.baah.dk/inkscape/lightsoff_tiles003.png
Adil
The style on the right is too glossy. If you are able to find a balance between the two, it will make for the perfect style.