Introduction-
Shatter Ball is a multilevel puzzle game design for Windows Desktop. Firstly I started this app as a metro app and now I am designing it for windows 8 desktop as well as tablet and Lenovo Horizon AIO. It is all about fun and entertainment and is capable of utilizing some cool features of Lenovo Horizon AIO. When I read about this device I really felt that this game is capable of utilizing some unique features of this device and it will be a user friendly game and a complete attraction point through this tabletop PC with several gaming accessories and completely a new breed of touch screen devices all-in-ones designed for both desktop as well as metro apps. Integration with windows 8 figures out some pleasing touch experience with its wide touch area and screen size which is quiet helpful in gaming and other amusement.
This game is the ported version of Shatter Ball which I had developed for windows 8 metro UI and I have made it using C#,XAML and Silverlight 5. This can be played as a desktop application on Lenovo Horizon AIO . before moving further I would like to tell about some rules and their complete description and how to play it .
Rules and Description-
I have categorized this game in two different categories I have designed 20 levels for category 1 and 6 levels for category 2 and description of both categories are as follow-
Category 1
Starting from the beginning there are some green balls as a target balls and red ball as a striker each level has only one striker and variable target balls as according to the number of levels and some brown blocks as a obstacles so we have to destroy each and every green balls just by touching on the screen and we have to make certain arrangement such that after touching on screen the striker will move in that direction and as striker and green ball will collide the target balls will get destroyed there are some brown blocks which are stationary objects and act as a mirror that means striker will get reflected after getting collided with brown blocks. I have set the number of tap chances in each and every level and under that chances player has to destroy each and every green balls, If every green ball will get destroyed under the given tap chances then player will be automatically navigated to next level ,otherwise player will be navigated to the same level and about complexity , as the number of level gets increases the complexity of the game gets increases due to increment in greenballs and obstacle blocks. All the collisions and movement take place under complete physics laws and under farseer physics engine and in between game if player wants to play that level again or go to home or choose any different level I have provided intergame navigation option each and every option through pop up option box .I have designed 20 levels in category 1.
Category 2
This category is almost similar to category one but there is one difference that in category 1 all the brown blocks were stationary and here they are movable red blocks and they are movable under physics laws so they will help player to destroy target balls with their movement as they are free to move anywhere but brown blocks are stationary and they will not move .Here I have design 7 levels and here I am planning to make that striker movable through Air Hockey paddle or striker which is surely a elegant associate feature of Lenovo Horizon AIO and then player can hit that striker with help of paddle and then whole thing will move according to energy level with which player has provided with striker.
Features Of Shatter Ball-
1.Optimized for both tablet and PC mode-
Since, the Lenovo Horizon AIO can be used as a Table PC as well as tablet so player can have both experiences of touch in tablet mode and can play through mouse in table PC mode and I have included various pointer pressed event and trying to introduce some touch gestures so that both things can be done silmultaneously and will depend on user .
2.Use of Device paddle(striker) in moving Red Ball-
As I have read about this device some accessories like E-dice and electronic paddle(striker) so as I have described in rules that in second category I'm planning to move that red ball through that paddle(str) as I have made that striker movable and whole movement will depend upon the power that will be provided by player with help that paddle I have not found a proper way to include but hopefully it will be done soon. I think this utilization will make this game perfectly fit for this device.
3.Multilevel Game -
As I have designed collectively 27 levels in both categories and that is the key feature of this game and I have provided inter-game navigation system in that user is free to choose any level and can go to any part of the game just through pop up window option which is capable to make inter-game navigations very efficiently and you will start from the simple level and as you will move to the next level the number of target ball will get increased and that will increase the complexity as well .
4.Display,Animations and Screen Orientations -
Lenovo Horizon is a huge 27” table PC and it has very wide screen display this game will takeout its best utility on this device as with its clear UI and some animations when collision takes place which make this game more attractive. The screen is auto adjustable according to user orientation and has property to get revolve around 360 degree according to the player’s orientation.
5. Cloud Integration -
As i am also planning to add some cloud features in this game and add some features regarding multiplayer version ,leader board and online result generation that can be shared through facebook and twitter and other social integration.
Using the code
I will try to show some important areas, that how I constructed it and made it with integration of Physics Farseer Engine ,C# and XAML and silverlight 5 mainly i have used user custom control to design every physics object and to and i have used classic buttons and filled them by image which is responsible for event and navigation. Since most of the code in silverlight is same just to make it i have design in XAML and some pointer press event to take response from user in an effective way and to make it fully funtional.
1.Physics Engine-
In this game I have used farseer physics engine and all the balls and blocks move under the control of this engine and it can be well integrated with WinRT and Silverlight.
Including the Name Space-
After including this we can access and can make our custom control into physics object and then it can move according to the physics engine .
xmlns:local="using:Bomb_Man"
xmlns:physics="using:Spritehand.FarseerHelper"
2.Striker and target(Red Ball & Green balls)-
These all are the user custom controls and generally they are the circles and I have used them as striker as well as target balls in this game.
<Viewbox>
<Canvas Height="100" Width="100">
<physics:PhysicsSprite RestitutionCoefficient="1" x:Name="ManSprite" ShapeType="Ellipse" Height="100" Width="100" >
<Ellipse x:Name="ellipse" Height="100" Width="100" StrokeThickness="0">
<Ellipse.Fill>
<ImageBrush ImageSource="Man.png"/>
</Ellipse.Fill>
<Ellipse.Projection>
<PlaneProjection/>
</Ellipse.Projection>
</Ellipse>
</physics:PhysicsSprite>
</Canvas>
</Viewbox>
3.Blocks-
It is a rectangular custom control and I have used it in making obstacles in this game i have set cofficient of restitution to 1 so that there can be clear reflection from these obstacles as defined under physics laws.
<Viewbox HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Canvas x:Name="mainCanvas" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<MediaElement Name="Prop1" Source="/Prop1.wav" AutoPlay="False"></MediaElement>
<physics:PhysicsSprite IsStatic="True" RestitutionCoefficient="1" x:Name="Man1Sprite" ShapeType="Rectangle" Height="40" Width="1366" >
<Rectangle Height="40" Width="1366" RenderTransformOrigin="0.5,0.5" Canvas.Top="0.01" UseLayoutRounding="False" d:LayoutRounding="Auto" Canvas.Left="-1.042">
<Rectangle.Fill>
<ImageBrush ImageSource="MirrorH.png"/>
</Rectangle.Fill>
</Rectangle>
</physics:PhysicsSprite>
</Canvas>
</Viewbox>
4.Integration Of all physics Object with Game Page-
In this section I have integrated all my physics object and customs control on main game page and set the position of each and every objects and then coded for the different actions of different objects under game engine.
To do this i have places every physics object under a canvas and set the property of that canvas to stretched so that it can have common display under any size of screen on which it runs so after that i have placed all my custom controls and then i have given them a unique name and on that canvass i have made a pointer pressed event such that when user will touch or click by mouse than whole movement will occur and this is our game.xaml page in which i have design the complete UI and then coded for every object in game.xaml.cs page.
<Viewbox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<physics:PhysicsCanvas MousePickEnabled="True" Name="mainCanvas" Width="1366" Height="768" PointerPressed="mainCanvas_PointerPressed_1" >
<physics:PhysicsCanvas.Background>
<ImageBrush ImageSource="Background.png"/>
</physics:PhysicsCanvas.Background>
<custom:Man Height="82" x:Name="ManBall" Canvas.Left="65" Canvas.Top="166" RenderTransformOrigin="-0.105,3.045" Width="66" />
<custom:Mirror2 Height="42" x:Name="mirror21" Canvas.Top="726" Width="1178" Canvas.Left="326" />
<custom:Target1 Height="70" x:Name="target1" Canvas.Left="1122" Canvas.Top="580" Width="56" RenderTransformOrigin="3.2,1.54"/>
<custom:Mirror Height="200" Width="30" x:Name="mirror211" Canvas.Left="667" Canvas.Top="166" />
<custom:Mirror Height="200" Width="30" x:Name="mirror211_Copy" Canvas.Left="10" Canvas.Top="367" />
<custom:Mirror Height="200" Width="30" x:Name="mirror211_Copy1" Canvas.Left="1294" Canvas.Top="399" />
<custom:Target1 Height="70" x:Name="target1_Copy" Canvas.Left="65" Canvas.Top="422" Width="56" RenderTransformOrigin="3.2,1.54"/>
<custom:Target1 Height="70" x:Name="target1_Copy1" Canvas.Left="730" Canvas.Top="407" Width="56" RenderTransformOrigin="3.2,1.54"/>
<custom:Target1 Height="70" x:Name="target1_Copy2" Canvas.Left="730" Canvas.Top="166" Width="56" RenderTransformOrigin="3.2,1.54"/>
<custom:Target1 Height="70" x:Name="target1_Copy3" Canvas.Left="730" Canvas.Top="292" Width="56" RenderTransformOrigin="3.2,1.54"/>
<custom:Mirror Height="200" Width="30" x:Name="mirror211_Copy2" Canvas.Left="667" Canvas.Top="292" />
<custom:Target1 Height="70" x:Name="target1_Copy4" Canvas.Left="65" Canvas.Top="529" Width="56" RenderTransformOrigin="3.2,1.54"/>
<custom:Target1 Height="70" x:Name="target1_Copy5" Canvas.Left="65" Canvas.Top="327" Width="56" RenderTransformOrigin="3.2,1.54"/>
<custom:MirrorH Height="30" Width="200" x:Name="mirrorh" Canvas.Left="954" RenderTransformOrigin="2.35,-2.067" Canvas.Top="70"/>
<custom:Target1 Height="70" x:Name="target1_Copy6" Canvas.Left="1098" Canvas.Top="166" Width="56" RenderTransformOrigin="3.2,1.54"/>
<custom:Target1 Height="70" x:Name="target1_Copy7" Canvas.Left="954" Canvas.Top="166" Width="56" RenderTransformOrigin="3.2,1.54"/>
<custom:Target1 Height="70" x:Name="target1_Copy8" Canvas.Left="553" Canvas.Top="407" Width="56" RenderTransformOrigin="3.2,1.54"/>
<custom:Target1 Height="70" x:Name="target1_Copy9" Canvas.Left="553" Canvas.Top="292" Width="56" RenderTransformOrigin="3.2,1.54"/>
<custom:Target1 Height="70" x:Name="target1_Copy10" Canvas.Left="553" Canvas.Top="166" Width="56" RenderTransformOrigin="3.2,1.54"/>
<custom:Target1 Height="70" x:Name="target1_Copy11" Canvas.Left="843" Canvas.Top="617" Width="56" RenderTransformOrigin="3.2,1.54"/>
<custom:Target1 Height="70" x:Name="target1_Copy12" Canvas.Left="417" Canvas.Top="617" Width="56" RenderTransformOrigin="3.2,1.54"/>
<custom:Welcome x:Name="Welcome" Canvas.Left="-400" Canvas.Top="200" RenderTransformOrigin="0.5,0.5">
<custom:Welcome.RenderTransform>
<CompositeTransform/>
</custom:Welcome.RenderTransform>
</custom:Welcome>
<TextBlock HorizontalAlignment="Left" Name="text2" TextWrapping="Wrap" Text="Tap:" VerticalAlignment="Top" Height="66" Foreground="Red" Width="225" FontSize="45" Canvas.Left="1131" Canvas.Top="10"/>
<Button Height="52" x:Name="b11" Canvas.Left="10" Canvas.Top="48" Width="56" Click="b11_Click_1">
<Button.Background>
<ImageBrush ImageSource="Set.png"/>
</Button.Background>
</Button>
<MediaElement Name="arcade" Source="arcade.wav" AutoPlay="False"></MediaElement>
<custom:Setting11 Height="200" Width="1366" x:Name="setting" Canvas.Left="0" Canvas.Top="-200" RenderTransformOrigin="0.5,0.5" >
<custom:Setting11.RenderTransform>
<CompositeTransform/>
</custom:Setting11.RenderTransform>
</custom:Setting11>
<custom:Try x:Name="Welcome12" Canvas.Left="1430" Canvas.Top="200" RenderTransformOrigin="0.5,0.5" >
<custom:Try.RenderTransform>
<CompositeTransform/>
</custom:Try.RenderTransform>
</custom:Try>
</physics:PhysicsCanvas>
</Viewbox>
5.Disappearance of Target Balls and Animations-
This XAML code is all about the animation that’s take place when striker gets collided with the target balls and then target balls get disappeared this code is all about small animations and disappearance of target balls, for doing this i have used Expression Blend to make all the animations and design.
Actually i have designed my target ball through path tool and i have made four parts of cirlce and all of are quarter circle and i have joined them and then i have set the animation that when striker will collide with this target ball then that four quarter circle will get shattered and then they will loose their visibility and this will take place for every collision.
<UserControl.Resources>
<Storyboard SpeedRatio="1.5" x:Name="Collision">
<DoubleAnimation Duration="0:0:0.4" To="-83.333" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="path" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:0.4" To="52" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="path" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:0.4" To="78" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="path1" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:0.4" To="-53.333" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="path1" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:0.4" To="-75.333" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="path2" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:0.4" To="-54" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="path2" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:0.4" To="88.667" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="path3" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:0.4" To="44" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="path3" d:IsOptimized="True"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="path">
<DiscreteObjectKeyFrame KeyTime="0:0:0.4">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.5">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="path3">
<DiscreteObjectKeyFrame KeyTime="0:0:0.4">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.5">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="path1">
<DiscreteObjectKeyFrame KeyTime="0:0:0.4">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.5">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="path2">
<DiscreteObjectKeyFrame KeyTime="0:0:0.4">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.5">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Viewbox>
<Canvas Height="100" Width="100">
<physics:PhysicsSprite Mass="1" IsStatic="True" IsSensor="True" RestitutionCoefficient="1" x:Name="Target1Sprite" ShapeType="Ellipse" Height="100" Width="100" >
<Ellipse Height="100" Stroke="Green" Width="100" StrokeThickness="0">
<Ellipse.Fill>
<ImageBrush ImageSource="Target.png"/>
</Ellipse.Fill>
<Ellipse.Projection>
<PlaneProjection/>
</Ellipse.Projection>
</Ellipse>
</physics:PhysicsSprite>
<Canvas Name="animeCanvas" Visibility="Collapsed" Height="100" Width="100">
<Path x:Name="path" Data="M2,50.6667 L42,51.333 L42,92.6854" Fill="#FF27B03A" Height="43" Canvas.Left="9.334" Stretch="Fill" Stroke="Black" Canvas.Top="47" UseLayoutRounding="False" Width="41" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<CompositeTransform/>
</Path.RenderTransform>
</Path>
<Path x:Name="path3" Data="M97.3333,49.3333 L52.0003,50.667 L54.667,88.6581" Fill="#FF27B03A" Height="40.334" Canvas.Left="47.167" Stretch="Fill" Stroke="Black" Canvas.Top="47" UseLayoutRounding="False" Width="46.333" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<CompositeTransform/>
</Path.RenderTransform>
</Path>
<Path x:Name="path1" Data="M52.6667,3.33333 L54.6664,42.667 L93.327,42.667" Fill="#FF27B03A" Height="40.334" Canvas.Left="47.167" Stretch="Fill" Stroke="Black" Canvas.Top="3.499" UseLayoutRounding="False" Width="41.666" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<CompositeTransform/>
</Path.RenderTransform>
</Path>
<Path x:Name="path2" Data="M46.6667,3.33333 L43.9997,40.667 L7.33303,42" Fill="#FF27B03A" Height="39.667" Canvas.Left="10" Stretch="Fill" Stroke="Black" Canvas.Top="5.5" UseLayoutRounding="False" Width="40.334" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<CompositeTransform/>
</Path.RenderTransform>
</Path>
<MediaElement Name="BallHit" Source="/BallHit.wav" AutoPlay="False"></MediaElement>
</Canvas>
</Canvas>
</Viewbox>
</UserControl>
6.Code Of vector Assignment of striker (Red Ball)-
This code is all about the touch event or any pointer pressed event under which this striker gets a vector which points towards the touch point and then it will move in the direction of touch point after getting the coordinates of touch position.
private void mainCanvas_PointerPressed_1(object sender, PointerRoutedEventArgs e)
{
if (!timer.IsEnabled)
{
Point tempPoint = e.GetCurrentPoint(mainCanvas).Position;
Vector2 mousePoint = new Vector2((float)tempPoint.X, (float)tempPoint.Y);
Vector2 impulse2 = Vector2.Subtract(ManBall.SpriteReference.Position, mousePoint);
impulse2.Normalize();
ManBall.SpriteReference.launchSprite(-impulse2*5);
timer.Start();
chance -= 1;
text2.Text = "Tap: " + chance.ToString();
}
}
7.Code Of Intersection and Disappearance of target balls-
void Target1Sprite_Collision(PhysicsSprite source, string collidedWith, FarseerPhysics.Dynamics.Contacts.Contact contact)
{
if (collidedWith.Contains("ManSprite"))
{
App.canvasRef.DeletePhysicsObject(source.Name);
App.count++;
playSound1();
animeCanvas.Visibility = Visibility.Visible;
Collision.Begin();
}
}
8.Code for boundary limitation and replacement of the ball-
This code all about the boundary limits such that when ball will move or if its position is outside the screen then it will get placed at its original position from where it started.
void move()
{
bool hit = false;
if (ManBall.SpriteReference.Position.X < -50)
{
ManBall.SpriteReference.Position = orPos;
timer.Stop();
hit = true;
}
if (ManBall.SpriteReference.Position.Y < -50)
{
ManBall.SpriteReference.Position = orPos;
timer.Stop();
hit = true;
}
if (ManBall.SpriteReference.Position.Y > 820)
{
ManBall.SpriteReference.Position = orPos;
timer.Stop();
hit = true;
}
if (ManBall.SpriteReference.Position.X > 1420)
{
ManBall.SpriteReference.Position = orPos;
timer.Stop();
hit = true;
}
if (hit)
{
if (App.count > 13 && chance > 0)
{
playSound();
Welcome1.Begin();
Welcome1.Completed += Welcome1_Completed;
timer.Stop();
}
else if (App.count < 14 && chance == 0)
{
playSound();
Try11.Begin();
Try11.Completed += Try5_Completed;
timer.Stop();
}
else if (chance == 0 && App.count == 14)
{
playSound();
Welcome1.Begin();
Welcome1.Completed += Welcome3_Completed;
timer.Stop();<img src="635117/1.jpg" width="640" height="360" />
}
} 9.Code to rotate the obstacles
This code is all about the rotation of every brown and red obstacles which i have set on the game page and and i have made that rotation by providing some rotational properties in xaml code by setting rotate angle property to some angle and same in C# code .
public double RotateAngle
{
set
{
ManSprite.Rotation = value;
RotateTransform tr = new RotateTransform();
tr.Angle = value;
this.RenderTransform = tr;
}
} My Previous Work
I am Student and i work on windows phone and windows 8 .
My windows phone Apps- http://www.windowsphone.com/en-in/search?q=sudhanshu%20gupta
My Windows 8 Apps-
1. Learn Alphabets and Numbers-http://apps.microsoft.com/windows/app/learn-alphabets-numbers/88a28cf3-9aad-405a-8379-54bb7b028003
2. Hitball-http://apps.microsoft.com/windows/app/hit-ball/deec5ced-172d-4f16-95e3-1331d9897a01
3.Quick Ball-http://apps.microsoft.com/windows/app/quick-ball/76c9a2c5-63d9-4705-8d7f-cbd8089c3fc4
Future Works
1. To make some more levels and add some some more functionality related to touch and scoring system .
2. Multiplayer version of this game.
3.Performance.
Platform And Category
All In One(Games)
Demo
Here i want to show the whole concept of my game and the porting work is going on ,so i want to show a brief description of my game though this demo so it was a metro app under construction and i am porting this app for desktop and most of the part have been ported and i am about to finish this game and i have used C#, XAML and Silverlight 5 for porting so complete demo of metro form of this game can be viewed on http://www.youtube.com/watch?v=FGMxXXceTj4 just to get the basic idea and how it can be played .
Screenshots Of Shatter Ball
Level1
Level 5
Level 8
Level 13
Level 17
Level 19
Inter-game Navigation Option that i have included in each and every level.
Now Some Screenshots of Category 2
Level1
Level4
Navigation to same Level-
Navigation to the next level
History
My First Post.
