If broken it is, fix it you should

Displaying HTML Content in a RichTextBlock

Tess1 — Mon, 13 May 2013 07:39:00 GMT

[This post is a part of a series of posts about the Social Media Dashboard Sample. For an introductory blog post with information and links to the Social Media Dashboard sample click here]

When you want to display HTML content from a blog RSS feed or other sources in a Windows 8 app you can display this in a WebView but the problem with the WebWiew is that you can’t use your own background or disable zooming which means that you will have a rather crude UX experience.

One thing you can do is inject CSS but if you want to have more control over the content you can display it in a RichTextBlock instead.

The RichTextBlock control doesn’t display HTML as is, so in the Social Media Dashboard Sample we parse the HTML and add native Windows 8 controls to the RichTextBlock.

Defining the Properties.Html Dependency Property

On the ScrollingBlogPostDetailPage.xaml we add a RichTexBlock and databind the HTML content to the rtbx:Properties.Html property like this

<RichTextBlock x:Name="textContent" FontSize="16" IsTextSelectionEnabled="True" FontFamily="Segoe UI" 
Foreground="{StaticResource AppDarkColor}" rtbx:Properties.Html="{Binding Content}" >

In order for this to work we need to create the extension property Html separately and that is where we parse the content and build the Control tree.

The xml namespace rtbx in the sample above is defined as mlns:rtbx="using: SocialMediaDashboard.Common"where SocialMediaDashboard.Common is where we define the Properties class.

The properties class has a property Html, and when this property is set, the HtmlChanged method is called

public static readonly DependencyProperty HtmlProperty =
DependencyProperty.RegisterAttached("Html", typeof(string), typeof(Properties), new PropertyMetadata(null, HtmlChanged));

The HtmlChanged method captures the HTML, generates the various blocks used in the RichTextBlock and adds them to the RichTextBlock Control

        private static void HtmlChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            RichTextBlock richText = d as RichTextBlock;
            if (richText == null) return;

            //Generate blocks
            string xhtml = e.NewValue as string;

            string baselink = "";
            if (richText.DataContext is BlogPostDataItem)
            {
                BlogPostDataItem bp = richText.DataContext as BlogPostDataItem;
                baselink = "http://" + bp.Link.Host;
            }

            List<Block> blocks = GenerateBlocksForHtml(xhtml, baselink);

            //Add the blocks to the RichTextBlock
            richText.Blocks.Clear();
            foreach (Block b in blocks)
            {
                richText.Blocks.Add(b);
            }
        }

It also performs a few more housekeeping functions like getting a base link that we can use to generate absolute links for images as many bloggers tend to just use relative links. Because we know in this app that we will always be databound to a BlogPostDataItem we can use the link from there.

The method GenerateBlocksForHtml is where we start the parsing and this will eventually generate all the blocks we need to add to the RichTextBlock.

        private static List<Block> GenerateBlocksForHtml(string xhtml, string baselink)
        {
            List<Block> bc = new List<Block>();

            try
            {
                HtmlDocument doc = new HtmlDocument();
                doc.LoadHtml(xhtml);

                foreach(HtmlNode img in doc.DocumentNode.Descendants("img")){
                    if (!img.Attributes["src"].Value.StartsWith("http"))
                    {
                        img.Attributes["src"].Value = baselink + img.Attributes["src"].Value;
                    }
                }

                Block b = GenerateParagraph(doc.DocumentNode);
                bc.Add(b);
            }
            catch (Exception ex)
            {
            }

            return bc;
        }

In here we generate the starter block (a paragraph block) that contains all other blocks, and the GenerateParagraph method goes through the content of the HTML root node and adds blocks to this one base paragraph Control.

        private static Block GenerateParagraph(HtmlNode node)
        {
            Paragraph p = new Paragraph();
            AddChildren(p, node);
            return p;
        }

We then go through and add Inline elements for all the children of the root HTML node. This method is later called recursively until we get to the leaf HTML node

        private static void AddChildren(Paragraph p, HtmlNode node)
        {
            bool added = false;
            foreach (HtmlNode child in node.ChildNodes)
            {
                Inline i = GenerateBlockForNode(child);
                if (i != null)
                {
                    p.Inlines.Add(i);
                    added = true;
                }
            }
            if (!added)
            {
                p.Inlines.Add(new Run() { Text = CleanText(node.InnerText) });
            }
        }

