SpriteHand
Module Border
  Most recent blog entries
Module Border
MIX 10k Smart Coding Contest
Andy's Blog By Andy Beaulieu on 12/22/2008 7:34 AM

The MIX 10k Contest asks, "What could you create for the Web if you only had 10 kilobytes of code?" ... and offers some great booty to the winners: the Grand Prize is a pass into MIX, 3 nights at the Venetian, and a $1500 Visa Gift Card!

Given the possibility of such fortune and glory, I couldn't pass up making an entry into the 10k. I created a little game reminiscent of Kaboom! but with a little twist: it uses the FlickR Public Feed to get recent photos with certain tags. The object is to catch all of the falling photos into your photo album. The neat thing about using the FlickR photos is that they do not increase the 10k size since they're provided from a web service. Also, the FlickR photos make the little game dynamic because they change constantly.

Shameless Plug: I NEED YOUR VOTE!
Go to the submission page and Rate it Up! The community prize is based solely on community votes.

For more info on the 10k contest:

Comments (0)

Physics Helper now supports Farseer 2.0!
Andy's Blog By Andy Beaulieu on 12/21/2008 8:53 PM

The Physics Helper Library for Blend and Silverlight (more info here) now supports Farseer 2.0! Thanks to Ian Qvist (aka Genbox on the Farseer Project), I was able to resolve the tunneling issues with Farseer 2.0.

You can get the update (1.0.0.4) on the Physics Helper Codeplex site.

If you are using Farseer 2.0 outside of the Physics Helper controls and are seeing similar issues with tunneling (objects passing through each other and becoming "stuck"), then you might also want to try Ian Qvist's suggested fix:

In PhysicsSimulator.cs - change line 63/64 to the following:

internal int maxContactsToDetect = 10;
internal int maxContactsToResolve = 4;

Thanks Ian!

Comments (0)

Physics Helper Beta 3
Andy's Blog By Andy Beaulieu on 12/15/2008 7:17 PM

Today a new version of the Physics Helper library was released to CodePlex. This version adds a Camera Controller class and a couple of new demos: Camera with Rag Doll and Camera with Truck

Overview

The Physics Helper for Blend and Silverlight contains several user controls which allow you to draw objects in Expression Blend 2, and have those objects translated directly into Physics objects using the Farseer Physics Engine. You can even add Joints to your creations to create wheels and connect limbs. This can be a great timesaver for creating games, as it is traditionally difficult to line up underlying physics geometries with your Blend artwork.

Intro Video

Watch this short video to see how easy it can be to design physics using Blend 2, Silverlight, and the Physics Helper controls:

LAUNCH VIDEO (please give the video a few moments to display)

Download

Download from Codeplex (includes source and demos below)

Enter Feedback/Discuss on Codeplex

Demos

These demos were created with minimal or no coding using the Physics Helper (click images to launch demos):

Egg on a Hill Car on a ramp
Simple Physics Game Rag Doll
Camera with Rag Doll Camera with Vehicle

What's New in Beta 3

1. A new Camera Controller has been added. Drop the Camera Controller on the same Canvas as your Physics Controller, and set the Body property to the object you want the Camera to follow. You can also optionally set ScrollSpeed and ZoomSpeed.

2. Two new demos have been added to show the Camera Controller in action.

3. Various other API changes and improvements

Known Issues

1. Elements that you want to have translated into Physics objects at run time must exist on the same Canvas as the Physics Controller. In the case of UserControls that are added dynamically, you need to have 1 instance of the UserControl on the Canvas at run time - other instances can be added through code.

2.  If you rotate or otherwise transform an object in Blend, the object will lose that rotation when running, and the Boundary determination will be incorrect.

3. This version does not work with Farseer Physics 2.0. I found that Farseer 2.0 has more tunneling issues (objects passing through each other and getting "stuck") when used with the Physics Helper, so I am sticking with Farseer 1.x for now. You can easily enough update the project to Farseer 2.0 if you need to (add a reference to the new Farseer assembly, and Resolve any namespace changes).

Comments (8)

Preview of Upcoming Physics Fun
Andy's Blog By Andy Beaulieu on 11/18/2008 10:40 PM

One of the new controls I'm working on adding to the Physics Helper library for Silverlight, Blend and Farseer is a camera controller. You'll basically be able to just set a few properties on the camera control, such as the Physics Body to follow and the Zoom factor, and presto - the view will follow that physics body and smoothly zoom in and out.

