How to make a Windows Store game with C# and XAML, part 3

Moving the ship
When we’re doing a universal app, we have to take in account that there are several possible ways for users to control the game. Phones and tablets have touch screens, but on desktop still most of us prefer to use keyboard to play games.

For doing the movements, we need to be aware of the screen dimensions. Add these member variables to App.xaml.cs class:

public static double ScreenWidth { get; set; }
public static double ScreenHeight { get; set; }
public static int Highscore { get; set; }

We set these values in StartPage.xaml.cs, at the end of the constructor, after the Loaded -lambda:

#if WINDOWS_PHONE_APP
            App.ScreenWidth = Windows.ApplicationModel.Core.CoreApplication.MainView.CoreWindow.Bounds.Width;
            App.ScreenHeight = Windows.ApplicationModel.Core.CoreApplication.MainView.CoreWindow.Bounds.Height;
#endif
#if WINDOWS_APP
            
            App.ScreenWidth = Window.Current.Bounds.Width;
            App.ScreenHeight = Window.Current.Bounds.Height;
#endif

Here we used #if statements to run different code depending on the platform we’re running, the code will be compiled to include just the platform specific code for each build for Phone and Windows.

Now we open the GamePage.xaml.cs and add the following member variables to keep track of the ship position:

private double shipPosition;
private readonly double shipHorizontalPosition = App.ScreenHeight - 50;

Now we’re ready to create the actual method to move the ship. We add first this to the top of the GamePage.xaml.cs:

using Windows.System;

And then this to the end of the GamePage.xaml.cs:

private void MoveShip(int amount)
{
    shipPosition += amount;
 
    // Let's make sure that the ship stays in the screen
    if (shipPosition > LayoutRoot.ActualWidth - 30)
    {
        shipPosition = LayoutRoot.ActualWidth - 30;
    }
    else if (shipPosition < 0)
    {
        shipPosition = 0;
    }
 
    Rocket.Margin = new Thickness(shipPosition, shipHorizontalPosition, 0, 0);
}

The method moves the ship the amount specified in the calling function (in pixels), and checks that it doesn’t go over the boundaries from left or right.

Next we’ll capture the keyboard in case the user is playing with desktop machine. Let’s create the event handler for key events. Open GamePage.xaml.cs constructor, and add the following after InitializeComponent():

Loaded += (sender, args) =>
{
    // Resize move controls to fit the area
    LeftCanvas.Width = LeftCanvas.Height = (LeftArea.ActualWidth / 2) - 10;
    RightCanvas.Width = RightCanvas.Height = (LeftArea.ActualWidth / 2) - 10;

    // Position the ship to the bottom center of the screen
    shipPosition = LayoutRoot.ActualWidth / 2;
    Rocket.Margin = new Thickness(shipPosition, shipHorizontalPosition, 0, 0);
 
    Window.Current.CoreWindow.KeyDown += CoreWindow_KeyDown;
};

Next we add the actual code to handle the key presses by adding the following method:

private void CoreWindow_KeyDown(Windows.UI.Core.CoreWindow sender, Windows.UI.Core.KeyEventArgs args)
{
    switch (args.VirtualKey)
    {
        case VirtualKey.Left:
            MoveShip(-5);
            break;
        case VirtualKey.Right:
            MoveShip(5);
            break;
        case VirtualKey.Space:
            OnFire(null, null);
            break;
        default:
            break;
    }
}

Star field background
We had one type of particle engine on the start screen, but I think we need something of a more traditional kind to create sense of moving for the ship. First we need to add one using –statement to the top of the file:

using Windows.UI;

Then we need to add some more member variables for the starfield:

private const int StarCount = 200
private List<Dot> stars = new List<Dot>(StarCount);
private Random randomizer = new Random();

Here’s altered versions of CreateStar and MoveStars methods, which we add to the GamePage.xaml.cs:

void MoveStars(object sender, object e)
{
    if (stars.Count < StarCount)
    {
        CreateStar();
    }

    foreach (Dot star in stars)
    {
        Canvas.SetLeft(star.Shape, Canvas.GetLeft(star.Shape) + star.Velocity.X);
        Canvas.SetTop(star.Shape, Canvas.GetTop(star.Shape) + star.Velocity.Y);

        if (Canvas.GetTop(star.Shape) > LayoutRoot.ActualHeight)
        {
            int left = randomizer.Next(0, (int)LayoutRoot.ActualWidth);
            Canvas.SetLeft(star.Shape, left);
            Canvas.SetTop(star.Shape, 0);
        }
    }
    Move.Begin();
}
private void CreateStar()
{
    var star = new Dot()
    {
        Shape = new Ellipse() { Height = 2, Width = 2 },
        Velocity = new Point(0, randomizer.Next(1, 5))
    };

    int left = randomizer.Next(0, (int)LayoutRoot.ActualWidth);
    Canvas.SetLeft(star.Shape, left);
    Canvas.SetTop(star.Shape, 0);
    Canvas.SetZIndex(star.Shape, 1);
            
    // Set color
    byte c = (byte)randomizer.Next(10,255);
    star.Shape.Fill = new SolidColorBrush(Color.FromArgb(c, c, c, c));

    stars.Add(star);
    LayoutRoot.Children.Add(star.Shape);
}

Now we go to the constructor of the same class, and add inside the end of the Loaded lambda the following code:

// Starfield background
CreateStar();
Move.Completed += MoveStars;
Move.Begin();

Now if you run the game, you see how stars are falling in different speeds from the top of the screen, creating sense of depth and speed.

Adding enemies
What would a shoot’em up be without any enemies to shoot? Next we’ll add some enemies to the screen to get some action to the screen.

Let’s create a new UserControl, and call it Bobo by right clicking the Shared project, and Add, New Item, User Control. You could give it some nice bitmap images, but for this exercise I’m using XAML to draw the the creature. Open Bobo.xaml and copy/paste the following on top the XAML:

<UserControl
    x:Class="MySpaceInvanders.Bobo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Width="60" Height="60">
 
    <Canvas Width="60" Height="60">
        <Ellipse x:Name="InsideEllipse" Width="60" Height="60" Margin="0,0"/>
        <Polygon Stroke="Black" Fill="Green" Points="10,10,5,0,15,5"/>
        <Polygon Stroke="Black" Fill="Green" Points="45,5,55,0,50,10"/>
        <Ellipse Width="5" Height="5" Fill="Gold" Margin="20,20" />
        <Ellipse Width="5" Height="5" Fill="Gold" Margin="35,20" />
        <Ellipse Width="30" Height="8" Fill="HotPink" Margin="15,40" />
    </Canvas>
</UserControl>

Open the Bobo.xaml.cs and add the following member variables to the class:

public int AreaWidth { get; set; }
public Point Location { get; set; }
public bool Dead { get; set; }
public int Worth { get; set; } // amount of score for kill
public int Type; // 1 - green, 2 - blue, 3 - mega
private readonly Random randomizer = new Random();
public double Velocity;
private int direction;
private int directionCount = 0; // don't change direction on every loop

Add also the velocity and type randomizer to the constructor, just after the InitializeComponent –call:

Velocity = randomizer.Next(1, 3);
Type = randomizer.Next(1, 4);
if (Type == 3)
{
    Velocity = 4;
}
SetType();

Now we have three different types of enemies, and one of them moves faster than the others. For the enemy to move on the screen, we’ll add the Move method for it:

public void Move()
 {
     int move;
 
     // Randomize the move direction
     if (directionCount == 0)
     {
         direction = randomizer.Next(1, 3);
     }
     if (direction == 1)
     {
         move = -1;
     }
     else
     {
         move = 1;
     }
     directionCount++;
 
     // Change direction every 30 count
     if (directionCount > 30)
     {
         directionCount = 0;
     }
 
     // Check that the bobo doesn't go through the game area walls
     if (Location.X + direction < 0)
     {
         move = 0;
     }
     if (Location.X + direction > AreaWidth)
     {
         move = AreaWidth;
     }
 
     // Set the new location
     Location = new Point(Location.X + move, Location.Y + Velocity);
 }