Depending on the type of the node we either generate a Span, Linebreak, Hyperlink, or Paragraph with Image etc. or combinations thereof and then continue adding the children as new Inlines. Part of the GenerateBlocksForNode method is shown below… for the full code look in RichTextBlockProperties.cs file in the SocialMediaDashboard sample

        private static Inline GenerateBlockForNode(HtmlNode node)
        {
            switch (node.Name)
            {
                case "div":
                    return GenerateSpan(node);
                case "p":
                case "P":
                    return GenerateInnerParagraph(node);
                case "img":
                case "IMG":
                    return GenerateImage(node);
                case "a":
                case "A":
                    if (node.ChildNodes.Count >= 1 && (node.FirstChild.Name == "img" || node.FirstChild.Name == "IMG"))
                        return GenerateImage(node.FirstChild);
                    else
                        return GenerateHyperLink(node);
                    …

GenerateSpan looks like this for example

        private static Inline GenerateSpan(HtmlNode node)
        {
            Span s = new Span();
            AddChildren(s, node);
            return s;
        }

Conclusion

HTML is obviously a pretty rich markup language and it would take forever to write code to parse and display all types of elements so this sample just implements the most common ones but as it turns out it still captures most of the elements used in the blog posts that we have encountered so far, and the model used here is pretty easy to expand for the specific situations you might encounter.

For more information about Windows 8 app development, go here.
For more information about Windows Phone development, go here.

Great Swedish games in the Windows 8 store and the Windows Phone Store

Tess1 — Wed, 03 Apr 2013 12:41:50 GMT

Lately I have been focusing a lot on games and education apps and I have been working with a lot of great Swedish game developers so I think it’s about time I gave them a shout out.

This is by no means a complete list of Swedish games in the store but just some that I want to recommend. Click on the Pictures to get to the store and try them out

Ahh, but first a quick message about a Swedish Competition… We are running dev.battle where you can win a Nokia Lumia 820 or an Acer Iconia W510 if you create apps and games for Windows 8 and Windows Phone.

I have an Acer Iconia W510 on loan now from work and I didn’t think it was going to WOW me but I was very wrong. Since I got it home I have only been able to use it once my daughter goes to bed because she completely hogs it. It’s in that sweet spot where it is a great tablet but also has a full keyboard, and full Windows 8… it doesn’t really hurt that we only need to charge it every 3-4 days since it has around 10 hrs of battery in the tablet and another 10 in the keyboard. I wouldn’t use it for Visual Studio or hard core gaming but it definitely fits my needs for surfing and doing regular “in front of the TV” casual gaming.

My Favorite Swedish Games in the Windows 8 store

Donut Games

Donut games is a small indie game developer company that has made it big time on other platforms with their popular series of games so I was extremely happy when they decided to take their games to Windows 8. They have a very cool collectors badge idea where each game Icon has a collectors number so you can collect them all :)

Rat on a…

First we have their Rat on a… series with Rat on a Scooter XL (17), Rat on a Skateboard (24) and Rat on a Snowboard (29). The goal here is to run though the levels, collecting cheese and stars and do tricks with the “vehicles”. The games are super easy and fun and work really well both with keyboard and touch and I love the pixel graphic they use that give the game that “arcade” feel. As a special treat the Rat on a Scooter XL game is FREE, but the other ones are well worth their $1.49.

Rat on a Skateboard was brought up as game of the week at Coding4Fun so if you don’t trust me, trust them:)

Other Donut games

In Castle Smasher (02) you use a catapult to throw boulders at castles, to be honest I haven’t played this game a lot since it just came out but it looks very promising.

The other game shown here is Bubble Pig (33) and this is one of my favorite games. It has all the ingredients of a great game complete with platform jumping, collect stuff, try to beat your level scores and all that fun. I have spent countless hours playing this game and would absolutely recommend it. This is one of the rare games that is made first for touch but works even better with keyboard since it makes it a lot easier to get into those secret coin filled areas that you really want to access.

Games from Filimundus

Filimundus is a Swedish game developer that makes games for kids. They have some amazing characters in their portfolio like the Astrid Lindgren character Pippi Longstocking, and some very popular Swedish childrens books characters like ol’ man Pettson and his cat Findus. Even if you don’t know the characters the games are awesome and makes even adults have to think a lot before solving the puzzles.

The games Pettsons Inventions 1 and Pettsons Inventions 2 are similar but in my opinion much better than Amazing Alex and the Incredible Machine. The attention to detail, the difficulty of the puzzles and the quirky things that happen are extremely well balanced. These games are a must have if you have kids that are in the ages 2-10

IloMilo, Swedish XBOX live game made by SouthEnd Interactive

I have own this game both on Windows Phone, Windows 8 and on the XBOX. On Windows 8 it is called Ilomilo plus and features some additional levels. It’s been out for a while now on Windows Phone but for those of you who haven’t yet played it it is a super cute puzzler where you have to guide ilo through a level, collecting flowers, extras and rescue safkas and finally meet up with milo to finish the level.

Some levels are extremely hard and although I don’t like to, I have had to check the walkthroughs a couple of times to get past some of them:) There is a lot of extra pretty interesting info about Ilo, Milo, Sebastian and the safkas on the ilomilo blog.

Sprinkle by Mediocre

Sprinkle by Mediocre AB is a cute game where you use a water cannon to make your way though the levels and remove obstacles. This game is a bit of an anomaly in that it is only available on Windows RT but if you are sporting a Surface RT or some other RT device this is definitely a fun game.

Word and Quiz Games

Finally I’d like to call out QuizMe, a great quiz game from WeAreQiiWi Interactive where you play rounds of quiz challenges with your friends, and also the game WordRoom from IO2GameLabs, a Word puzzler where you have to find Words in a grid before your opponent finds them, very addictive. WordRoom is also available on Windows Phone

My Favorite Swedish Games in the Windows Phone store

Apart from IloMilo and Wordroom that I mentioned earlier there are some other great Swedish games in the Windows Phone store

Ruzzle

Ruzzle is a wordfinding game created by MAG Interactive. The game has existed for some time on IOS and Android and the game play is very similar to Wordament but with the difference that you play 3 2 minute rounds against your friends. You can challenge your friends either by name, through facebook or through twitter, both if they are on Windows Phone or if they play the game on one of the other platforms. It is extremely addictive and as of lately I have been playing this a lot. If you want to try to beat me, my ruzzle name is tessifufu:) I play mostly in Swedish but I’m up for a game in English as well.

Cradle to the Grave (+ premium)

