Documentation
[SDK Documentation] [Creating a complete game: Breakout]

 
Creating a complete game: Breakout

This document has been updated for use with GapiDraw 4.0 or later.
Last updated on October 6, 2008.

 

Step 10 : Information text

Previous step | Next step

We will now add text to our application! Drawing text with GapiDraw is very simple, and we will in this example use one of the fonts shipped with GapiDraw for our text. The DrawText function in CGapiSurface supports many options such as text alignment (left, center, right), blitter effects such as transparency, and advanced kerning options. For more information, please see the documentation on CGapiSurface.

For special effects, we will also draw a semi transparent gradient behind the information text. Gradients are a new feature in GapiDraw 4.0, and require you to pre-create a gradient object for performance reasons. We will show you below how you can do this.

First, download the file Simplefont.png and save it to your Breakout\Common\res folder. Then add it to your Visual Studio project as a PNG image and name it IDB_SIMPLEFONT.

Then add the following code to myapplication.h:

class CMyApplication : public CGapiApplication
{
    ...
    CGapiBitmapFont* m_pFont;
    CGapiGradient*   m_pScoreGradient;
    ...
}

Add the following code to myapplication.cpp:

CMyApplication::CMyApplication(const GDAPPCONFIG& config) : CGapiApplication(config)
{
    ...
    m_pFont = new CGapiBitmapFont(GetGlobal());
    m_pScoreGradient = new CGapiGradient(GetGlobal());
    ...
}
 
CMyApplication::~CMyApplication()
{
    ...
    delete m_pFont;
    delete m_pScoreGradient;
    ...
}
 
HRESULT CMyApplication::CreateVidMemSurfaces(CGapiSurface* pBackBuffer, HINSTANCE hInstance)
{
    ...
    // Create the bitmapped font
    m_pFont->CreateSurface(0, hInstance, IDB_SIMPLEFONT, _T("PNG"));
    m_pFont->CreateFont(NULL, RGB(255,0,255), GDCREATEFONT_SIMPLEBITMAP, NULL);
    
    // Create gradient behind scoreboard
    m_pScoreGradient->CreateGradient((m_pFont->GetHeight()+2), RGB(120,120,120), RGB(40,40,40));
    ...
}
 
HRESULT CMyApplication::GameDrawScore(CGapiSurface* pBackBuffer)
{
    int nScreenWidth = pBackBuffer->GetWidth();
    int nScreenHeight = pBackBuffer->GetHeight();
    int nScreenX3 = GAMEPARAM_BORDERWIDTH * 2;
    int nScreenX32 = nScreenWidth - (GAMEPARAM_BORDERWIDTH * 2);
    
    // Draw background gradient
    DWORD dwY1 = nScreenHeight-(m_pScoreGradient->GetNumPixels());
    DWORD dwY2 = nScreenHeight;
    GDGRADIENTRECTFX gradientfx;
    gradientfx.dwOpacity = 128;
    pBackBuffer->GradientRect(CRect(0, dwY1, nScreenWidth, dwY2), m_pScoreGradient, GDGRADIENTRECT_OPACITY, &gradientfx);
    pBackBuffer->DrawLine(0, dwY1-1, nScreenWidth, dwY1-1, RGB(200,200,200), 0, NULL);
    pBackBuffer->DrawLine(0, dwY1-2, nScreenWidth, dwY1-2, RGB(0,0,0), 0, NULL);
    
    // Draw score text
    _TCHAR msg[16];
    _stprintf(msg, _T("Score: %d"), m_dwPlayerScore);
    pBackBuffer->DrawText(nScreenX3, nScreenHeight - m_pFont->GetHeight(), msg, m_pFont, GDDRAWTEXT_LEFT, 0, NULL, NULL);
    _stprintf(msg, _T("Balls: %d"), m_dwGameBallsLeft);
    pBackBuffer->DrawText(nScreenX32, nScreenHeight - m_pFont->GetHeight(), msg, m_pFont, GDDRAWTEXT_RIGHT, 0, NULL, NULL);
    
    return S_OK;
}
 
HRESULT CMyApplication::GameModeIntro(CGapiSurface* pBackBuffer, DWORD dwFlags)
{
    ...
    // Draw intro text
    int nScreenWidth = pBackBuffer->GetWidth();
    int nScreenHeight = pBackBuffer->GetHeight();
    int nScreenXCenter = nScreenWidth >> 1;
    int nScreenYCenter = nScreenHeight >> 1;
    pBackBuffer->DrawText(nScreenXCenter, nScreenYCenter - m_pFont->GetHeight(), _T("GapiDraw 4.0"), m_pFont, GDDRAWTEXT_CENTER, 0, NULL, NULL);
    pBackBuffer->DrawText(nScreenXCenter, nScreenYCenter, _T("Breakout Game"), m_pFont, GDDRAWTEXT_CENTER, 0, NULL, NULL);
    pBackBuffer->DrawText(nScreenXCenter, nScreenYCenter + m_pFont->GetHeight(), _T("Press key 1 to start"), m_pFont, GDDRAWTEXT_CENTER, 0, NULL, NULL);
    
    return S_OK;
}

That's it. We now have a nice gradient, in-game text information and some text on the introduction screen!

Now let's add some key input so we can play our game!