いちばんやさしいゲームの作り方 » 練習

現実的にあり得るシチュエーションを訓練できるタイピングゲーム

Byerkut — Fri, 30 Apr 2010 16:24:28 +0000

…が欲しい。

実際に仕事中にどんなキーを打ち込んでいるのかというと、とてもではないのですがタイピングゲームでは練習できないパターンばかりです。修飾キーとの組み合わせに始まり、キーストローク、文脈無視の打鍵（ Flash や Cubase でツールを切り替えるためのキーとか）。こういうのをサポートするゲームがひとつくらいあればいいのにと思いました。

自分はワープロ検定を取得するための授業が高校にありまして、タッチタイピングはそれからになるのですが、実際に仕事をするようになってから脳みその違う部分を使っているような感覚になったものです（ QWERTY 配列が頭に入っているはずなのに入っていないというか…）。普通の文章だけテキパキ入力できても、あまり仕事の役に立っている感じがしませんでした。

Tab で補完とか Ctrl+h でバックスペースとか、覚えておくといろんなソフトで使えるキー操作もありますし、実際のパソコン操作に即したタイピングゲームとか面白そうです。ショートカットキーを使った後に普通の文章を打ち込むための頭の切り替え、その逆、それらを交互に、とかを訓練できたりなどなど。

ただ、一見すると「これがタイピングゲームか？」と疑いたくなるような本格的な画面にするなど、インパクトでもってひきつけないと、とっつきづらい印象ばかり与えてしまいそうです。

問題を解くとき意図が気になっちゃうか否か

Byerkut — Sat, 24 Oct 2009 15:57:55 +0000

自分は気になってしまう方で、練習問題とかなかなかできない人です。

意図がわからなければ問題ないのですが、わかってしまうと悩みます。意図が読めてしまうとそれはヒントになるので、純粋に訓練になるのかとても疑問に感じるのです。

今、ゲーム音楽を作るために循環コードやセカンダリードミナントの付け方を勉強していますが、「循環コードとはこういうものです」の解説の後に、「では、練習問題をやってみましょう」となると、頭は「どこに循環コードが入るんだろう」になります。いや、そういうのを鍛える訓練なので問題ないのですが、最終的に欲しいのは「こういった場面で循環コードを使う」と判断できる力なので、できれば「残念だったな、この曲には入らなくて正解だ」という問題も１～２問は欲しいなぁと思うのです。残念ながら現状はそうなっていません。

練習問題のあり方にも悩みます。訓練は必要なんですが、現実的に直面する問題で練習問題にあるような意図が見えることがあるのか否か…

15 パズルを作る（第 19 夜） – マウス入力からタイル交換のコーディング

Byerkut — Tue, 13 Nov 2007 11:09:06 +0000

タイルをクリックして空きタイルと交換する部分のコーディングが完了しました。

template.cpp

/**
 * @file
 * @brief Windows アプリケーションの雛形
 *
 * Windows アプリケーションを作成する際の雛形ファイル。
 * コンパイルオプション /EHsc が必要。
 * ライブラリ kernel32.lib user32.lib gdi32.lib winmm.lib が必要。
 *
 * @author Byerkut
 * @date 2007-09-22
 * @version $Id: $
 */

// 国際化する
#ifndef _UNICODE

#define _UNICODE

#endif
#ifndef UNICODE

#define UNICODE

#endif

// 依存ライブラリをリンカに教える
#pragma comment(lib, "kernel32.lib")

#pragma comment(lib, "user32.lib")

#pragma comment(lib, "gdi32.lib")

#pragma comment(lib, "winmm.lib")


// Win32API の開発環境をインポート
#include <windows.h>

#include <mmsystem.h>


#include "tiles.h"


/*======================================================================
 * プロトタイプ宣言
 *======================================================================*/

/// ウィンドウプロシージャ（コールバック関数）
LRESULT CALLBACK WindowProcedure(HWND hWnd,
                                 UINT msg,
                                 WPARAM wp,
                                 LPARAM lp);

/*======================================================================
 * 定数
 *======================================================================*/

/// クライアントサイズの幅
static const unsigned int iClientWidth = 640;

/// クライアントサイズの高さ
static const unsigned int iClientHeight = 480;

/*======================================================================
 * グローバル変数
 *======================================================================*/

/// ウィンドウクラス名
static LPCTSTR szClassName = TEXT("template");

/// タイトルバーの文字列
static LPCTSTR szTitleBar = TEXT("１５ぱずりゃー");

/// インスタンスのハンドル
static HINSTANCE hInstance = NULL;

/// メインフォームのハンドル
static HWND hWindow = NULL;

/// バックバッファ
static HDC hBackBuffer = NULL;

/// バックバッファビットマップ
static HBITMAP hBitmap = NULL;

/*======================================================================
 * 関数
 *======================================================================*/

/**
 * アプリケーションのエントリーポイント
 *
 * @param[in] hInstance 現在のインスタンスハンドル
 * @param[in] hPreviousInstance 過去のインスタンスハンドル
 * @param[in] lpsCommandLine コマンドライン引数
 * @param[in] nCommandShow ウィンドウ状態
 *
 * @return アプリケーションの終了コード
 */
