Moving a sprite around the screen – part 1 – point A to point B
We're going back to some basics with this tutorial. I plan on doing a couple of spin-offs of this to address other issues like; facing the direction you're moving, moving along a series of points and some other ways of moving sprites that are a little more complex.
So here's the scenario for this part. You have a top-down point and click game and wherever you click on the screen, your character moves to that point. Nice and simple to begin with.
Starting out.
I created a new Windows Game 4.0 named "PointAndClickGame". I also added the image below to the "Content" folder:
Code. I tried to comment the code well enough to explain everything but I'll give some extra insight if I believe it'll help.
At the top of the Game1.cs class, lets add a few variables:
1 2 3 | Texture2D spriteTexture; Vector2 spritePosition, spriteDestination; const float speed = 10.0f; |
Now onto our LoadContent()method, should be pretty self-explanatory with the comments:
1 2 3 4 5 6 7 8 | //Make sure the mouse cursor is visible! IsMouseVisible = true; //Load our sprite texture spriteTexture = Content.Load<Texture2D>("sprite"); //We'll start out our character at 100,100 on the screen (near the top-left) spritePosition = new Vector2(100, 100); |
Inside of the Update(GameTime gameTime)method:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | // TODO: Add your update logic here //Grab our mouse state so we know when buttons are pressed //and where the location of the mouse cursor is MouseState mouseState = Mouse.GetState(); //If we hold down the left mouse button, we update our //sprite's destination. if (mouseState.LeftButton == ButtonState.Pressed) spriteDestination = new Vector2(mouseState.X, mouseState.Y); //We want our sprite to move towards it's destination //So let's lay out what we need to do to make it happen: //We know where our sprite is (spritePosition) and we know //where we want it to go (spriteDestination), so how do we //make it move from A to B? //1) we need to get the direction from A to B: //Remember that formual to get the angle between 2 points? angle = (y2-y1) - (x2-x1) //This can be simplified to (point2 - point1) Vector2 direction = Vector2.Normalize(spriteDestination - spritePosition); //What Vector2.Normalize does is take that result and creates a Vector2 that is //ONE unit in length. This ensures that the sprite will move the same speed in any //direction. (we have the 'speed' variable to change how fast it moves) //2) now that we know which direction to move, lets move! spritePosition += direction * (float)gameTime.ElapsedGameTime.TotalSeconds * speed; //3) we need to make sure our sprite stops when it reaches it's destination! //When we're less than 5 units away, we set the direction to 0 if (Vector2.Distance(spritePosition, spriteDestination) < 5) direction = Vector2.Zero; |
This is where the magic happens, so there's quite a bit going on. We get the direction from our player to his destination and then we move in that direction. When we reach our destination we set our direction to 0 in order to stop the character.
Now all we need to do is draw the image. Inside of Draw(GameTime gameTime):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // TODO: Add your drawing code here spriteBatch.Begin(); spriteBatch.Draw( spriteTexture, //texture spritePosition, //position null, //source rectangle Color.White, //color 0f, //rotation new Vector2(spriteTexture.Width / 2, spriteTexture.Height / 2), //origin 1f, //scale SpriteEffects.None, 0f); spriteBatch.End(); |
We used one of the longer overloads that takes a Vector2 position and a Vector2 origin. This lets us draw the image so that 'spritePosition' is located at the very center of our character ('spriteTexture').
That's everything! When you run the game you should be able to click (and hold if you want) anywhere on the screen and the sprite will move to that location. If you want to increase/decrease the speed that the sprite moves you can change the 'speed' variable at the very top. I'm not sure what I'll tackle next for part 2 of this series but you can always follow me on twitter or add our RSS feed to your favorite reader to catch the next post when it goes live.
Drawing extra symbols (squared/square root) in XNA
I'm starting to work on adding squared (i.e. 6²) and square root (i.e. √169) math to Math Buster 2 and I realized that I wouldn't be able to draw the square/square root symbol out of the box so I needed to modify a spritefont to include these characters.
First off, you need a font that supports these characters. An easy way to check if there is a specific character in your font, and you have the font installed to your windows font folder, is to use the built in Character Map in windows. You can find this at Programs » Accessories » System Tools » Character Map or you can press Windows+R (for the run dialog) then type in charmap and hit enter. This brings up a little windows that allows you to select a font and see all characters available for the selected font. Some fonts, as long as it's not a really obscure one, will even display the keystroke needed to type it in the bottom right of the window. When I double click on the subscript 2 (²) it shows "Keystroke: Alt+0178" in the bottom right. Neat!
Now you should have a font that supports the character we want, we need to modify our spritefont to include this character. By default spritefonts include characters 32-126, which includes most letter/numbers/symbols you can see on your keyboard. If you want extra symbols like ™ and ® you'll have to add them separately. Here's my spritefont that's been modified to include squared and square root symbols:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <?xml version="1.0" encoding="utf-8"?> <XnaContent xmlns:Graphics="Microsoft.Xna.Framework.Content.Pipeline.Graphics"> <Asset Type="Graphics:FontDescription"> <FontName>Tahoma</FontName> <Size>32</Size> <Spacing>2</Spacing> <Style>Bold</Style> <CharacterRegions> <CharacterRegion> <Start> </Start> <End>~</End> </CharacterRegion> <!--Squared subscript: ² (type alt+0178)--> <CharacterRegion> <Start>²</Start> <End>²</End> </CharacterRegion> <!--Square root: √ (type alt+251)--> <CharacterRegion> <Start>√</Start> <End>√</End> </CharacterRegion> </CharacterRegions> </Asset> </XnaContent> |
We add a CharacterRegion for each individual character we want to add to our spritefont (you can also add ranges of characters, like the default 32-126 CharacterRegion). As for where I found the numbers, like "√" for the square root symbol, I just did some Googling to figure out what the square root symbol was (this site was helpful which had the squared symbol, but not the square root symbol). Now that you've modified your spritefont with these extra characters, you should be able to draw them with this spritefont! You just have to remember the specific keystroke so you can actually enter it in code. You can enter these new symbols straight into your DrawString call by using the specific keystroke:
1 | spriteBatch.DrawString(boardPieceFont, "√6²", Vector2.Zero, Color.Red); |
Math Buster 2 Announcement!
It's been a while since we released anything, but that's about to change!
What's new and improved in Math Buster 2?
- The game uses a Silverlight/XNA hybrid, so when you're navigating the menus you'll have an experience that you'll be familiar with and we're using XNA for the gameplay to keep everything nice and smooth!
- New game modes! In Math Buster you would choose the type (addition, subtraction, etc) and the difficulty before you played. This is now how the Practice mode works in Math Buster 2. The new leaderboard enabled modes have a more arcade-y feel to them and I think it's much smoother and keeps you on your toes more than the single type - single difficulty style of Math Buster.
- Additional math types. Addition/subtraction/multiplication/division were in the previous game and I'm debating what to include with the new release. At the very least, I'd like to add more options to the Practice mode, like percentages and square roots.
- Global leaderboards! This was by far the most requested feature so it was a no-brainer to add it.
No release date to announce at the moment but I'm hoping to have everything ready to go within the next month. As we get closer to release and things get polished you'll see more info about the game pop up on the blog, so stay tuned!
I figured an early screenshot was better than no screenshot at all, so bam!
Ludum Dare 22 – Shadow
Ludum Dare, for those that don't know, is a competition to create a game in just 48 hours (for solo participants, teams can join the 72 hour competition). You have 48 hours to create a game from scratch but you can use publicly available libraries and personal code bases as long as they're open to everyone to use.
This was my first time entering and I wasn't real sure on how much I could get done in the time frame so I decided to start with something really simple and expand on that if I had more time. Overall, I'm pretty happy with how it turned out even though it has only a few sound effects and no music at all. I would've liked to get a story implemented but I just ran out of time. It was a good change of pace just being able to hack some code together without having to worry about cleanliness or robustness. 
You can view the submission and play the game here: http://www.ludumdare.com/compo/ludum-dare-22/?action=preview&uid=5580
Here's a playthrough of the game below, don't watch if you're going to play the game!
Level Editor For Your XNA Platformer Based Games
When I first started out a level editor was beyond my abilities (or so I thought) but thanks to Nick Gravelyn's Tile Engine video series it's actually quite easy to get the basics of a level editor set up! It was also the first time I actually made something out of WinForms so it was a learning process along the way. The editor is very simple and comes with all of the source code so if you were ever wondering how you might tackle making one yourself it's an excellent starting point to just tinker around and learn how the pieces fit together.
You can check out the project page on bitbucket to download and get more information but the general features of the editor are:
- Open and Save .txt files (the format used for levels)
- Paint/Erase/Fill tools so you can quickly change the appearance of your levels without editing them by hand
- Tiles are displayed as images so you can easily see what you're editing with.
The project comes with a default XNA 4.0 version of the PSK so if you just want to check it out and play around with the editor you can do so (if you have Visual Studio).
Check out the Wiki Page if you want to get it working with your own PSK-based game.
I also made a video showing off just how easy it is to add it to your game (Nomis: Legacy Islands). I'm adding the Editor to my first game (which was based on the PSK) in the video.