25: GUIチートクライアントの全体的な見た目の作成
概要
早速GUIのチートクライアントを Visual C++ (C++/CLI) で作り始めます。今回は、GUIのチートクライアントの全体的なレイアウトを作成し、ボタンをいくつか配置する事を目標にやっていきます。
チート対象のゲームは、x86でチートの練習用に作られた、Pwn Adventure 3を使います。
Windows対象で、Visual Studio 2019を使用し
C++/CLI
で記述する。
C++/CLIサポートを有効にする
Visual Studio 2017 からC++/CLIのサポートはデフォルトで入っていないので、まずはこれをインストールする必要があります。Visual Studioを開き、「新しいプロジェクトの作成」を選択した後、テンプレート選択の所で一番下へスクロールすると下図の表示が出てくるはずですので、選択しましょう。
※ 自分は Visual Studio 2019 を使用しています その後、下図のようにして最新のC++/CLIサポートにチェックを付け、ダウンロードを開始しましょう。 これで有効化は完了です。
CLRプロジェクトの作成と設定項目
再びVisual Studioを開き、「新しいプロジェクトの作成」を選択しましょう。 テンプレートの選択画面から、以下の「CLR 空のプロジェクト (.NET Framework)」を選択しましょう。開けたら、まずは Windowsフォーム すなわち、メインのウィンドウを追加します。
プロジェクト > 新しい項目の追加
あるいは Ctrl-Shift-A
をして、下図のように選択してOKを押しましょう。
これを選択すると、おそらく以下のようなエラー画面が出てくると思います。
これは生成されたMainWindow.cppにメイン関数が無い故にエラーなので、まずMainWindow.cppに以下のように記述します。
これらは おまじない として書くようにすると良いと思いますが、それぞれこういう意味です。
[STAThread]
:プロジェクトのエントリーポイントを表すarray<String^>^ args
:文字列の配列でコマンドライン引数^
というのは、所謂ポインタの*
と同じ意味で、マネージドコードではこのように書くEnableVisualStyles()
:OSの設定で指定しているテーマを反映する(フォントとか)SetCompatibleTextRenderingDefault(false)
:ウィンドウに配置するボタンとかの文字の描画方法のデフォルトを指定してるっぽい(よくわからない)Run(gcnew cheatclientdemo::MainWindow())
gcnew
は、所謂new
と同じだが、マネージドコードのインスタンスを生成する時はこっちを使うcheatclientdemo::MainWindow()
でcheatclientdemo
というのは、このプロジェクト名がcheat-client-demo
という名前なのでそうなっている。 上記のgcnew
と合わせて、MainWindow
のインスタンスを生成しているRun
にMainWindow
のインスタンスをセットして呼ぶことで、このアプリを実行している
書き終えたら、プロジェクトのプロパティ画面を開き、以下のようにエントリーポイントを
main
に変更します。
また、「リンカー > システム」の所で、以下のようにサブシステムを指定します。
これで、MainWindow.hのタブを一旦閉じ、保存してからVisualStudioを閉じましょう。そして、もう一度起動しましょう。
起動後、もう一度MainWindow.hをダブルクリックすると、今度はエラー画面ではなく、このような表示になっているはずです。
※ 正常にこのデザインビューが出てこない場合は、Shift-F7
のショートカットキーを押したりしてみてくださいまた、もう一度プロパティ画面を開いていただき、「C/C++ > 共通言語ランタイムサポート」の部分を見てみましょう。 ここに「共通言語ランタイムサポート (/clr)」と書いてあれば、マネージドコードとアンマネージドコードを混在させられるようになっている事になります。
パネルで区画分け
では実際に見た目を作っていきます。まずは、ウィンドウのプロパティを以下のように設定します。プロパティは下図の所で編集できます。
- 配置
- AutoScaleMode: None
- MinimumSize: 946, 635
- Size: 946, 635
- 表示
- Font: Microsoft Sans Serif, 10.2pt
上記を以下のような3つの区画に分けようと思っています (ボタンの名前とかは適当です)。 こういう区画分けには
Panel
を使います。以下のようにしてヘッダーを作りましょう。Dockが肝です。
次に、サイドバーパネル > コンテンツウィンドウ用のパネルの順で配置します(Dock使う時は置く順番が大事です)。
それぞれのプロパティは以下のようにします。
サイドバー
- デザイン
- Name: SideBarPanel
- 配置
- Dock: Left
- Size: 183,488
- 表示
- BackColor: 7, 7, 7
- ForeColor: Lime
コンテンツウィンドウ
- デザイン
- Name: ContentPanel
- 配置
- Dock: Fill
- Size: 745, 488
- 表示
- BackColor: 20, 20, 20
- ForeColor: Lime
これで以下のようになるはずです。
サイドバーにボタンを配置
サイドバーのボタンはコンテンツウィンドウに表示するチートの項目を選択するためのものです。今の所は以下の3つのボタンを用意しようと思っています。
- Player: 無敵のオンオフやマナ消費0のオンオフ、速度調整等のステータス調節
- Warp: ワープ先が並んでいて、クリックするとその場所に行ける
- Item: アイテムを取得したりなど
Button
をドラッグ&ドロップし、プロパティを以下のように設定しましょう。
- デザイン
- Name: PlayerSideBarButton
- 配置
- Dock: Top
- Padding: 10, 0, 0, 0
- Size: 183, 50
- 表示
- FlatAppearance
- BorderSize: 0
- MouseDownBackColor: 0, 170, 0
- MouseOverBackColor: 0, 50, 0
- FlatStyle: Flat
- Text: Player
- TextAlign: MiddleLeft
Warp
- デザイン
- Name: WarpSideBarButton
- 表示
- Text: Warp
Item
- デザイン
- Name: ItemSideBarButton
- 表示
- Text: Item