int WINAPI WinMain(HINSTANCE hInstance,
                   HINSTANCE hPreviousInstance,
                   LPSTR lpsCommandLine,
                   int nCommandShow)
{
  HANDLE hMutex;
  MSG msg;

  // インスタンスハンドルを保存する

  ::hInstance = hInstance;

  // ミューテックスによる多重起動の検出
  hMutex = ::CreateMutex(NULL, TRUE, szClassName);
  if (::GetLastError() == ERROR_ALREADY_EXISTS) {
    return 0;
  }

  // アプリケーション初期化
  {
    // ウィンドウクラスを定義する
    WNDCLASSEX wc;

    // 構造体のサイズ
    wc.cbSize = sizeof(WNDCLASSEX);
    // クラスのスタイル
    wc.style = CS_HREDRAW | CS_VREDRAW;
    // ウィンドウプロシージャ名
    wc.lpfnWndProc = ::WindowProcedure;
    // 補助メモリ
    wc.cbClsExtra = 0;
    // 補助メモリ
    wc.cbWndExtra = 0;
    // インスタンスハンドル
    wc.hInstance = ::hInstance;
    // アイコン
    wc.hIcon = (HICON)::LoadImage(NULL,
                                  MAKEINTRESOURCE(IDI_APPLICATION),
                                  IMAGE_ICON,
                                  0,
                                  0,
                                  LR_DEFAULTSIZE | LR_SHARED);
    // カーソル
    wc.hCursor = (HCURSOR)::LoadImage(NULL,
                                      MAKEINTRESOURCE(IDC_ARROW),
                                      IMAGE_CURSOR,
                                      0,
                                      0,
                                      LR_DEFAULTSIZE | LR_SHARED);
    // 背景ブラシ
    wc.hbrBackground = NULL;
    // メニュー名
    wc.lpszMenuName = NULL;
    // クラス名
    wc.lpszClassName = ::szClassName;
    // 小さいアイコン
    wc.hIconSm = (HICON)::LoadImage(NULL,
                                    MAKEINTRESOURCE(IDI_APPLICATION),
                                    IMAGE_ICON,
                                    0,
                                    0,
                                    LR_DEFAULTSIZE | LR_SHARED);

    // ウィンドウクラスを登録する
    if (!::RegisterClassEx(&wc))
      return FALSE;
  }

  // インスタンス初期化
  {
    // ウィンドウサイズを計算する
    unsigned int windowWidth = iClientWidth
      + ::GetSystemMetrics(SM_CXEDGE)
      + ::GetSystemMetrics(SM_CXBORDER)
      + ::GetSystemMetrics(SM_CXDLGFRAME);
    unsigned int windowHeight = iClientHeight
      + ::GetSystemMetrics(SM_CYEDGE)
      + ::GetSystemMetrics(SM_CYBORDER)
      + ::GetSystemMetrics(SM_CYDLGFRAME)
      + ::GetSystemMetrics(SM_CYCAPTION);

    // ウィンドウを作成する

    ::hWindow = ::CreateWindow(// クラス名

                               ::szClassName,
                               // タイトルバーの文字列

                               ::szTitleBar,
                               // ウィンドウの種類
                               WS_OVERLAPPEDWINDOW &
                               ~WS_THICKFRAME &
                               ~WS_MAXIMIZEBOX,
                               // x 座標
                               GetSystemMetrics(SM_CXSCREEN)/2 - windowWidth/2,
                               // y 座標
                               GetSystemMetrics(SM_CYSCREEN)/2 - windowHeight/2,
                               // 幅
                               windowWidth,
                               // 高さ
                               windowHeight,
                               // 親ウィンドウのハンドル
                               // 親を作るときは NULL
                               NULL,
                               // メニューハンドル
                               // クラスメニューを作るときは NULL
                               NULL,
                               // インスタンスハンドル
                               hInstance,
                               // ウィンドウ作成データ
                               NULL);

    if (!::hWindow) {
      return FALSE;
    }

    // ウィンドウを表示する

    ::ShowWindow(::hWindow, nCommandShow);

    // ウィンドウを再描画する

    ::UpdateWindow(::hWindow);
  }

  // バックバッファの構築
  {
    HDC hdc = ::GetDC(::hWindow);
    ::hBackBuffer = ::CreateCompatibleDC(hdc);
    ::hBitmap = ::CreateCompatibleBitmap(hdc,
                                         iClientWidth,
                                         iClientHeight);
    ::ReleaseDC(::hWindow, hdc);
    ::SelectObject(::hBackBuffer, ::hBitmap);
  }

  // メッセージループ
  {
    FLOAT const frame = 16.6666f;
    DWORD enterTime = ::timeGetTime();
    DWORD previousTime = ::timeGetTime();
    DWORD afterGameUpdateTime = ::timeGetTime();

    ::ZeroMemory(&msg, sizeof(MSG));

    while (msg.message != WM_QUIT) {
      if (::PeekMessage(&msg, 0, 0, 0, PM_REMOVE)) {

        ::TranslateMessage(&msg);
        // メッセージをウィンドウプロシージャに送信

        ::DispatchMessage(&msg);

      } else {

        // ゲームシステムのメインループ
        enterTime = ::timeGetTime();
        if (frame <(enterTime - previousTime)) {
          // ゲームの中核処理は必ず実行する

          ::UpdateTiles();
          afterGameUpdateTime = ::timeGetTime();
          if ((afterGameUpdateTime - enterTime) <frame) {
            // 同じフレーム内に UpdateGame() がすんだ場合は
            // 描画処理を実行する

            ::InvalidateRect(::hWindow, NULL, TRUE);
            ::UpdateWindow(::hWindow);
            previousTime = ::timeGetTime();
            ::Sleep(1);           // 少し待つ
          } else {
            // 次のフレームに食い込んでしまった場合は
            // 強制的に次フレームの更新を実行する
            previousTime = enterTime - (DWORD)frame;
          }
        }

      }
    }
  }

  // バックバッファの解放

  ::DeleteObject(::hBitmap);
  ::DeleteDC(::hBackBuffer);

  // ミューテックスを閉じる

  ::CloseHandle(hMutex);

  // PostQuitMessage 関数によってポストされた
  // WM_QUIT メッセージの wParam を終了コードとして返す
  return (int)msg.wParam;
}

