Silverlight WP7 Complex Shapes

Feb 7, 2011 at 7:19 AM

I noticed the eyes in this example move about.  Is that with a StoryBoard?  And if so, is this possible with the latest version within an element that has a PhysicsObjectBehavior as a child control?  I think this demo uses UserControls.
http://www.andybeaulieu.com/silverlight/3.0/physicshelper3/Demo3TestPage.html

Also, for example, say I wanted that ball in the same example to have ears made in silverlight or as a png, but, I don't want the ears to trigger collisions and I do want the ears to remain attached to the ball as it collides.  I should not set the ears to static, so, would I simply just add a joint for the ears and then in the code tell the ears to ignore collisions with all collision groups?

Coordinator
Feb 7, 2011 at 12:41 PM

Storyboard animations are preserved when physics elements are created but you need to make sure the target of the animation is part of the UI that has the PhysicsObjectBehavior. I know that sounds like common sense but sometimes it's easy to let something else slip into the storyboard that affects UI outside of the physics object.

For your example, create a Canvas for you entire ball sprite and add whatever ears, eyes, nose, etc. into the Canvas. Then use an Ellipse for the outline that has equal height and width. Then set the BoundaryElement property of the PhysicsObjectBehavior to that Ellipse.

It's really pretty nice, using this method you can create whatever visual representation you want inside a Canvas but then tell the PhysicsObjectBehavior the element to use for the shape.

Feb 8, 2011 at 2:45 AM

Fantastic, worked just as you said.  Xaml below for others in case they want to do this as well.

 

<Canvas x:Name="LayoutRoot" Background="Transparent">
    	<Canvas x:Name="canPhy" Height="480" Width="800">
    		<Custom:Interaction.Behaviors>
    			<pb:PhysicsControllerBehavior/>
    		</Custom:Interaction.Behaviors>
    		<Rectangle Fill="#FFF4F4F5" Height="36" Stroke="Black" Width="800" Canvas.Top="444">
    			<Custom:Interaction.Behaviors>
    				<pb:PhysicsObjectBehavior IsStatic="True"/>
    			</Custom:Interaction.Behaviors>
    		</Rectangle>
    		<Rectangle Fill="#FFF4F4F5" Height="24" Stroke="Black" Width="252" Canvas.Left="68" Canvas.Top="136" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto">
    			<Custom:Interaction.Behaviors>
    				<pb:PhysicsObjectBehavior IsStatic="True"/>
    			</Custom:Interaction.Behaviors>
    			<Rectangle.RenderTransform>
    				<CompositeTransform Rotation="5.945"/>
    			</Rectangle.RenderTransform>
    		</Rectangle>
    		<Rectangle Fill="#FFF4F4F5" Height="24" Stroke="Black" Width="252" Canvas.Left="328" Canvas.Top="224" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto">
    			<Custom:Interaction.Behaviors>
    				<pb:PhysicsObjectBehavior IsStatic="True"/>
    			</Custom:Interaction.Behaviors>
    			<Rectangle.RenderTransform>
    				<CompositeTransform Rotation="-5.751"/>
    			</Rectangle.RenderTransform>
    		</Rectangle>
    		<Rectangle Fill="#FFF4F4F5" Height="24" Stroke="Black" Width="252" Canvas.Left="68" Canvas.Top="312" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto">
    			<Custom:Interaction.Behaviors>
    				<pb:PhysicsObjectBehavior IsStatic="True"/>
    			</Custom:Interaction.Behaviors>
    			<Rectangle.RenderTransform>
    				<CompositeTransform Rotation="10.522"/>
    			</Rectangle.RenderTransform>
    		</Rectangle>
    		<Canvas Height="56" Width="56" Canvas.Left="104" Canvas.Top="56">
    			<Custom:Interaction.Behaviors>
    				<pb:PhysicsObjectBehavior BoundaryElement="ellipse"/>
    			</Custom:Interaction.Behaviors>
    			<Ellipse x:Name="ellipse" Fill="#FF0F0FDC" Height="56" Stroke="Black" Width="56"/>
    			<Ellipse Fill="#FF8D8DE7" Height="15" Stroke="Black" Width="15"/>
    			<Ellipse Fill="#FF8D8DE7" Height="15" Stroke="Black" Width="15" Canvas.Left="41"/>
    		</Canvas>
    	</Canvas>

    </Canvas>

Feb 8, 2011 at 3:23 AM

