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); |
Farseer Physics Platformer 3.3.1 Update
It sucks when updates to a project break existing tutorials out there, so I'm posting the 3.3.1 update to @RoyTries XNA Farseer Platform Physics Tutorial that he wrote. @RabidLionGames updated it when the 3.2 update came out and a few things got broken in the 3.3.1 update so hopefully this helps out anyone who's looking for a working version in 3.3.1!
This post is just going to show the breaking changes from 3.2 to 3.3.1. Make sure you complete the original tutorial to get the project setup and read the 3.2 update to see the changes made in that version. Make sure to read the part about the unit conversion from 2.1.3 to 3.2 otherwise you'll have massively huge objects on your screen! After those 2 are done and set up there's a handful of changes below that you can make below to have a working version with 3.3.1.
Changes from 3.2 to 3.3.1:
PhysicsObject.cs
Find the following variable and remove it altogether:
1 | public Fixture fixture; |
Here is what the 3.2 version of our SetupPhysics method looked like:
1 2 3 4 5 | fixture = FixtureFactory.CreateRectangle(world, ConvertUnits.ToSimUnits(width), ConvertUnits.ToSimUnits(height), mass, ConvertUnits.ToSimUnits(position)); body = fixture.Body; fixture.Body.BodyType = BodyType.Dynamic; fixture.Restitution = 0.3f; fixture.Friction = 0.5f; |
In 3.3.1 we have a BodyFactory that will create a Body and attach a Fixture to it so we don't have a need for the explicit 'fixture' object that was declared at the top (that's why we removed it!). Your new SetupPhysics method should now look like the following:
1 2 3 4 | body = BodyFactory.CreateRectangle(world, ConvertUnits.ToSimUnits(width), ConvertUnits.ToSimUnits(height), mass, ConvertUnits.ToSimUnits(position)); body.BodyType = BodyType.Dynamic; body.Restitution = 0.3f; body.Friction = 0.5f; |
In StaticPhysicsObject.cs find the following line:
1 | fixture.Body.BodyType = BodyType.Static; |
and replace it with this (once again, 'fixture' is gone so we update it):
1 | body.BodyType = BodyType.Static; |
In CompositePhysicsObject.cs the following:
1 2 3 | revJoint = JointFactory.CreateRevoluteJoint(world, physObA.fixture.Body, physObB.fixture.Body, ConvertUnits.ToSimUnits(relativeJointPosition)); physObA.fixture.CollisionFilter.IgnoreCollisionWith(physObB.fixture); physObB.fixture.CollisionFilter.IgnoreCollisionWith(physObA.fixture); |
Gets changed to:
1 2 3 | revJoint = JointFactory.CreateRevoluteJoint(world, physObA.body, physObB.body, ConvertUnits.ToSimUnits(relativeJointPosition)); physObA.body.IgnoreCollisionWith(physObB.body); physObB.body.IgnoreCollisionWith(physObA.body); |
Once again, we simply removed anything that referred to the 'fixture' object since we're not using it.
In SpringPhysicsObject.cs find the following line:
1 | springJoint = JointFactory.CreateAngleJoint(world, physObA.fixture.Body, physObB.fixture.Body); |
and replace it with this (guess what... no 'fixture' object so we cut it out!):
1 | springJoint = JointFactory.CreateAngleJoint(world, physObA.body, physObB.body); |
Character.cs remains the same as the 3.2 version.
Now for the bread and butter, CompositeCharacter.cs. Change:
1 | public Fixture wheel; |
to:
1 | public Body wheel; |
Inside of the SetupPhysics method you can remove these two lines:
1 2 | fixture = FixtureFactory.CreateRectangle(world, (float)ConvertUnits.ToSimUnits(width), (float)ConvertUnits.ToSimUnits(upperBodyHeight), mass / 2); body = fixture.Body; |
and replace them with this line:
1 | body = BodyFactory.CreateRectangle(world, (float)ConvertUnits.ToSimUnits(width), (float)ConvertUnits.ToSimUnits(upperBodyHeight), mass / 2); |
a little further down in the SetupPhysics method you'll find these lines:
1 2 3 | wheel = FixtureFactory.CreateCircle(world, (float)ConvertUnits.ToSimUnits(width / 2), mass / 2); wheel.Body.Position = body.Position + ConvertUnits.ToSimUnits(Vector2.UnitY * (upperBodyHeight / 2)); wheel.Body.BodyType = BodyType.Dynamic; |
and you can change them to this (using the BodyFactory to create the Body and attach a Fixture. Since wheel is a Body instead of a Fixture now, we remove the extra ".Body" found in the bottom two lines):
1 2 3 | wheel = BodyFactory.CreateCircle(world, (float)ConvertUnits.ToSimUnits(width / 2), mass / 2); wheel.Position = body.Position + ConvertUnits.ToSimUnits(Vector2.UnitY * (upperBodyHeight / 2)); wheel.BodyType = BodyType.Dynamic; |
The last change near the bottom of the SetupPhysics method is to update these two lines since we're not using the fixture variable anymore:
1 2 | wheel.CollisionFilter.IgnoreCollisionWith(fixture); fixture.CollisionFilter.IgnoreCollisionWith(wheel); |
becomes:
1 2 | wheel.IgnoreCollisionWith(body); body.IgnoreCollisionWith(wheel); |
You can download a ZIP file of all of these updated classes here to check for differences if something didn't work.
Adding melee to PSK
Update: Went through the entire tutorial in a fresh solution and fixed one bug where the enemies no longer killed you. The tutorial has been updated (UpdateEnemies(...) method in Level.cs) and now works as-is. If you have problems, make sure to download the file just below and compare it with yours to see where you may have messed up!
You can download a working version below.
Here's a video showing off the final product of this tutorial:
Here is what I used for his attack animation as a placeholder, feel free to use it. Place this in the same place as the other animations: “HighResolutionContent>Sprites>Player”. Also make sure to add it to your project: Right click on the Player folder and Add>Existing Item>Attack.png
Player.cs
Find the following:
1 | private float jumpTime; |
After it add the following:
1 2 3 4 | // Attacking state public bool isAttacking; const float MaxAttackTime = 0.33f; public float AttackTime; |
Next find the following:
1 2 3 4 5 6 7 8 9 10 | public Rectangle BoundingRectangle { get { int left = (int)Math.Round(Position.X - sprite.Origin.X) + localBounds.X; int top = (int)Math.Round(Position.Y - sprite.Origin.Y) + localBounds.Y; return new Rectangle(left, top, localBounds.Width, localBounds.Height); } } |
After that add the following:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | public Rectangle MeleeRectangle { get { int left = (int)Math.Round(Position.X - sprite.Origin.X) + localBounds.X; int top = (int)Math.Round(Position.Y - sprite.Origin.Y) + localBounds.Y; if (flip == SpriteEffects.FlipHorizontally) return new Rectangle( (left + localBounds.Width), top, localBounds.Width, localBounds.Height); else return new Rectangle( (left - localBounds.Width), top, localBounds.Width, localBounds.Height); } } |
At the top of Player.cs find the following line:
1 | private Animation dieAnimation; |
After that add the following line:
1 | private Animation attackAnimation; |
Now find the LoadContent method in Player.cs and find the following line:
1 2 3 4 | dieAnimation = new Animation( Level.Content.Load<Texture2D>("Sprites/Player/Die"), 0.1f, false); |
After that add the following:
1 2 3 4 | attackAnimation = new Animation( Level.Content.Load<Texture2D>("Sprites/Player/Attack"), 0.1f, false); |
Find the DoJump method and add a new method after it:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | private void DoAttack(GameTime gameTime) { // If the player wants to attack if (isAttacking) { // Begin or continue an attack if (AttackTime > 0.0f) { AttackTime -= (float)gameTime.ElapsedGameTime.TotalSeconds; } else { isAttacking = false; } } else { //Continues not attack or cancels an attack in progress AttackTime = 0.0f; } } |
Now our attack is setup but we need a keybind so we can actually use it! At the very top of our player class add just the KeyboardState line below:
1 2 3 | class Player { KeyboardState previousKeyboardState = Keyboard.GetState(); |
Now add the following in the GetInput method:
1 2 3 4 5 6 7 8 | if (previousKeyboardState.IsKeyUp(Keys.F) && keyboardState.IsKeyDown(Keys.F)) { if (AttackTime != MaxAttackTime) { isAttacking = true; AttackTime = MaxAttackTime; } } |
Now onto the Update method, after the GetInput() call add the following:
1 | DoAttack(gameTime); |
Find the following in the Update method:
1 2 3 4 5 6 7 8 9 10 11 | if (IsAlive && IsOnGround) { if (Math.Abs(Velocity.X) - 0.02f > 0) { sprite.PlayAnimation(runAnimation); } else { sprite.PlayAnimation(idleAnimation); } } |
And change it to look like the following:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | if (IsAlive && IsOnGround) { if (isAttacking) { sprite.PlayAnimation(attackAnimation); } else { if (Math.Abs(Velocity.X) - 0.02f > 0) { sprite.PlayAnimation(runAnimation); } else { sprite.PlayAnimation(idleAnimation); } } } |
BUILD THE SOLUTION AT THIS POINT TO MAKE SURE YOU DON’T HAVE ANY ERRORS.
Enemy.cs
In Enemy.cs find the following:
1 2 3 4 | // Animations private Animation runAnimation; private Animation idleAnimation; private AnimationPlayer sprite; |
and add the following after it:
1 2 3 4 5 6 7 8 9 | private Animation dieAnimation; // Sounds private SoundEffect killedSound; public bool IsAlive { get; private set; } private const float deathTimeMax = 1.0f; public float deathTime = deathTimeMax; |
Here we added a death animation, death sound, and an IsAlive variable that will allow our enemies to die. We also added a timer so we can make our enemy disappear a certain amount of time after he dies. If you want to change how long they're alive simply change the deathTimerMax variable.
To initialize the IsAlive variable find the constructor for our Enemy, and after,
1 | this.position = position; |
add:
1 | this.IsAlive = true; |
First we need to load the sound into the project because it isn’t there by default. In the solution explorer go to “SharedContent” right click on Sounds>Add>Existing Item and add “MonsterKilled”. Right click on MonsterKilled and go to Properties. In the Properties window find ContentProcessor and from the drop down menu to the right of that choose Sound Effect – XNA Framework. At the very top add another using statement:
1 | using Microsoft.Xna.Framework.Audio; |
Once you add the sound, you'll need to change it's properties because it's considered a 'Song' instead of a 'Sound Effect'. Right click on the sound after you add it to your solution and hit properties. Under 'Content Processor' change it from Song to Sound Effect. We need to load the new sound so find the LoadContent method and add the following at the bottom:
1 2 | //Load sounds. killedSound = Level.Content.Load<SoundEffect>("Sounds/MonsterKilled"); |
While we’re in the LoadContent method add the following by the other animations: (NOTE: You also need to add this animation to your solution because it isn't there by default. Navigate to HighResContent>Sprites and then in each folder (MonsterA, MonsterB, etc) you'll have to add the existing item like you did above with the sound)
1 | dieAnimation = new Animation(Level.Content.Load<Texture2D>(spriteSet + "Die"), 0.07f, false); |
Inside the Update method add this block of code.
1 2 | if (!IsAlive) deathTime -= (float)gameTime.ElapsedGameTime.TotalSeconds; |
Inside of the Draw method let's change the code a little bit. Change the if/else statement to look like the following:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // play death animation if we're dead, stop running //when the game is paused or before turning around. if (deathTime < deathTimeMax) sprite.PlayAnimation(dieAnimation); else if (!Level.Player.IsAlive || Level.ReachedExit || Level.TimeRemaining == TimeSpan.Zero || waitTime > 0) { sprite.PlayAnimation(idleAnimation); } else { sprite.PlayAnimation(runAnimation); } |
Under the Draw method add a new method:
1 2 3 4 5 | public void OnKilled(Player killedBy) { IsAlive = false; killedSound.Play(); } |
Level.cs
Next in Level.cs find the following in the UpdateEnemies method (and add the bold part)
1 2 3 4 5 6 | // Touching an enemy instantly kills the player if (enemy.BoundingRectangle.Intersects(Player.BoundingRectangle)) { <strong>if(enemy.IsAlive)</strong> OnPlayerKilled(enemy); } |
Now add this if statement after the one above:
1 2 3 4 5 | if (enemy.IsAlive && enemy.BoundingRectangle.Intersects(Player.MeleeRectangle)) { if(Player.isAttacking) OnEnemyKilled(enemy, Player); } |
Now under the UpdateEnemies method add a new method:
1 2 3 4 | private void OnEnemyKilled(Enemy enemy, Player killedBy) { enemy.OnKilled(killedBy); } |
Now in the Draw(...) method find the block of code to draw the enemies and change it to this:
1 2 3 | foreach (Enemy enemy in enemies) if(enemy.IsAlive || enemy.deathTime > 0) enemy.Draw(gameTime, spriteBatch); |
And that's it! Give it a try and see if you can finally kill those bad guys!
Double Jump in PSK
Double jumping is pretty common in most platformers so I thought I'd share some code I use for it.
Here's a video showing the final product:
In Player.cs add the following underneath the other jumping code. (MaxJumpTime, JumpControlPower, etc.)
1 | private int numberOfJumps = 0; |
Now find this line in Update(...)
1 | isJumping = false; |
and add this after it:
1 2 | if (isOnGround) numberOfJumps = 0; |
Now in the DoJump(...) method find this block of code
1 2 3 4 5 6 7 8 9 10 11 12 13 | // If we are in the ascent of the jump if (0.0f < jumpTime && jumpTime <= MaxJumpTime) { // Fully override the vertical velocity with a power curve that //gives players more control over the top of the jump velocityY = JumpLaunchVelocity * (1.0f - (float)Math.Pow(jumpTime / MaxJumpTime, JumpControlPower)); } else { // Reached the apex of the jump jumpTime = 0.0f; } |
and change it to this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | // If we are in the ascent of the jump if (0.0f < jumpTime && jumpTime <= MaxJumpTime) { // Fully override the vertical velocity with a power curve that //gives players more control over the top of the jump velocityY = JumpLaunchVelocity * (1.0f - (float)Math.Pow(jumpTime / MaxJumpTime, JumpControlPower)); } else { // Reached the apex of the jump and has double jumps if (velocityY > -MaxFallSpeed * 0.5f && !wasJumping && numberOfJumps < 1) { velocityY = JumpLaunchVelocity * (0.5f - (float)Math.Pow(jumpTime / MaxJumpTime, JumpControlPower)); jumpTime += (float)gameTime.ElapsedGameTime.TotalSeconds; numberOfJumps++; } else { jumpTime = 0.0f; } } |
And that's it! You're able to double jump slightly after the first jump and whenever you're on the ground your jump count gets reset so you're able to double jump again.