/**
 * ウィンドウプロシージャ用のコールバック関数
 *
 * @param[in] hWnd ウィンドウハンドル
 * @param[in] msg メッセージ内容
 * @param[in] wp 補助パラメータ
 * @param[in] lp 補助パラメータ
 *
 * @return メッセージ処理の結果
 */
LRESULT CALLBACK WindowProcedure(HWND hWnd,
                                 UINT msg,
                                 WPARAM wp,
                                 LPARAM lp)
{
  switch (msg)
    {
    case WM_CREATE:
      // ゲームシステムの初期化
      {
        ::InitializeTiles(hWindow);
      }
      break;
    case WM_ACTIVATE:
      if (wp == WA_ACTIVE) {
        // ゲームシステムのアクティブ化
      } else {
        // ゲームシステムの非アクティブ化
      }
      break;
    case WM_LBUTTONDOWN:
      {
        int x,y;
        x = LOWORD(lp);
        y = HIWORD(lp);
        ::PressingMouseKey(x, y);
      }
      break;
    case WM_MOUSEMOVE:
      {
        int x,y;
        if (wp & MK_LBUTTON) {
          x = LOWORD(lp);
          y = HIWORD(lp);
          ::PressingMouseKey(x, y);
        }
      }
      break;
    case WM_PAINT:
      {
        HDC hdc;
        PAINTSTRUCT ps;
        hdc = ::BeginPaint(hWnd, &ps);
        // ゲームの描画処理を書く

        ::DrawTiles(::hBackBuffer);
        ::BitBlt(hdc, 0, 0, iClientWidth, iClientHeight,
                 ::hBackBuffer, 0, 0, SRCCOPY);
        ::EndPaint(hWnd, &ps);
      }
      break;
    case WM_CLOSE:
      // 閉じる操作が行われた時 WM_DESTROY をポストする

      ::DestroyWindow(hWnd);
      break;
    case WM_DESTROY:
      // ゲームシステムの終了
      {
      }
      // WM_QUIT をポスト（引数は終了コード）

      ::PostQuitMessage(0);
      break;
    default:
      return ::DefWindowProc(hWnd, msg, wp, lp);
    }

  // 自分で処理した場合は必ず 0 を返す
  return 0;
}

tiles.h

#ifndef __TILES_H__

#define __TILES_H__


#include <windows.h>

#include <stdlib.h>


#define SCREEN_WIDTH 640

#define SCREEN_HEIGHT 480

#define TILE_NUM_X 4

#define TILE_NUM_Y 4

#define TILE_WIDTH (SCREEN_WIDTH / TILE_NUM_X)

#define TILE_HEIGHT (SCREEN_HEIGHT / TILE_NUM_Y)

#define TILE_MOVE_SPEED 20


#define BITMAP_FILE "sample.bmp"


typedef enum tagYesNo {
  YES,
  NO
} YESNO, *PYESNO;

typedef struct tagTile {
  YESNO isBlank;
  int idxX;
  int idxY;
  int posX;
  int posY;
} TILE, *PTILE;

void InitializeTiles(HWND);
void UpdateTiles();
void DrawTiles(HDC);
void PressingMouseKey(int, int);

#endif

#include "tiles.h"


static HDC hMemory;
static HBITMAP hBitmap;
static HBRUSH hBGColor;

static TILE tiles[TILE_NUM_X][TILE_NUM_Y];

void InitializeTiles(HWND hWindow)
{
  int x, y;
  int blkX, blkY;

  // 乱数の種を設定
  srand(::timeGetTime());

  // ビットマップファイルの読み込み
  HDC hdc = ::GetDC(hWindow);
  ::hMemory = ::CreateCompatibleDC(hdc);
  ::hBitmap = (HBITMAP)::LoadImage(NULL,
                                   TEXT(BITMAP_FILE),
                                   IMAGE_BITMAP,
                                   0,
                                   0,
                                   LR_LOADFROMFILE);
  ::SelectObject(::hMemory, ::hBitmap);
  ::ReleaseDC(hWindow, hdc);

  // 空タイルを決定する
  blkX = rand() % TILE_NUM_X;
  blkY = rand() % TILE_NUM_Y;

  // 各タイルの座標をセット
  for (y = 0; y <TILE_NUM_Y; y++) {
    for (x = 0; x <TILE_NUM_X; x++) {
      ::tiles[x][y].idxX = x;
      ::tiles[x][y].idxY = y;
      ::tiles[x][y].posX = x * TILE_WIDTH;
      ::tiles[x][y].posY = y * TILE_HEIGHT;
      if (x == blkX && y == blkY) {
        ::tiles[x][y].isBlank = YES;
      } else {
        ::tiles[x][y].isBlank = NO;
      }
    }
  }

  // 塗りつぶしブラシ

  ::hBGColor = CreateSolidBrush(RGB(0, 0, 0));
}

