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

2020.11.12

概要

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

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

オセロとは？

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

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

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

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

オセロのルール

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

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

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

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

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

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

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

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

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

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

終了条件

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

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

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

開発環境

開発ボード Core2 開発キットデュアルコア32ビット240Mhz LX6プロセッサー UIFlow、MicroPython、Arduino に対応
開発ボード Core2 開発キットデュアルコア32ビット240Mhz LX6プロセッサー UIFlow、MicroPython、Arduino に対応
Makerfire
改善：Core2は、元の世代のコアの機能をさらに拡張します。 MCUはESP32モデルD0WDQ6-V3であり、個別に制御できるデュアルコアX t e n s 32ビット240Mhz LX6プロセッサを備えています。 WiFiおよびBluetoothは標準でサポートされており、オンボードの16MBフラッシュおよび8MB PSRAM、充電、プログラムのダウンロードおよびシリアル通信用のUSB TYPE-Cインターフェース、2.0インチの統合型静電容量式タッチスクリーン、および内蔵振動モーターが含まれています
Amazonの商品レビュー・口コミを見る

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

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

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

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

Arduino IDE

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

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

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

Arduino開発環境の選び方(2020年10月)
概要 Arduinoの開発環境は複数あるので、その一覧と特徴などを説明したいと思います。基本的にはArduino IDEを利用するのが基本となります。 Arduino純正開発環境 Arduinoの純正開発環境は上記のURLからアクセスするの...
lang-ship.com
2020.10.27

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

ESP32のボードURL登録

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

  • https://github.com/espressif/arduino-esp32/blob/master/docs/arduino-ide/boards_manager.md

設定する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が設定されていないと電源を入れてからの継続時間となってしまいますので注意してください。

まとめ

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

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

続編

M5Stack Core2でゲーム開発入門 その2 データ構造
概要 前回は導入まで終わらせました。今回は基本的な画像描画とデータ構造を説明したいと思います。 画像描画 #include "M5Lite.h" static LGFX_Sprite spriteBan(&M5Lite.Lcd); // R...
lang-ship.com
2020.11.20

コメント