SpriteHand
Module Border
  Most recent blog entries
Module Border
Hook Shot takes First!
Andy's Blog By Andy Beaulieu on 9/30/2008 9:11 AM

 

Woohoo! Hook Shot took first place in the TeamZoneSports Silverlight Game Programming Contest!

I threw this game together fairly quickly using Visual Studio 2008, Silverlight Tools, Expression Blend, and the Farseer Physics Engine. Most of the media elements were drawn out by me in Blend, but I did use some public domain media from various sources, which you can read about here.

Check out all of the contest winners and entries

Play the Game

Read more about Hook Shot

Check out some other stuff I created with Silverlight

 

Comments (4)

Silverlight 2 RC0 Crash without Error
Andy's Blog By Andy Beaulieu on 9/26/2008 7:15 PM

While porting a Silverlight 2 Beta 2 app to RC0, I suddenly found my newly converted app would just terminate shortly after load. No exception messages, no JIT debugging, just death. The end result is that a blank area is left where the Silverlight application is supposed to be rendered. After setting breakpoints all over the place, I found that the Application_Exit event was being hit, but the Application_UnhandledException event was never being fired.

If this happens to you, I would recommend checking your Style definitions. In my case, I had a ListBoxItem style defined in my App.xaml, with a Foreground property. This property was fine in SL B2, but causes the nasty crash in SL RC0:

       <Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">

            <Setter Property="Foreground" Value="#FF000000" />

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="ListBoxItem">

                        <Grid x:Name="Root">

                            <ItemsPresenter  />

                            <ContentPresenter

                        Content="{TemplateBinding Content}"

                        Foreground="{TemplateBinding Foreground}" />

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

 

Comments (1)

Silverlight 2 Release Candidate 0 Released
Andy's Blog By Andy Beaulieu on 9/26/2008 4:31 AM

ScottGu announced last night that Silverlight 2 Release Candidate 0 is now available - and the final release is not far off!

This update has lots of bug fixes and some breaking changes, and is a developer-only release (end users will not receive this update). So this gives developers some time to get Silverlight 2 Beta 2 applications ready for the official release of Silverlight 2.

Here are a couple of notes on new things to look for in this release...

HitTest has moved to VisualTreeHelper

Prior to Silverlight 2 RC0, the code to do a hit test on a point within an element looked something like this:

List
<UIElement> hits = path.HitTest(ptTest) as List<UIElement>;

In Silverlight 2 RC0, we now use the VisualTreeHelper class (this is more like WPF) to do a Hit Test:

List<UIElement> hits = System.Windows.Media.VisualTreeHelper.FindElementsInHostCoordinates(ptTest, path) as List<UIElement>;

 

Blend now Handles Font Embedding

The Silverlight runtime includes only a handful of fonts, but you can add fonts into your Silverlight XAP to extend the number of available fonts in your application.  Note that you need to be careful with licensing on any fonts you embed, as
this forum post explains

 

In prior releases of Blend and Silverlight, the process of adding these fonts was manual. But Blend now includes functionality to automatically add a font to your application. I'll post more on this in the future...

Comments (0)

"Silverlight 2 Animation" Demos and Slides
Andy's Blog By Andy Beaulieu on 9/22/2008 6:54 AM

Thanks to everyone who attended my "Silverlight 2 Animation Techniques" talk at Code Camp 10 in Waltham, MA. As promised here are the goodies from the presentation:

[DOWNLOAD THE DEMO CODE]

[DOWNLOAD THE SLIDES]

This talk showed how we can create animation in Silverlight using:

  • Simple Storyboard Animation
  • Custom Storyboard Animation
  • Physics
  • Visual State Manager

I think the crowd most enjoyed this "practical" use of physics in a Silverlight business application :)

Comments (0)

Farseer, Far-Easier: Physics Helper for Blend and Silverlight
Andy's Blog By Andy Beaulieu on 9/13/2008 12:04 PM

 

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

If you have tried creating a Silverlight game using the Farseer Physics engine, you may have found it a bit difficult to translate your game sprites into Farseer Polygon geometries. Another challenge is lining up Farseer Joint elements with your game elements - because there is no visual link between your design tool (generally Expression Blend) and the Farseer objects.

After toying with this issue through a few small games, and trying different strategies, I've tried a new approach ...

Overview

