feature image

2021年4月14日 | ブログ記事

m5stack-core2でポケッチを作ろう

新歓ブログリレー2021 37日目の記事です。

こんにちは。 20B の @toshi00 です。
大学に入ってからプログラミングを始めて、雰囲気でプログラムを書いてます。

2021年2月27日、午前0時。

覚えていますでしょうか? 2021年2月27日、午前0時。

ポケモン公式YouTubeチャンネルで「Pokémon Presents」が放送されました。

そこで発表されたのが……
『ポケットモンスター ブリリアントダイヤモンド・シャイニングパール』 です!!

ついにダイパリメイク登場です!!! 2021年冬 予定!!! 本当に楽しみだなぁ。

トップページ|『ポケットモンスター ブリリアントダイヤモンド・シャイニングパール』公式サイト
『ポケットモンスター ブリリアントダイヤモンド・シャイニングパール』公式サイト。『ポケットモンスター』シリーズ最新作 2021年冬、Nintendo Switchに登場!
うおーー楽しみ〜〜

ところで気になるのが、「Nintendo Switchでポケッチがどう実装されるのか」です。DSはその名の通り、上下に2画面ありますが、Switchは1画面ですからね……

発売は、2021年冬かぁ待ちきれないなぁ。ん?おや、こんなところに野生のM5StackCore2が……?(唐突)

そうだ、ポケッチ 作ろう。

ポケッチで思い出のダイパを現実に!

ポケッチって?

なにそれおいしいの?

ポケッチ(正式名称はポケモンウォッチ)とは、ポケットモンスター ダイヤモンド・パール・プラチナに出てくる、各地の人から貰うなどしてアプリという様々な機能を持ったものを追加していくことができる便利アイテム。通常はニンテンドーDSの下画面に表示され、右のボタンにタッチして次のアプリに進めることができる。ガールズモデルとボーイズモデルとで色が違う(前者は赤、後者は青)。
https://wiki.ポケモン.com/wiki/ポケッチ#

コトブキシティで買えるらしいです。ゲームでは、町の中央にいるおじさんからもらえます。

♫ピンクに輝く自慢のポケッチ迷った時にはコイントスをして〜〜

でおなじみのこれです。これは名曲!!!

一般のご家庭にあるM5Stack Core2

35bc8e26-6c20-48b9-98fa-859ac2ab36fb
タッチディスプレイ・スピーカー・バイブレーション機能などが搭載されたマイコンです。Wi-FiとBluetoothも使えます。

Arduinoボードなどは基盤むき出しでいかにもマイコンってかんじですよね。それに対して、M5Stackシリーズはケースに入ってスッキリした見た目。機能豊富で、さらに拡張用の部品もたくさん売ってます。IoTにあこがれてポチってしまいました。

Arduino言語・UIFlow・MicroPythonが開発で使えます。
M5stackシリーズ第2世代で、2020/9/1に発売されました。5,225円!!
他のM5stackシリーズと比べると少し高価ですが、タッチディスプレイが気になります👀
販売サイト

ポケッチを作ろう

M5StackCore2 を使ってポケッチを作ります。
今回はArduino言語を使います。これはC/C++をベースにして開発されたプログラミング言語です。
また、画面描画ライブラリLovyanGFXを使用します。

今回作った機能は4つ
①デジタル時計 ②メモ帳 ③歩数計 ④コイントス

です

コード全体はこちらに置いてあります。
ひどいコードだけど動いてるからよし!

toshi-pono/poketch
M5Stack-core2を使ったポケッチ風アプリケーション. Contribute to toshi-pono/poketch development by creating an account on GitHub.

デジタル時計

ポケッチといえば時計!!

M5Stack Core2はWi-FiとBluetoothに対応しています。自宅のWi-Fiに接続して、ntpサーバーから時刻を取得し、M5stack内のRTCを設定します。

一定時間ごとに、RTCから時刻を取得して描画すれば時計の完成です。
ただ、ポケッチらしいカクカクのフォントが見つかりません……ということで、数字は四角形を組み合わせて描画しました。(今思えば画像を作成して,描画でも良かったかもしれません)

ピカチュウの画像を作成して画面下に描画すれば完成。これだけでだいぶ達成感!ポケッチだ―――!!
ピンクホワイトに輝く自慢のポケッチ!!

メモ帳

「せっかくのタッチディスプレイを使ってみよう!」 ということで、メモ帳機能を実装しました。