Cradle to the Grave from Coltran Studios is a very interesting game where you battle sombies and other enemies, acumulate weapons and just have some blasting fun. The game has risen on the WP charts and is now one of the most popular games on WP… it is also a bit special because it is WP exclusive. It includes zombies, crafting your own weapons, awesome cartoon graphics and everything else that makes a game awesome to create that perfect game. The game is available in a free and a premium version (without ads)

Ragdoll Run (+ premium)

What happens if you mix Temple Run with Ilomilo? You get ragdoll run:) This is again one of those games that have become extremely popular on WP lately both because of the addictive gameplay but also because these ragdolls are just too cute. This game is created by Dawnbreak Studios and comes in a free and a premium version. Love Love Love this game

Blobster

Blobster by Divine Robot is a super cute XBOX Live game where you have to move the blobster though challenging levels. To move the blobster you extend him like a rubber band and fling him away. Not sure why I am automatically thinking it’s a he, but anyways… again we are talking great graphics and really fun gameplay, enough for many hours of fun.

Duudle

Duudle by VISIARC has been around for ages on Windows Phone and I used to play this a lot about a year ago. It has some similarities with DrawSomething but is still very different. The way you play is that you set up a match with 3 or more of your friends. In each round one person draws a given word and then it is up to the other players to guess what you drew.

They use a very interesting way to make this work… first the drawer draws, then the turn is passed on to the guessers but it’s a turn based game so you don’t have to all be there at once. Once it is your time to guess the drawing is played up in real time so you see the drawing as it happens and you have to guess quicker than the other person. If you don’t guess it right you can guess again with a time penalty and scores are tallied based on how fast you guess. The drawer also scores based on if the other people guessed it or not, so you have to hit the perfect combination of making it easy but not too easy.

Manic Miner and other Spectrum games

This one (manic miner) I have to admit I haven’t played but I loved Spectrum so I’m recommending it anyways. Elite are coming out with a number of old spectrum games now ported to Windows Phone and the connection to Sweden is that the dev is Swedish. These games are sure to take you down memory lane:)

Let me know what your favorites are, I’m always looking for new and fun games

Tess

Prisjakt The Story - Writing a Windows 8 app in JavaScript/HTML

Tess1 — Wed, 30 May 2012 07:11:00 GMT

[Prisjakt – The Story is a series of blog posts about our experiences helping Prisjakt/PriceSpy to write a Windows 8 Metro Style App using HTML/CSS/JavaScript.]

Introduction

Prisjakt/PriceSpy is web site for searching for/comparing products and getting the best price for a product. Prisjakt/PriceSpy is currently available in four countries: Sweden, Norway, United Kingdom and New Zeeland We at Microsoft DPE in Sweden has helped them to write a Windows 8 Metro Style app. We will post a series of articles of things we learned during the development. Here’s a list of the post

Designing the application
Working with screen resolutions and orientations
Localizing your app
JSON & data binding
Implementing the search contract & deep linking
Using the Bing Maps control

Here’s a link to a short demo (in Swedish) that shows the main features of the app. You can find it in Windows Store near you soon!

Bizzy Bees Step 5: Adding some bees to the mix (XNA Walkthrough)

Tess1 — Fri, 02 Mar 2012 15:37:00 GMT

This is part of a walkthrough series on creating a game (Bizzy Bees) in XNA

Overview
Step 1: Setting the stage (projects and assets)
Step 2: Drawing the scene
Step 3: Adding flowers
Step 4: Making things move
Step 5: Adding some bees to the mix
Step 6: User interaction
Step 7: Rounding it up

We have two steps left before we have a fully functioning game. We need to add some bees to match with the flowers and we need to add some user interaction to be able to match the flowers and the bees.

BeePicker and Bees

We are going to use a similar way to generate the bees as we did with the flowers.

First off we have a BeePicker (the bottom area of the screen) that takes care of adding, removing and interacting with the bees

Add a new BeePicker class with the following contents

 class BeePicker
    {
        const int beeDeltaX = 96;
        const int beeStartX = 5;
        const int beeStartY = 700;
        const int numberOfBeeColors = 5;

        private List<Bee> bees = null;
        private SpriteBatch spriteBatch;
        private Texture2D beeMap;
        private Random r;

        public BeePicker(ContentManager content, SpriteBatch spriteBatch, int seed)
        {
            beeMap = content.Load<Texture2D>("beemap");
            this.spriteBatch = spriteBatch;
            bees = new List<Bee>();
            r = new Random(seed);

            for (int i = 0; i < 5; i++)
            {
                AddRandomBee();
            }

        }

        private void AddRandomBee()
        {
            bees.Add(new Bee(r.Next(numberOfBeeColors + 1)));
        }

        public void Draw()
        {
            for (int i = 0; i < 5; i++)
            {
                spriteBatch.Draw(beeMap, new Vector2(beeStartX + i * beeDeltaX, beeStartY), new Rectangle(bees[i].Color * 91, 0, 91, 91), Color.White);
            }
        }
    }

Most of this should look very familiar from the colum class except much simpler since the bees don’t move

The Bee class itself is for now just holding the color of the bee

    class Bee { public int Color;  public Bee(int color) { this.Color = color; } }

Generating and drawing bees

In order to generate the bees and get them on the screen we add a BeePicker to the Game1 class

 BeePicker beePicker = null;

initialize the bee picker in the LoadContent class

            beePicker = new BeePicker(Content, spriteBatch, System.DateTime.Now.Millisecond);