void UpdateTiles()
{
  int x, y;
  int targetX, targetY;

  // タイルの座標修正
  for (y = 0; y <TILE_NUM_Y; y++) {
    for (x = 0; x <TILE_NUM_X; x++) {
      targetX = x * TILE_WIDTH;
      targetY = y * TILE_HEIGHT;
      if (::tiles[x][y].posX <targetX) {
        ::tiles[x][y].posX += TILE_MOVE_SPEED;
      }
      if (targetX <::tiles[x][y].posX) {
        ::tiles[x][y].posX -= TILE_MOVE_SPEED;
      }
      if (::tiles[x][y].posY <targetY) {
        ::tiles[x][y].posY += TILE_MOVE_SPEED;
      }
      if (targetY <::tiles[x][y].posY) {
        ::tiles[x][y].posY -= TILE_MOVE_SPEED;
      }
    }
  }
}

void DrawTiles(HDC hdc)
{
  int x, y;

  ::SelectObject(hdc, ::hBGColor);
  ::Rectangle(hdc, 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);

  // タイル描画
  for (y = 0; y <TILE_NUM_Y; y++) {
    for (x = 0; x <TILE_NUM_X; x++) {
      if (::tiles[x][y].isBlank == NO) {
        ::BitBlt(hdc,
                 ::tiles[x][y].posX,
                 ::tiles[x][y].posY,
                 TILE_WIDTH,
                 TILE_HEIGHT,
                 ::hMemory,
                 ::tiles[x][y].idxX * TILE_WIDTH,
                 ::tiles[x][y].idxY * TILE_HEIGHT,
                 SRCCOPY);
      }
    }
  }
}

void PressingMouseKey(int x, int y)
{
  int tileX, tileY;
  TILE temp;

  tileX = x / TILE_WIDTH;
  tileY = y / TILE_HEIGHT;

  if (tileX <(TILE_NUM_X - 1) && ::tiles[tileX + 1][tileY].isBlank == YES) {
    temp = ::tiles[tileX + 1][tileY];
    ::tiles[tileX + 1][tileY] = ::tiles[tileX][tileY];
    ::tiles[tileX][tileY] = temp;
  }

  if (0 <tileX && ::tiles[tileX - 1][tileY].isBlank == YES) {
    temp = ::tiles[tileX - 1][tileY];
    ::tiles[tileX - 1][tileY] = ::tiles[tileX][tileY];
    ::tiles[tileX][tileY] = temp;
  }

  if (tileY <(TILE_NUM_Y - 1) && ::tiles[tileX][tileY + 1].isBlank == YES) {
    temp = ::tiles[tileX][tileY + 1];
    ::tiles[tileX][tileY + 1] = ::tiles[tileX][tileY];
    ::tiles[tileX][tileY] = temp;
  }

  if (0 <tileY && ::tiles[tileX][tileY - 1].isBlank == YES) {
    temp = ::tiles[tileX][tileY - 1];
    ::tiles[tileX][tileY - 1] = ::tiles[tileX][tileY];
    ::tiles[tileX][tileY] = temp;
  }
}

今回のポイントは、最終的にタイムアタックにしたいので WM_LBUTTONDOWN と WM_MOUSEMOVE の両方でタイル交換のロジックを呼んでいる点です。これによってマウスボタンを押したままポインタを動かすだけで連続してタイル交換ができるようになりました。

15 パズルを作る（第 18 夜） – タイル表示のコーディング（５）

Byerkut — Sat, 10 Nov 2007 10:06:59 +0000

だらだらとタイル表示に時間を割いていてはもったいないですよね。…というワケで最低限の処理を全て記述しました。

template.cpp

/**
 * @file
 * @brief Windows アプリケーションの雛形
 *
 * Windows アプリケーションを作成する際の雛形ファイル。
 * コンパイルオプション /EHsc が必要。
 * ライブラリ kernel32.lib user32.lib gdi32.lib winmm.lib が必要。
 *
 * @author Byerkut
 * @date 2007-09-22
 * @version $Id: $
 */

// 国際化する
#ifndef _UNICODE

#define _UNICODE

#endif
#ifndef UNICODE

#define UNICODE

#endif

// 依存ライブラリをリンカに教える
#pragma comment(lib, "kernel32.lib")

#pragma comment(lib, "user32.lib")

#pragma comment(lib, "gdi32.lib")

#pragma comment(lib, "winmm.lib")


// Win32API の開発環境をインポート
#include <windows.h>

#include <mmsystem.h>


#include "tiles.h"


/*======================================================================
 * プロトタイプ宣言
 *======================================================================*/

/// ウィンドウプロシージャ（コールバック関数）
LRESULT CALLBACK WindowProcedure(HWND hWnd,
                                 UINT msg,
                                 WPARAM wp,
                                 LPARAM lp);

/*======================================================================
 * 定数
 *======================================================================*/

/// クライアントサイズの幅
static const unsigned int iClientWidth = 640;

/// クライアントサイズの高さ
static const unsigned int iClientHeight = 480;

/*======================================================================
 * グローバル変数
 *======================================================================*/

/// ウィンドウクラス名
static LPCTSTR szClassName = TEXT("template");

