FC2ブログ

【Unity】VRで自分だけの世界を作ってみよう!【#2】

どうも、カズズ軍曹です。
今回は地面を作り、色々なオブジェクトに物理法則を追加して遊んでいきたいと思います!

今回の目標

地面を追加する
オブジェクトに物理法則を付与する

オブジェクトを組み合わせてシーンを作る

Unityでは複数のオブジェクトを組み合わせてシーンを作っていきます。
シーンとは、ゲームでいえばタイトル画面や、メニュー画面などの画面のようなものと考えて大丈夫です。
今のプロジェクトの状態を見てみましょう。
unity20200614-1.png

左側の「Hierarchy」を見て下さい。
現在表示しているのが、「SampleScene」であり、3つのオブジェクトが存在していることが分かると思います。
一番上が「Main Camera」です。プレビューを見てもカメラが存在していることが分かります。これは、プレイ開始時にユーザーが一番最初に見る画面になります。

「MainCamera」をダブルクリックしてみましょう。
unity20200614-2.png

右側の「Inspector」に色々と情報が出てきたと思います。
位置や方向、物理法則など「MainCamera」オブジェクトのパラメータをここで設定することができます。
カメラオブジェクトに関しては、プレビューの右下に「CameraPreview」が出現し、カメラが一番最初に捉える画面を確認することができます。

次に、「Directional Light」です。
これはシーン全体を照らす照明になります。
ダブルクリックしてみましょう。
unity20200614-3.png

黄色い線は、光を照らす方向を表しています。
「Inspactor」内の「Transform」の中にある、「Lotation」のパラメータを変更すれば、方向を変えることができ、シーン全体の照明具合が変化します。
試しに色々な値を入れてみて下さい\( 'ω')/

3番目の「Cube」は、前回の最後に追加したものです。

地面を追加する

それでは、新たなオブジェクトを1つシーンに追加していきましょう!
「Terrain」というオブジェクトを追加することで、簡単に地面を生成することができます。

「Hierarchy」内の空白を右クリックし、「3DObject」→「Terrain」と進んで下さい。
unity20200614-4.png

新たなオブジェクトを生成することができました!
これが地面となるオブジェクトの初期状態の姿です。
幅と奥行きが、1000×1000で構成されています。
ここからパラメータを色々弄って地面っぽく仕上げていきます。

まずは、カメラを地面の中に持っていきたいので、位置を変更してみましょう。
「Inspactor」内の「Transform」の中にある、「Position」の値を変更します。
x,zの値をそれぞれ-50に設定してください。
X座標が横、Y座標が高さ、Z座標が奥行きです。
unity20200614-5.png

これで地面を画面の中に持っていくことができました!
立方体が埋もれてしまっているので高い位置に設定しましょう。
立方体を選択し、Y座標の位置を増やします。
unity20200614-6.png

これで実行してみてみましょう!
unity20200614-7.png

地面の上に立方体が浮いているような構図ができました。色々と見回してみてください✌︎('ω'✌︎ )

平地では寂しいので、高低差を付けていきましょう。
Terrainオブジェクトではとても簡単に高低差を付けることができます。

Terrainを選択します。
「Inspector」内の「Terrain」から「ブラシのマーク」を選択します。
下の選択欄を、「Raise or Lower Terrain」に変更してください。
unity20200614-8.png

これは、高低差を付けるためのブラシツールになります。
実際にプレビュー画面上で絵を描くようになぞるだけで、山などを作ることが出来ます。

描く前に、さらに設定を確認しておきましょう。
中央のマークはブラシの種類になります。険しい山を作りたいのか、ただの段差を作りたいのかでブラシの種類が変わってきます。
BrushSizeはブラシの大きさです。広範囲を描きたいなら値を大きく、狭い範囲で良いなら値を小さくしてください。
Opacityは高低差の傾斜具合です。より急斜面を作りたければ値を上げ、緩やかな斜面を作りたければ値を下げてください。

それでは、適当に高低差を付けてみましょう。
高低差を付けられたら、実行してみてください。
unity20200614-9.png

表示画面は違うと思いますが、無事に山が作れたらOKです!
表示がバグってしまう場合は、傾斜がカメラに被ってないか確認してみてください。
被っていたら正常に表示されないので、カメラを動かすか、傾斜の位置を変えて下さい。

これで少しは景観に遊びが出たと思います。
Unityでは木を植えたり、自然に囲まれているようなテクスチャに変更することは簡単にできるのですが、「アセットストア」の説明をしないといけないため、今回は端折らせて下さい。
第4回で地形を仕上げていきましょう!

