とことんF#よぷよ

とことんF#よぷよ！ F# + XNA ゲームプログラミング入門 10.15.2011 #CLRH63 ぜくる

自己紹介       ぜくる (１９７８年生まれ) Twitter : @zecl , はてな id:zecl 旭川市から来ました。 Ｆ＃歴３年くらいの睡眠丌足なプログラマ。 プレイ中のゲーム ： ＤＡＲＫ ＳＯＵＬＳ（心が折れそうだ… 好きなパズルゲーム 倉庨番, ぷよぷよ, Dr.マリオ, ミスタードリラー, etc…

つくったことのあるもの        ブロック崩しゲーム ２Dシューティングゲーム（横/縦) リバーシ（オセロ） ・・・ テトリス風ゲーム (F# + WindowsForm) 倉庨番風ゲーム (F# + Silverlight) ぷよぷよ風ゲーム (F# + XNA) ← New！

きょうお話しする内容

ぷよぷよ  株式会社コンパイルから発売されていた落ち物パズル ゲームの人気シリーズ。  第１作目は１９９１年１０月２５日に発売されたMSX２版と ファミコン ディスクシステム版。  ２００３年以降はセガが販売を行っている。

ぷよぷよ  ファミコン版のぷよぷよ  人型のオブジェクトでプレイすることが可能。 とてもシュールです…

いきなりですが F# + XNA 「とことんF#よぷよ！」Demo

おことわり  わたしはゲームプログラマではありません。  ＸＮＡ４.０で初めてＸＮＡに触れました（初心者）  とことんF#よぷよ！にテストコードはございません。 とてもレガシーコードです(＞_＜)  モナドとか高度なお話はしません。怖くないです。  Ｆ#わからなくても大丈夫。雰囲気を感じてください。

XNAとは  Microsoft 社の簡単かつ本格的なゲーム開発環境（無償）  マルチプラットフォーム Windows, Xbox360, WindowsPhone  ＸＮＡ開発に使用できる言語 一般的には、C# で開発します。 が、 .NET 上で動作する言語であれば、基本的になんでもOK。 (Ｆ＃, VB, IronPython, IronRuby ...)

XNAのここが嬉しい！  開発環境が無料である。  .NET Framework を軸とした移植性の高いコードを書ける  ゲーム開発に必要な枠組みや部品を提供してくれるので、ゲームを つくることだけに集中できる。すぐに作り始められる。  簡単なゲームであれば、難しいことを知らなくても割と大丈夫。  Ｃ#で書くことができるよ！

XNAのここが嬉しい！ カンスウガタゲンガー歓喜  開発環境が無料である。  .NET Framework を軸とした移植性の高いコードを書ける  ゲーム開発に必要な枠組みや部品を提供してくれるので、ゲームを つくることだけに集中できる。すぐに作り始められる。  簡単なゲームであれば、難しいことを知らなくても割と大丈夫。  C#もいいけど、Ｆ#で書くこともできるよ！

ゲーム作りに必要なこと １９れんさ 絵が出せる。 動かせる。 音が出せる。 入力を受け取 れる（操作）。 文字が出せる。 ゲームデータの 保存と読込み

XNAのお膳立て ウィンドウの表示 ゲームループの仕組み(FPSの管理) 絵や音等、素材をロードする仕組み 描画の仕組み（SpriteBatch, SpriteFont） １９れんさ データの圧縮, リソースの管理 入力を受け取る仕組み(キーボード、マウス、ゲームパッドなど） ストレージを扱う仕組み 多くの補助的なクラスや関数 (Vector2, Color, Math…)

ゲームの流れ 開始 終了 初期化 Initialize LoadContent データ読込 データ開放 BeginRun EndRun Update Draw UnloadContent ゲームループ プレイヤーの入力受付 ゲーム状態の更新 ゲーム状態に応じた 画面への描画

ゲームの流れ 開始 終了 初期化 Initialize LoadContent データ読込 データ開放 BeginRun EndRun Update Draw UnloadContent ゲームループ プレイヤーの入力受付 ゲーム状態の更新 ゲーム状態に応じた 画面への描画

ゲームの流れ 開始 終了 初期化 Initialize LoadContent データ読込 データ開放 BeginRun EndRun Update Draw UnloadContent ゲームループ プレイヤーの入力受付 ゲーム状態の更新 ゲーム状態に応じた 画面への描画

絵はどやって出すの？ なんかオーバーロードいっぱいあるけど、必要な ときに必要なやつを適当に使えばいいよ！ SpriteBatch.Draw (Texture2D, Vector2, Color)

絵はどやって出すの？ なんかオーバーロードいっぱいあるけど、必要な ときに必要なやつを適当に使えばいいよ！ SpriteBatch.Draw (Texture2D, Vector2, Color)

文字はどやって出すの？ なんかオーバーロードいっぱいあるけど、必要な ときに必要なやつを適当に使えばいいよ！ SpriteBatch.DrawString (SpriteFont, String, Vector2, Color)

文字はどやって出すの？ なんかオーバーロードいっぱいあるけど、必要な ときに必要なやつを適当に使えばいいよ！ SpriteBatch.DrawString (SpriteFont, String, Vector2, Color)

素材はどうやって読み込むの？ Content.Load<アセットの種類>(アセット名) 例えば ・ this.Content.Load<Texture2D>(@"Content¥image¥player") ・ this.Content.Load<SoundEffect>(@"Content¥sound¥bgm")

素材はどうやって読み込むの？ Content.Load<アセットの種類>(アセット名) 例えば ・ this.Content.Load<Texture2D>(@"Content¥image¥player") ・ this.Content.Load<SoundEffect>(@"Content¥sound¥bgm")

音はどうやって出すの？ let bgm = this.Content.Load<SoundEffect>(@"Content¥sound¥bgm") bgm.CreateInstance() .Play() CreateInstanceメソッドで、サウンドの単一 再生、一時停止、または停止を制御可能 なSoundEffectInstanceインスタンスが作ら れる。そして、あとはPlay()するだけ。

音はどうやって出すの？ let bgm = this.Content.Load<SoundEffect>(@"Content¥sound¥bgm") bgm.Play()

ゲームロジックはどう書けば？ type Game1 () as this = inherit Game() override this.Update(gameTime) = … override this.Draw(gameTime) = … Update : プレーヤーやゲームの状態を更新する処理を書く Draw ：プレーヤーやゲームの状態に応じた描画処理を書く

ゲームロジックはどう書けば？ type Game1 () as this = inherit Game() override this.Update(gameTime) = … override this.Draw(gameTime) = … Update : プレーヤーやゲームの状態を更新する処理を書く Draw ：プレーヤーやゲームの状態に応じた描画処理を書く

ウィンドウを出す方法は？ module Program = [<EntryPoint>] let main (args : string[]) = use game = new Game1() game.Run() 0 GameクラスのRun メソッドを呼ぶだけ！

ウィンドウを出す方法は？ module Program = [<EntryPoint>] let main (args : string[]) = use game = new Game1() game.Run() 0 GameクラスのRun メソッドを呼ぶだけ！

入力を受取りたいんだけど？ Keyboard.GetState().IsKeyDown (Keys) Keyboard.GetState().IsKeyUp(Keys) Keyboard.GetState().GetPressedKeys() さまざまなメソッドで、キーボードの入力状態を容易に取得できる。 マウス、ゲームパッド(Xbox360コントローラー）、タッチや加速度セン サー(WindowsPhone）なども、プラットフォームや環境に応じて容易 に取得できす。

入力を受取りたいんだけど？ Keyboard.GetState().IsKeyDown (Keys) Keyboard.GetState().IsKeyUp(Keys) Keyboard.GetState().GetPressedKeys() さまざまなメソッドで、キーボードの入力状態を容易に取得できる。 マウス、ゲームパッド(Xbox360コントローラー）、タッチや加速度セン サー(WindowsPhone）なども、プラットフォームや環境に応じて容易 に取得できす。

ちいさなサンプル  Demo

Ｆ#  Ｍｉｃｒｏｓｏｆｔ社製のマルチパラダイム言語。  ＯＣａｍｌ, Ｈａｓｋｅｌｌなどの関数型言語に強い影響を受け、さま ざまなアイディアの元に作られた最先端の言語。  .ＮＥＴ Ｆｒａｍｅｗｏｒｋ上で動作し、.NET の最新テクノロジ を利用できる関数型言語。  オープンソース  Ｃ＃er, ＶＢerが関数型をはじめるならコレできまり！

マルチパラダイム 関数プログラミング 言語指向 プログラミング メタプログラミング オブジェクト指向 手続型 プログラミング

マルチパラダイム 関数プログラミング オブジェクト指向 メタプログラミン グ 言語指向 手続型 プログラミング プログラミング

02関数プログラミングを学ぶことの重要性 エドワード・ガーソン(Edward Garson)

関数プログラミング 関数（機能/式）の集まりとして表現する 関数は第一級（ファーストクラスオブジェクト）として扱う 副作用がない（あるいは、少ない） 操作は入力を出力にマップ（写像）するのが基本

関数型言語の利点 並列/並行プログラムの容易性

関数型言語の利点 並列/並行プログラムの容易性

関数型言語って難しいんでしょう？ 簡単だというと嘘になりますが、 「泣きたいくらい難しい。」ということはないので、 まずは書き始めてください、Ｆ#を。 それが第一歩です。

.ＮＥＴのテクノロジ WindowsForm ASP.NET WPF Azure Silverlight XNA

.ＮＥＴのテクノロジ WindowsForm ASP.NET WPF Azure Silverlight XNA

Ｆ＃ ＋ ＸＮＡ ＋

なぜＦ＃ + ＸＮＡなのか

なぜＦ＃ + ＸＮＡなのか

なぜＦ＃ + ＸＮＡなのか

Ｆ＃ ＋ ＸＮＡ  ＦＲＩＥＮＤＬＹ Ｆ＃ with game development and XNA  著者：Giuseppe Maggiore ジュゼッペ ・マジョーレ  販売：Ｓｍａｓｈｗｏｒｄｓ.com  販売形式：ＥＢｏｏｋのみ  内容：シミュレーション（物理、ＡＩ等） ゲーム開発に焦点を当て、関数型言 語Ｆ＃２.０とＸＮＡ４.０を使って解説。  http://goo.gl/i9pRa

関数型言語で 手軽にゲームが作れる時代  関数型言語でゲームが手軽に作れちゃう時代が来てた。 （意識していなかったけど、とっくに来てた！） → せっかくだから、俺はこのＦ＃でゲームを書くぜ！

Ｆ#ってゆーか、関数型言語で ゲームプログラミングとか無理ゲーじゃね？  ゲームプログラミング（ゲームループ）は状態が変化し続ける ことに着目したパラダイムです。  「状態をなるべく持たない。」、「破壊的代入を好まない」 関数型言語との相性はわるいのでは？

Ｆ#ってゆーか、関数型言語で ゲームプログラミングとか無理ゲー？  ゲームプログラミング（ゲームループ）は状態が変化し続ける ことに着目したパラダイムです。  「状態をなるべく持たない。」、「破壊的代入を好まない」 関数型言語との相性はわるいのでは？

開発準備  Visual Studio 2010 Shell (Integrated) 再配布可能パッケージ http://goo.gl/6MsC2  Visual C# 2010 Express http://www.microsoft.com/japan/msdn/vstudio/express/  F# CTP http://goo.gl/NMmCU  XNA Game Studio 4.0 APP HUB – [関連情報] – [ダウンロード]より http://create.msdn.com/ja-JP

• http://goo.gl/6MsC2
• http://www.microsoft.com/japan/msdn/vstudio/express/
• http://goo.gl/NMmCU
• http://create.msdn.com/ja-JP

模倣で学ぶゲームプログラミング       新しいアイディア、新しいゲームデザインは難しい。 真似って大事。 どこまで真似をできるか。 もっとよくできそうな部分はないか探す。 自分のアイディアを盛り込む。 絵や音楽づくりはプログラミングとはまた違ったおしごと。

ぷよぷよのざっくりとしたルール ・２つでひと組で、ぷよの組が落下してくる。 ・落下してくるぷよの組の色の組合せはランダム。 ・落下中のぷよの組は、プレイヤーにより移動・回転の操作ができる。 ・同じ色のぷよが４つ以上つながると消える（ぷよの消去）。 ・ぷよの下に障害物がない場合、障害物に接地するまで落下する。 ・ぷよの消去と落下の繰り返しにより連鎖が発生する場合がある。 ・ぷよを配置できない状態になったら窒息（ゲームオーバー）。 ・フィールド上のすべてのぷよを消去すると「全消し」となり得点を得る。

ぷよぷよのゲームの状態 代表的なゲームの状態         ゲームオーバーかどうか ポーズ状態かどうか 現在の得点 消したぷよの数 落下中のぷよの組の状態 NEXTぷよの状態 フィールドの状態 ...

ぷよぷよのゲームの状態  ぷよぷよのゲーム状態を表すレコード型

フィールドの表現 フィールド上のぷよ配置 状態を表現するには？

フィールドの表現  横６×縦１３の〼に区切る

フィールドの表現  X座標とY座標で表せる  ２次元配列で表現できそう

フィールドの表現 色ごとに異なる値を設定することで、 フィールドのぷよの配置を表現する

フィールドの表現 ぷよが配置されていない場所も埋める。

色の表現

色の表現

色の表現  enum (列挙型)で色違いのぷよを表現する。フィールドに ぷよが配置されていない状態 n も定義する。

フィールドの表現 落下中のぷよは、確定していないので、 フィールド上は、配置がないものする。

フィールドの表現（余談）  実は、１次元配列で表現できる ※数字は配列のindexを表す  数字が黄色のindexは壁を表す

落下中のぷよの表現  ３×３〼で考えて、配列の配列として表現

落下中のぷよの回転  右回転（360度回転の流れ）  左回転（360度回転の流れ） ※ 赤ぷよを回転軸とした場合。

落下中のぷよの回転  右回転（90度回転）  ３×３〼のそれぞれの位置に数字で名前を付けたと します。  回転に関係のある数字のみに注目して考えます。 ※ 赤ぷよ（４の位置）を回転軸としています。

落下中のぷよの回転  右回転（90度回転）  ９０度回転  １と５を入替える。  ５と３を入替える。  ７と５を入替える。

落下中のぷよの回転  右回転（90度回転）

落下中のぷよの回転  右回転（90度回転）

落下中のぷよの回転  右回転（90度回転）  図はイメージ

落下中のぷよの回転  右回転（90度回転）  ぷよの回転方向に壁やぷよなど障害物が存在する場合、 そのまま 回転させることが出来ないので回避する処理が必要。

ぷよ回転時の障害物の回避  右回転（90度回転）後の位置に障害物がある場合  赤ぷを回転軸とした場合、障害物があるので右回転ができない。  障害物を回避して回転させる必要がある。

ぷよ回転時の障害物の回避  右回転（90度回転）後の位置に障害物がある場合  ９０度右回転すると障害物に衝突 するので、左に移動する。  左に移動した後、９０度右回転する。

ぷよの移動 判別供用体(Discriminated Union、DU)  ぷよが移動可能な方向は、左右と下。  ぷよの落下もmove関数を利用。 パターンマッチ match direction with | Right -> {ps.current with position = x + 1, y } | Left -> {ps.current with position = x - 1, y } | Down -> {ps.current with position = x , y + 1 } というように、書くのが一般的。

そもそも回転ができない場合  回避丌可能な障害物 があり、右回転も左回 転もできない。  回避および回転可能 かどうかを判断する必 要がある。  実装例ではavoidance 関数で行っている。 ※ 赤ぷよを回転軸とした場合。

ぷよの生成とＮＥＸＴぷよ 現在落下中のぷよ 次に落ちてくるぷよ 次の次に落ちてくるぷよ  ぷよの組はＮＥＸＴぷよの表示のめ にも３組生成しておく必要がある。

ぷよの生成とＮＥＸＴぷよ  ぷよの組はＮＥＸＴぷよの表示のめ にも３組生成しておく必要がある。  ぷよの組の色の組合せはランダム とする。  レベルに応じて生成するぷよ組の 色数を変える。 レベル００１～レベル００２ ・・・ レベル００３～レベル００４ ・・・ レベル００５～レベル９９９ ・・・

ぷよの生成とＮＥＸＴぷよ  消去したぷよに応じたレベルを返す関数を定義 消したぷよの数  ４０個ぷよを消すごとに「＋１」したレベルを返す。  ただし、最大レベルは９９９とする。

ぷよの生成とＮＥＸＴぷよ 雑なランダム生成 ぷよの組(puyoObj)の生成

ぷよの組  ぷよの組を表すレコード型

ぷよの接地と確定

ぷよの接地と確定

ぷよの接地と確定  フィールド上の「０」は省略していま す。落下中ぷよはフィールド上で は「０」。  ＧａｍｅクラスのＵｐｄａｔｅメソッドでゲームの 状態を更新するときに、落下中のぷよ組の 座標Ｙに１を加算する。つまり、move関数に Direction.Downを指定して呼び出すことで 表現できる。  床あるいはぷよに接地した場合、はじめてフ ィールド上に確定させる。 床に接地（Yは12まで）するか、ぷよに接地（Y+１の位 置が「０」ではない場合）するまでは落下し続ける。

重力によるぷよの落下

重力によるぷよの落下

重力によるぷよの落下

重力によるぷよの落下

ぷよの落下  フィールドの座標において、Y＋１の位置が「０」であるも のすべてについて、ぷよをY＋１へひとつずつずらす。

ぷよの連結と消去判定

ぷよの連結と消去判定  ぷよがいくつ連結しているかを調べる関数が 必要。  最も簡単な連結ぷよの個数チェックと消去ア ルゴリズムは、フィールド上の座標ごとに同色 ぷよの連結を再帰的に探索し保持しておきま す、連結ぷよが４つ以上隣接していれば消す というものです。その際、１度調べた座標につ いてはチェック済みとして、再度チェックしな いようにするという方法です。  左の絵の赤ぷよがいくつつながっているかを 例に考えてみます。

ぷよの連結と消去判定

ぷよの連結と消去判定 探索部分に着目してみます。

ぷよの連結と消去判定 再帰関数を表す。

ぷよ連結の描画 b はビットを表す。  上下左右の４方向で繋がる可能性があるので、４桁の２進数で表せる。  つまり単独の時も含めて、 １６パターンの絵が必要なことがわかる。  Union型は、C#やVBで言うところの FlagsAttributeでマークした列挙型。

ぷよ連結の描画  ぷよがいくつ連結しているかを調べる関数が必要。

ぷよ連結の描画

連鎖  ぷよの消去処理と、重力による落下処理の繰り返しで表現できます。

得点計算 n は連鎖数を表す（連鎖ごとに計算が行われる） n  得点 = Σ { Ａ n × （Ｂ n ＋ Ｃ n ＋ Ｄ n ） } k=1     Ａ = 基本得点（消したぷよの数 × １０ ） Ｂ = 連鎖ボーナス Ｃ = 連結ボーナス Ｄ = 複色ボーナス

連鎖ボーナス  連鎖ボーナス Ｂ は、連鎖数に応じたボーナス。 連鎖ボーナス表 連鎖数 1 2 3 4 5 ボーナス 0 8 16 32 64 6 7 8 9 10 11 12 13 14 15 16 17 18 19 96 128 160 192 224 256 288 320 352 384 416 448 480 512  連鎖数が多いほど得点が多く得られる。  最大連鎖の理論値は１９連鎖。

連結ボーナス  連結ボーナス Ｃは、同時に消したぷよの数に応じたボーナス。 連結ボーナス表 同時消しぷよ数 ボーナス 4 0 5 2 6 3 7 4 8 5 9 6 10 7  同時消し数が多いほど得点が多く得られる。  １１以上連結した場合のボーナスは１０。 11 10

複色ボーナス  複色ボーナス Ｄは、同時に消したぷよの色数に応じたボーナス。 複色ボーナス表 消した色数 ボーナス 1 0 2 3 3 4 5 6 12 24  同時に消した色の数が多いほど得点が多く得られる。

落下ボーナスと全消しボーナス 落下ボーナス  ぷよの組が落下中にＤｏｗｎキーを押しっぱなしにすることで得ら れる得点のことで、 フィールド１マスごとに１点得ることができる。 全消しボーナス  全消しボーナスとは、ぷよを消去する処理が行われた後、フィール ド上にぷよが１つも存在しない場合に得られるボーナス。  ３６００点 + (現在のLEVEL × ５)点

全消し判定  フィールドのすべてがPuyoColors.n （「０」）である かどうかをチェックするだけです。  全消しの場合、得点にボーナス点を加算する。

LEVEL判定 ４０個消すごとにLEVELが１上がる  計算量のことを考えると、ぷよぷよのゲーム状態 としてLEVELを持たせて、都度状態を変更した方 がよさそうな気もしなくもないですが、レベルに応 じて生成するぷよの色数を変えたりする都合上、 このように、現在のLEVELを毎回計算するように、 ステートレスな仕組みにしておいた方がしっくりく る場合も。  計算量も少ないので今回は許容する。

スコアの保存  XNAではストレージで保存/読込する機能があらかじめ用意されていま  Windowsゲームでは、マイドキュメントのSavedGamesフォルダにデータが 格納されます。  XBOX３６０の場合はストレージの選択処理なども絡んできます。

スコアの保存

スコアの読込  保存とは逆に、デシリアライズして読み込むだけです（ぇ  ＸＮＡでストレージを扱う仕組みを用意してくれているのは嬉しいのです が、どうしても記述が冗長になってしまうんですよねえ…。  nullとか書きたくないですし…。

ゲームの状態を描画する とことんF#よぷよ！で 使用した画像は７枚  Gameクラスの派生クラスのUpdateメソッドで更新したPuyoState（ゲーム の状態）に応じて、Drawメソッドで描画するだけ！

アニメーション  C#で書く場合は、アニメーション専用のクラスを記述するのが一般的なよ うですが、F#ではいちいちクラスつくのメンドイよねってことで、ちょっとした 副作用の表現であれば、クロージャーで書いたほうがシンプルです。  えろい人はStateMonadとか言い出すので注意しましょう。

おすすめの書籍

おすすめの書籍

おすすめの書籍

ご清聴ありがとうございました。