/// タイトルバーの文字列
static LPCTSTR szTitleBar = TEXT("１５ぱずりゃー");

/// インスタンスのハンドル
static HINSTANCE hInstance = NULL;

/// メインフォームのハンドル
static HWND hWindow = NULL;

/// バックバッファ
static HDC hBackBuffer = NULL;

/// バックバッファビットマップ
static HBITMAP hBitmap = NULL;

/*======================================================================
 * 関数
 *======================================================================*/

/**
 * アプリケーションのエントリーポイント
 *
 * @param[in] hInstance 現在のインスタンスハンドル
 * @param[in] hPreviousInstance 過去のインスタンスハンドル
 * @param[in] lpsCommandLine コマンドライン引数
 * @param[in] nCommandShow ウィンドウ状態
 *
 * @return アプリケーションの終了コード
 */
int WINAPI WinMain(HINSTANCE hInstance,
                   HINSTANCE hPreviousInstance,
                   LPSTR lpsCommandLine,
                   int nCommandShow)
{
  HANDLE hMutex;
  MSG msg;

  // インスタンスハンドルを保存する

  ::hInstance = hInstance;

  // ミューテックスによる多重起動の検出
  hMutex = ::CreateMutex(NULL, TRUE, szClassName);
  if (::GetLastError() == ERROR_ALREADY_EXISTS) {
    return 0;
  }

  // アプリケーション初期化
  {
    // ウィンドウクラスを定義する
    WNDCLASSEX wc;

    // 構造体のサイズ
    wc.cbSize = sizeof(WNDCLASSEX);
    // クラスのスタイル
    wc.style = CS_HREDRAW | CS_VREDRAW;
    // ウィンドウプロシージャ名
    wc.lpfnWndProc = ::WindowProcedure;
    // 補助メモリ
    wc.cbClsExtra = 0;
    // 補助メモリ
    wc.cbWndExtra = 0;
    // インスタンスハンドル
    wc.hInstance = ::hInstance;
    // アイコン
    wc.hIcon = (HICON)::LoadImage(NULL,
                                  MAKEINTRESOURCE(IDI_APPLICATION),
                                  IMAGE_ICON,
                                  0,
                                  0,
                                  LR_DEFAULTSIZE | LR_SHARED);
    // カーソル
    wc.hCursor = (HCURSOR)::LoadImage(NULL,
                                      MAKEINTRESOURCE(IDC_ARROW),
                                      IMAGE_CURSOR,
                                      0,
                                      0,
                                      LR_DEFAULTSIZE | LR_SHARED);
    // 背景ブラシ
    wc.hbrBackground = NULL;
    // メニュー名
    wc.lpszMenuName = NULL;
    // クラス名
    wc.lpszClassName = ::szClassName;
    // 小さいアイコン
    wc.hIconSm = (HICON)::LoadImage(NULL,
                                    MAKEINTRESOURCE(IDI_APPLICATION),
                                    IMAGE_ICON,
                                    0,
                                    0,
                                    LR_DEFAULTSIZE | LR_SHARED);

    // ウィンドウクラスを登録する
    if (!::RegisterClassEx(&wc))
      return FALSE;
  }

  // インスタンス初期化
  {
    // ウィンドウサイズを計算する
    unsigned int windowWidth = iClientWidth
      + ::GetSystemMetrics(SM_CXEDGE)
      + ::GetSystemMetrics(SM_CXBORDER)
      + ::GetSystemMetrics(SM_CXDLGFRAME);
    unsigned int windowHeight = iClientHeight
      + ::GetSystemMetrics(SM_CYEDGE)
      + ::GetSystemMetrics(SM_CYBORDER)
      + ::GetSystemMetrics(SM_CYDLGFRAME)
      + ::GetSystemMetrics(SM_CYCAPTION);

    // ウィンドウを作成する

    ::hWindow = ::CreateWindow(// クラス名

                               ::szClassName,
                               // タイトルバーの文字列

                               ::szTitleBar,
                               // ウィンドウの種類
                               WS_OVERLAPPEDWINDOW &
                               ~WS_THICKFRAME &
                               ~WS_MAXIMIZEBOX,
                               // x 座標
                               GetSystemMetrics(SM_CXSCREEN)/2 - windowWidth/2,
                               // y 座標
                               GetSystemMetrics(SM_CYSCREEN)/2 - windowHeight/2,
                               // 幅
                               windowWidth,
                               // 高さ
                               windowHeight,
                               // 親ウィンドウのハンドル
                               // 親を作るときは NULL
                               NULL,
                               // メニューハンドル
                               // クラスメニューを作るときは NULL
                               NULL,
                               // インスタンスハンドル
                               hInstance,
                               // ウィンドウ作成データ
                               NULL);

    if (!::hWindow) {
      return FALSE;
    }

    // ウィンドウを表示する

    ::ShowWindow(::hWindow, nCommandShow);

    // ウィンドウを再描画する

    ::UpdateWindow(::hWindow);
  }

  // バックバッファの構築
  {
    HDC hdc = ::GetDC(::hWindow);
    ::hBackBuffer = ::CreateCompatibleDC(hdc);
    ::hBitmap = ::CreateCompatibleBitmap(hdc,
                                         iClientWidth,
                                         iClientHeight);
    ::ReleaseDC(::hWindow, hdc);
    ::SelectObject(::hBackBuffer, ::hBitmap);
  }

  // メッセージループ
  {
    FLOAT const frame = 16.6666f;
    DWORD enterTime = ::timeGetTime();
    DWORD previousTime = ::timeGetTime();
    DWORD afterGameUpdateTime = ::timeGetTime();

    ::ZeroMemory(&msg, sizeof(MSG));

    while (msg.message != WM_QUIT) {
      if (::PeekMessage(&msg, 0, 0, 0, PM_REMOVE)) {

        ::TranslateMessage(&msg);
        // メッセージをウィンドウプロシージャに送信

        ::DispatchMessage(&msg);

      } else {

        // ゲームシステムのメインループ
        enterTime = ::timeGetTime();
        if (frame <(enterTime - previousTime)) {
          // ゲームの中核処理は必ず実行する

          ::UpdateTiles();
          afterGameUpdateTime = ::timeGetTime();
          if ((afterGameUpdateTime - enterTime) <frame) {
            // 同じフレーム内に UpdateGame() がすんだ場合は
            // 描画処理を実行する

            ::InvalidateRect(::hWindow, NULL, TRUE);
            ::UpdateWindow(::hWindow);
            previousTime = ::timeGetTime();
            ::Sleep(1);           // 少し待つ
          } else {
            // 次のフレームに食い込んでしまった場合は
            // 強制的に次フレームの更新を実行する
            previousTime = enterTime - (DWORD)frame;
          }
        }

      }
    }
  }

  // バックバッファの解放

  ::DeleteObject(::hBitmap);
  ::DeleteDC(::hBackBuffer);

  // ミューテックスを閉じる

  ::CloseHandle(hMutex);

  // PostQuitMessage 関数によってポストされた
  // WM_QUIT メッセージの wParam を終了コードとして返す
  return (int)msg.wParam;
}

