FC2ブログ

【第4回】マジカルハロウィンのデスクトップマスコットを作ってみよう!

どうも、カズズ軍曹です。
デスクトップマスコット制作の続きをやっていきたいと思います。
今回は第4回ということで、前画面表示固定して位置を移動できるようにし、シーン別に複数の画像を表示できるようにしていきます!

今回の目標

前画面表示に対応する。
位置を移動できるようにする。
通常時、クリック時にそれぞれ別の画像を表示できるようにする。

前画面表示に対応させる

まずは前画面表示に対応させていきたいと思います。
デスクトップマスコットは基本的に常に画面に表示させておくものだと思いますので、必須機能ですね。

前画面表示を設定するには、SetWindowPos()という関数を使用することで実現できます。
DXライブラリ初期化処理である、DxLib_Init();の後に、以下の処理を追加してください。

//ウィンドウを最前面に固定
SetWindowPos(GetMainWindowHandle(), HWND_TOPMOST, 0, 0, 0, 0, 0);

SetWindowPosは、名前の通りウィンドウのポジションを設定する関数です。表示位置やサイズの他に、最前面表示するかしないかの設定を行うことができます。
最初の引数には、設定対象のウィンドウのハンドルを渡してやらないといけないので、GetMainWindowHandle()関数を使って、メインウィンドウの値を渡しています。
次の引数は最前面表示するかどうかのハンドルを渡します。HWND_TOPMOSTという値を渡してやると、そのウィンドウは非アクティブ状態でも最前面表示するようになります。
そこから後の引数は、ウィンドウの位置(x,y)・サイズ(cx,cy)・位置調整フラグを設定するものになっています。特に設定する項目はないので、全て0で大丈夫です。
これで起動してみましょう。

desktop20200607-1.png

無事、常に最前面に表示できるようになったと思います。
これで最前面表示の問題は解決しました!
次は、デスクトップマスコットを移動できるようにしてみましょう!

位置を移動できるようにする

普通ウィンドウの位置は、タイトルバーをドラッグして動かしますが、タイトルバーをオフにしている影響で普通に移動することができません。
画像をドラッグすることによって移動したいですよね。
この節では画像の位置を移動できるようにしていきたいと思います。

画像をドラッグしてウィンドウの位置を移動する関数は用意されていないので自分で用意する必要があります。
今回は以下のようにして実現していきます。

1. マウスが左クリックされているかを調べる
2. されていれば、マウスの位置と現在のウインドウの位置を取得
3. 左クリックが離されているかを調べる
4. 離されていれば、現在のマウスの位置を取得
5. クリックする前のマウスの位置と比較し、その差を得る
6. 差の分だけウィンドウを移動

新たに以下の関数を使用します。
GetMouseInput(); マウスの入力状態を取得する関数
GetMousePoint(x, y); マウスの位置を取得する関数
GetWindowPosition(x, y); ウィンドウの位置を取得する関数
SetWindowPosition(x, y); ウィンドウの位置を設定する関数

変更箇所が多いので、以下のコードをコピーして使用してください。
まず、メインループ前に以下の変数宣言を追加します。

int start_windowX = 0; //ドラッグ前のウィンドウのX、Y座標
int start_windowY = 0;
int start_mouseX = 0; //ドラッグ前のマウスのX、Y座標
int start_mouseY = 0;
int Mouse = 0; //マウスの入力状態を格納
int mouseX = 0; //現在のマウスのX、Y座標
int mouseY = 0;
int drag_flag = 0; //現在ドラッグしているかを格納

メインループを以下のように変更してください。

   //メインループ
while (ProcessMessage() == 0 && ClearDrawScreen() == 0) {

//ブレンドモードを乗算済みアルファに設定
SetDrawBlendMode(DX_BLENDMODE_PMA_ALPHA, 255);

/* ウィンドウの位置を動かす処理 */

//マウスの入力状態を取得する
Mouse = GetMouseInput();

//現在のマウスの位置を取得する
GetMousePoint(&mouseX, &mouseY);

//左クリックしているかを取得する
if (Mouse & MOUSE_INPUT_LEFT) {
//ドラッグ開始時の処理
if (drag_flag == 0) {
drag_flag = 1;
//ウィンドウの位置を格納
GetWindowPosition(&start_windowX, &start_windowY);
//マウスの位置を格納
GetMousePoint(&start_mouseX, &start_mouseY);
}
}
//左クリックしていない場合
//ドラッグしていた場合
else {
if (drag_flag == 1) {
drag_flag = 0;
//マウス位置の差を算出し、ウィンドウを動かす
SetWindowPosition(start_windowX + mouseX - start_mouseX, start_windowY + mouseY - start_mouseY);
}
}

/* 画像を表示させる処理 */
DrawGraph(0, 0, test_g, TRUE);

//描画先の画像をソフトイメージに取得する
GetDrawScreenSoftImage(0, 0, 640, 480, SoftImage);

//取り込んだソフトイメージを使用して透過ウインドウの状態を更新する
UpdateLayerdWindowForPremultipliedAlphaSoftImage(SoftImage);
}