The next iteration of the Physics Helper for Silverlight isn't quite ready, but I thought I'd share this fun little sample of the camera in use with a ragdoll! Note that you can use the mouse to manipulate the doll if he gets stuck.

 

Comments (2)

Using the Live Search API 2.0 with Silverlight
Andy's Blog By Andy Beaulieu on 11/17/2008 7:18 PM

The Live Search API allows you to submit queries for Web Pages, Images, and other search types to the Live.com search service and then process results in whatever evil way you like :) When I'm training or presenting Silverlight, I like to use Live.com as a way to show Silverlight's web service integration and the power of RIA's in mashup scenarios.

The Live Search API was recently updated to version 2.0, and there are some changes to how you interact with the API. In this blog post, I'll give a quick and dirty step-by-step on how to interact with the new API.

1. Go to http://search.live.com/developers and create an API ID

2. Create a new SL solution and in the WEB project, right-click and select "Add Service Reference" and then enter this URL, where MY_APP_ID is the API ID you were given in step 1:

 http://api.search.live.net/search.wsdl?MY_APP_ID

 * When adding the service reference, be sure to enter LiveSearchService in the Namespace field.

3. In the Web Project, Create a new Silverlight-Enalbed WCF Web Service and name it LiveSearchWrapper.svc

4. In the Web Service, Add a new WebMethod to search for Web Pages, and a new Class to store and return results:

       [OperationContract]
        public List<SearchResult> DoSearch(string search)
        {
            LiveSearchService.LiveSearchPortTypeClient s = new LiveSearchPortTypeClient();
           
            SearchRequest request = new SearchRequest();

            // BE SURE TO ENTER _YOUR_ APP ID HERE!!!
            request.AppId = "MY_APP_ID";
            request.Query = search;
            request.Sources = new SourceType[] { SourceType.Web };

            request.Version = "2.0";
            request.Market = "en-us";
            request.Adult = AdultOption.Moderate;
            request.AdultSpecified = true;

            SearchResponse response = s.Search(request);


            // create a collection of results
            List<SearchResult> lstWebPages = new List<SearchResult>();

            foreach (WebResult foundItem in response.Web.Results)
            {
                // web page hit
                SearchResult result = new SearchResult();
                result.ResultUrl = foundItem.Url;
                result.Description = foundItem.Description;
                lstWebPages.Add(result);
            }

            // send 'em down to the client
            return lstWebPages;

        }

        public class SearchResult
        {
            public int HitNumber { get; set; }
            public string ResultUrl { get; set; }
            public string ImageUrl { get; set; }
            public string Description { get; set; }
            public double ImageHeight { get; set; }
            public double ImageWidth { get; set; }
        }

 

3. In the Silverlight Project, open Page.xaml and add some controls and layout INSIDE the <Grid> to search and display. Note that we are adding a search box, a search button, and a nicely formatted data template to the ListBox rows:

       <Grid.RowDefinitions>
            <RowDefinition Height="25" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal">
            <TextBox x:Name="txtSearch" Width="200" />
            <Button x:Name="btnSearch" Content="Search" />
           
        </StackPanel>
           
           
        <ListBox x:Name="lstResults" Grid.Row="1" Height="257" Width="388" RenderTransformOrigin="0.5,0.5" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical" Margin="5,5,5,5" Width="250">
                        <HyperlinkButton NavigateUri="{Binding Path=ResultUrl}" TargetName="_blank" Content="{Binding Path=ResultUrl}" />
                        <TextBlock Text="{Binding Path=Description}" TextWrapping="Wrap" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

4. Add a Click Event handler to btnSearch like so:

       private void btnSearch_Click(object sender, RoutedEventArgs e)
        {
            DoSearch();
        }

5. Add code to call the web service DoSearch method asynchronously (note that LiveSearchNewApi should be replaced with your Project name):

  private void DoSearch()
        {
            LiveSearchWrapper.LiveSearchWrapperClient webSvc = new LiveSearchNewApi.LiveSearchWrapper.LiveSearchWrapperClient();
            webSvc.DoSearchCompleted += new EventHandler<LiveSearchNewApi.LiveSearchWrapper.DoSearchCompletedEventArgs>(webSvc_DoSearchCompleted);
            webSvc.DoSearchAsync(txtSearch.Text);
        }

        void webSvc_DoSearchCompleted(object sender, LiveSearchNewApi.LiveSearchWrapper.DoSearchCompletedEventArgs e)
        {
           
            lstResults.ItemsSource = e.Result;
        }

