@edwardsmale

Silverlight 3D Dice Simulator

A new, improved Silverlight Dice Simulator. This one decorates each face with an image showing the spots (whereas the last version just had white diamonds which looked a bit naff). This uses Silverlight's non-affine matrix projection to map a bitmap onto a rectangular 3D polygon.

If you download the source code, you will find a separate project called 'Silverlight3D'. This enables a basic 3D scene to be created, containing 3D polygons and lines. You could use this to create a simple Doom-style game, with texture-mapped walls etc. I would do this but unfortunately I don't have the time. The simple 3D library is very much a work in progress, so don't expect perfection. But it might give you some ideas and some tools upon which to build.

The 'face content method' option allows you to switch between rendering the die faces using images (PNG's mapped onto the sides of the cube using Matrix3DProjection), or a red square with 1-6 white ellipses (also mapped onto the sides of the cube using Matrix3DProjection). The advantage of the ellipse method is that it allows the sides to be shaded according to the light source position. However the ellipse method is considerably slower.

In Version 3 I have overhauled the source code, to make the dice more configurable, with the option to override the default settings by implementing various interfaces. I'm moving towards fully encapsulating the Dice code to make it more 'pluggable'.

Download Silverlight 3D Dice 3 Source Code

Other Silverlight Stuff

Comments

Marc Vandeputte

24/01/2011

Hi Edward,

First of all, Congratulations for a brilliant piece of work.

In fact i am trying to use your template in a game I am putting together.

I am quite new to all this, however with my limited knowledge I got quite far.

My first question (one of two at this time) is one that concerns your code only.

Whilst running it over and over your code works perfectly when I am running it in the browser (Chrome and Explorer) from this page.

When I am running it in Debug mode in Visual web Developer 2010 Express (on it's own - not related to my game) With 4 dice and over on occasion (but often enough) the Text Box output varies from the Dice face Values - usually 1 Die has different values. I have downloaded various copies and each time the same happens.
note : With 4 Dice - not very frequent - 5 Dice - frequent 1 Die - not frequent 2 dice - 6 Dice - 1 or 2 Dice frequently

Also, it happens frequently that 1 Die doesn't end on Z position 0 (not flat on the surface in layman's terms.), it also happens often that one Die ends outside the view field of the projector, on the right.

This is with unaltered Code.

My second question will show you my limited knowledge :)