// 触れた座標を取得
TouchPoint_t pos = M5.Touch.getPressPoint();

上のコードで触れた座標が取得できます。前回触れた座標と今触れた座標を直線で結ぶことでペンを実現しました。

ただ、LovyanGFXの直線描画機能だと細い1ドットの線しか引けません。M5Stackは画質がそこそこ良いので、DSのポケッチっぽいドット感が出ませんでした。そこで、直線描画も †いい感じ† に実装しました。
参考:ブレゼンハムのアルゴリズム

歩数計

M5stackCore2には加速度センサーがあります。これも使ってみたい!!

const float LOW_PATH = 0.1F;

// 加速度取得
float accX, accY, accZ;
M5.IMU.getAccelData(&accX, &accY, &accZ);

// 加速度ベクトルの大きさを求める
float nowAcc = sqrt(accX * accX + accY * accY + accZ * accZ);

// ローパスフィルタ
nowAcc = LOW_PATH * nowAcc + (1 - LOW_PATH) * _beforeAcc;

とりあえずセンサーの値はローパスフィルタに通しておきます。
出力値 = a * 前回の出力値 + (1-a) * センサの値

M5StackCore2に地磁気センサーは付いていません。M5Stack本体の向きが、地面に対してどうなっているかを知るすべはありません(たぶん)。そこで、加速度ベクトルの大きさから歩数を求めます。

歩いているとき、人は上下や前後に揺れています。揺れているということは加速度がある程度の周期で増減を繰り返すはず! ここでは、雑ですが加速度ベクトルの大きさが 「基準値を超えた後に、基準値を下回った」 という状態を1歩とカウントしています。実際に歩いてみると、そこそこきれいに歩数が取れます。
参考:3軸デジタル加速度センサーを使用したフル機能の歩数計の設計

これでなぞの場所バグが簡単にできるようになりました。
札幌(≒コトブキシティ)で歩数を数えながら歩いている人がいたら、それはおそらくなぞのばしょに行こうとしてます。
https://wiki.ポケモン.com/wiki/なぞのばしょ

コイントス

意思決定に欠かせないコイントス!!!!!!うおーーーー

コインの表面と裏面、中間という3枚の画像を用意したら、これらを次々と切り替えることでアニメーションさせます。描画位置を鉛直投げ上げ運動って感じで動かしてあげるといい感じ。

ただ、やってみると画面にちらつきが発生しました。
group-1
というのも、M5Stackの性質上コインの描画に約16ミリ秒ほど時間がかかります。そのためコインの描画を行っている約16ミリ秒、背景のみがディスプレイに描画されている状態となります。
このタイムラグが(おそらく)ちらつきを生んでいます。

対策として、画面サイズ1/3程度のスプライトをメモリ上に用意して、背景+コインの描画をスプライトに行い、完了したものをディスプレイに描画しています。描画ライブラリLovyanGFXでサクッとできました。

これでポケモンアニメの有名なあの歌詞

♫ 迷った時にはコイントスをして〜〜〜

が気持ちよくできますね。

あとはこれにバンドをつけて,腕時計にすれば……って
バンドがない!?
M5stack第一世代向けのバンドは販売していたらしいのですが、それもほとんど品切れ。想像で補ってください(涙)

※ M5stack第一世代向けのバンドがM5stackCore2にも使えるかもわかりません

最後に

色々ありましたが、無事にM5StackCore2でポケッチっぽいものを作ることができました。これでダイパ気分を味わうことができますね。
ダイパリメイク楽しみ〜〜〜

明日の担当者は @liquid1224さん、 @kashiwadeさん、 @Amidadegomen_02さん です。よろしくおねがいします!

toshi00 icon
この記事を書いた人
toshi00

20B SysAd班に所属しています

この記事をシェア

このエントリーをはてなブックマークに追加
共有

関連する記事

2021年3月19日
traPグラフィック班の活動紹介
NABE icon NABE
2021年4月2日
DXライブラリで重力パズルゲームを作る
Macky1_2 icon Macky1_2
2021年4月17日
競プロと CTFの 体験会(CPCTF) を開催します!
Hmcmch icon Hmcmch
2021年3月24日
traQのメンション・チャンネルリンク機能について【新歓ブログリレー16日目】
reyu icon reyu
2021年3月15日
Qアノンを知ろう!
Azon icon Azon
2021年4月29日
UnityでEvalを実装して、そしてゲームも作っちゃおう
Renard icon Renard
記事一覧 タグ一覧 Google アナリティクスについて