and then to draw it by calling beePicker.Draw in the Game1.Draw method

 if (!gameOver)
            {
                foreach (Column c in columns)
                    c.Draw();
 beePicker.Draw();             }

And voila, we have all of the UI in place.

Next time we will add the user interaction and put some finishing touches on this.

Bizzy Bees Step 6: User interaction (XNA Walkthrough)

Tess1 — Fri, 02 Mar 2012 15:37:00 GMT

This is part of a walkthrough series on creating a game (Bizzy Bees) in XNA

The last step in the series is to add som user interaction so we can actually play the game.

Catching the users input in the Update method

The user interaction consists of taps and you can basically tap two areas of the screen, either the beepicker to select a bee, or the columns to match a bee with the bottommost flower.

In Silverlight if you want to check when the user has clicked or tapped something, the most common way to do this is to add a tap or click eventhandler on a button or any other object, but in XNA there is no such thing as a control or a click event.
To handle user interaction in XNA you have to do two things.

1. In the Initialize function you enable any gestures that you want to enable, for example Tap

            TouchPanel.EnabledGestures = GestureType.Tap;

This is a bitmap so you can add as many different gesture types as you want, for example if you wanted Tap and FreeDrag you would do GestureType.Tap | GestureType.FreeDrag.

2. In the Update function, you check what gestures the user has done since the last update and act on them

 if (!gameOver)
            {
                //Handle user interaction  while (TouchPanel.IsGestureAvailable) { GestureSample gesture = TouchPanel.ReadGesture(); if (gesture.GestureType == GestureType.Tap) { HandleInput(gesture.Position); } } 
                foreach (Column c in columns)
                {
                    c.Update();
                    if (c.ReachedBottom)
                    {
                        gameOver = true;
                        break;
                    }
                }
            }

NOTE! By reading the gesture with TouchPanel.ReadGesture() you remove it from the TouchPanels gesture, if you fail to do this, this will be an endless loop

Acting on the input

Ok, so now we are handling the input, it’s time to act on it, and rather than making this extremely complex and check for every single flower touch area or bee touch area we just say

a) did they touch the bee picker area? if so, handle bee selection

b) do we already have a selected bee? if so, check if they touched a matching flower

c) if neither of the above is true, then we just don’t give a hoot meaning all other taps will be ignored

 private void HandleInput(Vector2 position)
        {
            if (position.X > 0 && position.X < 480 && position.Y > 700 && position.Y < 800)
                HandleBeeSelection(position.X);
            else if (selectedBee != null)
                HandleFlowerSelection(position.X, position.Y);
        }

Even in the BeePicker we wont do any fancy schmanzy collision detection since there is a very easy way to know which bee you picked. We know we have 5 bees so the index of the bee can be infered from the x position by simply dividing it by 5.
but we’ll get to that in a little bit.

Our HandleBeeSelection method will look like this

 private void HandleBeeSelection(float x)
        {
            //first de-select any previously selected bee if (selectedBee != null)
            {
                selectedBee.IsSelected = false;
                selectedBee = null;
            }
            //Mark and select the new bee
            beePicker.MarkSelectedBee(x);
            selectedBee = beePicker.GetSelectedBee(x);
        }

The selection and deselection here will be used to give a visual cue to the user that a bee is selected

So a couple of housekeeping things to make the above work.

1. Add a “property” to the Bee class called IsSelected that will logically keep track of if the bee is selected or not (used only for drawing)

        public bool IsSelected = false;

2. Implement the methods MarkSelectedBee and GetSelectedBee in the BeePicker

        public void MarkSelectedBee(float x) { GetSelectedBee(x).IsSelected = true; } public Bee GetSelectedBee(float x) { int index = (int)(x / beeDeltaX); return bees[index]; }

3. Modify the BeePicker Draw method so that it draws the bee with a slight tint of DimGray if it is selected

 public void Draw()
        {
            for (int i = 0; i < 5; i++)
            {
                if(bees[i].IsSelected)                    
                    spriteBatch.Draw(beeMap, new Vector2(beeStartX + i * beeDeltaX, beeStartY), new Rectangle(bees[i].Color * 91, 0, 91, 91), Color.DimGray);
                else
                    spriteBatch.Draw(beeMap, new Vector2(beeStartX + i * beeDeltaX, beeStartY), new Rectangle(bees[i].Color * 91, 0, 91, 91), Color.White);
            }
        }

If you followed along so far you should now have something that looks like the above, where if you tap a bee it will turn slightly gray. Notice that it is only the bee that turns Grey and not the background around it, this is because the area outside of the bee is transparent in the bee png and the color isn’t superimposed on the transparent areas which really works to our favor here.

Matching flowers and bees