I’ve created a small library of Silverlight User Controls which allow for quick design of physics-based applications using Expression Blend 2.5 as the design surface and the Farseer Physics Engine for simulations.  Using these “Physics Helper” controls, you can draw out physics shapes, including joints, and have those objects translated into Farseer physics elements with little or no coding.

 

Intro Videos

These intro videos show how you can design and run physics simulations in Blend 2.5.

VIDEO 1: Designing Farseer Physics in Blend 2.5

VIDEO 2: Advanced Farseer Physics in Blend 2.5

 

Download

Physics Helper Version 1.0.0.1 Alpha (includes source and demos below)

Demos

These demos were created with minimal or no coding using the Physics Helper:

Demo 1: Egg on Hill
Demo 2: Car on Ramp
Demo 3: Simple Physics Game



A Walkthrough: Using the Physics Helper with Blend 2.5

1.     First, download the PhysicsHelper library (link above). You will also need Visual Studio 2008 with Silverlight Tools and Expression Blend, all available at www.silverlight.net.

2.     In Visual Studio, create a new Silverlight Application.

3.     Add a reference to PhysicsHelper.dll and FarseerGames.FarseerPhysics.dll in the download from Step 1 above.

4.     In Page.xaml, change the LayoutRoot element from a Grid to a Canvas to so it looks like so:

<Canvas x:Name="LayoutRoot" Background="White">
Canvas>

5.     Open Page.xaml in Blend by right-clicking it and selecting "Open in Expression Blend."

6.     Select the Ellipse Tool and draw out a circle. At the top of the Properties window, name the Ellipse "ball."

7.     Select the Pen Tool and draw out a path that looks like a ramp. Name the path "ramp." You should now have something like so:

http://www.andybeaulieu.com/Portals/1/PhysicsHelperDemo1.png

8.     Select the “Asset Library” from the bottom of the Blend Toolbox, and then select the “Custom Controls” Tab:

http://www.andybeaulieu.com/Portals/1/PhysicsHelperDemo2.png

9.     Drag a PhysicsController onto the Canvas. Then, at the Bottom of the Properties window, expand the Miscellaneous Category and set the “AutoAddCanvasObjects” to true and “GravityVertical” to 500.
http://www.andybeaulieu.com/Portals/1/PhysicsHelperDemo3.png

10.  Go back to the Asset Library in the toolbox and drag a PhysicsStaticHolder onto the Canvas. In the properties window, under Miscellaneous Category, set the “Body” property of the PhysicsStaticHolder to “ramp” (this makes the ramp stay in place like a “static” body).

11.  Select File/Save to save everything.

12.  Run the project by hitting F5.

Physics Helper Known Issues

Note that I consider this an initial “Alpha” release of the Physics Helper! There are some issues that I will describe below.

  1. This is really just a preliminary Alpha proof of concept, so while it works for many situations, there is definite room for refactoring and redesign!
  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. The algorithm to determine the shape of a XAML element needs enhancement! While it works for a great many shape outlines, it is quite possible to create shapes can hide from the algorithm, and you end up with funky collisions. To Debug this problem, set the PhysicsController.IsDebugMode property to “True”.
  4. Blend 2.5 Preview does not yet handle CategoryAttributes (but the RTW version of Blend 2.5 will)… So the Physics properties are all stuck under “Miscellaneous” Category for now in Blend.

 

About the Farseer Physics Engine

Farseer is an easy to use, open source physics engine created by Jeff Weber and later ported to Silverlight by Bill Reiss. I’ve used Farseer to build Silverlight games and demos such as Hook Shot, Sort the Foobars, and the Polygon Demo.

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

Comments (5)

Getting "Cheap" Media Elements
Andy's Blog By Andy Beaulieu on 9/11/2008 2:06 PM

I had this question in the blog post below:

"I'm wondering where you got your sound effects? I spent many hours looking for royalty free sound files for my game and never found anything great."

Well, the truth is, not all of the sound effects were free in "Hook Shot." But they were all "cheap" or free. Here are a few great resources for game programming on a budget:

Loopsound.com: (not free but cheap) this is where I got the ambient music loop for the "scoreboard" sequence when the game is over. These guys have a great collection of high quality music loops and sound effects which won't break the bank.

Wikimedia Commons: (free) this is a huge database of freely usable media files. I got the "rotating basketball" picture used on the High Scores screen from here. Just pay attention to the "Licensing" section below each media element for details on how you can use.