/**
 * ウィンドウプロシージャ用のコールバック関数
 *
 * @param[in] hWnd ウィンドウハンドル
 * @param[in] msg メッセージ内容
 * @param[in] wp 補助パラメータ
 * @param[in] lp 補助パラメータ
 *
 * @return メッセージ処理の結果
 */
LRESULT CALLBACK WindowProcedure(HWND hWnd,
                                 UINT msg,
                                 WPARAM wp,
                                 LPARAM lp)
{
  switch (msg)
    {
    case WM_CREATE:
      // ゲームシステムの初期化
      {
        ::InitializeTiles(hWindow);
      }
      break;
    case WM_ACTIVATE:
      if (wp == WA_ACTIVE) {
        // ゲームシステムのアクティブ化
      } else {
        // ゲームシステムの非アクティブ化
      }
      break;
    case WM_PAINT:
      {
        HDC hdc;
        PAINTSTRUCT ps;
        hdc = ::BeginPaint(hWnd, &ps);
        // ゲームの描画処理を書く

        ::DrawTiles(::hBackBuffer);
        ::BitBlt(hdc, 0, 0, iClientWidth, iClientHeight,
                 ::hBackBuffer, 0, 0, SRCCOPY);
        ::EndPaint(hWnd, &ps);
      }
      break;
    case WM_CLOSE:
      // 閉じる操作が行われた時 WM_DESTROY をポストする

      ::DestroyWindow(hWnd);
      break;
    case WM_DESTROY:
      // ゲームシステムの終了
      {
      }
      // WM_QUIT をポスト（引数は終了コード）

      ::PostQuitMessage(0);
      break;
    default:
      return ::DefWindowProc(hWnd, msg, wp, lp);
    }

  // 自分で処理した場合は必ず 0 を返す
  return 0;
}

tiles.h

#ifndef __TILES_H__

#define __TILES_H__


#include <windows.h>

#include <stdlib.h>


#define SCREEN_WIDTH 640

#define SCREEN_HEIGHT 480

#define TILE_NUM_X 4

#define TILE_NUM_Y 4

#define TILE_WIDTH (SCREEN_WIDTH / TILE_NUM_X)

#define TILE_HEIGHT (SCREEN_HEIGHT / TILE_NUM_Y)

#define TILE_MOVE_SPEED 8


#define BITMAP_FILE "sample.bmp"


typedef struct tagTile {
  int idxX;
  int idxY;
  int posX;
  int posY;
} TILE, *PTILE;

void InitializeTiles(HWND);
void UpdateTiles();
void DrawTiles(HDC);

#endif

tiles.cpp

#include "tiles.h"


static HDC hMemory;
static HBITMAP hBitmap;
static HBRUSH hBGColor;

static TILE tiles[TILE_NUM_X][TILE_NUM_Y];

void InitializeTiles(HWND hWindow)
{
  int x, y;

  // ビットマップファイルの読み込み
  HDC hdc = ::GetDC(hWindow);
  ::hMemory = ::CreateCompatibleDC(hdc);
  ::hBitmap = (HBITMAP)::LoadImage(NULL,
                                   TEXT(BITMAP_FILE),
                                   IMAGE_BITMAP,
                                   0,
                                   0,
                                   LR_LOADFROMFILE);
  ::SelectObject(::hMemory, ::hBitmap);
  ::ReleaseDC(hWindow, hdc);

  // 各タイルの座標をセット
  for (y = 0; y <TILE_NUM_Y; y++) {
    for (x = 0; x <TILE_NUM_X; x++) {
      ::tiles[x][y].idxX = x;
      ::tiles[x][y].idxY = y;
      ::tiles[x][y].posX = x * TILE_WIDTH;
      ::tiles[x][y].posY = y * TILE_HEIGHT;
    }
  }

  // 塗りつぶしブラシ

  ::hBGColor = CreateSolidBrush(RGB(0, 0, 0));
}