これで起動してみましょう!
画像をドラッグ・アンド・ドロップすることで、他の場所に移動させることができていれば成功です!
位置調整もできるようになり、本格的にデスクトップマスコットに近づきましたね!
さて次は、状況に応じて画像を切替えられるようにしていきます!

別の画像を表示させる

デスクトップマスコットは、複数の動画データを用いて構成されていると思います。動画データはまだ用意できないので、複数の画像をシーン別に切り替えて表示させてみましょう!

通常時、マウスクリック時の2シーンに分けて画像を切替えて表示させていきます。
まずは画像を追加で用意しましょう。
私は「いらすとや」さんから、「驚いている人のイラスト(棒人間)」を使わせていただきました!
「test_click.png」というファイル名で「image」フォルダに保存します。



このように配置できたら、プログラムを書いていきましょう!
クリックしているかの判定を行えば、画像の切り替えを実現できます!

画像上でクリックされている → test_click.pngを表示
マウスポインタが画像上にない or クリックされていない → test.pngを表示

まず、画像を読み込ませましょう。
メインループ前に以下の2行を追加します。
int test_click_g;
test_click_g = LoadGraph("image/test_click.png");

そして、メインループを以下のように変更してください。

    //メインループ
while (ProcessMessage() == 0 && ClearDrawScreen() == 0) {

//ブレンドモードを乗算済みアルファに設定
SetDrawBlendMode(DX_BLENDMODE_PMA_ALPHA, 255);

/* ウィンドウの位置を動かす処理 */

//マウスの入力状態を取得する
Mouse = GetMouseInput();

//現在のマウスの位置を取得する
GetMousePoint(&mouseX, &mouseY);

//左クリックしているかを取得する
if (Mouse & MOUSE_INPUT_LEFT) {
//ドラッグ開始時の処理
if (drag_flag == 0) {
drag_flag = 1;
//ウィンドウの位置を格納
GetWindowPosition(&start_windowX, &start_windowY);
//マウスの位置を格納
GetMousePoint(&start_mouseX, &start_mouseY);
}
}
//左クリックしていない場合
//ドラッグしていた場合
else {
if (drag_flag == 1) {
drag_flag = 0;
//マウス位置の差を算出し、ウィンドウを動かす
SetWindowPosition(start_windowX + mouseX - start_mouseX, start_windowY + mouseY - start_mouseY);
}
}

/* 画像を表示させる処理 */
//クリックされていたら、
if (Mouse & MOUSE_INPUT_LEFT) {
//test_click.pngを表示
DrawGraph(0, 0, test_click_g, TRUE);
}
//されていなかったら
else 
//test.pngを表示
DrawGraph(0, 0, test_g, TRUE);

//描画先の画像をソフトイメージに取得する
GetDrawScreenSoftImage(0, 0, 640, 480, SoftImage);

//取り込んだソフトイメージを使用して透過ウインドウの状態を更新する
UpdateLayerdWindowForPremultipliedAlphaSoftImage(SoftImage);
}

if文でクリックの有無により、表示させる画像を分けています。




画像をクリックすると、画像が切り替わることが確認できたでしょうか。
これでシーン別の画像の切り替えができました!

いかがでしょうか。前回よりも大分デスクトップマスコットに近づいたと思います。
さて、ここにきてプログラムがかなり複雑になってきました。
似たような処理が至る所にあると思います。
こちらでプログラムを整理したmain.cppを配布しますので、置き換えて使って下さい。
コメントを参考にプログラムを読んでみるのも面白いですよ。

次回は、画像を実際のマジハロキャラクタに置き換えていきたいと思います。
ここからは撮影データが必要なので、揃い次第更新ということにしたいと思います。
では、また!

main.cpp (3kb)

---シリーズ一覧---
第1回
第2回
第3回
第4回(今回)



【第3回】マジカルハロウィンのデスクトップマスコットを作ってみよう!

どうも、カズズ軍曹です。

今回は第3回ということで、静止画像をデスクトップマスコットのように表示していきたいと思います。

今回の目標

静止画を表示する。
ウィンドウをデスクトップマスコット風に表示する。

下準備