In order to transfer the values from an array (code below) into separate variables (to make the bridge between your code and my code I have done the following :

Note : I have added 5 Text Boxes to be able to follow

//private void WriteDiceValues()

//{

// string resultsText = "";

// foreach (int value in Dice.UpwardsValues())

// {

// resultsText += value + " ";

// }

// Results.Text = resultsText;

//{

// DiceVal1 = Convert.ToInt32(Results.Text[0]) - 48;

// DiceVal2 = Convert.ToInt32(Results.Text[2]) - 48;

// DiceVal3 = Convert.ToInt32(Results.Text[4]) - 48;

// DiceVal4 = Convert.ToInt32(Results.Text[6]) - 48;

// DiceVal5 = Convert.ToInt32(Results.Text[8]) - 48;

//}

//{

// textBox1.Text = Convert.ToString(DiceVal1);

// textBox2.Text = Convert.ToString(DiceVal2);

// textBox3.Text = Convert.ToString(DiceVal3);

// textBox33.Text = Convert.ToString(DiceVal4);

// textBox34.Text = Convert.ToString(DiceVal5); //}

It does the job, however I have no idea why I have to deduct 48 to come to the right figures - in my text boxes boxes(if I don't deduct 48) 1 = 49 2 = 50 3 = 51 etc... Maybe you have an idea why this is.

I will have more questions later on, but I don't want to overload you with questions as surely you have more important things to do.

I managed to integrate your code into mine, I have dice in my game, all I need to do now is put the different code snippets in the right place (not easy considering how I constructed my code and considering my very limited knowledge) but I am sure I can do it.

I promise when I have a complete working model (my part on it's own works perfectly), I will send you the model - You will laugh your head off the way I did it, but it works, so I am actually quite proud about it.

I would appreciate it if you could contact me by email at ........

Thanks again, because of your Dice Simulation, I learned tremendously (It kept me up night after night but it was worth it) - I started this off in Visual Basic but because of your code in C# I had to get to grips with C#

MARC VANDEPUTTE
note :
I live both in France(Dunkirk) and the UK(Minster-Ramsgate) (Always on the shuttle between the 2)

Ed Smale

24/01/2011

Thanks for the comment Marc! Your first point is simply that I had updated the demo on this page, without updating the source code ZIP. Tut. I've now updated the source code so that it matches the demo (and gives the correct values for the dice once they have finished rolling). I've emailed you with some more info on that and your other question.

wp7ericmswong

13/02/2011

Thank you very much for your code. It's great and the new version is very nice.

I wrote a sic bo win phone app (http://www.youtube.com/watch?v=EWdGKlq4cf0) and want to integrate with your simulator. Any suggestion can you give me to modify the simulator like the following pic.:-

Thanks again for your great work!

ZhanSh

19/02/2011

thanks a lot!

Ed Smale

24/02/2011

@wp7ericmswong - sorry it's taken a while to get back to you, I've made some changes to the source code that move the 'container' specification (currently a box, but in your case more like a dome) into a separate class, and similarly the way the dice are initialised when they are 'rolled' (in your case they move upwards when rolled).

This source code is set up to (hopefully) be along the lines of your screenshot and YouTube video. There's a fair bit left to do, but the structure is hopefully now amenable to more alterations. The dice should remain within a dome shape, but the dome isn't actually rendered, so you'll have to superimpose a suitable dome image.

Here's the revised source code: http://www.edwardsmale.co.uk/Download/Silverlight-3D-Dice-Sic-Bo-Source-Code

I'll try and post the updated 'red dice' code (corresponding to the demo above) with the new structure soon. It should be easier to integrate, as the dice stuff is in a separate project from the UI, so things don't get mixed up together in MainPage.xaml.cs.

Zlatko

17/03/2011

Hi Ed, I have a really simple question. I have spent some time now trying to use your Silverlight3D library but with no luck :( What I really want is to draw a (one) cube on a empty canvas and to add a basic moving (or drag and drop) functionality. Is there a way of you having a small tutorial or example on how to do that? Thnx in advance and greetings!

Ed Smale

28/03/2011

Hi Zlatko, sorry for the slow reply. I will try and do some kind of tutorial to draw a cube and move/rotate it. Watch this space!

Zlatko

29/03/2011

Thank you very much. I will definitely wait for the tutorial. And please, do not give your self lots of job. Keep it simple and clear ;)

Ed Smale

08/04/2011

Hi Zlatko, finally I have put together a quick tutorial. I tried to keep it nice and simple, but still covering all the important bits. The next tutorial will be looking at how to interact with a 3D object with the mouse. Then I will do one about putting images on the faces of the cube. Hope this helps! (Btw I have had to temporarily disable comments on my site, due to the massive amount of spam I was getting. I need to find a spam-proof comment form and stick it on here!) Check it out: Silverlight 3D Rotating Cube Tutorial

wp7ericmswong

25/05/2011

You are genius! I will try to modify the code and integrate to my program. Thank you very much for your code.

AMiNE

12/08/2011

Hi, Thanks for the code it's really great. But there's a problem for me; I am working on a game on C# WinForms and I am not familiar with WPF and SilverLight. So, is there a way to integrate this code to my Forms?

Ed Smale

16/08/2011

@AMiNE - I just had a quick Google and found this: http://www.codeproject.com/KB/WPF/WPF_UserControls.aspx.

I haven't tried it, but it might work...

AMiNE

19/08/2011

@Ed Smale: thanks for the answer but -> Page Not Found

Ed Smale

20/08/2011

Damn, sorry about that, missed out a double-quote in the HTML tag :( let me try again: http://www.codeproject.com/KB/WPF/WPF_UserControls.aspx

AMiNE

27/08/2011

thanks :)

Jim

19/11/2011

Loving your "dice" library. What's the chance of a C#/WPF version of this? (I know Silverlight is, in theory, based upon WPF but I understand there are also fundamental differences?)

Jim

22/11/2011

Me again Ed! (Don't worry about fast replies btw, I'm not in any desperate rush and notice you sometimes take a while to respond to others questions). In the last few days I thought I'd have a look at 3D WPF to see if it was possible to do 3D Drawing etc (I'm new to WPF) I'm very relieved to see it is! (found this blog entry http://stuff.seans.com/2008/08/13/drawing-a-cube-in-wpf/ which was quite good). Still, there is a huge gulf between that simple tutorial and a library as comprehensive as yours (IE the physics etc). So, I'm hoping you'll seriously consider a port to WPF! (and if/when you do please bear in mind the ability to use any Die type EG D10, D20 etc. I've got the vertex point data for a D10 as I have in mind something that will use it... subject to you porting you library!)

Ed Smale

23/11/2011

Hi Jim,

Thanks for your comments!

There would be a bit of work moving the dice over to WPF, but hopefully not too much. There are some changes to namespaces and things that I would need to do throughout the code. None of these are that bad (I think), but I'll have to do it in such a way that I can maintain both the Silverlight and WPF versions of the project in parallel, so that changes to one are propagated to the other. Otherwise I will have to duplicate any changes manually between the versions, which would be a bit of a pain.

It's doable though, and t would be worth doing, because I guess a lot of games will be in WPF rather than Silverlight. I think what I would do is have two separate Dice solutions, one for each, then write a separate program that copies any changes in one to the other.

Another thing is that WPF has built-in 3D elements which it ought to use rather than my homebrewed 'Silverlight 3D' library, and there would be a large number of changes to switch the dice over to use them. I could probably do that some other time though.

Silverlight 5 is also on the way, and has some 3D support, so I might be able to use that instead of my 3D library. It will perform better as it is based on the XNA library. Hopefully, Silverlight 5's 3D support has a lot in common with WPF's.

For other types of die, I know this would be pretty tricky. The physics code in the Dice project is highly dependent on the dice having 6 sides. The way it makes the dice stay cube-shaped as they bounce around is by adjusting the velocities of the vertices many times each frame, so that edges, diagonals and inner diagonals remain more-or-less the same length at all times. I spent a very long time perfecting these, mainly through trial and error. For dice of a different shape, different rules would be required to make the shape remain the same. I'm sure it would be possible, but would need a lot of experimentation for each die shape to get it right.

I think porting it over to WPF would be a good thing to do anyway, so I'll try that first.

Jim

23/11/2011

Top man! I raise my virtual pint of beer to you!
So (to put it crudely), you have a collision test based upon a cube shaped bounding box sort of thing?
I think that would be fine (IE close enough), as long as the bounding box can be independently adjusted (compared to the actual drawn model).
If you mentally rotate the cube shaped bounding box in 3D you can encompass 95% of most die shapes. Perhaps if some of the vertices were elongated a little it would fit even better but I'm not sure it's really needed to be honest.
As to WPF & Silverlight versions, I can't really comment (still Silverlight 5 will be the last version, and WPF will continue onwards I believe). I know WPF has some built in animation support... storyboards (?) etc where duration/timings, rotations, keyframes etc can be set. I would have assumed that with .Net 4 Silverlight & WPF are fairly close in drawing support?
Anyway, I'm delighted you think a port to WPF is worthwhile and I look forward to the first (even if crude) prototype for me to try!
Cheers!

jim

23/11/2011

rats, thought I'd make my post more readable by putting line breaks in seeing as my original comments have the hard line break stripped out. :-(

Ed Smale

25/11/2011

Hi Jim,

I've had a brief look at porting this to WPF, and it doesn't look easy. The way I got the Silverlight version to put the images (the spots) on the sides of the cubes was using Silverlight's Matrix3DProjection class. This doesn't exist in WPF.

So in order to get the same effect in WPF, I'm going to have to rewrite all the 3D drawing code :(

I think it would make more sense for me to check out Silverlight 5 (there is a pre-release version out at the moment that I might use) in the hope that most of the 3D drawing stuff is the same in Silverlight 5 and WPF.

So whereas I was hoping to do a straightforward port to WPF - i.e. rebuilding the project as a WPF project - it looks to be a lot more complicated than I thought.

I'm pretty sure I'll get round to it eventually, but I wouldn't hold your breath just yet!! :)

Ed Smale

25/11/2011

PS. I turned off HTML by default in my comments, as I still get tons of spam comments. I can switch the HTML on for messages once I have read them.

Jim

26/11/2011

I find you lack of faith... disturbing ;-) As you say, Silverlight doesn't *really* have 3D and WPF does. As I understand it Matrix3DProjection gives Silverlight some pseudo 3D which is missing in WPF (as it doesn't need it). I've managed to find a pure XAML example for a cube, which I've altered to show a bitmap image on each of the 6 faces along with some transforms (zoom, pan, rotate sort of thing). Less than 200 lines of source code inc. comments, bundled up into a VS solution with the bitmaps built-in as resources. I think this would form 95% of the 3D drawing coding, leaving the Physics to port and the code-behind of course! Give me an e-mail address and I'll send it over.

