Expression Blend and Design

The team blog of the Expression Blend and Design products.

2.5D UserControl for Silverlight 2

2.5D UserControl for Silverlight 2

  • Comments 9

2.5D (two-and-a-half D) is a way of using 2D objects to give a very convincing illusion of 3D. I’ve provided an implementation that has no lighting, materials, lines or polygons. But it does enable you to locate 2D (that is, flat) objects at x,y,z coordinates and place the camera where you want it. The implementation then projects the objects onto the camera, scaling and translating them appropriately, and handles mouse input to move the camera.

You can see a small example demonstrating this below:

Get Microsoft Silverlight

Holding the left mouse button and moving the mouse rotates the camera; holding down Ctrl zooms; holding down Shift adjusts the field of view.

Often, rotation causes an object to come in front of another, in terms of their distance from the camera. So each time it draws the scene, the implementation calculates the distance of each object from the camera and then sorts and draws them from back to front. It also culls (that is, removes from the scene) any object behind the camera. Other frills this implementation has are a kind of depth-of-field effect and a fog effect. The depth-of-field effect can be seen whenever an object gets very close to the camera: in this case its opacity falls off exponentially. The fog effect causes the saturation of distant objects to reduce, and their brightness to increase, so that they appear to be melting into fog or haze.

Anyway, you can download the source for the above project from the following location:


folderfiles Download 2.5D User Control Source

You can use Expression Blend 2 SP1 and Visual Studio 2008 to dive into the app and see how

TwoAndAHalfDUC (the first class in the file TwoAndAHalfDUC.cs) is a UserControl base class from which you can derive your own classes. In that same file you will find the CubeUC class that derives from TwoAndAHalfDUC to provide an example of what to do. All you need to do is provide an override of the InitializeSprites method that creates and initializes a number of TwoAndAHalfDSprite objects.

The base class always draws the sprites as colored circles (and of course it does this from any viewing angle so the objects behave as spheres would) but you can amend that behavior so that other 2D objects are used. I tried TextBlocks (and scaled them via their RenderTransform) and the result was very interesting.

Enjoy!

Steve

Leave a Comment
  • Please add 8 and 3 and type the answer here:
  • Post
  • PingBack from http://www.tmao.info/25d-usercontrol-for-silverlight-2/

  • Real nice! Any 2.5D effect u can provide for the SL toolkit Charts?

    Thanks,

    Gopi

  • 2.5D (two-and-a-half D) is a way of using 2D objects to give a very convincing illusion of 3D. I’ve provided

  • Meine Kollegen aus dem Expression Blend/Design-Team in den USA haben gestern ein schniekes Control für

  • In this issue: Justin Angel, Shemesh, Albert Eyal, Steve, Ruurd Boeke, Mike Snow, Mehdi Slaoui Andaloussi

  •   ok, Silverlight ainda não suporta 3D de verdade, mas aqui está uma bela solução que emula perspectiva,

  • http://www.domaindotnet.com/clientbin/DeepZoom3d.html

    Click the link above to see how we implemented 3D in deep zoom. This is part of a much larger 'taxonomy navigation' view in Sharepoint, but is usable with just about anything.

    These are just fun images for the internet facing demo. Stuff from my past, and even some ghosts!

    For our product, we have an automated process which traverses and exports documents based on heuristics to get the images we need, then automatically generate a collection per document. This all is cataloged via matrix/hierarchical keywords and regular expression style search.

    Enjoy.

    Damon Wilder Carr

    domain.dot.net team labs

  • L’équipe produit d’Expression Blend & Design a publié la semaine dernière un usercontrol sympa qui

  • 2.5D (two-and-a-half D) is a way of using 2D objects to give a very convincing illusion of 3D. I’ve provided

Page 1 of 1 (9 items)