さて、早速作っていこうと思うのですが、その前に一つやるべきことがあります。
現在、ソースコードのファイル名がtest.cppになっています。
大体のプロジェクトは、複数のソースファイルを使って作られることが多いため、testという名前では後々分かりづらくなると思います。
なので、main.cppという名前に変更しましょう

プロジェクトを開いて下さい。

desktop20200531-1.png

右側にソリューションエクスプローラーというボックスがあると思います。
ここにはプロジェクトに含まれるファイルの一覧が確認できます。

test.cppの名前を変更しましょう。右クリックで選択し、「名前の変更」を選択します。
desktop20200531-2.png

ソースファイルが複数ある場合、お互いを参照しあって動いていますので、こういう風な名前の変更は参照が崩れる場合がありよろしくないのですが、今回はまだ単独で動いていますのでこの方法で大丈夫です。
フォルダを見てみても名前が変わっていることが分かると思います。

desktop20200531-3.png

静止画像を表示させてみる

それでは、画像を表示させてみましょう。
マジハロのキャラクタの画像を使っていきたいところなのですが、まずは他の画像で上手く表示されるか試してみましょう。
私は今回、「いらすとや」の棒人間が立っているイラストを使わせていただきました。
みなさんも好きな画像を使って下さい。

画像を用意したら、プロジェクトフォルダ内のimageフォルダの中に画像を配置しましょう。
その時、画像の名前を「test.png」に変更しておいてください。拡張子がjpgでも出来なくはないですが、透過できるため、png形式が良いと思います。

desktop20200531-4.png

画像を用意できましたら、ソースコードの方を変更して画像を表示させてみましょう。

main.cppの中身を以下のように書き換えて下さい。

#include "DxLib.h"

int WINAPI WinMain(HINSTANCE,HINSTANCE,LPSTR,int){
  ChangeWindowMode(TRUE),DxLib_Init();

int test_g = LoadGraph("image/test.png"); //test.pngを読み込み
DrawGraph(0, 0, test_g, TRUE); //test.pngを描画する
      WaitKey();      // キー入力待ち
        DxLib_End();    // DXライブラリ終了処理
        return 0;
}

(見にくくてすみません、、、SyntaxHighlighterまた導入しておきます)

前回の6行目を削除して、このコードの6行目と7行目を追加する感じですね。
6行目では、test.pngをtest_gという名前で読み込んでいるというイメージです。
7行目でそれを描画しています。
文字列から想像が付くと思います。

それでは、F5キーを押して実行してみましょう。

desktop20200531-5.png

自分で用意した画像が表示されたと思います。
もし表示されなかった場合、ファイルパスが間違えてる可能性や保存先が間違えている可能性があるので確認してみてください。

画像が表示されたのは良いのですが、タイトルバーや黒背景など、デスクトップマスコットに要らない要素が沢山表示されています。
次項ではよりデスクトップマスコットに近づけていこうと思います。

タイトルバー、背景を非表示にする

まずは、タイトルバーを非表示にしていこうと思います。
4行目、5行目を以下のように変更してください。

4 SetWindowStyleMode(2); //ウィンドウスタイルを2に設定
5 ChangeWindowMode(TRUE),DxLib_Init();

SetWindowStyleMode(2) という文字列が追加されています。
これは、ウィンドウのスタイルを設定する関数です。
値に対応した設定は既に決められており、2を入れることで「タイトルバー無し、縁の太さは細い」が設定されます。

起動してみましょう。タイトルバーが消えたことが分かると思います。

desktop20200531-6.png

次に黒背景を消していきます。
黒背景を消すのもDXライブラリで用意されているのですが、画像処理の知識等が少し必要になってきます。私もあまり知識はなく、このシリーズでのプログラムの解説もできるだけ控えようと思っているので、以下のコードをコピーして使ってください。

こちらを参考にさせていただきました。
https://dxlib.xsrv.jp/cgi/patiobbs/patio.cgi?mode=view&no=3158

#include "DxLib.h"

