SpriteHand
Module Border
  Most recent blog entries
Module Border
SilverArcade Opens its Doors!
Andy's Blog By Andy Beaulieu on 4/20/2009 7:07 PM

SilverArcade is now live! This "free online game community" offers Silverlight-based diversions for the casual gamer, and per-play revenue for the Silverlight game developer. SilverArcade is the brainchild of Bill Reiss, Rob Eisenberg, and Chris Bennage.

It's great to see Silverlight coming into its own, seemingly with video and casual gaming leading the way (and with LOB apps closing the gap for the lead?!)

Comments (0)

Boss Launch... LAUNCHED
Andy's Blog By Andy Beaulieu on 4/4/2009 8:22 PM

I had some time to update Boss Launch with a few fixes, a couple more levels, and some sound effects and loops. There are now five environments: Office, Forest, Desert, Beach and Moon! I also added a neat little "poke" functionality that allows you to move the Boss Ragdoll around by clicking him with the mouse after he is launched. This is really handy for knocking those closeby targets to the ground! I have a busy few weeks ahead, so this is probably how Boss Launch will stay for the next little while.

Go and have some fun!

Comments (3)

Whats New in Silverlight 3 Graphics: Slides + Demos
Andy's Blog By Andy Beaulieu on 3/29/2009 10:46 AM

Thanks to everyone who attended my Silverlight Sessions at Code Camp 11! Chris Bowen and Chris Pels did another great job organizing what is the best free developer community event in the Northeast!

As promised, here are the slides and resources from the Silverlight 3 Graphics talk:

Up Next: Cre8 Conference

I'm excited to be presenting at the upcoming Cre8 Conference in Orlando, FL on April 15-16th! Cre8 is a conference for creative professional and covers the gamut of designer tools - everything from Flash, Dreamweaver, Photoshop... and yes, Silverlight. I'll be presenting:

Silverlight for Designers: Bridging the Gap from Designer to Developer
Discover how to create an effective workflow that allows designers and developers to collaborate on interactive projects. Build easy-to-use interfaces that connect simply to Web services (the ‘cloud’), databases, XML content, and more.

 

 

Comments (2)

Physics Helper gets 1st Place at MIX09 Show Off!
Andy's Blog By Andy Beaulieu on 3/25/2009 10:27 AM


Wow, I just found out that the video I submitted for the MIX09 Show Off! event got first place! I heard the competition was fierce this year, I just wish I had been at MIX to see the show, but it was too close to the MVP Summit this year.

So here is the video I entered, in which I try to channel Billy Mays to create a commercial for the Physics Helper Library. (I was also poking fun at the official rules which said "Please, No Commercials!") And no, my Photoshop skills aren't that bad, I just pasted my head on there in a big hurry :) 

VIEW THE VIDEO

Comments (7)

Behaviors in Expression Blend 3
Andy's Blog By Andy Beaulieu on 3/24/2009 3:49 PM


One of the really fun and productive things coming to Expression Blend 3 and Silverlight 3 is the concept of Behaviors.  In a nutshell, you will be able to drag/drop a Behavior in Blend 3 onto a UI Element on the design surface, and that will automatically inject runtime logic into that element. Behaviors aren’t a new concept, and there is even an equivalent in the ASP.NET AJAX world if you’ve played with creating custom controls in that universe.

Physics Behaviors!

One of the most fun examples I’ve seen using Behaviors was done by Pete Blois, a Program Manager on the Expression team at Microsoft. Pete and another developer created some Physics Behaviors which very closely mirror the Physics Helper Library I created for the Farseer Physics Engine. I first saw Pete demo the Physics Behaviors at the MVP Summit a few weeks ago, and my jaw dropped at the similarities! Pete & Co.’s Physics Behaviors use the Box2D Physics Engine.

Getting Started with Behaviors

If you’re playing with Silverlight 3 and Blend 3, why wait? You can play with Behaviors today! Note this is all Beta level stuff, so be prepared for some hiccups along the way

Pete’s MIX Session – Pete Blois gave a great overview of Behaviors in this MIX 09 session.

Using Behaviors – A quick Walkthrough by Kirupa on how to use behaviors! Pay special attention to where you find the assembly Microsoft.Expression.Interactivity.dll - you'll need that for the next link.

MIX Behavior Pack – this contains the Physics Behaviors, as well as a bunch of others.

Creating New Behaviors

It turns out it’s pretty easy to create your own behaviors, and I’ll be covering this in a later blog post. But if you can’t wait, just download the MIX Behavior Pack and have a look at the Behaviors, all of their source code is included!

 

 

Comments (1)

Boss Launch Beta
Andy's Blog By Andy Beaulieu on 3/23/2009 8:12 PM