That's it! Run the solution and try entering some search terms and then click the search button. Note that in the web service search, we are specifying a SourceType of Web, but the Live Search service offers many other Source Types including Image and Video.

Comments (1)

Silverlight Futures: Building Business Focused Applications
Andy's Blog By Andy Beaulieu on 10/30/2008 1:41 PM

Silverlight 2 lays a great foundation for building line of business applications, but there is still a good chunk of grunt work when it comes to validation and workflow... but what if you had all of the power of XAML and the .NET framework _and_ the ease of rapid development like the Client/Server tools of the 90's gave us?

Well, it looks like Microsoft is hard at work to make this happen! Check out this Sneak Preview from Jamie Cool, recorded at PDC 2008, where he shows off a future set of project templates for Silverlight business app development:

http://channel9.msdn.com/pdc2008/PC11/

You might want to fast-forward about 30 minutes into the talk, where Jamie starts talking about "Silverlight Futures." Here are some interesting points from the video:

  • Jamie uses a prototype Silverlight template to add a new "Silverlight Business Logic Class" to a web project, and then instantly use that class from the Silverlight project (without adding a web service reference).
  • He uses an "ObjectDataSource" class to bind results from a Business Logic class to a DataGrid...And add sorting and paging... with no code!
  • He shows a DataForm control and by setting a DataContext property, gets instant default validation type checking and feedback
  • By adding MetadataType attributes to a server-side class, the Silverlight client automatically picks up those validation changes on the client - so by writing the validation logic in one place, it carries out to both client and server.
  • He makes a single SubmitChanges() call to synchronize changes on the client to the server.
  • He uses something called a "Frame" control and StackPanel to create a navigation workflow --- including Browser History!
  • He adds a Login control to immediately generate a Login screen, and then uses an attribute on his business logic class to lock down access to data based on role.

 

Here is the session summary for Jamie's talk:

Silverlight Futures: Building Business Focused Applications
What if you could develop your solutions with the ease pioneered by Microsoft Office Access, deploy them like an Internet application, and take advantage of the power of Microsoft .NET? Learn about an exciting new technology that is all about making business applications for RIA (Rich Internet Applications) much easier to build. In this session, hear how we've made n-tier application development as simple as traditional 2-tier, provided application level solutions to developers, and how we're doing all of this with the same .NET platform and tools on both the client and server.

Comments (3)

The Silverlight Toolkit is Live
Andy's Blog By Andy Beaulieu on 10/28/2008 10:29 AM
 
Just a little while ago at his PDC Keynote, ScottGu announced the Silverlight Toolkit, a collection of Silverlight controls available on Codeplex (live demo here). If you’ve used the ASP.NET AJAX Control Toolkit, then you’ve probably come to appreciate the utility of a community-driven set of controls, so it is great to see a project of similar scope crop up in the Silverlight universe. In this blog post, I’ll talk about how to get started with the Toolkit and playing with the TreeView control.
 
 

 

Adding Controls to the Toolbox

Even thought the Visual Studio designer is read-only for Silverlight, it can still be handy to drag/drop controls from the toolbox into the XAML editor. In order to include the new Silverlight Toolkit controls to your toolbox, just follow these steps:

1.       Right-click the VS toolbox and select “Add New Tab.” Name the tab “Silverlight Toolkit.”

2.       Right-click within the new tab and select “Choose Items.”

3.       In the “Choose Toolbox Items” dialog, go to the “Silverlight Components” tab.

4.       Navigate to the folder where you extracted the toolkit, and then to the Binaries subfolder. Then select the Microsoft.Windows.Controls.dll.  This assembly contains all new controls except the new Charting controls.

5.       Repeat the above step, selecting the Microsoft.Windows.Controls.DataVisualization.dll assembly. This assembly contains the new charting functionality.

TreeView Control

This control does what you might expect  - show a hierarchy of items in an expandable list. But what makes this TreeView control different than what you might be used to is the power of templating in Silverlight.

