Bizzy Bees XNA to DirectX/DirectXTK – Part 2
This is part of a blog series… if you came here directly you might want to read the introduction first.
In order to have something to draw we’ll have to create some assets (Sprites/Direct Draw Surfaces for images and SpriteFont for fonts to draw text) I have drawn all my images in Expression Design which you can download for free. It’s an excellent vector drawing tool, kind of a light weight PhotoShop version, so it’s great for drawing logos or small images. If you don’t want to spend the time right now to draw stuff you can download all my images from the bottom of this article.
Create sprites
In order to use sprites with DirectX/DirectXTK we need to convert them to Direct Draw Surfaces by opening the png file in Visual Studio and saving it as .dds
If you are following the code-a-long download the images used by BizzyBees at the bottom of this page and convert them to .dds with the following names
BeeMap.dds
FlowerMap.dds
AnimatedBee.dds
Background.dds
Foreground.dds
HUD.dds
For the flowers and bees we’ll use a sprite map containing several images so that we only have to load one image. When we draw them we will draw just a portion of the image, but I’ll get to that later.
Create SpriteFonts
In XNA we could create spritefonts in Visual Studio, those spritefonts were essentially just an XML doc with info about the font. DirectX is a little bit different, but with the right tools it is not all that much more difficult.
Download the MakeSpriteFont tool from the downloads section of https://directxtk.codeplex.com. This tool will let you create spritefonts that you can use with the DirectX Tool Kit
1. Open a command prompt and browse to the location of MakeSpriteFont.exe
2. Run the following command to generate a sprite font for Showcard Gothic 21pt
MakeSpriteFont.exe "Showcard Gothic" MyFont.spritefont /FontSize:21
Add the assets to the project
1. Open the BizzyBees project in the file explorer and add a directory under assets called Content
2. Add all the dds files and the spritefont to the Content directory
3. In Visual Studio, on the BizzyBees project, right-click and select Add->Existing Item and add all the dds files and the sprite font. If you want to clean it up a bit you can create a Content filter under the Assets filter and drag the new items there.
Note: In C++ the project structure with Filters may or may not reflect the actual folder structure on disk and when you load textures etc. it is the file locations on disk that rule.
4. For the spritefont, change the properties in Visual Studio to Content = true
Now we have all the assets, next we’ll load them up and start drawing the scene