Let me start by saying that I have a great boss now, and I've never had any problems with any of my past managers either :) That said, I've made "The Boss" the unfortunate main character in the latest little Silverlight physics game I've been creating.

In "Boss Launch," you catapult your obnoxious leader into various targets, trying to knock down enough stuff to reach the next level. This Silverlight 2 game was created using Expression Blend, Visual Studio, the Physics Helper Library, and the Farseer Physics Engine.

This is an intial release, and I'm seeking feedback of all kinds: Bug Reports, Comments, Ideas. Please leave comments in this blog post, or email me. I'm especially interested in any Mac users out there. This game is probably too intense for older machines, and I expect some criticism on performance :P (but when Silverlight 3 releases, that will be quickly fixed).

So, go and give it a try, and remember this is a Beta so be gentle!

 

Comments (13)

Silverlight 3: Blog Post Summary
Andy's Blog By Andy Beaulieu on 3/18/2009 3:43 PM

Most have you have probably heard by now that the first Beta of Silverlight 3 is out in the wild! You can get everything you need to get started with the Silverlight 3 Beta here, but note that if you are actively doing Silverlight 2 development, you will either need a second development machine or a Virtual machine - because Silverlight 2 and 3 environments cannot exist side-by-side.

I just completed a big dump of Silverlight 3 information on my blog - stuff that I have accumulated while involved in early testing of Silverlight 3. Here is a summary of the posts, I hope you find them enlightening:

Silverlight 3: GPU Acceleration and Bitmap Caching - this is the most exciting feature of Silverlight 3, IMHO!

Silverlight 3: Pixel Shaders and Effects - see how you can create new effects using HLSL.

Silverlight 3: PlaneProjection with Storyboard - looks at how to display and animate the new 3D Perspective projection.

Silverlight 3: HitTest with WriteableBitmap - the title is a tease, be forewarned!

I am wrapping all of this information and more into a slide deck and presentation which I'll be giving at Code Camp 11 near Boston, so if you're in the area come and check that out!

Comments (0)

Silverlight 3: GPU Acceleration and Bitmap Caching
Andy's Blog By Andy Beaulieu on 3/18/2009 3:14 PM

GPU Acceleration is my favorite new feature in Silverlight 3 because I think it will truly enable new, unique web experiences.  GPU Acceleration allows Silverlight to use the video card to render portions of the User Interface, which can greatly improve performance. Under the covers, Silverlight uses DirectX in Windows, and OpenGL on the Mac to take advantage of the video hardware.

Enabling GPU Acceleration

By default, GPU Acceleration is not enabled in Silverlight. You need to opt in to this feature using the following steps:

First, add in a parameter to your Silverlight object tag as follows:

<object id="plugin1" data="data:application/x-silverlight-2," type="application/x-silverlight-2"

    width="100%" height="100%">

    <param name="source" value="ClientBin/ScrollMonster.xap" />

    <param name="onerror" value="onSilverlightError" />

    <param name="background" value="white" />

    <param name="minRuntimeVersion" value="3.0.40307.0" />

    <param name="autoUpgrade" value="true" />

    <param name="EnableGPUAcceleration" value="true" />

    <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">

        <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight"

            style="border-style: none" />

    </a>

</object>



Now that you have enabled GPU Acceleration at the plug-in level, you can then enable Bitmap Caching on individual UI Elements. You should choose elements in the UI that are relatively static, such as scrolling backgrounds. Items that Rotate, Scale or Clip are also accelerated. But if an element changes (such as through StoryBoard animation), then it is not a good candidate for Bitmap Caching because the element will need to be re-rendered for each change and the cache will be invalidated.

Consider the following example which depicts a UserControl that has Bitmap Caching enabled:

<UserControl x:Class="ScrollMonster.ucMonkey"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    >

    <Canvas x:Name="LayoutRoot" Width="739" Height="700" >

        <Canvas.CacheMode>

            <BitmapCache/>

        </Canvas.CacheMode>

 

       <!—OTHER XAML CONTENT GOES HERE -->

 

    </Canvas>

</UserControl>

 

That’s it! They really made GPU Acceleration and Bitmap Caching easy to implement!

A Sample Application

Here is a little sample application that really shows just how dramatic the performance improvement is with GPU Acceleration and Bitmap Caching:

IMPORTANT: THE FOLLOWING IS A SILVERLIGHT 3 DEMO! SILVERLIGHT 3 IS CURRENTLY IN BETA AND YOU SHOULD ONLY INSTALL SL3 IF YOU ARE A DEVELOPER INTERESTED IN EXPERIMENTING!

[VIEW DEMO WITHOUT CACHING]  and note the Frames per second