Let’s look at a very simple example. To add items to the TreeView at runtime, we can define TreeViewItem objects and give them “Header” objects for labels:

    TreeViewItem fruits = new TreeViewItem();
            fruits.Header = "Fruits";
            fruits.Items.Add("Banana");
            fruits.Items.Add("Orange");
            fruits.Items.Add("Apple");

            TreeViewItem veggies = new TreeViewItem();
            veggies.Header = "Veggies";
            veggies.Items.Add("Carrots");
            veggies.Items.Add("Celery");
            veggies.Items.Add("Lettuce");

            tvTest.Items.Add(fruits);
            tvTest.Items.Add(veggies);

 

Hierarchical Data Sources

We can also bind the TreeView to a hierarchical Data Source using the HierarchicalDataTemplate control, and the TreeView will automatically traverse the hierarchy and render each cascading node appropriately. Take, for example this class:

 public class FoodItem 
    {
        public FoodItem(string name, string url)
        {
            Name = name;
            ImageUrl = url;
        }

        public List<FoodItem> Items { get; set; }
        public string Name { get; set; }
        public string ImageUrl { get; set; }
  }

Note that the FoodItem class contains a list of more FoodItems. This allows us to define a hierarchy with FoodItems – for example, Fruits and Veggies:

List<FoodItem> categories = new List<FoodItem>();
FoodItem fruits = new FoodItem("Fruits", " Fruit_in_basket.jpg");
fruits.Items = new List<FoodItem>();
fruits.Items.Add(new FoodItem("Apple", "Red_Delicious.jpg"));
fruits.Items.Add(new FoodItem("Banana", " Banana.png"));
fruits.Items.Add(new FoodItem("Orange", "Orange.JPG"));
categories.Add(fruits); 

FoodItem veggies = new FoodItem("Veggies", "salad.jpg");
veggies.Items = new List<FoodItem>();
veggies.Items.Add(new FoodItem("Carrots", " Carrots.JPG"));
veggies.Items.Add(new FoodItem("Cucumbers", " Cucumbers.jpg"));
veggies.Items.Add(new FoodItem("Peppers", " peppers.jpg"));
categories.Add(veggies);

In order to consume the hierarchical data source, we set up a HierarchicalDataTemplate, with our preferred visual layout for each node in the TreeView. Note how we set the Binding of the HierarchicalDataTemplate to the member collection in the data source class that defines the hierarchy (in this case the generic List “Items”):

<controls:TreeView x:Name="tvFoodItems">
    <controls:TreeView.ItemTemplate>
        <controls:HierarchicalDataTemplate ItemsSource="{Binding Items}">
            <StackPanel Orientation="Horizontal">
                <Image Height="30" HorizontalAlignment="Left" Width="30" Source="{Binding ImageUrl}" />
                <TextBlock Text="{Binding Name}" Margin="5,0,0,0" HorizontalAlignment="Left" FontSize="18" />
            StackPanel>
        controls:HierarchicalDataTemplate>
      controls:TreeView.ItemTemplate>
controls:TreeView>

We can then bind the TreeView in code to our hierarchical list:

tvFoodItems.ItemsSource = categories;

… after which we have an expandable hierarchy like so:

So Much More

I expect there to be a flood of blog posts and resources cropping up over the next week or so on the Silverlight Toolkit – and I’m very excited about the future of the toolkit. According to ScottGu’s release blog post, he says “We will continually add new controls to the control pack over the next few months (we expect to ultimately have more than 100 controls total).   Wow! That’s a lot of controls, and given what’s in this initial release, I look forward to seeing what great things the team comes up with!

 

Comments (4)

Physics Helper Beta 1!
Andy's Blog By Andy Beaulieu on 10/18/2008 12:12 AM


UPDATE 12/15/2008: There is a new version of the Physics Helper Controls! More info here...

The Physics Helper for Blend and Silverlight contains several user controls which allow you to draw objects in Expression Blend 2, and have those objects translated directly into Physics objects using the Farseer Physics Engine. This can be a great timesaver for creating games, as it is traditionally difficult to line up underlying physics bodies and geometries with your Blend artwork.

Intro Video

Watch this short video to see how easy it can be to design physics using Blend 2, Silverlight, and the Physics Helper controls:

LAUNCH VIDEO (please give the video a few moments to display)

Download

PhysicsHelper is now on CODEPLEX!

Download from Codeplex (includes source and demos below)

