Thursday, September 27, 2012

XNA Tutorial: Basic Tile Engine Part 2

I thought it was time to upgrade the tile engine we made in this tutorial. If you haven't done that tutorial then either work your way through it or just download the solution from the link at the bottom of the post (I recommend trying to work your way through it. It should only take a few minutes). Our old tile engine wasn't very good. The layouts of the map were hard coded and that's almost always a bad idea. So in this tutorial we are going to set it up to layout our map from a text file rather than a hard coded array and we are also going to re-factor our old code into a separate class.

Firstly as stated above either work your way through the tutorial or just download the solution as we are going to be working straight from that. When you open it and have a look, you will notice that all the code in located in the Game1.cs class. We are going to change that. Right click on your project and add a new class. Call it Map. Add your using XNA statements at the top and then inside the map class copy the following code from the game1 class.
We will keep those in the game1 class as well for the time being. Next we will create a constructor for the map class. before we go on make sure you add "using Microsoft.Xna.Framework.Content;" at the top of the class as we will need it next. Add the following just after the lines we just wrote.
We added the name overload here so we know the file we need to look for later on. We have content here to allow us to load the textures we will need. Next we will need to create a method that will load in the textures we need. We can just copy the code directly from the load content method in the game1 class. Add the following after the constructor.
Once you have written that go back up to your constructor and add a call to this method like this:
LoadTileTextures(content);

Now we will create our draw method. You can copy this code directly from the draw method in the game1 class. Skip a few lines between the constructor and the LoadTileTextures method and add the following.
Next up we will add a file to load data from. Right click on your project and add a new folder. Call it MapLayouts. Then right click on that folder and add a new text file. Call it Level1. Now select Level1.txt and in the properties window(if properties window is not visible go to View>Properties Window) and set Copy to output directory to Copy Always. This is very important as if it does not copy all the time our program will not be able to see the file. Your folders should look something like this.
After that we need to set up our method for reading in the level file. Add another using statement at the top this time put "using System.IO;". After that create the following method.
The first part of this method is for getting the width and height of the text file. File.ReadLines looks at our file and reads how many lines is contained within the text file, thus giving us a value for the height of the tileMap array. To get the width we have to do something a little more complicated. First we have to open the stream reader and read the first line. In our level file we will place a comma between the numbers.This gives us the character we need to split up the line and place each of those splits into a string array. We can then use the count of that array as the width of the tileMap array. Then we instantiate the tileMap.

Next we need to add more code into this method to replace the numbers in the tileMap array with the numbers in the string array. Skip a line after sReader.Close() and add the following code.
First we re-instantiate the sReader. This is to avoid getting errors when we loop through the lines and to make the logic easier. Next we create two for loops using the width and height we obtained in the top of this method. Inside the y loop we read a new line and split it up in to an array of strings like we did above. Then in the x loop we are inserting the number in the string array into the tileMap.

Before we go any further we need to add some data to the Level1.txt file. Double click on the Level1.txt file in the solution explorer and add some data like the following. Note: placement of the commas are very important. Be sure not to leave one at the end of the line or this will cause errors in our code.
Last thing we need to do is clean up the Game1 class go to it now. You can pretty much delete all the code we wrote in the last tutorial leaving only the code that was generated for us when we created the project. Up above the Game1 constructor just down form the spritebatch line add this line: "Map map;". Now skip down to the load content method still in the Game1 class. Once there add the following line.
Now skip down to the draw method and add these few lines of code.
And were finished. Save your project and press F5 to run. You should see something like this.
That's it. If you see something like this then is has worked.

If you spot any typos in this post or have any problems please let me know. I have included a link to the source of this project below.

SimpleTileEngineUpdated.zip

Sunday, September 16, 2012

Back To College and Stuff

It's September; the time of year when kids go back to school and I go back to college, for my last year actually. The good news is I got my Ordinary Degree; with a pretty decent GPA to boot, the highest in the class I'll have you know( I love to gloat about this as I was extremely average in secondary school).

Last year we were doing modules such as 3D game programming and game physics. All of these done with XNA. This year we have moved on to using unreal engine and the UDK. I'm really excited about using an industry standard engine and have big plans for it. I have also been looking in to the Unity engine in my spare time and plan a few things for it. Unity 4 is looking amazing as is Unreal engine 4. It's an exciting time to be a game developer.

So anyway expect to see some unreal engine stuff on here in the coming year.

Sunday, September 9, 2012

From Windows Phone To Android

A few weeks back I started to get notifications about my current contract being and up and that I was due a phone upgrade. With this I began the great task of finding a new phone.

