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.
Imagine Me Progress Nov 25th
Last week I talked about the Editor and what I wanted it to consist of and it's pretty much at that point right now! It has some more work to be done on it since a few things came up that I wanted to implement but first let's see what works.
This was the first time I really dove into Windows Forms with the intention of coming out with something I'd use on a regular basic. Nick Gravelyn has a video tutorial series where he creates a tile engine and an editor for it and it helped out tremendously since it's very similar to what I wanted to build. If you're looking to get into WinForms or you want to create an editor yourself I highly suggest checking it out! The Editor is based on the idea that each level is a map. Inside of that map there can be multiple layers. Right now the Editor only consists of a single layer and that's the display/collision layer. This layer only has platforms and static things that the player can collide but not interact with, so items/objects are not included in this layer. This way I can use the display/collision layer to create the platforms/walls/boundaries of the game and not have to worry about checking for items and such. My next task for the Editor is to create a layer of dynamic objects that the player can interact with. This will include blocks that the player can push to solve puzzles, etc.
If you remember from last week I described how I was going to work out collisions by doing a horizontal pass and combining all adjacent tiles into a larger rectangle. After that a vertical pass would be done to combine adjacent vertical tile. Here's what the collision looks like after doing a horizontal pass:
In this particular scenario you can see that the horizontal pass covers nearly all of the tile before even doing the vertical pass. There's plenty of room for improvement with the left column of tiles being the most obvious. Those should be combined into 2 rectangles instead of 15 but I got the idea I was shooting for implemented and it works in-game so it's good enough at this very early stage. After the horizontal pass, the vertical pass is done to cleanup any remaining tiles that were missed and combine them if they're vertically adjacent:
The above was simply a testbed to stress test and fix any bugs that came up with odd shapes. The level design isn't solidified so what a level may look like is still up in the air. What would be about 120 tiles or so is only 74 with this method with some vast room for improvement. I have a little character that I can use to jump around inside of here and everything seems to play out nicely besides an invisible collision box that seems to stay where my character starts...
This next week I'll get some dynamic objects implemented so I can move things with my character in-game and hopefully get some levels/puzzles setup so I can start testing those out.
Oh, and here's a screenshot of the Editor!
