一緒にテトリス作ってみましょう！(5)

こんにちは。
今日は全国的に雨模様だったみたいですね。雨の春の日、みなさんはいかがお過ごしでしょうか？

今日は画面に四角を描いてみます。
まず、xaml ファイルに描画を行う場所を確保しましょう。
MainPage.xaml の <ScrollView> の中に、<GraphicsView> を作ってみます。
これで場所は確保できました。

次に、四角を描くプログラムを MainPage.xaml.cs に作っておきましょう。
GraphicsView に描画を実行するための class を作ります。
（前回解説したように、class は１つの役割を担当するチームのイメージで作っていってください。）
ゲームフィールドの描画を担当してもらおうと思っているので、class 名は GameField にしました。

class MainPage の下に新しく class を作成しましょう。

描画を担当するので、IDrawable というインターフェイスを実装する必要があります。インターフェイスについては後日解説しようと思います。
このアプリが実行され、画面表示が始まると、Draw がシステムから呼び出されます。
その際、canvas を利用していろいろなものを描画することができます。今は四角を描くだけにしていますが、canvas. と入力すると、他にも様々なものが描画できそうだと分かりますので、是非いろいろと試してほしいです。

FillRectangle には４つの数値を指定していますが、これら４つの数値の意味も、canvas.fillre あたりまで入力すると説明が出てきますので、何も知らなくても案外いろいろな図形を描くことができます。

４つの数値の意味は「x座標、y座標、横幅、高さ」であると分かります。

コンピュータ画面上の座標は、数学で考える座標と縦軸の方向が逆になるので、その点に注意してください。

---

次に、<GraphicsView> のところと、class GameField を結び付けなければなりません。
前回までの解説で、class GameField は、正確には class MauiTetris.GameField であると分かってもらえると思います。
そのため、まずは xaml ファイルに MauiTetris という名前空間を認識してもらいます。
<ContentPage> の設定に１行追加します。

MainPage.xaml の一部

前回までの解説で、「ns_MauiTetris:タグ」と書くと、タグが 
「clr-namespace:MauiTetris.タグ」の意味で解釈されると分かります。
clr-namespace というのは、プログラム中にある名前空間、という意味です。
実際に使ってみましょう。以下のように３行を追加します。

ns_MauiTetris:GameField は、プログラム中の class MauiTetris.GameField を指すことになります。
そしてこれを <ContentPage.Resources> とすることにより、
この <ContentPage> が表示される際に、リソースとして
class MauiTetris.GameField（のインスタンス）が準備され、それは x:Key で指定された名前で利用できるようになります。
インスタンスについても、後日説明したいと思っています。

リソースとは、直訳すれば「資源」ですが、プログラムで「利用することができる部品」と考えれば良いでしょう。

これで、プログラム中にある class GameField（正確にいえば、GameField のインスタンス）が、R_GameField という名前で xaml ファイル内で利用できるリソースとして準備できたので、これを <GraphicsView> に渡します。

以上により、<GraphicsView> が表示されるとき、class GameField の Draw が呼び出されるようになります。
実際に F5 キーを押して試してみましょう。

とりあえず黒い四角を表示できました。
表示位置やサイズは適当ですがw。

---

これで目標は到達できましたが、これを Android で実行すると、黒い四角が画面の外にはみ出てしまったりしています。
このあたりの調整は最後にすることにしましょう。
まずは、Windows でテトリスが動作できるようにすることを目指します。

なかなかテトリス作りが進まなくてすみませんが、通勤時間や休憩時間のちょっとしたときに、息抜きに読んでもらえると嬉しいです。
それでは。