My old phone.
I had been using a first generation windows phone(Samsung Omnia 7) for the past 18 months.before getting that phone I was pretty much a smart phone virgin. I loved the phone. The 4inch AMOLED screen was amazing looking and the UI was fast and very responsive. For these reasons I initially decided to upgrade to a newer generation of windows phone. I waiting in the vein hope that the Lumia 900 would be announced for release in Europe. As we all.know this did not come to pass and it still hasn't.

After a while I started eyeing possible android smartphones to buy. Most notably the HTC One X. There was a lot of talk at the time of tegra 3 powered devices(transformer prime comes to mind) and I had heard that the hsdpa+ version of the device had tegra 3 on board. That was defiantly one of the major factors of my decision to go android. After getting the One X the first thing you notice is the giant beautiful 4.7inch screen. Once you turn it on the screen just looks like its painted on. That's helped by the great pixel density.

All the hardware stuff aside. The One X uses HTC Sense UI. Initially I was having problems with it constantly crashing an a loading popup appearing almost every time I hit the home button. However after HTC released an update for sense 4 all those problems were solved.

HTC One X
I didn't like sense very much. I found things like apps too difficult to find. This could probably be attributed to me never owning an android phone before.

The sheer amount of apps available to download from the play store was amazing. Some apps like the Facebook and Twitter apps ran and worked than their windows phone counterparts.

The development environment for android is pretty bad and horrible to set up. It has gotten better recently however and hopefully Google will improve it even more in the future.

Friday, July 13, 2012

XNA Tutorial: Smooth Sprite Rotation

Its been a while since my last post. I've bee pretty busy since. You may not have heard but me and my friends have started a games company(Unlucky For Some Studios). So that's been keeping me busy. Any ways a while ago I wrote a tutorial about sprite rotation. Recently I have been experimenting with lerping rotation values so the sprite appears to be rotating smoothly. I have been using the MathHelper.Lerp method to do this. Initially I thought this would work perfectly however I was getting a weird behaviour shown in the following video.
I have a pretty good idea as to what is causing this but explaining it would be kinda hard. I have said may times that I am just crap at Maths and was unable to figure out this problem myself. After a very long google search I managed to find the solution. I thought I would write a blog post about it and hopefully it will make it easier for other people to find and fix.

I used the following code that I found on app hub.
After I used these methods I got the following result which was exactly what I originally set out to do. Instead of calling MathHelper.Lerp you now call CurveAngle and pass in the same parameters.
I hope this helps someone as it helped me. Also give our game a go.

Saturday, June 16, 2012

XNA Tutorial - Basic Tile Engine

Its been a while since my last blog post and tutorial so I thought I'd do another. I have recently been working on a tile based game and found them very interesting so I thought I'd do a tutorial on a really basic tile engine and expand on it in future blog posts.

First of all you will need to download the graphics pack here. These are just really basic examples of tiles you might find in a tile engine.

In Visual Studio create a new windows game and call it SimpleTileEngine. I like to remove all the comments in the Game1 class. I find it makes my code look messy.

For our tile engine we will use a 2 dimensional array of ints. This is the easiest way to represent a tile engine. While were at it we will also create a list of tile textures.
We will use tileWidth and tileHeight to calculate the position of tiles later in the draw method.

Next we need to initialize our variables.
We load our textures into a list of textures and initialize 2D array of ints. You can see there are different numbers in the array. These numbers directly correspond to the index of that texture in the list of textures. As long as you don't have a number that is larger than the amount of textures in the list of textures it should work fine.

We don't need anything in the update method all our work from here is in the draw. In the draw we need to loop through each tile in the tile array to draw them. In a 2D array the Y value that you see in the code below is actually the row number. We get this number by calling tileMap.GetLength(0). The X is the index of a number in that row like a column. This is reason the x and y are mixed up in the line tiles[tileMap[y, x]]. tileMap[y, x] returns the number in the row y and column x which corresponds to the index of the texture in the textures array as explained above. To get the correct position to draw the tile we need to use the tileWidth and tileHeight we declared above.

After that were finished. Press F5 to run and you should see this.
You can increase the amount of tiles that are drawn by just increasing the size of the array just like below.

It should look bigger like this

Download the finished solution here.

Were pretty much finished. I hope you found it enjoying. If you have any questions or spot an error let m know in the comments below.

Wednesday, March 28, 2012

My Adventures at the Games Fleadh 2012

It's been a while since my last post but there is a reason for that. I've been extremely busy. Having to finish up my third year of college, doing exams and assessments and thankfully acing them. One of the busiest periods of my life so far is nearly over and I can't wait to have some free time and catch up on all the TV shows and games I missed out on playing.