My first code sample addressed the second part of my original question, but, I'm having problems with the first part of my question, the animation.  Although the .Begin() even fires and the animation starts and continues to run, I immediately get the following error.

Cannot resolve TargetName eye.

<phone:PhoneApplicationPage.Resources>
		<Storyboard x:Name="eyeBounce" RepeatBehavior="Forever" AutoReverse="True" BeginTime="0">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="eye">
				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="13"/>
				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="2"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="eye">
				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="8"/>
				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="24"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
	</phone:PhoneApplicationPage.Resources>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Canvas x:Name="LayoutRoot" Background="Transparent">
    	<Canvas x:Name="canPhy" Height="480" Width="800">
    		<Custom:Interaction.Behaviors>
    			<pb:PhysicsControllerBehavior/>
    		</Custom:Interaction.Behaviors>
    		<Rectangle Fill="#FFF4F4F5" Height="36" Stroke="Black" Width="800" Canvas.Top="444">
    			<Custom:Interaction.Behaviors>
    				<pb:PhysicsObjectBehavior IsStatic="True"/>
    			</Custom:Interaction.Behaviors>
    		</Rectangle>
    		<Rectangle Fill="#FFF4F4F5" Height="24" Stroke="Black" Width="252" Canvas.Left="68" Canvas.Top="136" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto">
    			<Custom:Interaction.Behaviors>
    				<pb:PhysicsObjectBehavior IsStatic="True"/>
    			</Custom:Interaction.Behaviors>
    			<Rectangle.RenderTransform>
    				<CompositeTransform Rotation="5.945"/>
    			</Rectangle.RenderTransform>
    		</Rectangle>
    		<Rectangle Fill="#FFF4F4F5" Height="24" Stroke="Black" Width="252" Canvas.Left="328" Canvas.Top="224" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto">
    			<Custom:Interaction.Behaviors>
    				<pb:PhysicsObjectBehavior IsStatic="True"/>
    			</Custom:Interaction.Behaviors>
    			<Rectangle.RenderTransform>
    				<CompositeTransform Rotation="-5.751"/>
    			</Rectangle.RenderTransform>
    		</Rectangle>
    		<Rectangle Fill="#FFF4F4F5" Height="24" Stroke="Black" Width="252" Canvas.Left="68" Canvas.Top="312" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto">
    			<Custom:Interaction.Behaviors>
    				<pb:PhysicsObjectBehavior IsStatic="True"/>
    			</Custom:Interaction.Behaviors>
    			<Rectangle.RenderTransform>
    				<CompositeTransform Rotation="10.522"/>
    			</Rectangle.RenderTransform>
    		</Rectangle>
    		<Canvas Height="56" Width="56" Canvas.Left="104" Canvas.Top="56">
    			<Custom:Interaction.Behaviors>
    				<pb:PhysicsObjectBehavior BoundaryElement="ellipse"/>
    			</Custom:Interaction.Behaviors>
    			<Ellipse x:Name="ellipse" Fill="#FF0F0FDC" Height="56" Stroke="Black" Width="56"/>
    			<Ellipse Fill="#FF8D8DE7" Height="15" Stroke="Black" Width="15"/>
    			<Ellipse Fill="#FF8D8DE7" Height="15" Stroke="Black" Width="15" Canvas.Left="41"/>
    			<Ellipse x:Name="eye" Fill="#FF4EDC0F" Height="15" Canvas.Left="8" Stroke="Black" Canvas.Top="19" Width="15" RenderTransformOrigin="0.5,0.5" Loaded="eye_Loaded">
    				<Ellipse.RenderTransform>
    					<CompositeTransform/>
    				</Ellipse.RenderTransform>
    			</Ellipse>
    		</Canvas>
    	</Canvas>

    </Canvas>

Feb 10, 2011 at 5:32 PM

Anyone have an idea why this bug occurs in my most recent post?

Mar 14, 2011 at 2:06 AM
Intrawebs wrote:

My first code sample addressed the second part of my original question, but, I'm having problems with the first part of my question, the animation.  Although the .Begin() even fires and the animation starts and continues to run, I immediately get the following error.

Cannot resolve TargetName eye.

 

I had this same problem.  I have a usercontrol that gets added programmatically.  On the first instance the storyboard ran fine, but as soon as you add another you get the Cannot Resolve Targetname xxxx error.  I fixed it by grouping the target of the storyboard into another canvas.