int WINAPI WinMain(HINSTANCE,HINSTANCE,LPSTR,int){
//ウィンドウスタイルを(タイトル無し、縁細)に設定
SetWindowStyleMode(2);

//透過ウィンドウの使用設定
SetUseBackBufferTransColorFlag(TRUE);
//ウィンドウモードに変更
ChangeWindowMode(TRUE); 

//DXライブラリ初期化
DxLib_Init(); 

int screen;
int test_g;
int SoftImage;

//描画対象スクリーンを作成
screen = MakeScreen(640, 480, TRUE);
//デスクトップ画面を取り込むソフトウェア画像を作成
SoftImage = MakeARGB8ColorSoftImage(640, 480); 

//画像を読み込む際にアルファ値をRGB値に乗算するように設定する
SetUsePremulAlphaConvertLoad(TRUE);

//描画対象をアルファチャンネル画面に設定
SetDrawScreen(screen);

//test.pngを読み込む
test_g = LoadGraph("image/test.png");
//メインループ
while (ProcessMessage() == 0 && ClearDrawScreen() == 0) {

//ブレンドモードを乗算済みアルファに設定
SetDrawBlendMode(DX_BLENDMODE_PMA_ALPHA, 255);

//画面に表示する処理 ここから
DrawGraph(0, 0, test_g, TRUE); //test_gを表示

//ここまで

//描画先の画像をソフトイメージに取得する
GetDrawScreenSoftImage(0, 0, 640, 480, SoftImage);

//取り込んだソフトイメージを使用して透過ウインドウの状態を更新する
UpdateLayerdWindowForPremultipliedAlphaSoftImage(SoftImage);
}
    WaitKey();      // キー入力待ち
    DxLib_End();    // DXライブラリ終了処理
    return 0;
}


これで実行してみましょう!

desktop20200531-7.png

見事黒背景も消え、画像のみが表示されるようになりました!
まだ前画面固定など課題はありますが、かなりデスクトップマスコットに近くになりましたね!
今回のコードの改変で、キー入力でプログラムが終了しないように設定しましたので、終了する時はタスクバーからプログラムを終了させてください。

次回は色々な画像を表示させたり、マジハロキャラに置き換えたりしたいと思います。
それでは、また。

---シリーズ一覧---
第1回
第2回
第3回(今回)
第4回

【第2回】マジカルハロウィンのデスクトップマスコットを作ってみよう!

どうも、カズズ軍曹です。

今回は第2回ということで、開発環境の構築をやっていこうと思います。

今回の目標

VisualStudioでDXライブラリを使用可能にする。
テストプログラムが動作する。

VisualStudioをインストールしよう

まずはプログラムを書くための統合開発環境をインストールしていきます。

以下のページにアクセスしてください。
https://visualstudio.microsoft.com/ja/downloads/

VIsualStudioダウンロード1

検索結果

ウェブ検索結果


VisualStudio2019コミュニティを使用します。
「無料ダウンロード」ボタンを押してダウンロードしてください。

ダウンロード完了後、インストーラを起動します。

VisualStudioダウンロード2

このようなダイアログが出た場合、続行をクリックしてください。
VisualStudioインストーラーのインストールが始まりますので、しばらく待ちます。

VisualStudioダウンロード3

インストーラーのインストールが完了すると、インストールするパッケージの選択画面になります。
DXライブラリはC++を用いた開発になりますので、「C++によるデスクトップ開発」パッケージにチェックを入れ、インストールをクリックして下さい。

その後、インストーラーにより本体とパッケージがダウンロードされます。
2020.05.29段階で、1.89GBという大容量のため、気長に待ちましょう( ;∀;)

VisualStudioダウンロード5

再起動が必要なようなので、再起動をクリックして再起動しましょう。
この時、他に作業中のファイルがあれば忘れず保存をしておいてください✌︎('ω'✌︎ )

再起動すると、VisualStudio2019が起動できるようになっているので、スタートメニューから探して起動してください。

VisualStudioダウンロード6

起動すると、以下のような画面が出てくると思います。

VisualStudioダウンロード7

どのプロジェクトを開くかの選択画面です。
今回は設定構築済みのプロジェクトを使用するので、ここでは何もしません。
これで、開発環境のインストールが完了しました\( 'ω')/
次はDXライブラリを使用する準備を整えていきます。

DXライブラリのセットアップ

本来であれば、DXライブラリを使用するためにはVisualStudioの環境設定を行う必要があります。しかし、環境設定の手順は少し長く複雑です。なので、私が既に設定を終わらせたファイルを公開しますので、それを使いましょう\( 'ω')/

以下のファイルをダウンロードしてください。

zip形式で圧縮されていますので、ダウンロード後は解凍してください。
解凍したファイルを好きなディレクトリに保存してください。
フォルダの名前を変更しても大丈夫です。

解凍したフォルダを見ていきましょう。

VisualStudioダウンロード8

これらのファイルが出てくると思います。
赤線が引いてあるものは重要なファイルなので、軽く説明を行います。
-DxLibフォルダ
DXライブラリ本体です。
-imageフォルダ
プロジェクトで使用するグラフィックデータを保存しておくフォルダです。
-soundフォルダ
プロジェクトで使用するサウンドデータを保存しておくフォルダです。
-GameProg_2012.vcxproj
VisualStudioのプロジェクトデータです。ダブルクリックすると、VisualStudioのソースコードエディタが開きます。
-test.cpp
cppとは、C++のソースコードを記述するファイルになります。このファイルにソースコードを書き、ソフトウェアを作っていくことになります。testという名前の通り、初っ端の起動確認に使うだけで、今後は別のcppファイルを作成します。

