美人の画像をボタン操作で動かす





美人の画像をモードレス DialogBox の SpinButton で動かします。

前田稔(Maeda Minoru)の超初心者のプログラム入門

プロジェクトの設定

  1. テンプレートを使って、新規プロジェクトを作成して下さい。
    Spin Button の 設定を行うので Stdafx.h ファイルで commctrl.h を取り込みます。
        // TODO: プログラムで必要なヘッダー参照を追加してください。
        #include    <commctrl.h>
        
  2. ページ先頭の画像を参考にして DialogBox を作成して下さい。
    Edit Box と Spin Button を交互に設定して、TAB オーダで Spin の直前が Edit Box になるようにします。
    TAB オーダは[書式(レイアウト)][タブオーダ]で確認できます。
    Spin の[プロパティ/スタイル]から[自動関連付け(Auto Buddy)]と[数値の自動表示(Set Buddy Integer)] をチェックすると Spin の値が EditBox に自動的に表示されます。
    キャプションとIDの設定です。
    BOX キャプション ID
    DialogBox ダイアログ IDD_DIALOG1
    EditBox IDC_EDIT1
    Spin IDC_SPIN1
    EditBox IDC_EDIT2
    Spin IDC_SPIN2
    Button 終了 IDCANCEL
  3. SPSIZE は美人の画像の一枚分の縦と横のサイズです。
    Xpos と Ypos が画像の座標で、SpinButton で操作します。
        #define     SPSIZE  120
        HWND        g_hWnd;
        LPSTR       BmpFile= "bijin16.bmp";
        long        Xpos= 0;        //表示位置(X)	
        long        Ypos= 0;        //表示位置(Y)
        
  4. ウインドウサイズを 640*480 に設定します。
    g_hWnd にウインドウのハンドルを格納します。
    CreateDialog() で DialogBox を生成して ShowWindow() で表示します。
        BOOL InitInstance( HINSTANCE hInstance, int nCmdShow )
        {
                :
            hWnd = CreateWindow(szWindowClass, szTitle, WS_OVERLAPPEDWINDOW,
                   CW_USEDEFAULT, CW_USEDEFAULT, 640, 480, NULL, NULL, hInstance, NULL);
                :
            ShowWindow( hWnd, nCmdShow );
            UpdateWindow( hWnd );
            g_hWnd= hWnd;
    
            hDlg = CreateDialog(hInst,MAKEINTRESOURCE(IDD_DIALOG1),hWnd,(DLGPROC)DlgProc);
            if (hDlg == NULL)    return FALSE;
    
            ShowWindow(hDlg, SW_SHOW);
            UpdateWindow(hDlg);
            return TRUE;
        }
        
  5. WM_PAINT で Sprite を描画します。
        case WM_PAINT:
            hdc = BeginPaint (hWnd, &ps);
            // TODO: この位置に描画用のコードを追加してください...
            ShowBMP(hdc);
            EndPaint( hWnd, &ps );
            break;
        
  6. Dialog Box の CALLBACK 関数です。
    WM_INITDIALOG: で SpinButton を設定します。
    ウインドウサイズが 640*480 なので範囲をこれに合わしています。
    SpinButton が操作されると WM_VSCROLL: がポストされます。
    DialogBox の終了時には WM_CLOSE をメインにポストしてプログラムを終了します。
        LRESULT CALLBACK DlgProc(HWND hDlg,UINT msg,WPARAM wParam,LPARAM lParam)
        {
            switch(msg)
            {
                case WM_INITDIALOG:
                    SendMessage(GetDlgItem(hDlg,IDC_SPIN1),UDM_SETRANGE,0,600);
                    SendMessage(GetDlgItem(hDlg,IDC_SPIN1),UDM_SETPOS,0,0);
                    SendMessage(GetDlgItem(hDlg,IDC_SPIN2),UDM_SETRANGE,0,440);
                    SendMessage(GetDlgItem(hDlg,IDC_SPIN2),UDM_SETPOS,0,0);
                    break;
                case WM_COMMAND:
                    switch(LOWORD(wParam))
                    {   case IDCANCEL:
                            PostMessage(hDlg,WM_CLOSE,0,0);
                            return TRUE;
                    }
                    break;
                case WM_VSCROLL:
                    if ((HWND)lParam==GetDlgItem(hDlg,IDC_SPIN1))
                    {   Xpos= HIWORD(wParam);
                        InvalidateRect(g_hWnd,NULL,TRUE);
                    }
                    if ((HWND)lParam==GetDlgItem(hDlg,IDC_SPIN2))
                    {   Ypos= HIWORD(wParam);
                        InvalidateRect(g_hWnd,NULL,TRUE);
                    }
                    break;
                case WM_CLOSE:
                    EndDialog(hDlg,TRUE);
                    PostMessage(g_hWnd,WM_CLOSE,0,0);
                    return TRUE;
            }
            return FALSE;
        }
        
  7. bijin16.bmp の一枚目の画像を表示する関数です。
    Xpos, Ypos が画像を表示する座標です。
    0,0 を起点として SPSIZE,SPSIZE の画像(一枚目)が表示されます。
    画像の表示は BMP ファイルを表示する を参照して下さい。
        HRESULT ShowBMP(HDC hdc)
        {   HBITMAP         hbm;
                :
            BitBlt(hdc,Xpos,Ypos,SPSIZE,SPSIZE,hmdc,0,0,SRCCOPY);
                :
            return TRUE;
        }
        
  8. bijin16.bmp には「縦に4段、横に4列」の合計16枚の画像が並んでいます。
    説明の画像

【演習】

  1. モードレス DialogBox の SpinButton で美人の画像を切り替えてアニメーションするプログラムを作成して下さい。
  2. SpNO の Sprite 画像を表示するコードは次のようになります。
    BitBlt(hdc,Xpos,Ypos,SPSIZE,SPSIZE,hmdc,(SpNO%4)*SPSIZE,(SpNO/4)*SPSIZE,SRCCOPY);


【ヒント】

bijin16.bmp から一枚の Sprite を切り出して表示する関数です。
bijin16.bmp には「縦に4段、横に4列」の合計16枚の画像が並んでいます。
SPSIZE は美人の画像の一枚分の縦と横のサイズです。
SpNO が Sprite の番号で、Xpos, Ypos が表示位置です。
HRESULT ShowBMP(HDC hdc)
{   HBITMAP         hbm;
    HDC             hmdc;
    BITMAP          bm;

    hbm = (HBITMAP)LoadImage(NULL,BmpFile,IMAGE_BITMAP,0,0,
                             LR_LOADFROMFILE|LR_CREATEDIBSECTION);
    if (hbm==NULL)
    {   MessageBox(NULL,"LoadImage Error","BMP File Open Error",MB_OK);
        return FALSE;
    }
    hmdc = CreateCompatibleDC(hdc);
    SelectObject(hmdc, hbm);
    GetObject(hbm, sizeof(bm), &bm);
    BitBlt(hdc,Xpos,Ypos,SPSIZE,SPSIZE,hmdc,(SpNO%4)*SPSIZE,(SpNO/4)*SPSIZE,SRCCOPY);
    DeleteDC(hmdc);
    DeleteObject(hbm);
    return TRUE;
}

超初心者のプログラム入門(Win32API C++)