We need to add also method to set the color according to the type of the enemy and give them unique kill score. Add the following method to Bobo.xaml.cs:

private void SetType()
{
    switch (Type)
    {
        case 1:
            SetFill(Color.FromArgb(0xFF, 0x00, 0xA2, 0x07), Color.FromArgb(0xFF, 0x3A, 0xFF, 0x00));
            Worth = 10;
            break;
        case 2:
            SetFill(Color.FromArgb(0xFF, 0x00, 0x00, 0xa0), Color.FromArgb(0xFF, 0x00, 0x0F, 0xff));
            Worth = 20;
            break;
        case 3:
            SetFill(Color.FromArgb(0xFF, 0xaf, 0x00, 0x00), Color.FromArgb(0xFF, 0xff, 0x0F, 0x00));
            Worth = 50;
            break;
    }
}

private void SetFill(Color start, Color end)
{
    var startGradient = new GradientStop();
    var endGradient = new GradientStop();
    startGradient.Color = start;
    startGradient.Offset = 1;
    endGradient.Color = end;
    var collection = new GradientStopCollection();
    collection.Add(startGradient);
    collection.Add(endGradient);

    InsideEllipse.Fill = new LinearGradientBrush(collection, 0);
}

Now we have a nasty looking foe for our ship to shoot at. Next we open the GamePage.xaml.cs and add again some prerequisites for our swarm of enemies. Add the following member variables:

private List<Bobo> enemies = new List<Bobo>();
private int maxEnemies = 20;
private DispatcherTimer timer = new DispatcherTimer();
private int Level { get; set; } // Player level 
private int Score { get; set; } // Game score

You can adjust the game difficulty by increasing maxEnemies at later level of the game for example.

We have everything set for our enemies to appear on the screen. We need to just add them to the GamePage.xaml.cs. First edit the Loaded –lambda on constructor to include the following at the bottom of it:

timer.Tick += TimerOnTick;
timer.Interval = new TimeSpan(0, 0, 0, 2);
timer.Start();

And then the Tick method to call:

/// <summary>
/// Create a new enemy if not max amount on the screen already
/// </summary>
/// <param name="sender"></param>
/// <param name="o"></param>
private void TimerOnTick(object sender, object o)
{
    if (enemies.Count < maxEnemies)
    {
        var enemy = new Bobo
        {
            AreaWidth = (int)LayoutRoot.ActualWidth,
            Location = new Point(randomizer.Next(0, (int)LayoutRoot.ActualWidth - 80), 0)
        };
        if (enemy.Type == 3)
        {
            // Make the red enemy smaller and more difficult to hit
            var scaleTransform = new ScaleTransform();
            scaleTransform.ScaleX = scaleTransform.ScaleX * 0.50;
            scaleTransform.ScaleY = scaleTransform.ScaleY * 0.50;
            enemy.RenderTransform = scaleTransform;
            enemy.Width = 30;
            enemy.Height = 30;
        }
        enemy.Velocity = enemy.Velocity * ((Level / (double)10) + 1);
        enemies.Add(enemy);
        Canvas.SetZIndex(enemy, 7);
        LayoutRoot.Children.Add(enemy);
    }
}

All this code will create different types of monsters to the screen, but they’re still sitting static on the top. That’s kind of boring, so let’s add the long awaited game loop to move them:

private void GameLoop(object sender, object e)
{
    if (goingRight)
        MoveShip(5);
    if (goingLeft)
        MoveShip(-5);
    // TODO - collision test

    // TODO - move bullets

    // Move enemies
    for (int i = 0; i < enemies.Count; i++)
    {
        if (enemies[i].Dead == false)
        {
            enemies[i].Move();
            enemies[i].Margin = new Thickness(enemies[i].Location.X, enemies[i].Location.Y, 0, 0);
        }
 
        if (enemies[i].Margin.Top > App.ScreenHeight || enemies[i].Dead)
        {
            LayoutRoot.Children.Remove(enemies[i]);
            enemies.Remove(enemies[i]);
        }
    }
}

Now we just have to make sure our game loop gets called, so we open the constructor, and add as very last line, after the Loading –lambda has closed, the following line:

CompositionTarget.Rendering += GameLoop;

Go ahead, try the project now, and you should see the star field moving, ship should respond to the keyboard and enemies should move randomly from top to down.

Open fire!
Now our little game seems to be a bit boring, enemies come and sail through your ship and you can’t shoot. We need to add collision detection and possibility to shoot the enemies to make it a bit more interesting. Let’s start with shooting! Add the following member variables to GamePage.xaml.cs:

private List<Ellipse> bullets = new List<Ellipse>(); // Bullets on the screen
private bool gameRunning = true; // Did we die already

and for ellipses we need to add also this using:

using Windows.UI.Xaml.Shapes;

Now we edit the OnFire –method we added on the second part of the tutorial. Add the following code to it:

if (gameRunning)
{
    var bullet = new Ellipse
    {
        Width = 5, Height = 5, Fill = new SolidColorBrush(Colors.Red)
    };
    bullet.Margin = new Thickness(shipPosition + (Rocket.Width/2) - (bullet.Width/2),
        shipHorizontalPosition + 2, 0, 0);
    LayoutRoot.Children.Add(bullet);
    bullets.Add(bullet);
}

The code above checks that the player is still alive, and if yes, creates a new ellipse as a bullet and adds it to the bullet list, so we can later easily check if any of the bullets hit anything on the screen. At this point we have static bullets in the screen, so logical step is to add moving functionality to the game by adding this:

private void MoveBullet(Ellipse ellipse)
{
    if ((ellipse.Margin.Top - 10) > 0)
    {
        ellipse.Margin = new Thickness(ellipse.Margin.Left, ellipse.Margin.Top - 10, 0, 0);
        HitTest(ellipse);
    }
    else
    {
        bullets.Remove(ellipse);
        LayoutRoot.Children.Remove(ellipse);
    }
}

The code above moves the bullet 10 pixels upwards until it goes off the screen. At that point it is removed from the bullet list. Let’s add the HitTest method to see if our bullets actually hit anything:

private void HitTest(Ellipse ellipse)
{
    for (int i = 0; i < enemies.Count; i++)
    {
        var enemyInFire = new Rect(enemies[i].Location.X, enemies[i].Location.Y, enemies[i].ActualWidth, enemies[i].ActualHeight);
        if (enemyInFire.Contains(new Point(ellipse.Margin.Left, ellipse.Margin.Top)))
        {
            Score += enemies[i].Worth;
            ScoreBoard.Text = Score.ToString();
            if (Score > App.Highscore)
            {
                App.Highscore = Score;
                HighscoreBoard.Text = Score.ToString();
            }
            LayoutRoot.Children.Remove(ellipse);
            bullets.Remove(ellipse);
            enemies[i].Dead = true;
            return;
        }
    }
}

To move the bullets, add this to the GameLoop -method, over the // TODO – move bullets text:

for (int i = 0; i < bullets.Count; i++)
{
    MoveBullet(bullets[i]);
}

At this point, you’re ready to shoot some aliens from outer space! But it kind of gets boring as there’s no way you can die yet, as we’re not testing if the aliens hit you. Let’s add few more things and it starts to come together. First we need the famous game over notification. Add this member variable to GamePage.xaml.cs:

private TextBlock GameOver = new TextBlock();

After that we need a crash test method:

