Key Move

Windows10 でキーで図形(円)を動かします。

前田稔の超初心者のプログラム入門

プログラムの説明

  1. VS-2019 で VC-2017 Key Count に習ってキーで図形を動かすプロジェクトを作成します。
    (旧仕様のプロジェクトはソリューションエクスプローラで右クリックして再ターゲットすると動く場合があります)
    今回は矢印キーを利用して図形(赤い円)を動かすプログラムを作成します。
  2. [ファイル][新規作成][プロジェクト]から[Visual C++][空白のアプリ(ユニバーサル Windows)]を選んで下さい。
    MainPage.xaml を直接編集して赤い円を描画します。
    Grid ~ /Grid の間に追加して下さい。
        <Grid>
            <Ellipse x:Name="zukei" Fill="#FFEB0A0A"
            Height="100" Width="100" ManipulationMode="All"
            HorizontalAlignment="Left" VerticalAlignment="Top"
            Canvas.Left="11" Canvas.Top="11"/>
        </Grid>
    
  3. MainPage.xaml.h にキーで図形(円)を移動する領域を定義します。
    InitManipulationTransforms() は領域を初期化する関数です。
    OnKeyDown() でキーを検出して図形を移動します。
    transforms, previousTransform, deltaTransform は移動を計算する領域です。
        public:
            MainPage();
            void MainPage::InitManipulationTransforms();
            void OnKeyDown(Windows::UI::Core::CoreWindow^ win, Windows::UI::Core::KeyEventArgs^ e);
        private:
            Windows::UI::Xaml::Media::TransformGroup^ transforms;
            Windows::UI::Xaml::Media::MatrixTransform^ previousTransform;
            Windows::UI::Xaml::Media::CompositeTransform^ deltaTransform;
            Windows::UI::Core::CoreWindow^ m_window;
        };
    
  4. MainPage.xaml.cpp で m_window を取得して OnKeyWown のイベントハンドラーを設定します。
    MainPage::MainPage()
    {
        InitializeComponent();
        InitManipulationTransforms();
        m_window = Window::Current->CoreWindow;
        m_window->KeyDown += ref new TypedEventHandler<Windows::UI::Core::CoreWindow^,
            Windows::UI::Core::KeyEventArgs^>(this, &MainPage::OnKeyDown);
    }
    
  5. transforms を初期化します。
    void MainPage::InitManipulationTransforms()
    {
        transforms = ref new TransformGroup();
        previousTransform = ref new MatrixTransform();
        deltaTransform = ref new CompositeTransform();
        transforms->Children->Append(previousTransform);
        transforms->Children->Append(deltaTransform);
        zukei->RenderTransform = transforms;
    }
    
  6. 矢印キーを検出して図形を移動します。
    「←→↑↓」キーで上下左右に移動します。
    void App1::MainPage::OnKeyDown(Windows::UI::Core::CoreWindow^ win, Windows::UI::Core::KeyEventArgs^ e)
    {
        switch(e->VirtualKey)
        {   case Windows::System::VirtualKey::Left:
                deltaTransform->TranslateX-= 2;
                break;    
            case Windows::System::VirtualKey::Right:
                deltaTransform->TranslateX+= 2;
                break;    
                case Windows::System::VirtualKey::Up:
                deltaTransform->TranslateY-= 2;
                break;    
            case Windows::System::VirtualKey::Down:
                deltaTransform->TranslateY+= 2;
                break;
        }
    }
    
  7. プロジェクトをコンパイル&ビルドして実行を確認して下さい。
    上下左右の矢印キーで図形(赤い円)が移動します。
    反応が遅く、画像の切り替え(アニメーション)や今回のようなアプリは DirectX が向いているようです。
    または、Win32 に準じる [Windows デスクトップ アプリケーション] を使う方法 W32 Key Move がお勧めです。
    Windows10 の「スタート」ボタンから[すべてのアプリ]を選ぶと今作製したアプリが登録されています。
    残しておく必要がなければ右クリックからアンインストールして下さい。

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