PG日誌

読者です 読者をやめる 読者になる 読者になる

PG日誌

主にc#の事を書いています

真・C# と WPF でインベーダー風ゲームを作る

c# 作ってみた WPF

3日前に『C#WPF でインベーダー風ゲームを作る』を言って、雰囲気だけ似ているオリジナルのイカのシューティングの記事を書きましたが、「インベーダー」を名乗ってあの出来栄えはさすがに我田引水が過ぎるかなと思い反省したので、本物の「インベーダー」のクローンをまじめに作成しすることにしました。

takachan.hatenablog.com

画面構成

f:id:Takachan:20170320003414p:plain:h350

敵機、自機、弾などはすべてImageクラスになっています。 ImageクラスをCanvas上に配置しTimerを1秒間に60回更新して60fpsの疑似動作を行っています。

作成環境

今回制作に使うツールは以下の通りです。

  • VisualStudio2017Community
    • .NET Framework4.6.2をターゲットにしています
  • Paint.net
    • 敵画像の作成に使用します

出来上がったゲームの画面

今回は、本家のインベーダーゲームにかなり寄せています。

f:id:Takachan:20170320003900p:plain:h350

f:id:Takachan:20170320003905p:plain:h350

制作過程

イカゲームの時と流れはほとんど同じですがこんな流れで作業しました。

  • 1日目
    • イカゲームから必要な部分を残して全部削除
    • 自機の表示、左右キーでの移動
    • 自機の弾の発射、取り除き
  • 2日目
    • インベーダーの配置
    • インベーダーの攻撃処理とあたり判定の追加
  • 3日目
    • 防御ブロックの配置と自機の弾とのあたり判定
    • 敵UFOの出現処理
    • ゲームオーバー/ゲームクリア画面表示の作成

ブロックの配置ですが、これを実装するとゲームのデバッグが大変めんどくさくなるります。なのでなるべく後回し & 実装しても非表示にするなどが必要でした。

成果物

成果物はGitHubにアップしました。 前回と同じリポジトリですが、ブランチを切ってそちらで作業しています。

github.com

作った感想

イカのゲームからこのゲームを作っている最中に気が付いたことですが

  • インベーダーの画像はクオリティとか説得力が高い
    • 流石に商業リリースしたゲームのリソースは違います
  • 意外と処理が膨らむ
    • 弾が爆発したら画像を差し替えてN秒後に消すとか結構コードが必要です
  • ImageクラスはSpriteと同じように扱える
    • Cocos2d-xのSpriteとまぁまぁにてる操作が可能
  • 段々問題領域に対して理解が深まって前半と後半でコードスタイルがぶれている

今回ゲームライブラリを一切使用しないピュアC#のみで開発しましたが、Unityなどのゲームツールを使用すればライブラリなどもありますし、苦労は少ないと思います。無料で使用できますしね。

特にゲームライブラリだと

  • 特にN秒経過したら画面から除去する
  • ImageをアニメーションしているようにN秒ごとに切り替える
  • 衝突判定

は普通にクラスなり関数を呼べば良いケースが多いと思いますので、わざわざ自分で開発する必要ないですね。

今回は規模が前のより倍になったため、途中からコードが崩壊しかけてるのが実感できました。要素が多くなると変数が増加するのでそれらの整合性の管理や処理の順序、コード自体のボリュームで開発効率が少し落ちていました。少し構造は気にしながらコードを書いた方がよさそうです。

今回も完成が途中で危ぶまれましたがなんとか勢いだけで作りきることができました。

やっぱり短期間に勢いでガーっと作るのがよさそうです。

C# と WPF でインベーダー風ゲームを作る

作ってみた c# WPF

VisualStudio2017が出たということで記念するわけではないですが、C#WPFのみでインベーダー風ゲームを作ってみたいと思います。

すいません、嘘つきました。インベーダーを意識した気がするオリジナルなシューティングゲームです。リスペクトしたということでインベーダー風と言っています。

制作時間は3日に分けて3時間~4時間くらいで作成しました。

ゲームのルールと操作方法

  • スペースキーを押すと自機が弾を発射
    • 自機が撃てる弾は1画面に3発まで
  • 左右キーで自機の移動
  • 画面上部に侵略者(イカ)を生むUFOがいる
    • UFOは一定間隔でイカを生成する
  • イカは弾を出しながら手前に移動してくる

画面構成

今回、特にゲームエンジンを使わないのでWPFのWindowクラスの上にCanvasを張り付けてImageを動かしながらゲームを表現します。

f:id:Takachan:20170317012039p:plain:h350

作成環境

今回制作に使うツールは以下の通りです。

  • VisualStudio2017Community
    • .NET Framework4.6.2をターゲットにしています
  • Paint.net
    • 敵画像の作成に使用します