The flower selection is a little bit trickier since we have to remove and replace bees and flowers but let’s look at the structure first

 private void HandleFlowerSelection(float x, float y)
        {
            //verify that we are tapping inside a column if (x > 10 && x < 470 && y > 100 && y < 700)
            {
                int rainbowColor = 6;
                int selectedColumnIndex = (int)((x - 10) / 92);
                Column selectedColumn = columns[selectedColumnIndex];
                Flower selectedFlower = selectedColumn.GetBottomFlower();

                //check if we have a match or if it was a rainbow flower if(selectedFlower != null && (selectedFlower.Color == selectedBee.Color || selectedFlower.Color == rainbowColor))
                {
                    //remove the bottom flower
                    selectedColumn.RemoveBottomFlower();
                    
                    //replace the bee - making sure that there is always a match by passing in a list of all the bottom flower colors List<int> availableFlowers = GetAvailableFlowers();
                    beePicker.RemoveAndReplaceBee(selectedBee, availableFlowers);

                    //deselect the bee
                    beePicker.DeselectAll();
                    selectedBee = null;

                    //if it was a rainbow flower - add points if (selectedFlower.Color == rainbowColor)
                    {
                        score++;
                        //if we reached 10, 20, 30... points, increase the velocity to make the game harder as we go along if ((score % 10) == 0)
                        {
                            foreach (Column c in columns)
                                c.Velocity += 0.1f;
                        }
                    }
                }
            }
        }

We verify that we are in an actual column, and find the bottom flower of that column to see what color it is.
If it matches the bee or if it is a rainbow flower (meaning it matches all bees) we remove the flower and we replace the bee.

In order to not get locked up in a state where we have no matching bees and flowers we pass in a list of all the bottom flowers to ensure that we have at least one match, or else the replacing bee needs to match one of the flowers.

At the end of the function we increase the score (number of rainbow flowers collected) if it was a rainbow flower, and to make the game progressively harder we increase the velocity of all the columns. Remember? this is the variable that the Columns use in the update function to progress the position of the flowers.

Now we have a few methods that we need to implement to get this working.

In the Column class we implement the methods GetBottomFlower and RemoveBottomFlower, this is a pretty easy task since we use Lists and the bottom flower is always at index 0

        public Flower GetBottomFlower() { if (flowers.Count > 0) return flowers[0]; else
                return null; } internal void RemoveBottomFlower() { if (flowers.Count > 0) flowers.RemoveAt(0); }

The GetAvailableFlowers method in the Game1 class uses the GetBottomFlower function to generate a list of all the bottom flowers in the columns

 private List<int> GetAvailableFlowers()
        {
            List<int> flowerColors = new List<int>();
            foreach (Column c in columns)
            {
                Flower f = c.GetBottomFlower();
                if (f != null)
                    flowerColors.Add(f.Color);
            }
            return flowerColors;
        }

In the BeePicker class we need to implement the DeselectAll and RemoveAndReplaceBee methods

 public void RemoveAndReplaceBee(Bee selectedBee, List<int> availableFlowers)
        {
            int beeIndex = bees.IndexOf(selectedBee);

            //check if we already have a bee that matches the available flowers //remember to skip over the selectedBee since it will be removed in a moment bool match = false;
            int rainbowColor = 6;

            //if there is a rainbow flower it will always match if (availableFlowers.Contains(rainbowColor))
                match = true;
            else
            {
                for (int i = 0; i < bees.Count; i++)
                {
                    if(i != beeIndex && availableFlowers.Contains(bees[i].Color)){
                        match = true;
                        break;
                    }
                }
            }

            int color;
            if(match){
                //we already have a match, just add a random colored bee
                color = r.Next(numberOfBeeColors + 1 );
            }
            else{
                //we have no match so we must pick a color from the available colors
                color = availableFlowers[r.Next(availableFlowers.Count)];
            }

            //set the selected bee to the new color to "create" a new bee
            bees[beeIndex].Color = color;
        }

        internal void DeselectAll()
        {
            foreach (Bee bee in bees)
                bee.IsSelected = false;
        }

The RemoveAndReplaceBee method seems a bit more complex… but what we do here is really to check if the bees we have left match any of the available flowers (to make sure we always have a match)
If we already have a match, we can just add a new random bee to replace the old one, but if we don’t we need to make the new bee match one of the existing flowers.

And finally, yay! we are done, and have a playable game

In the last article in the series I will discuss a few problems with the game that I will leave up to the reader to fix, and discuss a few things I have done in the “real” game to make the game, at least in my opinion, a bit more interesting

Bizzy Bees Step 7: Rounding it up (XNA Walkthrough)

Tess1 — Fri, 02 Mar 2012 15:37:00 GMT

This is part of a walkthrough series on creating a game (Bizzy Bees) in XNA

A few issues in the game – left for you to fix

If you try to play the game a few times you may notice a couple of things

1. When the game starts, there may not always be a matching flower and bee

2. If you manage to empty a column, you may run into an issue where you are either blocked because there are no matching flowers and bees or it may crash

In the real game I have added a lot of logic around adding matching flowers when we start and when columns are empty but the logic for this was a bit too cumbersome to add to the walkthrough without making it completely incomprehensible in short articles.

How about a menu system?

Very few games start you off already in the game, but it makes it a bit easier to demo As of mango you can mix XNA and Silverlight to do menus for example but for Bizzy Bees I started off with a code sample from the App Hub called Game State Management http://create.msdn.com/en-US/education/catalog/sample/game_state_management which let’s you create different types of screens for menus, gameplay, highscores and pausing. It also includes functionality for handling tombstoning which is pretty nice.

One thing worth mentioning here is that when you use the back button in a game it is ok to bring up a pause screen and typically when you come back to a game you would also bring up a pause screen before you continue, so it’s a little bit different than Silverlight apps in that regard.

Sound and SoundEffects

I’m one of those people who turn off the sound in all games immediately as I start the game, but I realize that a game feels pretty flat and incomplete if there isn’t at least an option to have game sound. I find http://www.soundjay.com/ to be a pretty good source for random sounds, and a lot of the gametype sounds are extremely easy to create with a tool like Audacity and common household objects