void UpdateTiles()
{
  int x, y;
  int targetX, targetY;

  // タイルの座標修正
  for (y = 0; y <TILE_NUM_Y; y++) {
    for (x = 0; x <TILE_NUM_X; x++) {
      targetX = x * TILE_WIDTH;
      targetY = y * TILE_HEIGHT;
      if (::tiles[x][y].posX <targetX) {
        ::tiles[x][y].posX += TILE_MOVE_SPEED;
      }
      if (targetX <::tiles[x][y].posX) {
        ::tiles[x][y].posX -= TILE_MOVE_SPEED;
      }
      if (::tiles[x][y].posY <targetY) {
        ::tiles[x][y].posY += TILE_MOVE_SPEED;
      }
      if (targetY <::tiles[x][y].posY) {
        ::tiles[x][y].posY -= TILE_MOVE_SPEED;
      }
    }
  }
}

void DrawTiles(HDC hdc)
{
  int x, y;

  ::SelectObject(hdc, ::hBGColor);
  ::Rectangle(hdc, 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);

  // タイル描画
  for (y = 0; y <TILE_NUM_Y; y++) {
    for (x = 0; x <TILE_NUM_X; x++) {
      ::BitBlt(hdc,
               ::tiles[x][y].posX,
               ::tiles[x][y].posY,
               TILE_WIDTH,
               TILE_HEIGHT,
               ::hMemory,
               ::tiles[x][y].idxX * TILE_WIDTH,
               ::tiles[x][y].idxY * TILE_HEIGHT,
               SRCCOPY);
    }
  }
}

ポイントは「 15 パズルを作る（第９夜） – 空白のマスに隣接するタイルをスライドさせる」にあることを実装した点だと思います。回転や拡大縮小はまた後日。

15 パズルを作る（第 17 夜） – タイル表示のコーディング（４）

Byerkut — Thu, 25 Oct 2007 11:10:03 +0000

肝心の WinMain() 部分を載せ忘れていましたのでここにて。

まず、「ゲーム用のウィンドウを作成する」で紹介しましたサンプルソースをプロジェクトに組み込みます。

次にソースの先頭で…

#include "tiles.h"

…と書いて tiles.cpp の関数を呼べるようにします。

tiles.cpp の関数を呼べるようになりましたら WM_CREATE 内に…

case WM_CREATE:
  // ゲームシステムの初期化
  {
    ::InitializeTiles(hWindow);
  }
  break;

…と、初期化処理を書きます。

同じように WM_PAINT 内に…

case WM_PAINT:
  {
    HDC hdc;
    PAINTSTRUCT ps;
    hdc = ::BeginPaint(hWnd, &ps);
    // ゲームの描画処理を書く

    ::DrawTiles(hdc);
    ::EndPaint(hWnd, &ps);
  }
  break;

…と、描画処理を書きます。

最後に 15 パズルのタイルの絵柄となる 640×480 のビットマップ画像を調達して、名前を sample.bmp としてプロジェクトディレクトリの下の debug ディレクトリの中に保存してください。

これで前回紹介した tiles.h と tiles.cpp を一緒にコンパイル＆リンクすれば見事に画像が表示されます。

15 パズルを作る（第 16 夜） – タイル表示のコーディング（３）

Byerkut — Tue, 23 Oct 2007 08:39:10 +0000

盛り上がってまいりました。

今日はビットマップを表示するところまで組んでみました。

tiles.cpp の役割としてはひたすらビットマップを表示するだけです。今回は画面サイズのビットマップをそのまま表示しているだけですが、完成する頃には 4×4 のタイルをひとつずつブロック転送して表示させる予定です。

また、本来表示させたい座標を２次元配で保持し、現在の座標から少しずつ修正するようにしてアニメーションを実現します。

詳しくは「 15 パズルを作る（第９夜） – 空白のマスに隣接するタイルをスライドさせる」を参照してください。

tiles.h

#ifndef __TILES_H__

#define __TILES_H__


#include <windows.h>


#define SCREEN_WIDTH 640

#define SCREEN_HEIGHT 480

#define TILE_NUM_X 4

#define TILE_NUM_Y 4


#define BITMAP_FILE "sample.bmp"


typedef struct tagTile {
  int posX;
  int posY;
} TILE, *PTILE;

void InitializeTiles(HWND);
void UpdateTiles();
void DrawTiles(HDC);

#endif

tiles.cpp

#include "tiles.h"


static HDC hMemory;
static HBITMAP hBitmap;

void InitializeTiles(HWND hWindow)
{
  // ビットマップファイルの読み込み
  HDC hdc = ::GetDC(hWindow);
  ::hMemory = ::CreateCompatibleDC(hdc);
  ::hBitmap = (HBITMAP)::LoadImage(NULL,
                                   TEXT(BITMAP_FILE),
                                   IMAGE_BITMAP,
                                   0,
                                   0,
                                   LR_LOADFROMFILE);
  ::SelectObject(::hMemory, ::hBitmap);
  ::ReleaseDC(hWindow, hdc);
}

void UpdateTiles()
{
}