Ed Smale

28/11/2011

I wasn't saying that it isn't possible... just quite tricky. There are a few reasons why I say that:

1) I hadn't properly separated out my graphics code from the physics code. There were calls to draw 3D objects mixed up with the code that does the physics. This would have made chopping and changing the 3D rendering platform very difficult.

I have spent a few hours splitting the two apart, and it's looking a lot better. There's a little bit more to do on this.

2) It seems after a small amount of reading that WPF's 3D API is based on creating 3D elements, in a similar way to how you create other UI elements. Whereas Silverlight 5 uses a subset of XNA. At least I get that initial impression - need to find out some more about this before I leap into an implementation that will work on one but not the other.

3) I'll then need to learn how to use WPF's 3D API so I can rewrite the part of the code that draws the dice.

So as you can see, there's a fair bit of work there, but I'll post updates on here as work progresses.

Jim

28/11/2011

Hi Ed Well as previously mentioned I have done the WPF 3D dice drawing part (or what could/would form the prototype of it) complete with data bindings on the transformation controls. In principle all you'd have to do is switch the bindings over to variables under the control of the physics code. Of course that is a simplification of what's involved. Where shall I send the e-mail to?

Ed Smale

29/11/2011

OK thanks for doing that. Please can you send it to Enable javascript to view email address?