private void CrashTest()
{
    for (int i = 0; i < enemies.Count; i++)
    {
        var enemyCreature = new Rect(enemies[i].Location.X, enemies[i].Location.Y, enemies[i].ActualWidth, enemies[i].ActualHeight);
        enemyCreature.Intersect(new Rect(Rocket.Margin.Left, Rocket.Margin.Top, Rocket.ActualWidth,
            Rocket.Margin.Top));
        if (!enemyCreature.IsEmpty)
        {
            CompositionTarget.Rendering -= GameLoop;
            Move.Completed -= MoveStars;
 
            GameOver.Text = "Game Over!";
            GameOver.FontSize = 48;
            GameOver.VerticalAlignment = VerticalAlignment.Center;
            GameOver.HorizontalAlignment = HorizontalAlignment.Center;
            Grid.SetColumn(GameOver, 1);
 
            MainGrid.Children.Add(GameOver);
            gameRunning = false;
 
            if (App.Highscore < Score)
            {
                App.Highscore = Score;
            }
        }
    }
}

Finally we need to add to the GameLoop call to the CrashTest, overwriting the // TODO – collision test with call to our method: CrashTest();

If you try the game, you soon realize that if the enemies crash to your ship, that’s the end of you! This is the end of part three of Universal Games for Windows. On the next post we’ll continue to improve the game by adding universal high score system, levels, navigation and other relevant things to finish up the game.

Download the solution so far from here

Posted in Universal Apps, Windows Phone 8.1 | Tagged | 13 Comments

How to make a Windows Store game with C# and XAML, part 2

Creating the game field and player

On previous parts we set up the project and created a nice start screen. But game needs more than just the start screen. On this post we’ll create a game screen, enable navigation to it from the start screen, and add the player ship to it.

We create the game field by creating a new blank page called GamePage. We add it to the Shared –project (right click, Add, New Item, Blank Page). Because we support Windows and Windows Phone, we need to adjust our game page depending if we’re on a small phone screen or a larger screen such as tablet or desktop. Typically this is done by using VisualState manager, but for the sake of keeping simple as possible, on this tutorial we’ll just do required adjustment in code.

Next step is to add the player ship to Shared project, so create a new user control and name it Ship.

Replace the Ship.xaml with the following:

<UserControl
    x:Class="MySpaceInvanders.Ship"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MySpaceInvanders"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:foundation="using:Windows.Foundation"
    mc:Ignorable="d">

    <Polygon x:Name="BodyShape" Stroke="Black" Fill="Red"/>
</UserControl>

and then the constructor content in Ship.xaml.cs with:

public Ship()
        {
            this.InitializeComponent();
#if WINDOWS_PHONE_APP
            Width = 20;
            Height = 40;
            BodyShape.Points = new PointCollection()
            {
                new Point(0, 40), new Point(10,0), new Point(20,40)
            };
#else
            Width = 40;
            Height = 80;
            BodyShape.Points = new PointCollection()
            {
                new Point(0, 80), new Point(20,0), new Point(40,80)
            };
#endif
        }

In that code we’re using #if WINDOWS_PHONE_APP to define the code which we use to give size to the control when running on phone and in #else we are defining the shape for Windows app. Currently they are just different size, and we could have handled that in XAML by just stretching the ship accordingly but this leaves us option to have different ship shape in each platform.

Copy the following to the MySpaceInvanders.Shared -project’s GamePage.xaml, overwriting all the existing markup:

<Page
    x:Class="MySpaceInvanders.GamePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MySpaceInvanders"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" >
<Page.Resources>

</Page.Resources>
    <Grid x:Name="MainGrid">
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="LeftArea" Width="2*"/>
            <ColumnDefinition x:Name="MiddleArea" Width="12*"/>
            <ColumnDefinition Width="2*"/>
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0" Background="RoyalBlue">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>

The code above divides the field in three different sectors, one for scores and ship controls, one for play field and for the fire button. Copy the following code under the code above:

            <TextBlock Text="Highscore:" Grid.Row="0" Margin="5,0"/>
            <TextBlock x:Name="HighscoreBoard" Grid.Row="0" Text="0" Margin="5,32"/>
            <TextBlock x:Name="ScoreTitle" Text="Score:" Grid.Row="0" Margin="5,64"/>
            <TextBlock x:Name="ScoreBoard" Grid.Row="0" Text="0" Margin="5,73,0,0"/>
            <Grid x:Name="LeftCanvas" Grid.Row="2" 
                    VerticalAlignment="Bottom" 
                    HorizontalAlignment="Left" 
                    PointerPressed="ToLeftPressed" 
                    PointerReleased="ToLeftReleased" 
                    PointerExited="ToLeftExited" >
                <Ellipse x:Name="ToLeft" Stretch="Uniform" Fill="Azure"/>
                <Polygon Stroke="Black" Fill="Blue" Stretch="Uniform"
                         Points="5,40,60,10,60,70" RenderTransformOrigin="0.5,0.5">
                      <Polygon.RenderTransform>
                        <ScaleTransform ScaleX="0.75" ScaleY="0.75"/>
                    </Polygon.RenderTransform>
                </Polygon>
            </Grid>
            <Grid x:Name="RightCanvas" Grid.Row="2" 
                    VerticalAlignment="Bottom" 
                    HorizontalAlignment="Right" 
                    PointerPressed="ToRightPressed" 
                    PointerReleased="ToRightReleased" 
                    PointerExited="ToRightExited" >
                <Ellipse x:Name="ToRight" Stretch="Uniform" Fill="Azure"/>
                <Polygon Stroke="Black" Fill="Blue" Stretch="Uniform"
                         Points="75,40,25,10,25,70" RenderTransformOrigin="0.5,0.5">
                    <Polygon.RenderTransform>
                        <ScaleTransform ScaleX="0.75" ScaleY="0.75"/>
                    </Polygon.RenderTransform>
                </Polygon>
            </Grid>
        </Grid>

The code above sets the score, highscore and player moving controls to the screen. Notice that we are using PointerReleased and PointerExited events for controlling the ship, those are only events which will give you smooth control over the ship movement. Copy the following code under the code above:

<Canvas x:Name="LayoutRoot" 
                Background="Black" 
                Grid.Column="1">
            <Canvas.Resources>
                <Storyboard x:Name="Move"/>
            </Canvas.Resources>

            <local:Ship x:Name="Rocket"/>
        </Canvas>

The code above sets the playing field, and sets the ship on the screen. Copy the following code under the code above:

<Grid x:Name="FireButton" Grid.Column="2" 
              VerticalAlignment="Bottom" 
              HorizontalAlignment="Right" 
              Tapped="OnFire">
            <Ellipse Width="100" Height="100" 
                     VerticalAlignment="Top" 
                     HorizontalAlignment="Center">
                <Ellipse.Fill>
                    <LinearGradientBrush>
                        <GradientStop Color="#9AA20000" Offset="1"/>
                        <GradientStop Color="Red"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse Width="70" Height="70" 
                     VerticalAlignment="Center" 
                     HorizontalAlignment="Center">
                <Ellipse.Fill>
                    <LinearGradientBrush>
                        <GradientStop Color="#00FF8585" Offset="0"/>
                        <GradientStop Color="#1AFFFFFF" Offset="1"/>
                        <GradientStop Color="#3FF5C2C2" Offset="0.349"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
        </Grid>
    </Grid>
</Page>

Code above draws the firing button on the screen. We’re using two ellipses to give impression of dimension for the button surface.

As mentioned earlier, we’re doing the differences in code to handle phone and desktop/tablet versions. For the GamePage we do it so, that we open the GamePage.xaml.cs and edit the constructor public GamePage() and add the following just under the this.InitializeComponent:

#if WINDOWS_PHONE_APP
            MiddleArea.Width = new GridLength(6, GridUnitType.Star);
            Style style = new Style(typeof(TextBlock));
            style.Setters.Add(new Setter(TextBlock.FontSizeProperty, 24));
            style.Setters.Add(new Setter(VerticalAlignmentProperty, VerticalAlignment.Top));
            style.Setters.Add(new Setter(HorizontalAlignmentProperty, HorizontalAlignment.Left));
            Resources.Add(typeof(TextBlock), style);
            HighscoreBoard.Margin = new Thickness(5, 22, 0, 0);
            ScoreTitle.Margin = new Thickness(5, 44, 0, 0);
            ScoreBoard.Margin = new Thickness(5, 73, 0, 0);
#else
            MiddleArea.Width = new GridLength(12, GridUnitType.Star);
            Style style = new Style(typeof(TextBlock));
            style.Setters.Add(new Setter(TextBlock.FontSizeProperty, 32));
            style.Setters.Add(new Setter(VerticalAlignmentProperty, VerticalAlignment.Top));
            style.Setters.Add(new Setter(HorizontalAlignmentProperty, HorizontalAlignment.Left));
            Resources.Add(typeof(TextBlock), style);
            HighscoreBoard.Margin = new Thickness(5, 32, 0, 0);
            ScoreTitle.Margin = new Thickness(5, 64, 0, 0);
            ScoreBoard.Margin = new Thickness(5, 96, 0, 0);
#endif

Now that we have the UI set, we’ll add some functionality to enable ship to move later on. Open the GamePage.xaml.cs and add these members to the class:

private bool goingLeft = false, goingRight = false;

After that we need to add the event handlers under the constructor:

private void ToLeftPressed(object sender, PointerRoutedEventArgs e)
        {
            goingLeft = true;
        }
 
        private void ToRightPressed(object sender, PointerRoutedEventArgs e)
        {
            goingRight = true;
        }
 
        private void ToLeftReleased(object sender, PointerRoutedEventArgs e)
        {
            goingLeft = false;
        }
 
        private void ToLeftExited(object sender, PointerRoutedEventArgs e)
        {
            goingLeft = false;
        }
        private void ToRightReleased(object sender, PointerRoutedEventArgs e)
        {
            goingRight = false;
        }
 
        private void ToRightExited(object sender, PointerRoutedEventArgs e)
        {
            goingRight = false;
        }
private void OnFire(object sender, TappedRoutedEventArgs e)
{
}

To enable navigation to game screen from the start page, we’ll open the StartPage.xaml.cs and add to the OnStart -method the following code:

this.Frame.Navigate(typeof (GamePage));

Now we can test that launching the app, and pressing the Start-button should show us a screen with controls and ship, which is still not positioned correctly and not moving.

Check out the part 3

Posted in Universal Apps, Windows Phone 8.1 | Tagged | 10 Comments

How to make a Windows Store game with C# and XAML, part 1

I believe that games are still one of the most fun ways to get to know a new programming language. As there’s currently shortage of beginner level game programming tutorials for Universal Apps, I thought I’d share you how I did a simple shoot’em up for Windows and Windows Phone with shared code.

I tried to include all the steps, so you can follow it like a hands on lab while doing your own version. You can find the finished tutorial from the Windows Store and Windows Phone Store to download and try it out. I also made the finished tutorial source available for you to play with.

Creating the project
Creating the game project doesn’t differ from creating a normal app, so you would open the Visual Studio, go to File.. New, Project, and select from under Visual C#, Store Apps and Universal Apps. As this is the most basic version of a game, we’re not doing MVVM but keep it as simple as possible. For the same purpose, we select Hub App as a project type, and give it a name, for example “MySpaceInvanders”.
1
When you got the project set up, you got three projects in your solution tree in the right, “MySpaceInvanders.Windows”, “MySpaceInvanders.WindowsPhone” and “MySpaceInvanders.Shared”. We’ll do some housekeeping, and remove everything else from the solution by pressing Delete key on top of the files, until you’re left with a solution which looks like this:
2
We’re going to put all the logic to the Shared project so it will be really easy to upkeep and keep adding features.

Next we’ll do some basic settings for the projects by going to the project settings. First open the Package.appxmanifest in MySpaceInvanders.WindowsPhone.
On the Application –tab, select from Supported rotations “Landscape”. Now open the same file from MySpaceInvanders.Windows, and select also only “Landscape” and save your changes. Go to Visual Assets –tab in Package.appxmanifest and change Background color to #000000 for both projects as well.

Creating a start page
We’re forgetting the splash screens for now, and focusing on the first screen which will be where the game can be started, and high scores are visible. Right click on the solution explorer on the Shared –project, select Add, New Item, and Blank Page. Give the page name “StartPage.xaml” and click ok. Next we’ll set it as a start page by opening the App.xaml.cs file in the Shared –project, and going to the OnLaunched -method. There you will find a line of code like this:

if (!rootFrame.Navigate(typeof(MainPage), e.Arguments))

Now we changed the MainPage text from that line to StartPage to launch our custom start up page when the app launches.

Open the StartPage.xaml, and copy the following on top of the <Grid> … </Grid> area of code:

<Grid>
    <Button x:Name="StartButton" Content="Start" 
            Margin="0,12,0,0" 
            HorizontalAlignment="Center" 
            VerticalAlignment="Bottom" 
            Height="105" Width="370" 
            FontFamily="Georgia" 
            FontSize="48" 
            Click="OnStart"/>
    <TextBlock Text="UNIVERSAL "
               HorizontalAlignment="Center" 
               VerticalAlignment="Top" 
               Margin="0,53,0,0" TextWrapping="Wrap" 
               FontFamily="Georgia" FontSize="48"/>
    <TextBlock Text="INVANDERS" 
               HorizontalAlignment="Center" 
               VerticalAlignment="Top" 
               Margin="0,103,0,0" 
               TextWrapping="Wrap" 
               FontFamily="Georgia" FontSize="48"/>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <TextBlock Text="Highscore:" 
                   Grid.Column="0" 
                   HorizontalAlignment="Right" 
                   VerticalAlignment="Top" 
                   Margin="0,203,0,0" 
                   TextWrapping="Wrap" 
                   FontFamily="Georgia" 
                   FontSize="32"/>
        <TextBlock x:Name="HighScoreBlock" Text="0" 
                   Grid.Column="1" 
                   HorizontalAlignment="Left" 
                   VerticalAlignment="Top" 
                   Margin="0,203,0,0" 
                   TextWrapping="Wrap" 
                   FontFamily="Georgia" 
                   FontSize="32"/>
    </Grid>
    <Canvas x:Name="LayoutRoot">
        <Canvas.Resources>
            <Storyboard x:Name="Move"/>
        </Canvas.Resources>
    </Canvas>
</Grid>

Add the following to StartPage.xaml.xs:

private void OnStart(object sender, RoutedEventArgs e)
{
 
}

Adding some animation
Now that we have the start screen set up, it looks kind of dull. Let’s put emitter there to shoot some stars to make it look more alive. If you look at the XAML we just added, you notice a Canvas element which has a Storyboard element inside it. That is our animation container, which will show the emitter.

First we need a particle for the emitter. We’ll create class called Dot by right clicking the MySpaceInvanders.Shared -project, and selecting Add, New Item, Class. Make sure the Name –field has Dot.cs written in it before clicking ok. Next we’ll open the Dot.cs and add some properties to the particle. Each particle will have two different properties: Shape and Velocity. Add the following member variables to class Dot

public Ellipse Shape { get; set; }
public Point Velocity { get; set; }

Next we need to create the emitter itself, which will be shooting these particles we just created. Open the StartPage.xaml.cs, add on the top of the file:

using Windows.UI;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Shapes;

Then we need to add these member variables to StartPage class