「GameProg_2012.vcxproj」を開いてみましょう。

VisualStudioダウンロード9

「Microsoft Visual Studio 2019」で開きます。
「常にこのアプリを使って.vcxprojファイルを開く」にチェックを入れておくと、次回以降この表示は出てきません。

VisualStudioダウンロード10

このようなエディタが起動します。
今表示されているソースコードはtest.cppです。
では次項でテストプログラムを起動してみましょう\( 'ω')/

テストプログラムを起動する

ダウンロードしたプロジェクトにはtest.cppというファイルが含まれており、そこには既にプログラムが記載されています。
実際にこのプログラムを起動してみましょう。
エラーなく起動できれば、環境構築は完了です。

起動にはF5キーを押します。
F5キーを押すと、VisualStudioが自動的にコードを解読し、実行してくれます。

VisualStudioダウンロード11

「Hello World!」という文字が白色で表示され、いずれかのキーを押すと終了する、、、という処理が実行されたと思います。上手くその処理が実行されていれば環境構築は成功です!
この処理は、test.cppに書いてあるものをVisualStudioが解読したものなので、test.cppの内容を書き換えれば動作はまた違ったものになってきます。

今回は一番大切な環境構築というテーマだったので、長くなりました。
しかし、このシリーズではできるだけプログラムに踏み込まず解説しようと思います。
DXライブラリを使ったゲーム制作は色々とシリーズをやっていきたいと思っていますので、その時に詳しく解説する予定です。

次回は、静止画キャラクタをデスクトップマスコットのように表示させてみたいと思います。
それでは、また。

---シリーズ一覧---
第2回(今回)

【第1回】マジカルハロウィンのデスクトップマスコットを作ってみよう!

どうも、カズズ軍曹です。
ブログ初の記事はゲーム制作カテゴリにしました!
でもゲームじゃないですし、ある意味パチスロカテゴリな気もしますが・・・
何をするかというと、KONAMIさんが出しているパチスロ、「マジカルハロウィン」のミニキャラを利用したデスクトップマスコットを作ろうという企画です。
デスクトップアクセサリーを作ろう!
↑赤円がミニキャラ

このミニキャラ、アクションするんですよねー、、、
この動作をデスクトップ上で再現できれば楽しいそうですよね。

開発環境

今回は、DXライブラリを用いて作っていきます。
DXライブラリは、C++用に開発されたコンピュータゲーム開発用のライブラリです。
DXライブラリを使ったゲーム開発のやり方なども、シリーズとして別にやりたいなと思っています。
結構簡単にウィンドウの制御ができるので、デスクトップマスコットを作るのに適していると思います。

IDEはVisualStudio2019を使う予定です。DXライブラリばっかり触っていると、VisualStudio以外の開発環境に慣れれないのでこの先不安ではあります。

キャラクタデータ

キャラクタの動画データなどは、自分で用意した動画から作ろうと思っていますが、動画データが少なすぎるので他の人から貰うかもしれません。
マジハロ5とマジハロ6がミニキャラアクションが盛んなんですけど、どちらにするかは悩んでいます。編集しやすそうなのはマジハロ5なんですけどね。
マジハロの実機があれば楽なんですけどね・・・欲しい・・・(3なら持ってる

目標

デスクトップ上にキャラクタだけ表示し、自動的にアクションしてくれることを目標にします。
デスクトップマスコットを使ったことがないので、他のものはどういったアクションをしているかというのが分かりませんが、クリックアクションやメール通知、タイマーなどを行ってくれるようなものを作りたいですね・・・
使えるかは分かりませんが、TwitterのAPIが使えるならばTwitterの通知を知らせてくれる機能とか付けたら利便性も上がりそうです。

まずは動画データを揃える時点で時間がかかりそうですが、頑張って作っていこうと思います。


---シリーズ一覧---
第1回(今回)
第3回
第4回
プロフィール

カズズぐんそー

Author:カズズぐんそー
岡山県在住の情報工学系の大学生です。
情報処理安全確保支援士試験合格。
麻雀とゲーム制作、低貸スロが趣味の自由人です。

最新記事
最新コメント
月別アーカイブ
カテゴリ
アクセスカウンター
オンラインカウンター
スポンサーリンク
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR
メールフォーム

名前:
メール:
件名:
本文: