M5Stack Core2でゲーム開発入門 その1 オセロの基礎と画面描画

概要

これまで要素技術のパーツ単位での紹介が主だったのですが、環境を限定して実際に組み合わせて利用した場合の説明もしていきたいと思います。ただしあまり作り込んでしまうとマニアックになってしまいますので、改良する余地があるものにしておくつもりです。

最初の題材はオセロにしたいと思います。10年以上前に新人教育として使っていた題材なのですが、結構奥が深いです。とはいえ、このブログなので導入までが長いです。ゲームとして成立させるための準備にも文字をさきたいと思います。

オセロとは?

ルールはみなさんご存知だと思います。長谷川五郎先生によって開発された国産ゲームですね。

当初はツクダから販売されており、ツクダオリジナルに社名変更。その後バンダイ系列になりパルボックス、メガハウスと変わってきています。

リバーシというゲームもありますが、実はちょっとルールが違います。オセロという名前が商標登録されているので、勝手に使うことができません。しかしながらリバーシもアメリカなどではオセロの権利侵害となり、なかなか使えないようです。

某OSにむかーしリバーシが入っていましたがマインスイーパに入れ替えられましたね。

オセロのルール

オセロのルールは冒頭でみなさん知っていますよねと書いてありますが、たぶんちゃんと知っている人は少ないと思います。

ただ、上記の日本オセロ連盟の競技ルールにもオセロ自体のルールは記述していません。これは結構珍しい気がして、ローカルルールがないので書いてないのでしょうね。

このページに書いてありました。

ざっくりですが、上記が初期配置の盤になります。オフィシャルは緑の盤で、白と黒の石ですね。この初期配置もルールとして決まっています。そして先手は黒からになります。

初手の黒番ですが、初期配置では①から④までの4箇所に置くことができます。一般的に①の場所に打つののが好ましいとされています。定石と呼ばれるよく打たれる手筋もこの①から開始されているものになっていると思います。

これは囲碁などでも初手は右上に打つ事が多いことと一緒です。ルールではないのでどこから打っても構いません。右利きの人が打ちやすい場所って意味ですので、雑学程度に覚えておいてください。

さて、ルールに戻りますがオセロは二人零和有限確定完全情報ゲームです。詳しいことは各自調べてみてください。ゲームの設計をする場合にはこの辺のことを考慮して作る必要があると思います。今回はオセロという既存の題材なので割愛します。

基本ルールとして、二名が順番に石を置いていきます。相手の石を自分の石で挟むことでひっくり返すことができ、そしてひっくり返らない場所に打つことはできません。終了した段階で石の色が多い方が勝利となります。

上記では実はルールが足りておらず、石が置けない場合にはパスとなり、相手の手番となります。このパスのルールを忘れていて、途中で何も操作できなくなるのも定番のバグです。

さて、実際にはこれでもルールが漏れています。終了条件がもう少し必要なのです。

終了条件

  • 64マスすべて埋まった場合(通常の終了)
  • おけない場所に置いた(ルール違反)
  • 時間切れ(多くの場合時間制限が必要)
  • お互いに置く場所が無くなった場合(全滅等)

ざっくりと、上記の条件になります。1番目がわかりやすい終了ですね。2番目は実際のリアルオセロではありますが、ゲームでプレイする場合にはそもそも置けないようにすることが多いです。タッチパネルで間違った場所をタッチして負けって辛いですよね?

3番目は相手が放置したら、どこかで終わるようにしておかないとゲームとして成立しません。4番目が非常に抜けやすいルールです。わかりやすいのが途中で全滅して一色になった場合ですが、最後の1マスがどちらも挟むことができないなどの局面にも良くなります。64マスすべて埋まった状態も、お互いに置く場所がなくなった場合なので、実は時間切れ以外はこの判定でかまいません。

開発環境

M5Stack Core2を利用してArduino IDEで開発をしたいと思います。また、M5Stack社の標準ライブラリではなく、自作互換ライブラリのM5Liteを利用していきます。

M5Stack Core2本体は国内代理店がスイッチサイエンスさんで、概ね5千円強の価格となっています。上にあるAmazonなどの高い商品は並行輸入品で、正規価格より高くなっているので注意してください。

国内店頭販売しているものはすべてスイッチサイエンスさん経由の販売のはずで、どこで購入しても価格の差は少ないはずです。

ゲーム系のサンプルも作ってみたかったのですが、操作系に問題が出やすいのでタッチパネルのM5Stack Core2に限定して今回チャレンジしてみたいと思います。

Arduino IDE

まずはESP32の開発ができる環境を準備してください。

上記からArduino IDEをダウンロードしてください。

Windows環境の人は、Windows app版ではなくWindows Installer版を使うのがよいでしょう。

上記に細かい環境についての差異を説明しています。

ESP32のボードURL登録

環境設定にある、追加のボードマネージャのURLにESP32のURLを追加します。

設定するURLは上記のページに書いてあります。

https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json

たまに変わることがあるのですが、上記のjsonファイルになります。

ボード追加

「ツール」→「ボード」→「ボードマネージャー」を開きます。

ESP32で検索すると上記のようにEspressifのボードが出てきますので、インストールします。これで基本的な開発ができるようになります。

ライブラリのインストール

「ツール」→「ライブラリを管理…」でライブラリマネージャを開きます。

M5Liteで検索すると「ESP32 Lite Pack Library」が出てきますのでインストールします。

そのとき依存しているライブラリも一緒に入れるか聞かれるので、一番左の「Install all」を選びます。

ボードの選択

「ツール」→「ボード」からESP32の中にある「M5Stack-FIRE」を選択してください。本当は追加するボードのURLをM5Stackが準備しているものにすることで「M5Stack-Core2」も選択できるのですが、あまり一般的じゃないので標準的な設定で開発をしたいと思います。どちらを選んでも、細かい設定が違うだけで同じように開発することはできます。

初期スケッチ例

#include "M5Lite.h"

void setup() {
  // 初期化処理
  M5Lite.begin();

  // 画面全体を灰色に塗り潰し
  M5Lite.Lcd.fillScreen(TFT_LIGHTGREY);

  // 緑の盤面を描画
  M5Lite.Lcd.fillRect(43, 3, 232, 232, TFT_GREEN);

  // 線を描画
  for (int i = 0; i < 9; i++) {
    M5Lite.Lcd.drawFastHLine(43, 3 + 29 * i, 233, TFT_BLACK);
    M5Lite.Lcd.drawFastVLine(43 + 29 * i, 3, 233, TFT_BLACK);
  }

  // 石を描画
  M5Lite.Lcd.fillCircle(44 + 29 * 3 + 13, 4 + 29 * 3 + 13, 12, TFT_WHITE);
  M5Lite.Lcd.fillCircle(44 + 29 * 3 + 13, 4 + 29 * 4 + 13, 12, TFT_BLACK);
  M5Lite.Lcd.fillCircle(44 + 29 * 4 + 13, 4 + 29 * 4 + 13, 12, TFT_WHITE);
  M5Lite.Lcd.fillCircle(44 + 29 * 4 + 13, 4 + 29 * 3 + 13, 12, TFT_BLACK);
}

void loop() {
  // ウエイト
  M5Lite.Ex.delay(1000);
}

まずは上記を動かしてみてください。

上記のような画面がでたと思います。この画面はM5Stack Core2にSDカードを挿入した状態で実行してから、「ツール」→「シリアルモニタ」を選択します。

起動時に上記のような画面が表示されます。初回起動時はちょっと時間がかかるかもしれません。

この画面で上のテキストバーにコマンドを入力することができます。

?マークでヘルプが出てきます。この画面はスケッチのloop()関数の中でM5Lite.Ex.delay()関数を呼び出すことで処理をしていますので、必ず定期的に呼び出すようにしてください。

スクリーンショット

コマンドラインで「SCREENSHOT」を送信すると、M5Stack Core2のSDカードに表示されている画面がBMPファイルに保存することができます。この画像が上にあった画面になります。

SDカードを入れていない状態で起動すると保存できないのでSDを入れてから「RESET」コマンドで再起動してください。これはそのうち修正する予定です。。。

Wi-FiとRTCの設定

直接は関係ないのですが、どうせならWi-FiとRTC(時計)を設定しておくのが推奨です。

#include "WiFi.h"
#include "M5Lite.h"

M5Lite.hより先にWiFi.hを読み込むことでWi-Fi系のコマンドが有効になります。

HELPをみると「WIFI」と「NTP」が増えています。SSIDとKEYを実際の接続できるものに変更してコマンドを投げます。

上記のように…が増えて接続してIPアドレスが取得できれば成功です。この状態で同じように「NTP」コマンドを実行すると、インターネット上のNTPサーバーから現在時刻を取得して、本体内のRTCに反映させます。

一度NTPと同期しておくことで、SDカードにスクリーンショットを保存したときに正しい時刻設定で保存されます。RTCが設定されていないと電源を入れてからの継続時間となってしまいますので注意してください。

まとめ

さて、今回はオセロのルールと描画をやりました。しかしながら、今回描画した画面は使いません。今どきラインで線を引くことはないですよね。次回は画像を準備して描画をしたいとお見ます。

しかし、タッチパネルであの大きさのオセロを操作するのは大変かもしれません。。。

コメント

タイトルとURLをコピーしました