private const int StarCount = 200;
private List<Dot> stars = new List<Dot>(StarCount);
private Random randomizer = new Random();

After we have a list to keep the particles, and set the number of particles, we’ll create a new method:

private void CreateStar()
{
    var star = new Dot()
    {
        Shape = new Ellipse() { Height = 2, Width = 2},
        Velocity = new Point(randomizer.Next(-5, 5), randomizer.Next(-5, 5))
    };

    // Center the star
    Canvas.SetLeft(star.Shape, LayoutRoot.ActualWidth / 2 - star.Shape.Width / 2);
    Canvas.SetTop(star.Shape, (LayoutRoot.ActualHeight / 2 - star.Shape.Height / 2) + 20);

    // Prevent stars getting stuck
    if ((int)star.Velocity.X == 0 && (int)star.Velocity.Y == 0)
    {
        star.Velocity = new Point(randomizer.Next(1, 5), randomizer.Next(1,5));
    }

    // Set color
    
    stars.Add(star);
    LayoutRoot.Children.Add(star.Shape);
}

Now we have created a particle, but it’s sitting idle on the screen, as generic and dull as the next one. Let’s give it some personality by adding some color to it by adding the following code under //Add color –line:

var colors = new byte[4];
    randomizer.NextBytes(colors);
    star.Shape.Fill = new SolidColorBrush(
        Color.FromArgb(colors[0], colors[0], colors[0], colors[0]));

We’re using the Random class to get a new color value. If you prefer to have colorful particles, you can change the Color constructor like this:

Color.FromArgb(colors[0], colors[1], colors[2], colors[3]);

At this point we have a lot of particles staying static at one point. What we need is a method to move particles, reset those which have gone off the screen back to the center. Add the following code under the CreateStar method:

void MoveStars(object sender, object e)
{
    if (stars.Count < StarCount)
    {
        CreateStar();
    }

    foreach (var star in stars)
    {
        double left = Canvas.GetLeft(star.Shape) + star.Velocity.X;
        double top = Canvas.GetTop(star.Shape) + star.Velocity.Y;

        Canvas.SetLeft(star.Shape, left);
        Canvas.SetTop(star.Shape, top);

        // Star is off the screen
        if ((int)left < 0 ||
            (int)left > LayoutRoot.ActualWidth ||
            (int)top < 0 ||
            (int)top > LayoutRoot.ActualHeight)
        {
            Canvas.SetLeft(star.Shape, LayoutRoot.ActualWidth / 2 - star.Shape.Width / 2);
            Canvas.SetTop(star.Shape, (LayoutRoot.ActualHeight / 2 - star.Shape.Height / 2) + 20);
        }
    }
    Move.Begin();
}

As the effect of all the stars coming to screen at once is quite ugly, we’re adding them one by one each pass to the screen until we have max number of them visible. After that the method goes through all the particles and sets their new position according to their velocity. In the last part we’re checking if the particle has gone off the screen and center it back if it’s not visible anymore.

Now we need to just activate these methods and we’re set to try how does it look like. Add the following code to constructor, just after InitializeComponent() –line:

Loaded += (sender, args) =>
{
    CreateStar();
    Move.Completed += MoveStars;
    Move.Begin();
};

Now you’re set to try how does it look! Just select the Windows project and run on local machine. Keep building the game on the part 2

Posted in Universal Apps, Windows Phone 8.1 | 8 Comments

Taking high res photos with Windows Phone 8.1

There was previously no access to high res resolutions on the camera, but you had to know which model supports which high resolution. Now with the universal apps, you can actually get the all supported resolutions from the camera easily, including the high res and init your camera to use them. Here’s a quick sample snippets to init your camera, select the highest possible resolution and change your camera to use that.

Assumption is that you have CaptureElement in your XAML called captureElement, and MediaCapture element called mediaCapture as a member variable in your code behind in MainPage.xaml.cs

Select the back camera:

var devices = await Windows.Devices.Enumeration.DeviceInformation.FindAllAsync(Windows.Devices.Enumeration.DeviceClass.VideoCapture);
var backCameraId = devices.FirstOrDefault(x => x.EnclosureLocation != null && x.EnclosureLocation.Panel == Windows.Devices.Enumeration.Panel.Back).Id;
await mediaCapture.InitializeAsync(new MediaCaptureInitializationSettings
{ VideoDeviceId = backCameraId});

Next query all the supported resolutions, and select the highest possible and set that to the camera.

var resolutions = this.mediaCapture.VideoDeviceController.GetAvailableMediaStreamProperties(MediaStreamType.Photo);

if (resolutions.Count >= 1)
{
var hires = resolutions.OrderByDescending(item => ((VideoEncodingProperties)item).Width).First();

await mediaCapture.VideoDeviceController.SetMediaStreamPropertiesAsync(MediaStreamType.Photo, hires);
}

Now you’re ready to start video preview and do photo capturing with these last calls

captureElement.Source = mediaCapture;
await mediaCapture.StartPreviewAsync();

Check out my previous post about setting the camera preview correctly, otherwise your image is going to be tilted quite funkily.

Posted in Universal Apps, Windows Phone 8.1 | Tagged , | 3 Comments

Windows Phone 8.1 camera orientation

Update: The code was missing global bool variable to check if we’re using the front camera, added to code
Using the cameras of Windows Phone 8.1 live viewfinder in Universal apps can be a bit of a challenge. The behavior is different with front and main cameras and most likely you end up with upside down image on your preview, if you run the same code which works for Windows 8.1 when using the front camera. The design of the camera driver is based on WP8.1 chassis specs, and camera orientation is dependent on the native landscape orientation of the display.

Issue here is that the rotation of the front camera and display happens in opposite direction, resulting to inverted image. This all can be a bit confusing, so let’s give you a code which runs on WP8.1 correctly. Note that you need to ifdef this code in Windows for the rotations, or your front camera on tablet will be incorrectly rotated.

First we define the capture element to the XAML like this:

<CaptureElement x:Name="captureElement" 
HorizontalAlignment="Center" 
VerticalAlignment="Center" 
Stretch="UniformToFill">
</CaptureElement>

In the following code we check if front camera is available, and take it in use, otherwise fall back to the main camera. After that we set the camera mirroring according to the chosen camera, as it differs with front and main camera as well. Lastly we subscribe to the orientation change event:

bool frontCam;

...

protected override async void OnNavigatedTo(NavigationEventArgs e)
{
    mediaCapture = new MediaCapture();
    DeviceInformationCollection devices = 
await DeviceInformation.FindAllAsync(DeviceClass.VideoCapture);

    // Use the front camera if found one
    if (devices == null) return;
    DeviceInformation info = devices[0];

    foreach (var devInfo in devices)
    {
        if (devInfo.Name.ToLowerInvariant().Contains("front"))
        {
            info = devInfo;
            frontCam = true;
            continue;
        }
    }

    await mediaCapture.InitializeAsync(
        new MediaCaptureInitializationSettings
        {
            VideoDeviceId = info.Id
        });
            
    CaptureElement.Source = mediaCapture;
    CaptureElement.FlowDirection = frontCam ? 
FlowDirection.RightToLeft : FlowDirection.LeftToRight;
    await mediaCapture.StartPreviewAsync();

    DisplayInformation displayInfo = DisplayInformation.GetForCurrentView();
    displayInfo.OrientationChanged += DisplayInfo_OrientationChanged;

    DisplayInfo_OrientationChanged(displayInfo, null);
}

Now we need to adjust the orientation of the capture element according to the screen orientation (the animation makes your eyes bleed, but there’s no way to disable orientation animations for a control). This code is modified from the MSDN Windows 8.1 advanced camera sample.