出来上がったゲームの画面

f:id:Takachan:20170317012256p:plain:h330

f:id:Takachan:20170317012301p:plain:h330

f:id:Takachan:20170317012305p:plain:h330

気が付いたこと

WPFはゲーム向けのライブラリとか一切ないので、60fpsをタイマークラスのElapsedイベントハンドラを1秒間に60回呼び出すことで対応しました。

またキー入力は、キーを押しっぱなしにすると、不連続に「テ、、、テテテテテ」と入力が走るので、キー入力処理の識別を自前で書く必要があります。

弾のあたり判定も無いので以下の通り自作しています。

public class GameUtil
{
    /// <summary>
    /// 指定した2つのオブジェクトが衝突しているか確認します。
    /// </summary>
    public static bool IsCollision(FrameworkElement a, FrameworkElement b)
    {
        double x_abs = 
          Math.Abs((Canvas.GetTop(a) + a.Width / 2)
                - (Canvas.GetTop(b) + a.Width / 2));
        double y_abs = 
            Math.Abs((Canvas.GetLeft(a) + a.Height / 2)
                - (Canvas.GetLeft(b) + a.Height / 2));

        double aw = a.Width / 2 + b.Width / 2;
        double ah = a.Height / 2 + b.Height / 2;

        return x_abs < aw && y_abs < ah;
    }
}

制作過程

以下のような順番で作成しました。

  • 1日目
    • 背景が黒い画面の作成
    • 自機の表示、左右キーでの移動
    • 自機の弾の発射、取り除き
  • 2日目
    • 防御ブロックの配置と自機の弾とのあたり判定
    • 敵UFOの表示と左右移動
  • 3日目
    • UFOのイカ生成処理
    • イカの移動、弾の発射
    • イカの弾と自機のあたり判定
    • ゲームオーバー/ゲームクリア画面表示の作成

それぞれ1日1時間ちょいずつ作業しています。

成果物

作ったものをGitHubへアップしました。

github.com

作った感想

気がついたことや残件、作った感想です

  • 絵がしょぼい
  • 効果音が無い
  • あたり判定の範囲が左にずれている
  • インベーダークローンを作ってたつもりなのにいつの間にか全然違うものができていた
    • 完全なクローンも時間をかければ出来そうな感はありましたが、丁寧作業すると結構時間がかかりそうな事に気が付きました

プログラムの内容はImageクラスをCanvasクラス上で1フレームごとに移動したりするだけなので特に難しいことはありませんでした。

  • 自機や敵の移動は、移動をする前に除去判定をしないといけない
  • 弾が当たったらループを中断して処理を打ち切らないとヤバイことになる
  • ImageはCanvasに追加してからCanvas.SetXXXした方がいい
  • ループ変数のインデックスのiとかjとかdfiを間違えて使わない
  • ループはforeach使わない、forで逆順で回す
    • リストから削除する事が多かったので逆順です

が大変だったかもしれません。

2日目くらいに、「なんでこんなもの作ってるんだろう」という気がしてやめようかと思いましが、自分に鞭をうって強引に進めました。多分4日目に突入したら完成しなかったと思います。

細かいことは気にせずにガーっと勢いでやるのが大切だと思いました。

後半戦

すいません、ちょっとこのままインベーダーを名乗るのはリスペクトが足りないと思ったので後編を書きました。

takachan.hatenablog.com

Exlipse 4.4 LunaでのSVN 1.9のリポジトリに接続する

Tool

f:id:Takachan:20170115150341j:plain

こんな事してる人もうこの世に存在しないのかな?それとも使ってる環境のせいなのか・・・

環境

  • Eclipse4.4 Luna (Pleiades Full版)
  • Subversive 4.0 (これ以下ならマーケットからアプデしてください)

この環境でHTTPでホストされていないファイルベースのSVN1.9で作成したリポジトリへ接続しようとすると接続エラーになる問題の対処方法です。

SVNKitが1.8.5とか1.8.7だと接続できないので

以下手順で、SVNKit(SVN Connecter)を最新バージョン(1.9対応版)に更新します。

ヘルプ > 新規ソフトウェアのインストール

から以下URLを入力して

http://community.polarion.com/projects/subversive/download/eclipse/6.0/update-site/?dir=features

で表示される内容から以下を選択します。

  • JavaHL 1.8.15 Win32
  • JavaHL 1.9.3 Win32
  • 他にもあれば全部チェック入れておく

途中で代替案が提案されたらそれらも全部入れれば、インストール完了後に再起動すると

“Connector Discovery"ウインドウが表示されてSVN Kitが選択できるようになります。

そこからまた、全部チェック入れてクライアントを更新しましょう。

更新したら