void DrawTiles(HDC hdc)
{
  ::BitBlt(hdc, 0, 0, 640, 480, ::hMemory, 0, 0, SRCCOPY);
}

15 パズルを作る（第 15 夜） – タイル表示のコーディング（２）

Byerkut — Thu, 18 Oct 2007 08:42:21 +0000

15 パズルコーディング２日目です。さくさくと行きます。

規模の小さいゲームの開発にはひな形が生きてくるものです。

だいたいどのモジュールも初期化、更新、描画がセットになります。本当は終了というのも必要なのですが、ゲームの終了＝プログラムの終了と手抜きをしているので書く必要がありません。みなさまはマネをしてはいけません。

tiles.h

#ifndef __TILES_H__

#define __TILES_H__


typedef struct tagTile {
  int posX;
  int posY;
} TILE, *PTILE;

void InitializeTiles();
void UpdateTiles();
void DrawTiles();

#endif

名前も単純にしましょう。 Initialize で初期化、 Update で更新、 Draw で描画です。規模の小さいゲームはこれで十分です。

typedef struct tagTile {
  int posX;
  int posY;
} TILE, *PTILE;

これは１枚のタイルに対する情報を保存する構造体です。 15 パズルですので、この構造体を 15 個使います。

メンバは今の段階ではテキトーです。描画に関わる構造体ですのでX座標とY座標は必要だろうという読みです。

tiles.cpp

#include "tiles.h"


void InitializeTiles()
{
}

void UpdateTiles()
{
}

void DrawTiles()
{
}

規模の小さいゲームは書いてナンボです。

うそです、すみません。

テキトーはいけません。

15 パズルを作る（第 14 夜） – タイル表示のコーディング（１）

Byerkut — Wed, 17 Oct 2007 12:08:36 +0000

今日から 15 パズルのコーディングに入ろうと思います。

まずタイルです。

タイルを最初に作る理由は最も他のプログラムと依存度が少なく簡単だからです。全然見当がつかない方も最後にはわかっていただけると思います。

一気に作ってしまうと経緯がわからないと思いますので少しずつコーディングしていきます。

まずはどんなプログラムでも必要なヘッダファイルの二度読み対策です。

ヘッダファイルとはレストランのメニューのようなものです。メニューがあるからこそ別のファイルにある関数を使うことができるのです。

では二度読み対策とは何か？

実はヘッダファイルは他のソースから #include によって読み込まれるのですが、同じヘッダファイルを二回読んでしまうとシンボル（関数の名前など）の重複でエラーになってしまうのです。ようは同じ名前の料理があるけどどちらが欲しいのか特定できないからエラーにしとくね、ということです。

その対策は具体的にはどうやるのか？それが次のコードです。

tiles.h

#ifndef __TILES_H__

#define __TILES_H__


// ここに関数のプロトタイプ（メニューのようなもの）を書きます

#endif

#ifndef #define #endif がポイントです。

このコードを簡単に説明すると、もし __TILES_H__ という言葉がはじめて使われる場合はヘッダファイルの中身をコンパイラが見えるようにします。もし __TILES_H__ という言葉が過去に使われていたらヘッダファイルの中身をコンパイラから隠します、という意味になります。

この辺はいずれプリプロセッサを扱うときに詳しく解説します。

tiles.cpp

#include "tiles.h"

// ↑上で作ったファイルをさっそく読み込んでいるところです

15 パズルを作る（第 13 夜） – タイルを伸縮させる

Byerkut — Mon, 01 Oct 2007 13:43:35 +0000

タイルは BitBlt() 関数を使って描画しますが、伸縮して描画する方法はかなりわかりやすいと思います。その名も StretchBlt() という関数がありますのでそれを使います。

StretchBlt(hdcDest,             // 転送先のデバイスコンテキスト
           dstLeft, dstTop,     // 転送先の左上座標
           dstWidth, dstHeight, // 転送先のサイズ
           hdcSrc,              // 転送元のデバイスコンテキスト
           srcLeft, srcTop,     // 転送元の左上座標
           srcWidth, srcHeight, // 転送元のサイズ
           rop);                // ラスタオペレーション

こう言ってはなんですが、こんなにわかりやすい Windows API は他にありません。他の API は自分が使いやすいようにラッピングするのが良いと思います。私流で良ければ今度お見せいたします。

15 パズルを作る（第 12 夜） – タイルを回転させる

Byerkut — Sat, 29 Sep 2007 09:48:52 +0000

タイルはビットマップファイルを読み込んで BitBlt() 関数で描画するわけですが、 PlgBlt() 関数を使うと描画先を任意の頂点の平行四辺形にすることができます。頂点をきちんと算出すればきれいに回転して見せることも可能です。

描画先の平行四辺形は POINT という構造体を要素とする配列で指定します。

POINT descPoints[3] = {{260,  10},
                       {460, 210},
                       { 10, 210}};

四角形ですので頂点が４つあるわけですが、最後のひとつは３点から自動的に算出されます。

PlgBlt(hdc,           // 描画先（ HDC ）
       descPoints,    // 平行四辺形の座標
       hMemDC,        // 転送元（ HDC ）
       top, left,     // 転送する画像の左上座標
       width, height, // 転送する画像のサイズ
       hMask,         // マスク画像（ HBITMAP ）
       mTop, mLeft);  // マスクする画像の左上座標

ちなみに hMask が不要な場合は NULL を指定でき、 mTop と mLeft は無視されます。