オブジェクトに物理法則を付与する

オブジェクトに物理法則を付与することにより、落下させたり当たり判定を加えたりすることができるようになります。この設定も、Unityだと簡単にできます!

まずは、「Cube」オブジェクトに重力を付与しようと思います。
「Hierarchy」から「Cube」を選択し、「Inspector」から「Add Component」を選択します。
unity20200614-10.png

「Physics」から「RigidBody」を選択してください。
コンポーネントを追加することで、オブジェクトに新たな属性を与えることができます。
Physics(物理)のRigidBody(剛体)の属性を追加したので、この「Cube」オブジェクトは剛体として見られることになります。

この属性を追加したことによりどのような変化があるのか実際に見てみましょう!
「RigidBody」の「Use Gravity」にチェックが入っていることを確認し、実行してみてください。
unity20200614-11.png

unity20200614-12.png

さっきまで不動だった立方体が落下してきたことが分かります。
UseGravityパラメータにより重力が付与されたのですね!
Unityでは傾斜などの複雑な地形の当たり判定も自動で行ってくれます。
本当に便利ですね・・・

このCubeは今の所剛体の設定のみですが、「物理マテリアル」というものを用いることで、反発係数などを使った更に複雑な物理演算も可能になります。
新たに球を追加し、弾性衝突をさせてみましょう!

Cubeを追加した要領でSphereを追加します。
「Hierarchy」の空欄を右クリックし、「3D Object」→「Sphere」と進みます。
unity20200614-13.png

このままでは立方体と位置が被ってしまうので、適当な位置に移動させて下さい。
unity20200614-14.png

私は、カメラの後ろ側に移動させました。
反発する設定にするので、振り返っても運動の様子が確認できます✌︎('ω'✌︎ )

次に「物理マテリアル」を追加していきます。
これは物理演算用の素材で、オブジェクトに適用することで物理法則を付与させることができます!
下側の「Assets」というエリアの空欄を右クリックし、「Create」→「Physics Material」と進んで下さい。
unity20200614-15.png

作成する物理マテリアルに名前を付けられます。私は分かりやすさを重視し、「FullBound」という名前にしました。

作成すると、右側の「Inspactor」に属性が1つ出てきます。
unity20200614-16.png

上から、「動摩擦力、静止摩擦力、反発係数」の設定値となっています。
どれも0が最小、1が最大です。
今回は弾性衝突する物体を作るので、反発係数を1に設定してください。

次に、今作成した「FullBound」をさっき作成した「Sphere」に適用します。
「Sphere」を選択してください。
「Inspactor」内に「Sphere Collider」属性があると思います。
その中に、Materialという項目があります。
「None」になっていると思うので、そこに「FullBound」をドラッグ・アンド・ドロップして挿入してください。
unity20200614-17.png

Sphereに弾性衝突を設定した物理演算を与えました。
運動させるためには、さっきの立方体と同じく、Sphereに剛体の属性を与えなければなりません。
さっきと同じ手順で、「RididBody」属性を付与しましょう。
unity20200614-18.png

これで、Sphereは跳ね返り運動を起こすようになります。
実行してみましょう!
unity20200614-19.png

見事反発の設定を与えることができました!

物理マテリアルの存在理由は、再利用が簡単だからだと思います。
実際にシーンを作っていくとなると、反発係数や摩擦係数が同じ物体や違う物体などが大量に存在することになるので、オブジェクトに物理マテリアルを付与する方法でやると、設定の時間を削減することができます!

色々なオブジェクトや物理マテリアルを作成し、シーンを盛り上げてみて下さい!

地面の作成、物体の動かし方が分かりました!
次回は、コントローラーを使った移動を行っていきたいと思います!

では、また!

【Unity】VRで自分だけの世界を作ってみよう!【#1】

どうも、カズズ軍曹です。
みなさんはVRヘッドセットを持っていますか?
VRヘッドセットを持っていても、大抵の方は企業などが作ったゲームをダウンロードして遊んでると思います。
でも、せっかく高いお金を出してヘッドセットを買ったので、自分で作った世界を覗いてみたいと思いませんか?
Unityを使うことで、簡単に実現することができます。
早速やっていきましょう!

使用するヘッドセット

今回は、Oculus rift sを用いて開発を行っていきます!