private void DisplayInfo_OrientationChanged(DisplayInformation sender, object args)
{
if (mediaCapture != null)
{
mediaCapture.SetPreviewRotation(frontCam
? VideoRotationLookup(sender.CurrentOrientation, true)
: VideoRotationLookup(sender.CurrentOrientation, false));
var rotation = VideoRotationLookup(sender.CurrentOrientation, false);
mediaCapture.SetRecordRotation(rotation);
}
}

For the last piece we need to check the video rotation according to the chosen camera like this:

private VideoRotation VideoRotationLookup(DisplayOrientations displayOrientation, bool counterclockwise)
{
switch (displayOrientation)
{
case DisplayOrientations.Landscape:
return VideoRotation.None;

case DisplayOrientations.Portrait:
return (counterclockwise) ? VideoRotation.Clockwise270Degrees : VideoRotation.Clockwise90Degrees;

case DisplayOrientations.LandscapeFlipped:
return VideoRotation.Clockwise180Degrees;

case DisplayOrientations.PortraitFlipped:
return (counterclockwise) ? VideoRotation.Clockwise90Degrees :
VideoRotation.Clockwise270Degrees;

default:
return VideoRotation.None;
}
}

That’s all it requires, have fun with it!

Posted in Universal Apps, Windows Phone 8.1 | Tagged , , | 12 Comments

Format your date in Universal app according to user preferences

With the new Universal app model, many things have changed, and there’s very little documentation available to find out how you need to address certain things in the new app model. One of those things is formatting your date according to the region settings chosen by the user. CultureInfo is no longer recommended class to be used, and if you tried to dig out yourself the chosen regional format, you might have found it to be quite difficult in cases where user has chosen to use different language (en-US) and different regional settings, for example de or fi.

It’s pretty easy still, only figuring it out where to find that info is not. So here’s the codeblock which formats datetime according to the chosen regional setting:

DateTime date = DateTime.Now;
GeographicRegion userRegion = new GeographicRegion();
var userDateFormat = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("shortdate",new [] {userRegion.Code});
var dateDefault = userDateFormat.Format(date);

We use the GeographicRegion to get the chosen region, and then we create DateTimeFormatter according to that culture, which we use to format the date on the last line. Hope this snippet helps you!

Posted in Universal Apps, Windows Phone, Windows Phone 8.1 | Tagged , , , | 1 Comment

How to call your app

With yesterdays announcements at BUILD, there were some new terms introduced along with the new app models. I thought they were a bit mouthful, so I decided to draw this small chart to help you easily figure out what is what.

Naming

First we have the apps build with the traditional, Silverlight -based classic Windows Phone app model apps. If you you target 8.0 they’re called Windows Phone Silverlight 8.0 apps, and if you target WP 8.1 then they’re Windows Phone Silverlight 8.1 apps.

If you are creating Windows Phone Store apps, depending on your choice of technology, they’re either Windows Phone Store apps using XAML /HTML.

Interestingly we don’t make the difference when we talk about Windows Store apps for Windows, but refer to them generally as Windows Store apps.

Lastly there are the Universal Windows apps, which are build with the shared project tooling targeting both Windows and Windows Phone.

Hope that cleared some of the confusion!

Posted in Universal Apps, Windows Phone, Windows Phone 8.1 | Tagged | Leave a comment

What there is and what there might be

As there is no one good public source for Windows Phone chassis specs, I decided to put together a small table which will list the things all Windows Phones have common and what are the optional things devs need to test for the existence.

WP8 chassis

Display part is quite self explanatory, interesting thing is that the specs go up to 7″ screens, which works out for phablets quite nicely. Screen resolutions are also something that devs need to realize, but fortunately the platform is quite nice about them and you don’t have to design for three different resolutions but it scales them automatically. The sensor part is a bit more complicated, and I’ll give a quick overview of them.

First of all, there are some sensors which are found in each WP no matter who’s the manufacturer, let’s call them base sensors. The base sensors are in the minimum hardware specifications, and can be found even in the low end models.

Base sensors

Assisted Global Navigation Satellite System receiver (A-GNNS) is for quick satellite fix, and helps you to get a faster location data for poor GPS signal or when the signal is not available.This sensor you don’t access yourself from the code but the system will take care of it when you deal with the GPS.

Ambient Light sensor can sense light from range of 0 lux up to 4000 lux or more. For this sensor, you have no access from your code either, so you can’t sense the lighting conditions but this information is delivered to OS itself only.

Proximity sensor will detect if the phone is in your pocket or on your ear, and will turn off the display to save battery. Again this sensor is not accessible from the code. Malfunction of this sensor will lead to situation where you can’t end the phone call as screen stays black. In these cases, it is advised to take the phone to repair center, and ask them to put some silicon around the sensor, that helped me (had this issue with three different WPs).

Vibration is the first sensor of these which you can actually access from your code, using Microsoft.Devices.VibrateController – .NET class or Windows.Phone.Devices.Notification.VibrationDevice – Windows Phone Runtime API. In hardware, vibration is done either by motor, speaker or haptics transducer.

Next up is the Accelerometer, which is three-axis with HW sampling rate up to 100 Hz. The accelerometer detects changes in the physical acceleration of your phone and fires events as X,Y,Z orientations change. This sensor can be accessed with WPRT in Windows.Devices.Sensors.Accelerometer and it delivers from SensorBase<T> class.

Optional sensors

There are a few sensors in WP which may or may not be there, depending on the make and model of your phone. When using these sensors, be sure to check at the beginning that they do exists in your code, before using them.

First and maybe even the most interesting of these all is the NFC, near field communication. I’ll write a separate post about doing NFC with WP, but what is important here is to remember to check if your client is enabled with NFC with the following code snippet:

ProximityDevice device = ProximityDevice.GetDefault()
if (device != null)
{
  // do your stuff
}

Magnetometer, also known as Compass is three-axis with sampling rate of 60 Hz. You can access it from Windows.Devices.Sensors.Compass class, and it also delivers from SensorBase<T> class. Interesting side-note is that if your app has ID_CAP_LOCATION, this will give your app more accurate computation of the declination which is different in different point on the earth and changes with time.

Lastly there is the Gyroscope, which is three-axis with sampling rate from 5 Hz to 250 Hz or more. If your device has a gyroscope, it must also have a magnetometer. You can access it through Windows.Devices.Sensors.Gyrometer and it also delivers from SensorBase<T> class.

That wraps it up for now, and in the next post I’ll talk more about using the NFC sensor.

Posted in Windows Phone, Windows Phone 8 | Tagged , , , , , , | Leave a comment

Windows Phone Development MVP

Yesterday I got an email from MVP Awards with the information that I’ve received the Most Valuable Professional -award from Microsoft for my Windows Phone community activities. With a quick check it seems I’m the first in Finland and in whole Nordics to receive MVP for Windows Phone dev, what an incredible honor! That definately motivates me to try to be even more active on the community!

Posted in Uncategorized | Leave a comment

Windows Phone 8 and the music resume -rules in the marketplace

Seems that this old issue is still causing some scratching of head among the devs, how to implement this properly in Windows Phone. This has changed a bit from WP7, and the rule has been updated (6.5.1. & 6.5.3) to apply only to XAML apps. Now you don’t have to worry about radio anymore, as that’s not in the mix with WP8.0.

Here are the few scenarios where you need to fill this requirement.

First we implement the code for normal apps, which want to play a non-interactive full motion video, or a non-interactive audio segment (e.g. cut-scene or media clip) – in this scenario you don’t need to ask user’s consent for this action.

Here are the steps needed to implement it properly. Open your MainPage.xaml.cs file, and insert these namespaces,  and after that also insert them to your App.xaml.cs as well:

using Microsoft.Xna.Framework; 
using Microsoft.Xna.Framework.Media;

And then add a boolean variable to your App.xaml.cs to mark if resume is needed:

public bool needToResumeMusic = false;

Then you go to the class where you need to play your own media. First add this code as a class level variable:

App thisApp = (App)Application.Current;

Next you open the method where you are going to play your own media, and add this code before it:

FrameworkDispatcher.Update();

if (!MediaPlayer.GameHasControl)
{
    thisApp.needToResumeMusic = true;
    MediaPlayer.Pause();
}

Please note that the Update is critical to be there, or the app will have serious stability issues.

Then you need to put only the resume part to your code, and if you’re using for example MediaElement to play music/video, it has MediaEnded -event which you implement like this:

void Player_MediaEnded(object sender, RoutedEventArgs e)
{
      // Do your cleanup here
      ...
      if (thisApp.needToResumeMusic)
      {
         MediaPlayer.Resume();
      }
}

Now it can handle the switching of background music, but there are two scenarios which you still would want to handle. User might navigate away or kill your app while you’re in the process of playing your music, and you would want to resume the background music on those cases as well. That’s why you edit your App.xaml.cs with these changes:

private void Application_Deactivated(object sender, DeactivatedEventArgs e)
{
    if (needToResumeMusic)
    {
       MediaPlayer.Resume();
    }
}
private void Application_Closing(object sender, ClosingEventArgs e)
{
   if (needToResumeMusic)
   {
      MediaPlayer.Resume();
   }
}

Second scenario is that you want to play a background music in your own app, in which you would just add dialog box asking for consent just before the GameHasControl -check and move the Resume to the exit of your app.

So, it’s pretty simple to tackle this nasty little rule without too much coding. Hope it clears things and helps you pass the store certification!

Music Resume Sample – includes code, just put your own media file there and change the name of the file to play to test this.

Posted in Windows Phone, Windows Phone 8 | Tagged , , | Leave a comment

Windows Phone 8 Kernel Architecture

Okay, there has to be a good descriptive picture the WP8 kernel, as it has been a huge advertisement point for the whole unified model for Windows and Windows Phone. Or that’s what I thought, until I tried to find one for almost a day with no success. Maybe I’m not the only one, and I thought I draw my own version based on all the information I could dig up (almost only good source was the Windows Phone Internals Preview 1), mixed with some BUILD videos about Windows 8. As amazing it is, there’s absolutely nothing in MSDN about the kernel structure of WP, so here’s something for those with endless thirst for knowledge:

From top to bottom, the famous shared core consist of two distinct parts, Windows Core System and Mobile Core. The Windows Core system is the part that actually shares code with Windows and is the bare essential of OS kernel. The Mobile Core is the part that shares functionality and code with the Windows kernel, but it’s no longer 1:1 copy, but tuned to mobile needs, with less functions than the big Window’s kernel. So together the Core System with Mobile core are the only areas with codeshare between the two platforms. There are areas where the APIs are the same, but the code behind differs between Windows and Windows Phone.

Above the shared core sits the Windows Phone system, with prebuild apps like people hub and Music & Videos, Windows Phone Shell, Connection management and Platform services etc. The platform services itself consists of four major elements, which provide services to all applications.

Package Manager is the part which handles the lifecycle of an application from installing to uninstalling, and the metadata while it’s installed on the system. That data includes information about pinning and extensibility points the app has registered.

Execution Manager handles the applications and background agents and their execution logic. It is responsible for creating the host process and application state messages, such as app startup/shutdown and deactivation.

Navigation Server is handling all the moving between foreground applications on the phone. It handles it by telling execution manager what application to launch or reactivate and keeps track of the navigation stack.

Resource Manager monitors the system resources of all the active processes and enforces constraints on them, focus on CPU and Memory. If the app is misbehaving, Resource Manager can terminate the app to ensure the stable and quick response of the phone.

That’s the quick version of the shared core for Windows ecosystem, hope you find it useful!

Posted in Windows Phone, Windows Phone 8 | Tagged , | Leave a comment

Windows Phone 8, let’s get the party started!

Finally the SDK is out and we can talk about all the great stuff that the SDK brings to us. There are some big changes with unified programming model, but also some differences, like HTML5/JScript not being there as a project template (you can still embed the browser control..) and XNA not being present but replaced with DirectX.

For a short capture of the coolest things with WP8 I would say these things everyone doing WP dev should check out and learn:

  • Lock screen – This is new thing to WP devs, pretty same to big Windows. Now you can provide background images and notifications to the lock screen of the phone, notification stuff is pulled from your program’s primary tile (text, icon, count) but background images you can define inside your app
  • Navigation – There’s a new WinRT based navigation API to use beside to old trustworthy API from 7.x. Now you can do actual navigation apps, that won’t die if user goes away from the app, but can continue to track on the background. You can also ask directions easily with ms-drive-to and ms-walk-to URI schemes within your app.
  • In App Speech support – Now you can actually integrate speech support to your own app with voice commands, speech recognition, and text-to-speech. Voice commands can be deep links to your app (HelloWorld show image), speech recognition you can use inside your app to command your app/game (vessel turn left) and text-to-speech is a “robot” speaking your text to the user.
  • Wallet – Create added value to your membership app, create coupons for your shopping app… endless possibilities here, NFC is the big thing here on WP8, and you should not pass up the opportunity to add these functionalities if applicable to your app.
  • In-app purchases – If you want to monetize your app, think about micropayments. Buy a new report template within your app, buy new tools/weapons in your game.. options are endless. Micropayments are the next sliced bread in WP marketplace, so don’t miss out on the opportunities they offer, and with this API, you got a solid backend ready with couple of easy steps within your app.
  • Localization of your apps -there’s now build in templates for this. Localization is one of they key elements to make money with your app in different marketplaces. There are really cheap crowdsourcing places to go to get your apps ready for example to China market, the user base is so huge that micropayments will definitely boost your income

Other noteworthy changes are the new map control, Pivot & Panorama ditched from SDK and moved to ROM, Bluetooth APIs, inclusion of Windows.NET.Networking, revamped storage apis, associating your app with certain filetypes and now the store compiles your .NET code in the cloud, ensuring the fastest possible startup for your apps at consumer devices. I’ll be posting more in detailed look for each of these categories later on.

Posted in Windows Phone | Leave a comment

What changes with Windows Phone 8 development

Thought I give a short summary for you who are interested in bringing your WP7.5 app to WP8 for what you should look out for.

In general you shouldn’t recompile your WP7.5 app to WP8, for two reasons. Firstly, WP7.5 apps will work on WP8 as is, without any need to rework the code. Secondly, recompiling apps is only going to get you in trouble, because there are some changes in the way .NET Framework and CLR has been implemented on WP8 compared to WP7.5. There is a totally new kernel on WP8 and for example totally new garbage collector implementation on WP8. Also precision is not the same in all cases with WP7.X and WP8 with number handling.