If you want to use Sound in a game you create either a SoundEffect object or a SoundEffectInstance object, drop your audio file in then content project, load it with the content pipeline Content.Load<SoundEffect>(“TheNameOfTheSoundEffect”)() just like with textures.

The difference between a SoundEffect and a SoundEffectInstance is that a SoundEffect is fire and forget, i.e. you call Play on it, and then when it is done playing it stops. With a SoundEffectInstance you can loop, move back and forward, pause etc. so it depends a little what you need it for, i.e. just for a sound effect or for background noise. You can have 16 sounds playing simultaneously, but I really wouldnt recommend it unless you want to drive the player crazy

Levels, achievements, instructions and PowerUps

In Bizzy Bees there is a marathon mode which is basically what we have been coding up here, and then there is a story mode where you follow a path through the seasons. The story gets progressively harder, as more and more flowers and different powerups are introduced and the speed and the goal increases.

In order to make this easy to configure as I was testing out the levels, and also to be able to add new levels I created a level system using XML.

<LevelInfo xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
   <LevelGroups>
     <LevelGroup ColorB="245" ColorG="245" ColorR="245" PosY="93" PosX="36" GroupName="Winter" Major="1">
         <Levels>
            <Level HasQueen="false" InitialVelocity="0.5" NumColumns="3" Minor="1">
                <Flowers>
                   <LevelFlower Color="Red" IsNew="true"/>
                   <LevelFlower Color="Blue" IsNew="true"/>
                   <LevelFlower Color="Pink" IsNew="true"/>
                </Flowers>
                <Powerups/>
                <Goal NumFlowers="10" IsTimed="false"/>
              </Level>
…

Using this I can automatically generate the levels and also automatically generate the instruction screens that appear before each level with the goal, new powerups and new flowers. I liked this way of generating levels because it let me quickly test out new powerups etc. without having to play the game from start to finish each time.

I spent a long time testing out levels and different powerups on various people in my vecinity, mostly because as I was developing the game I was testing it so much and got so “good” at it that I had a hard time looking at it with a beginners eyes. Still I think that the levels aren’t perfect but at least they are better than they would have been without the user testing

For achievements, since I am not connected to XBOX live I decided to take the Star/Medal approach and let the user get a silver or a gold medal depending on how many lives they have left when they reach the goal. I like the achievements even if they are this simple because at least for me, it makes me play the game more times just to get that gold medal or extra star.

I also spent a bit of time calibrating it so that each round or attempt at marathon mode would be long enough to be interesting but short enough to be one of those games that kids can sit in the back of the car and take turns with.

Anyhow, I am far from a pro game developer but thought I’d share some of my thoughts and ideas on the subject… I would love to hear yours.

HTML5 and Javascript – taking it to the big screen

Just for kicks I have also ported the demo that I have been writing about here to HTML5 and Javascript if you want to try it out here from a browser… and yes, I misspelled my own game it’s supposed to be Bizzy Bees

Hope you’ve had fun making the game… If you have written some of your own games, feel free to add them in the comments. Would be fun to try them out.

Have a good one

Tess

Bizzy Bees Step 3: Adding flowers (XNA Walkthrough)

Tess1 — Fri, 02 Mar 2012 15:36:00 GMT

This is part of a walkthrough series on creating a game (Bizzy Bees) in XNA

Now we have set the scener for our game, it’s time to add the “players” or rather the flowers to the scene.

The first thing we need to do is to add two classes, Colum and Flower (you can right click the project and choose add new/class from the code section)

The Column class

The Column class will look like this:

 class Column
    {
        const int columnTop = 150;
        const int numberOfFlowerColors = 6;
        const int rainbowFlowerColor = 6;
        const int flowerDeltaY = 80;
        const int flowerWidth = 72;
        const int flowerHeight = 72;
        
        private List<Flower> flowers = null;
        private SpriteBatch spriteBatch;
        private float x;
        private Random r;
        private Texture2D flowerMap;


        public Column(ContentManager content, SpriteBatch spriteBatch, float x, int seed)
        {
            this.spriteBatch = spriteBatch;
            this.x = x;
            this.flowers = new List<Flower>();
            this.r = new Random(seed);
            this.flowerMap = content.Load<Texture2D>("flowermap");

            //add 3 flowers
            AddRandomFlower(x, columnTop + 2 * flowerDeltaY);
            AddRandomFlower(x, columnTop + flowerDeltaY);
            AddRandomFlower(x, columnTop);
        }

        private void AddRandomFlower(float x, int y)
        {
            int color = r.Next(numberOfFlowerColors+1);
            flowers.Add(new Flower(color, x, y));
        }

        public void Draw()
        {
            foreach (Flower flower in flowers)
            {
                spriteBatch.Draw(flowerMap, new Vector2(flower.X, flower.Y), new Rectangle(flower.Color * flowerWidth, 0, flowerWidth, flowerHeight), Color.White);
            }
        }
    }

First we have a few constants just to keep track of where to position the columns and the flowers.

After this we have the list of flowers contained in the column, the position of the column x wise, a randomizer that will allow us to create random flowers, a reference to the global spriteBatch as well as a Texture2D to hold our flower spritemap.

In the constructor we add 3 random flowers spaced 80 px apart.

Finally we have the draw method where we will draw all the flowers that belong to this column. Since we are using a spritemap we can’t just draw the whole image. If we did we would draw all 6 flower types. So we use an override for the Draw method that takes a Rectangle parameter. This rectangle specifies which part of the spritemap it should draw, and since our color is also the position in the spritemap we can very easily use this to calculate the x position the rectangle should start at.