One major contributor to how busy I have been is the Games Fleadh. The games fleadh is Ireland largest computer and console games programming festival for students. Every year the organiser picks a game that is 30 years old. This year they picked Chopper Command. What you have to do as a contestant is re-make it but with your own twist. I entered Games Fleadh 2012 as part of a group(Team Shaman) representing IT Sligo. Our game Chopp3r CommanDer is a 3D game(the only 3D game there actually), you see what we did there :), where you play as toys battling for control of batteries. Think toy story but instead of it being a story it's a war. It was quite good, not all that I would have liked it to be, but quite good all the same.


Look at all those people! My best friend(http://endangerdev.blogspot.com/) was there also representing IT Sligo with another game. We won an award for the best sound. We were delighted with this win and did our fair share of celebrating afterwards :). All and all it was a great experience and I will defiantly be attending again next year.

Hopefully I'll be able to update more often now that I'll be finishing up the year very shortly, maybe even a few more tutorials(they take so long to do). Bye for now.

Sunday, February 19, 2012

XNA Tutorial: 2D Shooting

In this tutorial we are going to build on what we did in the last one and make a shooting rocket. I have refactored the code we did the last tutorial into classes and methods. Before we start you are going to have to download the project file here.

After you have downloaded the project file and opened it the first thing to do is add a new class and call it Bullet. We are going to model this class on our rocket class. Add your using directives.
Now we need to add these properties.
Now lets create our constructor and the update method. It's relatively similar to the rocket constructor and update. The only thing that's missing is the rotation. The draw method will also be nearly identical to the draw method of the rocket class. The fact that the bullet class and the rocket class are so similar would mean that we could have used inheritance. Where we would create a base class let's say a "Sprite" class and have both the rocket and bullet classes inherit from the sprite class. Perhaps in a future tutorial we will do that but for now lest stick with this method.

Now that the boring part is complete let's think about how we will handle the bullets. We want the player to be able to shoot a bullet every time they press the left mouse button and have it continuously shoot if they have it pressed down.

Next we need to modify the rocket class the rocket class will manage the bullets. Add these at the top below the properties and before the constructor. Now modify the constructor so if looks like the following Next thing to modify is the update method. In here we want to check if IsShooting is true and if it is increase the shot timer. If the shot timer is greater than the time between shots then we create a new bullet and give it the the same position and direction as the rocket and add it to the list of bullets. After we do that were going to have to loop through the list of bullets and update each one. We also need to check if the ActiveTime(the max time it can be drawn for) is greater than the TotalActiveTime(the current amount of time the bullet had been drawn). If it is we remove it from the list. That's most of it done. Now all we need to do is draw them and check if the left mouse button has been clicked. To draw the bullets go to the draw method in the rocket class and add the following just above where your drawing your rocket. One more thing we need to change before checking for the mouse button press. Go to the Game1.cs file and up in the LoadContent method you will see where we instantiated the rocket. Modify it so it looks like this. Now Finally we can check for the mouse button press. Go to the update method of the Game1 class and you should see that we are already checking for our mousestate we will use this variable now. Just after the line that updates the rotation of the rocket at the following code. There we have it, press f5 and run the game to see what you have created. When you press and hold the left mouse button the rocket will shoot bullets in the direction of the mouse cursor. Here is a video of what you should see.

I hope you found it interesting. If you find a typo or a mistake anywhere or have any questions please leave a comment below.

Next go to part 2, where I show you how to improve this system.

Tuesday, January 31, 2012

Sunday, January 29, 2012

More Progress

It's been a while since my last post. I have been quite busy with the game and with my college work but I though it was time for another progress report.

Since my last progress report I have been mostly working on Squares Vs Circles TD. Working on removing game breaking bugs and you know other small things like that. It's very close to moving out of alpha and into beta. Here are a few screens.
This is the main menu screen. I changed the logo from the original Squares V Circles. This one looks much nicer and suites the game better. I don't have anything going on in the background yet but I have something in mind.
Here is a random level from the game. Some levels will not allow you to have some guns and some won't allow you to upgrade your guns. The blank rectangle at the top of the screen is reserved for ads.

As you hopefully can see I have started to add the first coat of polish(the first of many if I have the patience). 

I haven't really made that much progress I know(one of the reasons might be that I have gotten addicted to Terraria lately) but every step to the finished product counts. I also hope to have more XNA tutorials up soon so check back regularly.

Friday, January 20, 2012

XNA Tutorial: Sprite Rotation

When I was learning XNA this was one of the things I always wondered how to do. Since then I have learned how to do it and thought it was about time I shared my knowledge. For this tutorial I'm going to show you how to rotate a texture, how to rotate it to point towards another point and how to move the sprite towards that point.

Here is the image I used
First things first open up visual studio and start a new windows game project. Next copy the image above or get your own and add it to your project. Its important to note that the orientation of the image is important. The front of your object should be pointing towards the right.

Next go to your Game1.cs file just below where the spritebatch is declared and declare the variables you will need.
Now go to the LoadContent method and initialize the variables. The speed variable will be used later.
Next up is the Update method. In this tutorial I'm going to use the mouse position as the point the sprite will rotate towards. So lets get the state of the mouse. Were going to use the mousePosition variable to hold the X, Y position of the mouse. Next were going to get the direction vector. We do this by subtracting the mousePosition from the position of our sprite. But we can't use this yet we need to normalize the direction to turn it into a unit vector. We can now use this to find the rotation by using the Math.Atan2 method. I have no idea of the maths behind this method but it works.
Math.Atan2 works on doubles so remember to cast to direction y/x to doubles and also as this method returns a double, remember to add another cast but this time to a float.

Finally we get to the Draw method. One thing to note here is to make sure you have the origin set to the center of your image. So here I'm dividing the width and height of the image by 2 and setting that to be the origin. It is possible to set the origin to be anywhere on your image and the image should rotate around that origin.
If you run this the rocket should point towards your mouse cursor. If you can't see your cursor go to the Initialize method and write: this.IsMouseVisable = true.

Now to make your rocket move towards your mouse cursor at a constant speed. Go to the Update method and just after you set the rotation write the following.
To get this effect you simply multiply the speed you want your rocket to go by the direction vector we calculated earlier and then add this to the position of your rocket.

If you run the project now you should see the rocket follow your mouse cursor no matter where it is.


This is how it should look.

And there ends my first XNA tutorial. If you see any errors or have any questions please leave a comment below.

Thursday, January 19, 2012

Progress Report

It's been a while since my last post. Since then progress has been slow, there are too many distractions at home. Despite this I have been working. In my last post I told you that I had updated Sparks and it now contains ads. I have also now done the same to Squares V Circles. Which took much longer to integrate than in Sparks(damn my horrible habit of hard-coding screen coordinates). I have noticed a slight increase in the download numbers for Sparks since the update, very slight but still worth noting.

I've put Cubes Vs Spheres on hold for a little while and started working on another project. A tower defense game. I love tower defense games they are my favorite genre of mobile games so I thought I try my hand at one. Squares Vs Circles TD will be path based i.e. the enemies follow a particular path through the level. There will be a number of waves in a level. Screenshot time.
Pre-Alpha Gameplay
In the screenshot above you can see the easiest enemies in the game appearing at the beginning of the track and disappearing at the end. The gun turret simply shoots the nearest target, the rocket seek its nearest target and the slow turret slows the nearest enemy. This screenshot is missing a few layers of polish which I will add when I get all the basic game mechanics working but I'm very happy with the progress I've made so far. I hope to finish it up in about 2 weeks. So keep an eye out for it in the windows phone marketplace in the future.

Tuesday, January 10, 2012

App Downloads

There seems to be a lack of information about the amount of downloads apps are getting on windows phone marketplace(apart from over at the occasional gamer. Those download numbers are amazing). I did not market any of my games and I think the download numbers reflect that but I'm pretty happy with them.

Click to get a better look
Here you can see all 2.1 of my apps(0.1 being the BMI Calculator). The BMI app I made and released just to developer unlock my phone. The first tiny spike is the release of the BMI app. The first large spike is the release of Sparks. The first day it had around 300 downloads. Within a week it had dropped completely off the radar and after that averaged around 3 or 4 downloads a day. The next large spike is the release of Squares V Circles. First day it had around 200. and again like Sparks dropped off within a week for what I hope is the same reason. I had hoped that Squares V Circles would receive more downloads because it was actually a game unlike Sparks which is essentially a particle sim. Total downloads for all the apps is 2,103.

One thing I learned from releasing these apps is that you can't just release your apps and expect them to get tons of downloads beyond the initial release. To this end I have started to experiment with AdDuplex. AdDuplex Gives you 8 free adverts for your app for every 10 you show. Its only been a week and I will have an update in the future on whether it has helped or not.

Sunday, January 8, 2012

New Blog

Welcome to my new personal blog. Hopefully I will be letting you know about all my games and apps I am or will be developing in the future and maybe some general posts about windows phone and XNA.

I have had so many game ideas lately and no time to do any of them. I finally made a decision to do one of them. I'm going to make a sequel to a game of mine that I have developed for the windows phone, Squares V Circles. I was pretty happy with that game although I think it gets boring after a while. I seen some of my friends playing it and there completely glued to it and I have no idea why. The game was endless i.e. you could play it for as long as you want or until your battery runs out. It never became difficult or interesting.

For Squares V Circles 2 or should I say Cubes V Spheres I plan to do a fully 3D top down vertical scroller with lots and lots of particle effects (people seem to love particle effects). I haven't started yet and will be posting updates every few days hopefully so check in every now and then. I have filled a OneNote document with ideas for this and I can't wait to get stuck in to the development.