Anonymous

29/11/2011

Sent. Glad to see you've moved the comment from from the top to the bottom of the comments! As mentioned in the e-mail, I've got a few more tweaks to do on the demo I sent you but see what you think so far. Cheers Jim.

David

22/01/2012

Hi Ed, it's really good job, nice library. small question. is it possible to first set dice value and then roll it? I'm making server client game, random generation happend at server side and your dice roll I need for visualisation.

Ed Smale

24/01/2012

Thanks David. This is a very good question. At the moment, the app doesn't know what the outcome of the roll will be, as it depends on how the dice collide as they roll. Perhaps the way to do this would be to have a library of pre-calculated rolls that the app selects from randomly - there would hvae to be enough so that you don't often see the same roll twice, and of course with more 7's rolled than 2's and 12's. I'll see what I can do.

David

28/01/2012

Ed, thank you for reply.

Ed Smale

31/01/2012

Hi David - I've hit a bit of a brick wall with pre-specifying the outcome of the roll. My plan was to seed the random number generator to do this, by creating a lookup table mapping different random seeds to different outcomes. I got the program to choose a seed from the lookup table based on the preselected values, and this was working well in the debugger. But as soon as I put it up on a web page, I started getting outcomes that were different from my selected values. After a lot of experimentation, I found that in Visual Studio I got different results when I had the debugger attached (F5) than when I didn't (Ctrl+F5). I did some research, and read that floating point calculations can give different results on different processors (see this StackOverflow post). I assume that the F5 / Ctrl+F5 effect is along these lines as well. This all means that the seed lookup approach won't work, because it will give different results depending on the user's processor. Back to the drawing board :(

Silverlight 3D Dice Simulator

Other Silverlight Stuff

Comments

Leave a comment!