The Flower class

The Flower class is extremely simple. It just contains the position we should paint at, and the color of the flower

    class Flower { public int Color; public float X; public float Y; public Flower(int color, float x, float y) { this.Color = color; this.X = x; this.Y = y; } }

Now, all that is left to do is to generate the columns and draw them in the Game1 class

Generating and drawing the columns

1. Create a new function called InitializeColumns that looks like this, where we generate 5 columns, spaced 92 px apart, and send in the randomizer seed. We need to send in references to the spriteBatch and Content pipeline here so that it can be used in the Column class to load and draw the flowers

 private void InitializeColumns()
        {
            columns = new List<Column>();

            int seed = System.DateTime.Now.Millisecond;
            for (int i = 0; i < 5; i++)
            {
                columns.Add(new Column(Content, spriteBatch, i * 92 + 22, seed + i));
            }
        }

2. Call this method at the end of the LoadContent() method

3. In the draw method, right under the //TODO: Draw flowers and bees here comment paste the following code that will draw all the columns

 //TODO: Draw flowers and bees here foreach (Column c in columns)
                c.Draw();

While we are at it, we can also take the opportunity to draw a small rainbow flower in the HUD.

1. Create a new member variable in the Game1 class to hold the flowermap texture we will use to display the flower

        Texture2D flowerMapTexture;

2. Load up the flower map in LoadContent

            flowerMapTexture = Content.Load<Texture2D>("flowermap");

3. Draw it in the DrawHUD method

            spriteBatch.Draw(flowerMapTexture, new Vector2(40, 45), new Rectangle(6*72, 0, 72, 72), Color.White, 0, Vector2.Zero, 0.5f, SpriteEffects.None, 0f);

Here we are drawing it pretty much the same way we did in the Column class, specifying a rectangle to start with. But this call has a lot more parameters, why?
The reason is because I wanted to scale the flower to half its height and width by setting the scale to 0.5f, the other parameters have to do with SpriteEffects, rotation and layerdepth but all those are set to their defaults so all we are doing here is scaling.

If you run the app now, your screen should look something like this which I think is pretty nice looking but in truth it gets pretty boring after a while…

Next time we’ll add some moving parts to get the party started.

Bizzy Bees Step 4: Making things move (XNA Walkthrough)

Tess1 — Fri, 02 Mar 2012 15:36:00 GMT

This is part of a walkthrough series on creating a game (Bizzy Bees) in XNA

Animating objects in XNA is extremely simple. To move something we just change the position of the objects in the update method. To resize an object we can add a variable for scale that we can update in the update method and then we use that variable in the draw method etc.

If you want to do more complex animation like a bee flapping it’s wings or an object exploding you would use a spritemap with different images depicting different stages of the animation and advance the frame each time. If you want to animate a bee flipping it’s wings you can make this look pretty convincingly by using two images (one with wings up and one with wings down and then toggle between them every 4 frames or so)

Animating the flowers

In our case, we want the flowers to move downwards at a steady pace.

1. Add a new membervariable to the Column class called Velocity (we’ll make this public so we can modify it easily later, you’ll see why).
The 0.4 here is how many pixels the flowers will move downwards per frame.

        public float Velocity = 0.4f;

2. Add a new method to the Column class called Update where we move all the flowers downwards by changing the Y position

 public void Update()
        {
            foreach (Flower f in flowers)
            {
                f.Y += Velocity;
            }
        }

3. Finally, call the columns Update method from the Update method in the Game1 class so that it gets called for each frame

 foreach (Column c in columns)
                {
                    c.Update();
                }

What happens if you take too long to draw?

If you have payed attention you now know that we call Draw and Update 30 times a second, so what would happen if we suddenly take more than our allotted time when we draw or something?

Well, what will happen is that by default XNA will drop draws if it can’t complete the whole Update/Draw cycle in time, so that it can still keep a steady pace. In this case that would mean that sometimes the flowers would move 0.8px in one go.
In the Game1 Update and Draw functions though you get a parameter GameTime that you can use if you need to do timebased stuff like updating a clock or something. However, usually for simple games like this one, unless you have a really complex 3D world that you are dealing with, you can get away with a lot of things and still keep the Update/Draw cycle.

Back to our game. If you have followed along your flowers should be moving now, but there are two big problems

First off, we don’t do anything to add new flowers when the flowers are dropping down, and secondly the flowers will just keep moving forever, even off the screen. What really should happen is that the game should be finito when the flowers reach the bottom.

Game Over

Ok, let’s fix the 2nd problem first.

1. Add a new member variable to the Game1 class

        bool gameOver = false;

2. In the Update method in the Game1 class change the column update loop to check if the flowers reached the bottom and set the gameOver flag if they have

 if (!gameOver)
            {
                foreach (Column c in columns)
                {
                    c.Update();
                    if (c.ReachedBottom)
                    {
                        gameOver = true;
                        break;
                    }
                }
            }

3. In the column class add a constant for columnBottom and a property called ReachedBottom that checks if the first flower reached the bottom

        const int columnBottom = 620; public bool ReachedBottom { get { if (flowers.Count != 0 && flowers[0].Y >= columnBottom) return true; else
                    return false; } }

Now the updates will stop, but nothing else will really happen so we need to print out an endgame message when the game is over