Enter Feedback/Discuss on Codeplex

Demos

These demos were created with minimal or no coding using the Physics Helper (click images to launch demos):

Egg on a Hill Car on a ramp
Simple Physics Game Rag Doll!!!

What's New in Beta 1

1. The algorithm to determine UIElement boundaries is greatly improved (based on Johnathan Porter's boundary detection algorithm he introduced in Physics2D.NET)

2. You can now nest PhysicsJoint controls inside UserControls. This is very handy for creating game characters that need joints for arms, legs, etc. Just be sure to (a) use a Canvas layout inside your UserControl, and (b) give you UserControl a name when placing it into your main Canvas. See the RagDoll Demo for an example of this.

3. The PhysicsController now has a MousePickEnabled property which automatically allows manipulation of objects with the mouse. This is handy for testing/debugging your creations.

4. Various other API changes and improvements

Known Issues

1. Dynamically adding objects through code isn't as clean as I'd like (see the RagDoll demo code for an example of dynamic adding). The issue is that UI elements need to be drawn to the visible screen before their boundary can be determined. So the temporary hack is to have a timer to "wait" for the element to be displayed.

2.  If you rotate or otherwise transform an object in Blend, the object will lose that rotation when running, and the Boundary determination will be incorrect.

3. As always, there is room for refactoring and redesign, but you can surely do some fun things with Beta 1 :)

What's Coming

UPDATE 10/18/2008: Physics Helper is now available on Codeplex! You can submit feeback and enter discussions on the Codeplex forum. If you would like to contribute to this project and are familiar with Farseer, Blend, and Silverlight, please let me know!

Comments (7)

Ported Stuff to Silverlight RTW
Andy's Blog By Andy Beaulieu on 10/15/2008 3:29 AM
I have most of my Silverlight games and demos ported to Silverlight 2 RTW. Here are links to the more popular games and demos...

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.
PLAY IT

INFO AND CODE


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

INFO AND CODE


SORT THE FOOBARS
A game where you need to sort the good foobars from the bad ones.
PLAY IT

MORE INFO


POLYGON PHYSICS DEMO
A demo showing polygon physics where the user draws physics objects with the mouse.
PLAY IT

MORE INFO


PHYSICS HELPER FOR BLEND
This work-in-progress allows designers to draw out objects in Expression Blend, and those objects are immediately translated into Physics objects using the Farseer Physics Engine.

MORE INFO

 


SILVERLIGHT ROCKS!
Destroy the asteroids before they destroy your ship!
PLAY IT

INFO AND CODE


DEEPZOOM FOR ECOMMERCE
A real world example of using DeepZoom for E-Commerce.
VIEW IT

MORE INFO


USING HITTEST METHOD IN SILVERLIGHT 2 FOR COLLISION DETECTION
A small sample showing how to use HitTest for accurate collision detection in Silverlight 2. This method is also used in the Silverlight Rocks! sample above. 
MORE INFO

Comments (9)

Silverlight 2 Official Release!
Andy's Blog By Andy Beaulieu on 10/13/2008 10:26 AM

I'm half wondering if the marketing folks had an itchy trigger finger, but according to this Press Release, Silverlight 2 is officially released!

However, at this time the Silverlight home page, and Scott Guthrie's blog have no reference to the official release.

At any rate, I'm guessing that today is the day :) So if you have some Silverlight Beta 2 or RC0 code out there, go get it ready for RTW!

UPDATE 10/13/2008: Oops, I should always read the fine print. At the bottom of the press release, it says:

Silverlight 2 will be available for download on Tuesday, Oct. 14, at http://www.microsoft.com/silverlight. Customers already using a previous version of Silverlight will be automatically upgraded to Silverlight 2.

 

Comments (0)

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

TALKING RAGDOLL
This Windows Phone 7 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



DROPPYPOP
This Windows Phone 7 game was created using Silverlight, the  Physics Helper Library,  and the Farseer Physics Engine.
DEMO

MORE INFO



BOSS LAUNCH
This physics game won first place in the Server Quest Contest. Created using Silverlight 2, 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 2.
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 2 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 2 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 2 and the Farseer Physics engine.
PLAY IT

MORE INFO



SILVERLIGHT ROCKS!
Destroy the asteroids before they destroy your ship! Created using Silverlight 2.
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) 2013 andy.beaulieu.com - Login