設定 > チーム > SVN > SVNクライアント[Tab]

から

SVNクライアント = Native JavaHL 1.8.15 rxxxxxx (SVN 1.8.15)

を選択すれば1.9を含む過去バージョンのリポジトリに接続できるようになります。

乱暴すぎて、選択項目が正しいか不明ですが上記URLが分かれば大丈夫だと思います。

Windows10でフォントが汚いのでYuGothicを削除する (不完全版)

f:id:Takachan:20170115150341j:plain

こんなこと書いておいてアレですがこの設定、不完全なため意図しない結果になるかもしれません。


Windows10から採用されたYuGothicですが、滲んだ上にボヤけてはっきり言ってクソ以下です。フォント自体はいいという人もいるみたいですがWin環境でちゃんと表示されないなら結局ダメダメですね。

以前YuGothicをクソフォントと声高に叫んではてぶが多少炎上しましたが誤解を恐れずもう一度言わせてください。

「YuGothicはクソ」

で、このクソフォントを『Windows10 フォントが汚いので一発変更! 』『Meiryo UIも大っきらい!!』などで任意のイケている変更している人も多いかと思います。

が、この設定だけでは、以下の項目がYuGothicのままです。(それだけじゃないですが)

ちなみに、MacTypeは文字が綺麗になるどころか文字がさらに滲んで事態が悪化するだけなのでやめましょう。

デスクトップのコンテキストメニュー

f:id:Takachan:20170219145510p:plain

エクスプローラ上のコンテキストメニュー

f:id:Takachan:20170219145547p:plain

コントロールパネルの「設定」

f:id:Takachan:20170219145831p:plain:h300

・・・・・何で変わらないんですかね?

Surfaceならちゃんと表示されるらしい

「高DPI環境でちゃんと表示される」という人もいますが、店頭で確認したところ普通に滲んでますね。

ちゃんと描画できなら元に戻せよと思います。

で、どうするのか?

今のところ、Windows環境で日本語がまともに表示されるのは以下の2種類だけです。

  • MS Gothic系
  • Meiryo系

ほかのフォントは、滲んだり、かけたり、ガチャガチャだったりして結局ちゃんと表示されません。プログラミングで視認しやすいフォントと宣伝している大半のフォントはWindowsでは理想通りの表示にはなりません。

設定方法

で、この状況を改善するべく全てMeiryoUIに変更しようとしましたがうまくいきませんでした。 が、チャレンジしている最中にMSゴシックには変更できたのでやり方以下の通りです。

ご注意

以下設定をしても一部表示がおかしい、全部変更されないなど発生します。

全部自己責任でお願いします。

その1

これからレジストリをいじるので事前にバックアップするなどしてください。

当方、Windowsが起動しなくなっても責任取れません。

その2

以下を実施するとファイルのプロパティダイアログの内容がちゃんと表示されなくなります。繰り返しになりますが実施する際は自己責任でお願いします。

手順

レジストリエディタを開き以下パスに移動します。

HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts

でその中から

Yu Gothic Bold & Yu Gothic UI Semibold & Yu Gothic UI Bold (TrueType)

Yu Gothic Light & Yu Gothic UI Light (TrueType)

Yu Gothic Medium & Yu Gothic UI Regular (TrueType)

Yu Gothic Regular & Yu Gothic UI Semilight (TrueType)

Yu Mincho (TrueType)

Yu Mincho Demibold (TrueType)

Yu Mincho Light (TrueType)

YuGothic Bold (TrueType)

の各値を全部空欄にします。

設定するとこんな感じになります。

f:id:Takachan:20170219151100p:plain

そうして、一度、サインアウトか再起動すると設定が反映されます。

結果

デスクトップのコンテキストメニュー

f:id:Takachan:20170219152907p:plain

エクスプローラ上のコンテキストメニュー

f:id:Takachan:20170219152912p:plain

コントロールパネルの「設定」

変わらず

プロパティダイアログ

見事に表示がおかしくなりました。

f:id:Takachan:20170219153255p:plain

結論

まぁ、YuGothicよりMSゴシック表示のほうが全然マシですね。本当に。

MSは一体いつ、この状況を修正するんでしょうか。音声アシストとかどうでもいいアップデートしてないでフォント直せよ。

MeiryoUIが表示できれば文句ないのですが、自分の設定が悪いのかエクスプローラのお行儀が悪いのかわからないですがFontSubsetが指定しても有効にならないため現状はこれ以上無理ですが何か良い方法が見つかれば別途投稿したいと思います。

オーボエ奏者 大下裕子さんのHP

いつもと全然経路が違いますが、Oboe奏者の大下裕子さんが自分のHPを作ったとのことで、紹介します。

ページがものすごいオシャレ!

oshitahirokooboe.wixsite.com