Office Online: If you are a registered user of a Microsoft Office product, you can use the nice collection of clip art, sound effects and media on Office Online. NOTE: I am not a lawyer, but this sure sounds legal from their EULA:
Media Elements and Templates.You may have access to media images, clip art, animations, sounds, music, shapes, video clips, templates and other forms of downloadable content (“media elements”) associated with the service. If so, you may copy and use the media elements, and license, display and distribute them, along with your modifications as part of your software products, including your web sites, but you may not (i) sell, license or distribute copies of the media elements by themselves or as part of any collection, or product if the primary value of the product is in the media elements; (ii) grant customers of your product any rights to license or distribute the media elements; (iii) license or distribute any of the media elements that include representations of identifiable individuals, governments, logos, initials, emblems, trademarks, or entities for any commercial purposes or to express or imply any endorsement or association with any product, entity, or activity; or (iv) create obscene or scandalous works, as defined by law at the time the work is created, using the media elements.

Other Resources: Here is an article with a whole bunch of other resources!

Comments (0)

"Hook Shot" Silverlight Game
Andy's Blog By Andy Beaulieu on 9/6/2008 10:58 AM

I don't need much of an excuse to play with Silverlight, so when TeamZoneSports announced a Silverlight Games Competition, I had to indulge.

I came up with Hook Shot, a simple basketball shooting game where you try to make as many hook shots as you can before the timer runs out.  

The game uses the Farseer Physics Engine for the basketball physics and Rim/Net collision detection. I also added a high score functionality using a back-end web service.

I need to do some cleanup before thinking about releasing the source code (hey I threw this one together pretty quickly), but in the meantime if you are interested in using the Farseer Physics engine with Silverlight to create some cool applications, check out these prior posts:

Advanced Physics with Silverlight and Farseer

More Polygon Physics with Silverlight

Getting Started with Farseer Physics and Silverlight

Comments (12)

Making Silverlight Stand-alone Client
Andy's Blog By Andy Beaulieu on 9/3/2008 10:47 AM

One of the limitations of a Silverlight application is that it requires a browser and internet connectivity. What if you create an application that users put on their notebooks and take into the field where wireless access is unavailable?

Undoubtedly we will see many solutions to this connectivity problem, and Blendables has just released a beta of one such solution:

http://blendables.com/labs/Desklighter/Default.aspx

Desklighter is a little utility that creates an EXE file for hosting and launching a Silverlight .XAP file. You just point the utility at a .XAP file and it creates a hosting EXE which you can package with your XAP file into a ZIP.

Currently, Desklighter only generates a Windows EXE (no Mac or Linux yet) and requires the .NET Framework 2.0 on the host client.

Comments (3)

More Polygon Physics with Silverlight
Andy's Blog By Andy Beaulieu on 7/17/2008 2:28 PM

I’ve souped up my previous demo on Polygon Physics using Silverlight and Farseer to include two improvements. First, I’ve added a utility function to create an approximate Farseer Polygon Geometry from any Silverlight Path object. Also, I’ve added the ability to manipulate the polygons using the mouse (turns out this is pretty easy thanks to Farseer). In this blog post, I’ll explain how I made these enhancements.

[TRY THE DEMO]       [DOWNLOAD THE SOURCE]

 

To begin, if you are new to Farseer Physics and Silverlight, you should start with my first post on Polygon Physics.

Creating a Farseer Polygon Geometry based on a Path

In the demo app, if you type out any letters (A-Z) on the keyboard, then you will see a demo of Path objects being translated to Polygon Physics objects. In the Silverlight Project, these Path objects are pulled from the ucAlphabet.xaml user control.

There is an unfortunate problem in Silverlight 2 Beta 2 (not sure if this will be resolved by release time) with getting the geometry information on a Path object. So let’s say you design a Path using Expression Blend:

<Path x:Name="pathTest" Height="65" HorizontalAlignment="Left" Margin="78.5,57.5,0,0" VerticalAlignment="Top" Width="83" Data="M98,89 L79,122 L117,119 L150,108 L161,58 L102,58 z" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000"/>


…and then you later want to manipulate that Path’s geometry using code –

foreach (PathFigure figure in (pathTest.Data as PathGeometry).Figures)

{

    // this won't work in Silverlight 2 Beta 2

    // the Figures collection is always empty!

}


…you really can’t do the manipulation in code because the Path.Data property does not get filled.

So, we need another method of getting the Path’s shape so that we can hand it off to Farseer. One way we could do this is by translating the Path “mini-language” which defines the shape. So we could translate this part of the XAML for the Path:

Data="M98,89 L79,122 L117,119 L150,108 L161,58 L102,58 z"

I actually think this would be an ideal approach, but it’s not the one I took. Instead, I used the HitTest method to “scan” the Path for its approximate shape. I did this with a series of loops which scans each side of the Path and tests each x,y point for a hit. If the HitTest succeeds on a point, then I add that point into a list which defines the overall shape. I then give this list of points depicting the shape over to Farseer to define the Polygon Geometry.

Below is an excerpt from the method Utils.GetPointsForPath which scans the left side of the Path to get it’s outline:

// left side

for (double y = top; y < top + height; y++)

{

    for (double x = left; x < left + width; x++)

    {

        Point ptTest = new Point(x,y);

        List<UIElement> hits = path.HitTest(ptTest) as List<UIElement>;

        if (hits.Contains(path))

        {

            Point ptHit = new Point(x / scaleX, y / scaleY);

            outline.Add(ptHit);

            break;

        }

 

    }

}

 

I simply repeat this for the bottom, right, and top sides and then I have a list of points representing the approximate outline of the Path.

Manipulating Polygons with the Mouse

This is almost a freebie and can be nearly copy/pasted from the original Silverlight/Farseer demos ported by Bill Reiss. To allow the user to grab onto a Farseer object and move it around the screen, we need to do three basic steps:

1. In the MouseDown event for the polygon, we keep track of the polygon (“sprite”) that was clicked and create a Fixed Linear Spring at the clicked point.

void sprite_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

    Vector2 point = new Vector2((float)(e.GetPosition(_parentCanvas).X), (float)(e.GetPosition(_parentCanvas).Y));

    _pickedSprite = (sender as SpriteBase);

    _pickedSprite.CaptureMouse();

    if (_pickedSprite != null)

    {

        _mousePickSpring = ControllerFactory.Instance.CreateFixedLinearSpring(_physicsSimulator, _pickedSprite.BodyObject, _pickedSprite.BodyObject.GetLocalPosition(point), point, 10, 5);

        e.Handled = true;

    }

}

 

2. In the MouseMove event for the polygon, we adjust the attached point for the Fixed Linear Spring to the mouse move point.

void sprite_MouseMove(object sender, MouseEventArgs e)

{

    if (_mousePickSpring != null)

    {

        Vector2 point = new Vector2((float)(e.GetPosition(_parentCanvas).X), (float)(e.GetPosition(_parentCanvas).Y));

        _mousePickSpring.WorldAttachPoint = point;

        e.Handled = true;

    }

}

 

3. In the MouseUp event for the polygon, we dispose of the Fixed Linear Spring.

void sprite_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)

{

    if (_mousePickSpring != null && _mousePickSpring.IsDisposed == false)

    {

        _mousePickSpring.Dispose();

        _mousePickSpring = null;

        _pickedSprite.ReleaseMouseCapture();

        e.Handled = true;

    }

}

 

I also embellished with a Line showing the drag direction of the Spring from the Polygon.

Summary

Note that the “HitTest for Path Outline” method is only giving an approximate Polygon outlining the shape of the Path, but it is pretty close! I think with some further tweaks to the Utils.GetPointsForPath method, it could get even closer.

Comments (4)

Finding a XAML Element by Name at Runtime
Andy's Blog By Andy Beaulieu on 7/14/2008 4:52 PM

In ASP.NET, it's possible to get a reference to a control by Id at runtime using the FindControl method - something like this:

Label lblCustomerName = (Label) item.FindControl("lblCustomerName");

This can be helpful in dynamic code which might need to iterate through a large collection of elements in XAML.

In Silverlight, there is no FindControl method, but we can still get a reference to an object by name using the FindName method of a container:

TextBlock lblCustomerName = cnvContainer.FindName("lblCustomerName") as TextBlock

We can also access the Children collection of a container and query using a lambda expression:

TextBlock lblCustomerName = (cnvContainer.Children.First<UIElement>(label => label.GetValue(Canvas.NameProperty).ToString() == "lblCustomerName")) as TextBlock;

In the above example, we are getting a reference to an object named lblCustomerName inside a canvas named cnvContainer. We do so by using a lambda expression on the Children property, along with the Canvas.NameProperty which gives the variable (x:Name) property of a UIElement.

Comments (1)

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) 2014 andy.beaulieu.com - Login