Change the code for the Draw method in Game1 so that it looks like this

 protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);


            spriteBatch.Begin();
            spriteBatch.Draw(backgroundTexture, Vector2.Zero, Color.White);

            if (!gameOver)
            {
                foreach (Column c in columns)
                    c.Draw();
            }
            else
            {
                spriteBatch.DrawString(largeFont, "GAME OVER", new Vector2(150, 400), Color.Red);
            }
            
            spriteBatch.Draw(foregroundTexture, Vector2.Zero, Color.White);
            DrawHUD();
            spriteBatch.End();

            base.Draw(gameTime);
        }

When the game is over we now draw a Game Over message instead of drawing the columns, which is pretty neat.

Creating a flower factory

Ok, so we fixed that, now let’s fix the code so we keep filling up the columns with new flowers as we go along.

In the Column.Update method add the following code to add new flowers when the topmost flower has passed the starting point

            if (flowers.Count == 0 || flowers[flowers.Count - 1].Y > columnTop) AddRandomFlower(x, columnTop - flowerDeltaY);

Now you should have a fully functioning flower factory and a way to end the game, but no way to win it. don’t worry we’ll get there…

next time we’ll add in the bees to make the game a bit more complete

XNA for Windows Phone Walkthrough–Creating the Bizzy Bees game

Tess1 — Fri, 02 Mar 2012 15:35:00 GMT

About a year back I wrote my first XNA game for Windows Phone. The game is called Bizzy Bees and you can download and play it for free from the Marketplace.

The idea of the app is quite simple… the goal is to collect as many rainbow flowers as you can before all the flowers hit the bottom. You collect flowers by matching flowers and bees, so a yellow flower matches with a yellow be, a pink flower with a pink bee etc. and all bees match up with rainbow flowers.

In this series we’ll walk through creating a subset of that game from start to finish.

Step 1: Setting the stage (projects and assets)
Step 2: Drawing the scene
Step 3: Adding flowers
Step 4: Making things move
Step 5: Adding some bees to the mix
Step 6: User interaction
Step 7: Rounding it up

The full project is attached to this post if you want to download and play with it.

/Tess

Bizzy Bees Step 1: Setting the stage (XNA walkthrough)

Tess1 — Fri, 02 Mar 2012 15:35:00 GMT

This is part of a walkthrough series on creating a game (Bizzy Bees) in XNA

The architecture of a game with a gameloop

XNA is very different from winforms applications or Silverlight apps in that it is not eventdriven but rather uses the concept of a GameLoop where you update and redraw the whole surface for each frame. On Windows Phone by default you draw 30 frames per second, so 30 times per second you update the locations of the objects, check for user input and redraw the screen.

The picture below shows the lifetime of any game written in XNA, whether it is on Windows Phone, XBox or Windows

Initialize – This is where we set the stage, set up the levels etc. this is essentially the constructor of the whole game

LoadContent – This is where we load all the graphical assets, sounds and fonts we will use later

The Update/Draw loop – This loops 30 times per second (if you use the defaults for WP7). If, for example you have a car that will move from the left to the right on the screen you would update it’s x position a small fraction in every update, and then in draw you would draw the image of the car with the updated position. If you think of it as a film reel, you draw one frame in the real everytime draw is called, and the update is there to be able to change the scene between draws.

UnloadContent – most XNA developers never have to care about this since content is unloaded automatically if you use the content pipeline provided with XNA, but this method is called at the end of the game and can be used to clean up complex structures.

When you create an XNA project in Visual Studio this is all set up for you.

The architecture of the Bizzy Bees game

The assets we are going to use in our game consist of 5 png images.

First off we have the background layer that always sits statically in the background.

Same with the foreground layer and the HUD (score panel)

Think of it a little bit like a puppet show where these are the background and the foreground and then our main characters (the flowers and the bees) will be positioned in front of the background layer but behind the foreground layer. This is a trick we can play so that the flowers look like they disappear when they reach the bottom, and we don’t have to do a bunch of funky clipping of images etc.

Our “players” are a number of colored bees and flowers, and because it is quite costly to load images, rather than putting them in separate files we use something called spritemaps where all the bees exist in one single image. When we want to display a blue bee for example, we just display the first part of the bee spritemap.

I have choosen to create 4 different classes to help out with separating the code. Column, BeePicker, Bee and Flower.

The columns corespond to the blue and purple columns you see on the background, and each column contains a list of flowers that it updates and draws. All the logic for removing and adding flowers is also contained in the columns.

A flower just has some basic information about where it is positioned and what color it is.

The beepicker is the bottom area of the screen where the bees appear and it, in turn has a list of bees and handles the selection, updating and drawing of the bees.

Similar to the flowers, the bees have a color.

If you want to follow along you can download the images above, you are welcome to use them in demos or samples, but I would like to kindly ask that you put a note in about where you got them if you do so.

Setting up the projects and importing the assets

1. Download the developer tools for Windows Phone from http://create.msdn.com

2. Create a Visual C#/XNA Game Studio 4.0/Windows Phone Game project

3. In the content project that is created along with the game project, drop the images. (you can see this project in the solution explorer)

as soon as you have dropped them there the XNA content pipeline has turned them into Texture assets that we can use in the project. No matter if you drop a jpg, a bmp or a png, the content pipeline will know what to do with it and turn it into a Texture2D, so you dont have to worry about dealing with different file formats in your code.

In the next article we’ll get started by drawing the backdrop for the game.