What you should consider is to bring your app to Windows 8 with the same trouble, as now with the shared kernel and programming model (XAML+C#/C++) you are able to double your presence in the markets. We’ve been able to reuse pretty much 99% of the code in couple of titles we’ve done targeting Win8 and Windows Phone 8 platforms with C++ DX based games.

Windows Phone 8 will also include in-app purchasing , so finally you can bring additional paid content to your apps/games. Micro payments have proved to be a very efficient way to a developer to earn more money, as buying decision bar is much lower with small amounts, and there will be more purchases for items/features than you would expect with right kind of content.

These are just a tip of the iceberg, and when the NDA is lifted, I’ll talk more about other cool features that are hidden in the SDK, that will make WP8 rock!

Posted in Windows Phone, Windows Phone 8 | 2 Comments

Windows Phone Garbage collection

Thought I clear up some things regarding the functionality of the Garbage Collector in Windows Phone, which is maybe a little bit misunderstood functionality of the platform among the people coming from other non .NET environments.

First of all, the whole point of garbage collection is to automate memory management on behalf of the developer, taking (almost) all the pain out of handling allocating and releasing memory. As managed developers, we don’t need to know too much what’s happening behind the curtain, but let’s go through some basics anyway, so we can feel more comfortable leaving our valuable memory to be handled by the Compact Framework.

Managed objects can move around the memory, unlike native objects, this is one important thing to understand. The system can compact memory and decide to move things around without asking your permission, so you can’t have memory pointers in traditional sense. Internally there is some methods that the framework uses to disable moving the memory when it’s handling some managed memory buffers, but thats all hidden from average developers.

As there are two types of objects, value and reference types, there is also two ways the framework handles the memory for these objects. For value types compiler checks when they go out of scope, and generates code to destroy and reclaim their memory in very deterministic manner. Reference type objects are a bit trickier. For their memory the GC reclaims the memory when it seems appropriate, and it is not controlled by your code. It follows through how you reference the object and finally when there are no more references left, it will destroy it.

The GC in Windows Phone 7 Mango is so called generational garbage collector. That means that the GC has two queues, gen-0 and gen-1. Gen-0 has those which will have very short life cycle and it’s collected on each GC round, and Gen-1 is for those who reside longer in memory and is collected rarely. Those objects who survive the gen-0 sweep, are promoted to gen-1.

Posted in Windows Phone | Leave a comment

Rating control for Windows Phone 7.5

Long evenings at hotels can be strangely productive time, and last night I started to think that there is no simple and lightweight star rating control available (I know only one, but it’s a big too big for my taste).

It has two properties, Rating and Scale. With Rating you can set or get the current rating and with Scale you can set what scale you want there to be (for example 1-5 stars, you would give Scale the value of 5). It does still lack the production code level error checking, so if you consider using it, better add some try catches. Here’s the file:

RateControl

You are free to edit and use and it commercial or non commercial, as long as you leave the assemblyinfo intact and use it through my library.

Posted in Windows Phone | 2 Comments

Nokia Windows Phones

Today at Nokia World was announced that Nokia is releasing two Windows Phone, Lumia 800 and 710. These two models are the first Wp phones from Nokia, and will be most likely the most sold WP phones for a while. The Lumia 710 was IMHO more exiting in that sense, that the pricepoint was finally where it should be, retailing at around 270 €. There was not many features except faster processor which would make the 800 a must buy compared to this one (I don’t put too much weight on the design). At this price it really has a chance to capture new markets, and bring WP to whole new markets it couldn’t reach before.

Myself I’ll be still sticking to my two Omnia7s, as they are still quite competetive in specs, and especially the larger screen makes it hard for me to give up on them (if Nokia would have launched either of the phones with front facing camera, then I would have had to consider getting one, but luckily they didn’t so I can save some money..). I think I’ll wait for the WP8 phones before upgrading from my current Mango phones, but today was a very welcome addition to WP models and if I wouldn’t have a WP, I would definately get a Nokia one – I’m envious for the Nokia Drive, that really makes it hard for me to keep my calm and not to rush to preorder a Lumia..

On other development – I’m starting to create a Windows 8 “Metro Style app” for the ringtone editor, hopefully it will be soon available here – I probably put up some developer story about the process as well up here.

Posted in Windows Phone | Leave a comment

Create your own ringtones for Mango

I think I’m not the only one who feels that using Audacity is not the easiest way to create ringtones for your Windows Phone. Once again the annoyance level of using too many separate tools got too high, and I decided to create my own solution for this.

Here’s a little utility, which you can use to create the ringtones with as little hassle as possible. Using it is quite simple, just install it, make sure your tunes are in Music -library in Windows, and run it.

You have a list of all your music in MP3 and WMA format in front of you as a list and you just select the tune you like to use for your ringtone. Then you have two sliders you can use to adjust the selection by dragging them around – it’s fixed to allow max 39 sec piece to be used as ringtone (Mango limit).

You can listen to the preview while editing, just realize that when you drag the end, it will go automatically -5 seconds from the end, helping you to adjust the end better (so it’s not a bug, but a feature.. right;) Draggin the beginning will autostart the preview from the beginning.

After you are satisfied with your ringtone, click the Create Ringtone -button. That will create a file called Ringtone-name of your song.wma to your Music library.

Unfortunately Zune has no SDK so I couldn’t automate the next step. Now you need to open the Zune, and make sure that your Music library is set as your music collection location (See from Settings, Software, Collection). If it isn’t, click Manage and add it. Now if you’re not doing Wireless sync, connect your phone to your computer.

Click Collection, and go to Music page. Now you should see your Ringtone-name of your song.wma in the list. Just drag that to your phone, and now you’re done!

If you open your phone, go to Settings and Ringtones+Sounds, and click Ringtone, you should see your own ringtone on top of the list.

You can download the installer from http://www.symbio.com/cs/RTCreator.zip

Add comments if you have bugs or questions – I try to clarify the instructions according your feedback

Quick note (18.10.2011) – this has been tested only on Windows 7, and should work on Windows 7 & Windows Server 2008 R2.

Posted in Windows Phone | 2 Comments

Speaking gig coming up

If you have a chance, come to see me at Suomen Ohjelmistoyrittäjät organized Nokia/Microsoft ecosystem event 22nd of September in Helsinki, where I’ll be speaking about WP development experiences.

Posted in Uncategorized | Leave a comment

WP 7.5 ‘Mango’ security model

Long time no post :) I had unforeseen delay with a house project that has kept me quite busy lately, and unfortunately WP Mango update NDA prevents phone reviews that I promised earlier :( But now I have a some time to write a short story about security side of Windows Phone. I have not seen too many articles about this, so I thought this might interest someone.

The security model in Windows Phones is based on chambers. These chambers limit what applications can do by putting them inside a security sandbox. There are four different chambers and each of these chambers have certain limitations how applications within them can run.

Security Chambers

Trusted Computing Base is the home of the kernel and kernel-mode drivers. TCB has the highest set of privileges. Processes running here have the access to most of the things in the phone. It goes without saying, that you can’t put your own applications here, and even for OEMs they have to be careful what they put here, as it will affect the security and the performance of the phone. TCB chamber can also modify policy and enforce the security model.

Elevated Rights Chamber is the location where the user-mode drivers and services reside. Processes here have access to most of the things except for the security policy. Drivers that reside here are safer in that sense, that they won’t crash the whole phone if they stop functioning, but there is a performance tradeoff.

Standard Rights Chamber is the place for native code applications. All the apps that do not provide services for the whole device are located here. This is the place where the Microsoft apps, like Outlook Mobile resides.

Least Privileged Chamber is the home of the MO/OEM applications and normal 3rd party applications which you load from the marketplace. LPC differs from the other security chambers for it is dynamic by nature. By default it has minimal access rights, but software running there can request a capability, like access to location, media, network, camera, microphone etc on installation time. These capabilities which each software requires are disclosed at marketplace.

Each 3rd party software has it’s own isolated LPC and can have access to only those capabilities that it has requested and they can not be elevated at runtime. Also each software has it’s own file system, called isolated storage and other applications can not access that. There are no communication between applications except through server.

That’s about the main security architecture, if you have further questions, leave a comment!

Update (25.8.11) – I found out that the Hybrid applications do not run in the SPC but in LPC. When they access drivers etc, the security context will be within the LPC

Posted in Windows Phone | 2 Comments

Mango has been released!

Finally some great news from MS, the Mango WP 7.5 has been RTM! The Final build version is 7720 but developers get now an update from the Beta 2 (7661) to 7712 (Almost RTM version), which is more than great (had some connectivity issues with beta with 3G). After I have updated my phone, I’ll be posting some review about it.

Posted in Windows Phone | Leave a comment