Oculus rift sはPCとの接続が必要となるヘッドセットですが、Unity上で簡単に動作します✌︎('ω'✌︎ )
接続にはDisplayPortとUSBポートが必要です。
Amazonでの値段は、執筆段階で71,800円です。

※VRは非常に高負荷なため、そこそこの性能を有するPCでないと快適に動作しません。

Unityとは?

Unityとは、最高の知名度を誇るゲーム開発エンジンです。
物理演算にも長けており、非常に沢山のゲームの開発環境として使われています。

Unityのセットアップ

Unityは公式ページからダウンロードすることができます!
以下のページにアクセスしてください。

unity20200609-1.png

UnityにはUnityHubと呼ばれる便利な管理ソフトがあります。
UnityHubをダウンロードしてください。

インストールファイルをダウンロードしたら、起動してください。
unity20200609-2.png

「同意する」を押して次に進みます。
unity20200609-3.png

「インストール」を押してインストールを完了させましょう。
unity20200609-4.png

「UnityHubを実行」を押して、ランチャーを起動します。
unity20200609-5.png

起動すると、このような画面が出てきたと思います。
Unity本体をインストールしたいので、右上の青い「インストール」と書かれたボタンを押します。
unity20200609-6.png

Unityのバージョンですが、2020/06/09時点では2019.3.15f1が最新のようです。
最新の正式リリースバージョンを選択して次へを押してください。
unity20200609-7.png

インストールするモジュールは特に弄る必要はありませんので、そのまま次へを押して下さい。

すると、選択したバージョンのUnityのインストールが始まります。
結構ファイルサイズが大きいので、気長に待ちましょう!
unity20200609-8.png

プロジェクトを作成する

Unityのインストールが完了したので、プロジェクトを作成します。

左側にある4つの項目のうちの、「プロジェクト」をクリックしてください。
unity20200609-9.png

右上の青いボタン「新規作成」をクリックします。
unity20200609-10.png

テンプレートは、3Dを選択します。
プロジェクトの名前はなんでもいいのですが、「VRTest」という名前にでもしておきましょう\( 'ω')/
「作成」を押すと新規プロジェクトが作成され、エディタが起動します!
unity20200609-11.png

この画面がエディタです。
左側がシーンのオブジェクト一覧、下側がプロジェクトのファイル一覧、右側がオブジェクトのパラメータ設定欄、中央がシーンのプレビューです。
用語や操作方法などはまた後日解説します。

ヘッドセットを接続する

Unityのプロジェクトが作成できましたら、VRヘッドセットをPCに接続しましょう!
初めてVRヘッドセットを使う場合は、セットアップが必要なのでセットアップを終わらせて下さい。
Oculus rift sを使用している場合は、Oculusの公式ソフトウェアを使用すると簡単にセットアップができると思います。

プロジェクトの設定をする

それでは、Unity上でVRヘッドセットを用いた開発ができるようにプロジェクトの設定をやっていきましょう!
設定はとても簡単です。

「Edit」→「Project Settings」と進んでください。
unity20200609-12.png

左側のメニューで「player」を選択します。
「XR Settings」を開き、「Virtual Reality Supported」にチェックを入れます。
unity20200609-13.png

設定はこれだけです。
閉じて起動してみましょう!
起動するには、プレビューの上にある三角マークを押します!
unity20200609-14.png

起動できましたでしょうか!
プレビューに写っている画面が、ヘッドセット上で見れれば問題なくセットアップできています!
なお、実行中はヘッドセットでみている画面がプレビュー上でも連動して表示されます。
止めるには同じく三角マークを押して下さい。

オブジェクトを追加する

では、最後にオブジェクトを1つ追加してみましょう\( 'ω')/
立方体を追加してみます。

左側のオブジェクト一覧のエリアを右クリックし、「3DObject」→「Cube」と進んで下さい。
unity20200609-15.png

すると立方体が出現したと思います。
unity20200609-16.png

右側で、今作成したオブジェクトのパラメータを設定できますが、現在は無視で大丈夫です。
ここで物理法則を付与したり、大きさや位置や模様などを変えることができます。

それでは実行してみてください!
unity20200609-17.png

今追加した立方体をヘッドセットで見ることができました!

このように、Unityではオブジェクトの追加とパラメータの設定によりシーンを作っていきます。
次回は地面を追加したり物理法則を追加したりして遊んでいきたいと思います!

それでは、また!

【第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回(今回)
プロフィール

カズズぐんそー

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

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

この人とブロともになる

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

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