[VIEW DEMO WITH CACHING] and note the Frames per second

[DOWNLOAD SOURCE]

Scrolling Game Sample

Parallax Scrolling is an old school method of introducing depth to a 2D scrolling game by providing several layers that move at different speeds (closer layers move by faster than layers farther away). In Silverlight 2, it was pretty difficult to pull this off because of performance constraints. But in Silverlight 3 we can take advantage of GPU Acceleration and do some very nice Parallax Scrolling effects J

Here is a little demo that shows off scrolling with GPU Acceleration in Silverlight 3. It uses the Physics Helper Library – actually a newer version of Physics Helper that I’ll be releasing soon.

IMPORTANT: THE FOLLOWING IS A SILVERLIGHT 3 DEMO! SILVERLIGHT 3 IS CURRENTLY IN BETA AND YOU SHOULD ONLY INSTALL SL3 IF YOU ARE A DEVELOPER INTERESTED IN EXPERIMENTING!

[VIEW DEMO WITH CACHING]

Debugging and Troubleshooting

What happens if you see no performance increase when turning on GPU Acceleration in Silverlight? It would be helpful if there was some way to determine if elements were successfully bitmap cached or not.

It turns out there is just such an option: EnableCacheVisualization. We just add in a param to our Silverlight <object> tag like so:

<param name="EnableCacheVisualization" value="true" />

 



… and what you will see is that any uncached object is tinted a color. That’s right: uncached objects are tinted, and cached objects appear normally.

One other note: you need to be careful of is the size (height and width) of your UI Elements that you are trying to cache. On some video cards, there is a limit to the size of the surface that can be handled by the hardware.  A good rule of thumb is to keep the height and width of your cached UI Elements under 2048 pixels.

 

 

Comments (14)

Silverlight 3: PlaneProjection with StoryBoard
Andy's Blog By Andy Beaulieu on 3/18/2009 2:31 PM

Silverlight 3 introduces a little bit of 3D support out of the box.  Don’t get your hopes up, you’re not going to take what’s provided and write the next best First Person Shooter (although, using Silverlight 3’s GPU Acceleration and you just might J),  but you can do some pretty neat effects in very short order. In ScottGu's keynote at MIX, he showed a nice PlaneProjection with some Physics effects that made the projection "wobble" when clicked with the mouse.

What Silverlight 3 Beta 1 provides is a PlaneProjection, which allows you to rotate a 2D Canvas in 3D space. Here is a quick example. Suppose you have an image that looks like this:

… and then you place that image into a Canvas and add a PlaneProjection with a RotationX value of 50:

<Canvas x:Name="canvas3D" Height="400" Width="600" Background="{x:Null}" HorizontalAlignment="Center" VerticalAlignment="Center">

       <Canvas.Projection>

              <PlaneProjection RotationX="50" />

       Canvas.Projection>

       <Image Height="229" Width="234" Canvas.Left="192" Canvas.Top="171" Source="logo.png" Stretch="Fill"/>

Canvas>

This example will display the contents of “canvas3D” rotated at the X axis at 50 degrees, which will look something like this:

Not bad, but the really cool effects come from animating the PlaneProjection. We can use a StoryBoard to change any of the properties of the PlaneProjection and make some nice effects. Let’s use the projection to create a fly-in effect where the image rotates in 3D space up to the user.

We can use a DoubleAnimationUsingKeyFrames to change the RotationX of the Projection. This will make the Canvas Spin. Then we can add a second DoubleAnimation on GlobalOffsetZ, which will make the Canvas Zoom up to the user’s view.

<Storyboard x:Name="Storyboard1">

    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="canvas3D" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)">

        <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>

        <EasingDoubleKeyFrame KeyTime="00:00:05" Value="360"/>

    DoubleAnimationUsingKeyFrames>

    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="canvas3D" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.GlobalOffsetZ)">

        <EasingDoubleKeyFrame KeyTime="00:00:00" Value="-30000"/>

        <EasingDoubleKeyFrame KeyTime="00:00:05" Value="0"/>

    DoubleAnimationUsingKeyFrames>

Storyboard>

UserControl.Resources>

 

Here is a demo application showing this animation of PlaneProjection in action:

IMPORTANT: THE FOLLOWING IS A SILVERLIGHT 3 DEMO! SILVERLIGHT 3 IS CURRENTLY IN BETA AND YOU SHOULD ONLY INSTALL SL3 IF YOU ARE A DEVELOPER INTERESTED IN EXPERIMENTING!

[VIEW THE DEMO]  [DOWNLOAD THE SOURCE]

 

Comments (2)

Silverlight 3: HitTest with WriteableBitmap in Silverlight 3
Andy's Blog By Andy Beaulieu on 3/18/2009 1:26 PM


UPDATE 7/10/2009: See THIS BLOG POST regarding Silverlight 3 RTW, we can now read the Pixels after calling Render()!

 

Ok, the title of this post is a tease. Read on and find out why!

A new feature in Silverlight 3 Beta 1 is the WriteableBitmap class, which allows pixel-level image manipulation at runtime. It turns out you can also do pixel-level image manipulation in Silverlight 2, using methods such as Joe Stegman’s Editable Image samples.  But there are some new features to WriteableBitmap which weren’t possible using these methods.

First, you can use WriteableBitmap to render a portion of the Visual Tree to a bitmap.

WriteableBitmap wb = new WriteableBitmap(800, 600, PixelFormats.Bgr32);

wb.Render(canvas1, new TranslateTransform());

 

…you can then assign the WriteableBitmap to the Source value of an Image like so:

img.Source = wb;


HitTest a Raster (Bitmap) Image in Silverlight 3

In a previous blog post, I showed how you could use the VisualTreeHelper.FindElementsInHostCoordinates to do a HitTest on a XAML element in Silverlight 2. But in Silverlight 2, there was no way of doing a HitTest on a Raster (Bitmap) image, which makes it difficult to do collision detection on Image elements.

In Silverlight 3, WriteableBitmap will “eventually” make this possible because you can access Pixels of the WriteableBitmap at runtime! Unfortunately, in Beta 1 of Silverlight 3, this functionality is disabled in most cases L The reason being that there needs to be security put into place to ensure that a hacker could not request 3rd party images through a Silverlight app and then access secure information.

So say you have an image which you plant on a Canvas like so:

        <Image Source="/fish.png" x:Name="imgFish" />


And then you can set up a WriteableBitmap as follows:

        BitmapSource bitmapSource = imgFish.Source as BitmapSource;

        WriteableBitmap wb = new WriteableBitmap(bitmapSource);

 

… In Silverlight 3 BETA 1, this will actually bring back the correct PixelWidth and PixelHeight into bmPixels1,but when you try to access the pixel array, you will get a Null Reference Exception:

int x = wb[x];   // gives a Null Ref

Also, after calling the Render method on WriteableBitmap (such as in the previous example to render the visual tree), the pixel array will be unavailable and will give a Null Reference Exception.

Oh well… Silverlight 3 _is_ a Beta at this point, so we can only hope this functionality will be available by  RTM!

 

Comments (1)

Module Border Module Border
Module Border
  Subscribe
Module Border
RSS   Twitter
Module Border Module Border
Module Border
  Diversions
Module Border


PHYSAMAJIG
This Windows app was created using Physics Helper XAML, and the Farseer Physics Engine.
DOWNLOAD

MORE INFO



TALKING RAGDOLL
This Windows Phone app was created using Silverlight, the  Physics Helper Library,  and the Farseer Physics Engine. It gets interesting when you import your friends photos and have your way with them!

MORE INFO



BOSS LAUNCH
This physics game won first place in the Server Quest Contest. Created using Silverlight , the Physics Helper Library,  and the Farseer Physics Engine.
PLAY IT

MORE INFO



DESTROY ALL INVADERS
A scrolling shooter game where the objective is to destroy the invading UFO's flying over a neighborhood of your choosing. Imagery provided by Microsoft Virtual Earth. Created using Silverlight.
PLAY IT

INFO AND CODE



PHYSICS HELPER DEMOS
These demos were created for the Physics Helper Library, which makes it easy to create physics games and simulations using Expression Blend, Silverlight, and the Farseer Physics Engine.
PLAY IT

INFO AND CODE



HOOK SHOT
This little basketball game took first place in the TeamZoneSports Silverlight Contest. Created using Silverlight and the Farseer Physics engine.
PLAY IT

MORE INFO



SORT THE FOOBARS
A game where you need to sort the good foobars from the bad ones. Created using Silverlight and the Farseer Physics engine.
PLAY IT

MORE INFO



POLYGON PHYSICS DEMO
A demo showing polygon physics where the user draws physics objects with the mouse. Created using Silverlight and the Farseer Physics engine.
PLAY IT

MORE INFO



SILVERLIGHT ROCKS!
Destroy the asteroids before they destroy your ship! Created using Silverlight.
PLAY IT

INFO AND CODE



FISH GAME
A simple game of harpoon-the-fish. Written using the AJAX Sprite Toolkit.
PLAY IT

INFO AND CODE

Module Border Module Border
Module Border
  Search_Blog
Module Border
Module Border Module Border
Module Border
  Blog_Archive
Module Border
Module Border Module Border
Copyright (c) 2014 andy.beaulieu.com - Login