Interface improvements for Tetzle

Once I get into a project, I really get into it. I haven’t worked on Tetzle in many years, as I felt it was pretty much done. But I have been noticing things to improve now that I have replaced the graphics rendering.

Firstly, the statusbar is a mess! It has two similar bars with percentages next to them. One of the percentages is for how far through the game you are, and the other is for how zoomed in the play area is. Frankly, you don’t need to see the zoom percentage all the time (and it was very confusing to start a game and see “100%” down in the statusbar). So I removed the label on the zoom slider and made it a tooltip instead.

That was a good start, but I felt it could be better. I decided I would make the zoom slider’s purpose more clear by adding buttons around it for zooming in, zooming out, and zooming to the best fit. And then I realized I could continue to improve the statusbar by changing the game progress bar to include “complete” after the percentage!

While I was at it, I decided to tackle an unrelated but longstanding issue. Many players don’t realize you can scroll the zoomed-in play area by middle-click dragging it. Right click already rotates the pieces, so it seemed like a good compromise. Sadly, it is not very discoverable. Plus, most games use right-click drag instead of middle-click drag, so even if users thought about dragging the play area they would probably try the wrong mouse button.

I tried adding scrollbars, but those didn’t feel very “gamelike”. And if you wanted to move to the left, you had to move your mouse to the bottom and drag a scrollbar instead of just… moving your mouse to the left. They also made me feel very limited while playing, like the play area wouldn’t expand even though it does.

After some thought, I came up with a solution I am quite happy with: I added edge scrolling! It is very handy while playing, and I don’t think it is very intrusive. It is very intuitive to just mouse to the side and have the play area scroll in that direction. I even added the ability to increase the speed of the edge scrolling if you click on the edge while it is active. This doesn’t replace middle-click dragging, of course, but it is a very nice alternative.

Without further ado, here is the new Tetzle: