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 4 : Border graphics

Previous step | Next step

We will now add some nice border graphics to our scrolling background. As with the scrolling background we need to adapt the drawing of the border elements to the display size.

Bat
Our image elements we will use to draw the border.

First, download the file border.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_BORDER.

Add the following code to myapplication.h:

class CMyApplication : public CGapiApplication
{
    ...
    CGapiSurface* m_pBorder;
    ...
}

Add the following code to myapplication.cpp:

CMyApplication::CMyApplication(const GDAPPCONFIG& config) : CGapiApplication(config)
{
    ...
    m_pBorder = new CGapiSurface(GetGlobal());
    ...
}
 
CMyApplication::~CMyApplication()
{
    ...
    delete m_pBorder;
    ...
}
 
HRESULT CMyApplication::CreateVidMemSurfaces(CGapiSurface* pBackBuffer, HINSTANCE hInstance)
{
    ...
    m_pBorder->CreateSurface(0, hInstance, IDB_BORDER, _T("PNG"));
    m_pBorder->SetColorKey(RGB(255, 0, 255));
    ...
}
 
HRESULT CMyApplication::GameDrawBackgrund(CGapiSurface* pBackBuffer)
{
    ...
    // Darken border area
    GDFILLRECTFX fillfx;
    fillfx.dwOpacity = 64;
    pBackBuffer->FillRect(CRect(0, 0, nScreenWidth, GAMEPARAM_BORDERWIDTH+1), RGB(0, 0, 0), GDFILLRECT_OPACITY, &fillfx);
    pBackBuffer->FillRect(CRect(0, GAMEPARAM_BORDERWIDTH+1, GAMEPARAM_BORDERWIDTH+1, nScreenHeight), RGB(0, 0, 0), GDFILLRECT_OPACITY, &fillfx);
    pBackBuffer->FillRect(CRect(nScreenWidth - GAMEPARAM_BORDERWIDTH-1, GAMEPARAM_BORDERWIDTH+1, nScreenWidth, nScreenHeight), RGB(0, 0, 0), GDFILLRECT_OPACITY, &fillfx);
 
    const int PIPEWIDTH = 13;
 
    // Play area - left
    int nPipeWidth = m_pBorder->GetWidth() / GAMEPARAM_NUMBORDERPIPES;
    int nPipeHeight = m_pBorder->GetHeight();
    nNumYBlits = nScreenHeight / nPipeHeight + 1;
    pBackBuffer->BltFast(0, 0, m_pBorder, CRect(0, 0, nPipeWidth, nPipeHeight), GDBLTFAST_KEYSRC, NULL);
    for (nY=1; nY < nNumYBlits; nY++)
    {
        pBackBuffer->BltFast(0, nY*nPipeHeight, m_pBorder, CRect(nPipeWidth, 0, nPipeWidth*2, nPipeHeight), GDBLTFAST_KEYSRC, NULL);
    }
    pBackBuffer->BltFast(0, nScreenHeight/3, m_pBorder, CRect(nPipeWidth*2, 0, nPipeWidth*3, nPipeHeight), GDBLTFAST_KEYSRC, NULL);
    pBackBuffer->BltFast(0, nScreenHeight/2, m_pBorder, CRect(nPipeWidth*2, 0, nPipeWidth*3, nPipeHeight), GDBLTFAST_KEYSRC, NULL);
    pBackBuffer->BltFast(0, nScreenHeight/3*2, m_pBorder, CRect(nPipeWidth*2, 0, nPipeWidth*3, nPipeHeight), GDBLTFAST_KEYSRC, NULL);
 
    // Play area - right
    pBackBuffer->BltFast(nScreenWidth-PIPEWIDTH, 0, m_pBorder, CRect(nPipeWidth*3, 0, nPipeWidth*4, nPipeHeight), GDBLTFAST_KEYSRC, NULL);
    for (nY=1; nY < nNumYBlits; nY++)
    {
        pBackBuffer->BltFast(nScreenWidth-PIPEWIDTH, nY*nPipeHeight, m_pBorder, CRect(nPipeWidth*4, 0, nPipeWidth*5, nPipeHeight), GDBLTFAST_KEYSRC, NULL);
    }
    pBackBuffer->BltFast(nScreenWidth-PIPEWIDTH, nScreenHeight/3, m_pBorder, CRect(nPipeWidth*5, 0, nPipeWidth*6, nPipeHeight), GDBLTFAST_KEYSRC, NULL);
    pBackBuffer->BltFast(nScreenWidth-PIPEWIDTH, nScreenHeight/2, m_pBorder, CRect(nPipeWidth*5, 0, nPipeWidth*6, nPipeHeight), GDBLTFAST_KEYSRC, NULL);
    pBackBuffer->BltFast(nScreenWidth-PIPEWIDTH, nScreenHeight/3*2, m_pBorder, CRect(nPipeWidth*5, 0, nPipeWidth*6, nPipeHeight), GDBLTFAST_KEYSRC, NULL);
 
    // Play area - top
    nNumXBlits = nScreenWidth / nPipeWidth - 1;
    for (nX=0; nX < nNumXBlits; nX++)
    {
        pBackBuffer->BltFast(nX*nPipeWidth + PIPEWIDTH, 0, m_pBorder, CRect(nPipeWidth*6, 0, nPipeWidth*7, nPipeHeight), GDBLTFAST_KEYSRC, NULL);
    }
    pBackBuffer->BltFast(nScreenWidth - PIPEWIDTH - nPipeWidth, 0, m_pBorder, CRect(nPipeWidth*6, 0, nPipeWidth*7, nPipeHeight), GDBLTFAST_KEYSRC, NULL);
    pBackBuffer->BltFast(nScreenWidth/3, 0, m_pBorder, CRect(nPipeWidth*7, 0, nPipeWidth*8, nPipeHeight), GDBLTFAST_KEYSRC, NULL);
    pBackBuffer->BltFast(nScreenWidth/2, 0, m_pBorder, CRect(nPipeWidth*7, 0, nPipeWidth*8, nPipeHeight), GDBLTFAST_KEYSRC, NULL);
    pBackBuffer->BltFast(nScreenWidth/3*2, 0, m_pBorder, CRect(nPipeWidth*7, 0, nPipeWidth*8, nPipeHeight), GDBLTFAST_KEYSRC, NULL);
 
    return S_OK;
}

Congratulations, your application is beginning to look good! When you are done with this step the application should look as follows:

BreakoutStep4
Our Breakout game running at 640x480 pixel resolution, with a scrolling background.

Now on to adding a ball, paddle and some game logic.