The new version of the Silverlight Toolkit (December 2011) for Silverlight 5 is out and you can grab it here:
Update: Babylon Engine now uses Silverlight 5 Toolkit: http://code.msdn.microsoft.com/Babylon-3D-engine-f0404ace
I had the pleasure of working on this version and I’m pleased to write this article to help you discover how the Toolkit enhances Silverlight 5 with the following features:
- Seamless integration of 3D models and other assets with the Content Pipeline
- New Visual Studio templates for creating:
- Silverlight 3D Application
- Silverlight 3D Library
- Silverlight Effect
- New samples to demo these features
The toolkit comes with a new assembly : Microsoft.Xna.Framework.Content.dll. This assembly allows you to load assets from the .xnb file format (produced by the Content Pipeline).
Using the new Visual Studio templates (which I will describe later), you can now easily port existing 3D projects directly to Silverlight 5!
Microsoft.Xna.Framework.Content.dll assembly will add the following classes to Silverlight 5:
- SpriteFont and SpriteBatch
The toolkit comes also with the Microsoft.Xna.Framework.Tookit.dll assembly which will add the following classes to Silverlight 5:
- Mouse, MouseState
- Keyboard, KeyboardState
The documentation for this class can be found here:
The ContentManager class is the representative for the Content Pipeline inside your code. It is responsible for loading objects from .xnb files.
To create a ContentManager you just have to call the following code:
There are restrictions for this class : *The ContentManager for Silverlight can only support one Content project and the RootDirectory must be set to “Content”*
Using it is really simple because it provides a simple Load method which can be used to create your objects:
The documentation for this class can be found here:
The model class has the same API as in XNA 4 and it will allow you to load and render 3D models from XNB files:
You can also use bones if your model supports them:
You can import models using .x or .fbx format:
And thanks to the FBX importer, you can also import .3ds, .obj, .dxf and even Collada.
SpriteFont & SpriteBatch
The documentation for these classes can be found here:
The SpriteBatch class is used to display 2D textures on top of the render. You can use them for displaying a UI or sprites.
As you can see, SpriteBatch only needs a texture to display.
SpriteFont allows you to use sprites to display text.
SpriteFont relies on SpriteBatch to draw and needs a font definition from the ContentManager:
The toolkit introduces a new class called SilverlightEffect which can be used to apply .fx files.
It also support .slfx which is the default extension. There is no difference between .slfx and .fx but as XNA Effect Processor is already associated with .fx, the Silverlight Content Pipeline had to select another one.
You can now define a complete effect inside a Content project and use it for rendering your models.
To do so:
- Create a .fx file with a least one technique
- Shader entry points must be parameterless
- Define render states
For example here is a simple .fx file:
The Toolkit will add required processors to the Content Pipeline in order to create the .xnb file for this effect:
To use this effect, you just have to instantiate a new SilverlightEffect inside your code:
Then, you can retrieve effect’s parameters:
To render an object with your effect, it is the same code as in XNA 4:
Texture2D, TextureCube & SoundEffect
Silverlight 5 provides Texture2D, TextureCube and SoundEffect classes. With the Toolkit, you will be able to load them from the ContentManager:
Mouse and Keyboard
In order to facilitate porting existing 3D applications and to accommodate polling input application models, we also added partial support for Microsoft.Xna.Framework.Input namespace.
So you will be able to request MouseState and KeyboardState everywhere you want:
However, there is a slight difference from original XNA on other endpoints: you have to register the root control which will provide the events for Mouse and Keyboard. The MouseState positions will be relative to the upper left corner of this control:
The MouseState and KeyboardState are similar to XNA versions:
Silverlight Content Pipeline can be extended the same way as the XNA Content Pipeline on other endpoints. You can provide your own implementation for loading assets from elsewhere than the embedded .xnb files.
For example you can write a class that will stream .xnb from the network. To do so, you have to inherit from ContentManager and provide your own implementation for OpenStream:
You can also provide our own type reader. Here is for example the custom type reader for SilverlightEffect:
New Visual Studio templates
The toolkit will install two new project templates and a new item template:
This template will produce a full working Silverlight 3D application.
The new solution will be composed of 4 projects:
- Silverlight3DApp : The main project
- Silverlight3DAppContent : The content project attached with the main project
- Silverlight3DWeb : The web site that will display the main project
- Silverlight3DWebContent : A content project attached to the website if you want to stream your .xnb from the website instead of using embedded ones. This will allow you distribute a smaller .xap.
The main project (Silverlight3DApp) is built around two objects:
- A sceneobject which
- Create the ContentManager
- Handle the DrawingSurface Draw event
- A cubeobject
- Create a vertex buffer and index buffer
- Use the ContentManager to retrieve a SilverlightEffect (Customeffect.slfx) from the content project
- Configure and use the SilverlightEffect to render
This template will produce a Silverlight Library without any content but with all Microsoft.Xna.Framework references set:
And the resulting project will look like:
This item template can be used inside a Content project to add a custom .slfx file that will work with SilverlightEffect class:
The file content will be the following:
Finally, to help you discover and learn all these features, we added some cools samples:
This sample shows you how to use sprites to accomplish post-processing effects such as “bloom”. It also uses the Content Pipeline to import a tank model from a .fbx file.
This sample shows you how custom effects can be applied to a model using the Content Pipeline.
This sample shows how 3D models can be generated by code during the Content Pipeline build process.
This sample introduces the concept of a particle system, and shows how to draw particle effects using SpriteBatch. Two particle effects are demonstrated: an explosion and a rising plume of smoke:
This sample provides easily reusable code for drawing basic geometric primitives:
This sample is a complete game with 3 levels provided (you can easily add yours). It shows the usage of SpriteBatch, SpriteFont and SoundEffect inside a platform game. It also uses Keyboard class to control the player.
This sample shows how to apply program controlled rigid body animation to a 3D model loaded with the ContentManager:
This sample shows how to process and render a skinned character model using the Content Pipeline.
As you noticed, all these new additions to the Silverlight Toolkit are made to make it easy to get started with new Silverlight 3D features by providing developer tools to improve usability and productivity.
You can now easily start a new project that leverages both concepts of XNA and Silverlight. It becomes easy to work with 3D concepts and resources like shaders, model, sprites, effects, etc…
We also try to reduce the effort to port existing 3D applications to Silverlight.
So now it’s up to you to discover the wonderful world of 3D using Silverlight 5!