プログラミングforVBA

C#プログラミングVisual Studioでアプリ作成

ここでは、デスクトップマスコットっぽいアプリケーションの作成過程を一から順番に紹介していきます。
実際にキャラクターを作っていくのは難しいので、デスクトップ(メイン画面)に在中させるようなアプリケーションを作成していきます。
今回は、キャラクターを上からひたすら降らせ続けるだけの単純なものになります。

非常に簡単なものなので、これを応用していけば 3D でなければひとまず作りたいものを作り始めることができるのではないでしょうか。


Visual Studioでプログラミングをしていく

もともと、自分がただ好きなキャラをデスクトップで降らせたかっただけで、調べたらC#で簡単にできるようだったので、
勉強が半分目的で作り始めたアプリケーションになります。
画像は著作権の問題で載せれないので、ここではサンプル画像に置き換えて手順を紹介していきます。

ちなみに、Visual Studioの導入方法は、調べれば山のように情報が出てくるので、ここでは紹介しません。

ということで、まだPCに Visual Studio が入っていない人は、インストールしてから次のステップへ進んで下さい。

フォームの準備

まずはプロジェクトを新規作成します。
「Windowsフォームアプリケーション(.NET Framework)」を選択してOK。
この時点では、まっさらなフォームが表示されます。







フォームの透過設定

なんと、C#では図のように1行追加するだけで、背景が透明なアプリを作成することができます。






画像ファイルの準備

「ツールボックス」のPictureBoxをダブルクリック
「プロパティ」のImageから、使用する画像ファイルをインポートする


「プロパティ」のSizeModeで画像サイズを見やすくなるよう調整する

この状態でアプリを実行してみると、少し画像の表示サイズがおかしいですが、後ろの画面が透けたまま画像が無事表示されます。


また、この透過は実際に背景が無いので、マウスでクリックすると後ろのウィンドウがアクティブになります。

あとは画像を動かすだけ

・・・とはいかないと思います。
実際に画像の位置を上から下に向かって移動させて、上から降ってくるような処理を追加すると
意図しない現象が発生すると思います。



絵が重なるような処理の場合は描画して出力する

何となく何が起きているのかは動作を見ればわかると思いますが、
意外と簡単に解決する方法が見つからなかったので、少し面倒ですが画面の更新毎に全画像を疑似的なキャンバスに書いてから画面を表示する、パラパラ漫画のような手法にシフトチェンジします。(もともと画像の位置をずらす処理もパラパラ漫画と同じといえば同じですが、よりアニメっぽい処理を行っているという意味で次の手法はパラパラ漫画みたいです。)





処理のイメージ

PNG画像の表示は、あくまで透過設定した背景色を透明と定義しているだけなので、
実際には透明に見える場所にもデータが存在していて、画像が重なると重なった方が有効になる、みたいな感じでしょうか。

これを回避するため、一度キャンバスに画像データを描きこんでから、それを1枚の画として画面に出力させてあげます。
こちらの処理のイメージは、スケッチブックにシールをぺたぺた貼っていく感じだと思います。

プログラムを書いていく

PictureBox を新たに作成し、フォームの端から端までサイズを引き延ばします。
そしたら今作成した Picture Box を右クリックして、最背面へ移動を選択し、表示順位を最下位にします。

フォームのデザインタブで、「プロパティ」の Visible を False にして、画像の表示を無効にします。
これで準備は完了です。次に以下のようなプログラムを記述します。



キャンバスのサイズは適当です。自分のPC環境に合わせてお好みで調整をお願いします。
あと、「pictureBox1」などの名前は、Picture Box を作成した時のデフォルト名なので、
もしプロパティで(Name)を変更していれば、それに合わせてソースコードも変えてください。
名前が間違っていれば Visual Studio がエラーをすぐに吐き出してくれるのでわかると思います。


画を動かすのは少し面倒

PictureBox の位置を動かすのは、実際に物体を摘んで移動させるような感じなので楽なのですが
キャンバス上で画像を移動させるのは、パラパラ漫画の原理を使うので面倒くさいです。
一定の周期で画面を更新して、少しずつ絵をずらしていきます。
そのために、まずはタイマーの設定をする必要があります。
タイマーは、「ツールボックス」の Timer をダブルクリックすれば生成できます。
そしたら、デザインフォームの下の方に Timer1 というテキストボックスが出現するので、さらにそれをダブルクリックします。
そうすることで、ソースコードの方にタイマ用関数が自動で追加されます。

タイマーは初期状態では無効になっているので、「プロパティ」で「Enabled」を True にしましょう。
また、更新間隔はデフォルトで 100ms になっているので、お好みで 50ms とかに短くするとより滑らかな動作をさせることができます。

あとは、キャンバスの表示処理をタイマ関数の方へ移植し、表示座標の高さを動的に変えることで移動させることができます。

これで透明部分を思い通りに透過させる動きができるようになりました。


著作権の問題でここに載せることは難しいですが、私はこれを元に幾人もの女の子を降らせて、
タッチすると回転しながら衣装をチェンジする観賞用デスクトップアプリを作成しました(*'ω'*)



更新情報・お知らせ

Other

今のところなし。

サイト情報とか

管理人:ゆるり

無駄な情報を極力省いた
情報特化型サイト
…にするつもり

学校、会社でも見やすいように
シンプルにする、予定です。
半分自分用のプログラミングコマンド集
最近、寝る喜びを知り始めた

製品情報

採用情報 採用情報

上のバナー画像は、801px以上の端末と800px以下とで画像2種類が切り替わります。
詳しい説明はこちら。