I have been working on a Dice game for the Windows Phone and had to figure a way to let the user change the value of the dice. I had considered using a slider, but the size of the slider made it a bit finicky to change the dice and the process was a bit unnatural. My eventual solution was to place an invisble button over the left side of the dice and another invisible button over the right side. Pressing the left side of the dice decremented the value of the dice and pressing the right side incremented the value. At the limits, the value looped to the other limit.
The next step is to add some animation so that the dice flips as the buttons are pushed. Unless I use the playing card model, I am going to have a hard time changing the face of the dice. Currently, the dice control has six images with only one visible. The playing card model means that only one side of the card is visible at any time. So I can rotate the current dice face so that only the edge shows, change the dice face and then continue the rotation until the new face is fully visible.
Actually trying to model a real dice means that the width of the dice changes as the image grows from the width of a dice face to the diagonal when two faces are visible. It may be possible to keep the image the same size and the effect may not be noticeable as the transition happens. To get around the issue of not easily making two sides visible at the same time, the new side that is about to appear can be blank and the current face side can fade out. At the half way point the old face should be faded out, the dice face changed and then the new dice fades in as the rotation continues.
Of course, as my friend Peter always says, stop playing around and get it out the door. There is always version 2.
John Marshall… Visio MVP Visio.MVPs.org
2 thoughts on “WP7 Flipping Dice”
The invisible buttons are cool and they work! But another nice UX might be to incorporate rotations. Even cooler would be to let people select (via some Settings dlg) which they prefer to use. But the spinner would let the user finger flick up or right and have the die rotate around and show the other sides. Just a thought maybe for ver 2.0.
If you try the CBC app on the WP7, you’ll see the buttons and the finger flicking in action (I much prefer the flicking myself and I wish they would turf the buttons altogether in favour of the flicks).
Comments are closed.