hitode909の日記

以前はプログラミング日記でしたが、今は子育て日記です

マサワダスロットポータブル

全国のマサワダスロットファンに朗報!!あのマサワダスロットがポータブルデバイスで遊べるようになりました!!
バッテリーが内蔵されているので、いつでもどこでも、ジョギング中でもマサワダスロットで遊ぶことができます!!

M5Stack

M5StackはArduino言語を動かせるデバイスで、ディスプレイがついていたり、ボタンがついていたり、microSDを読み書きできたり、Wi-Fi、bluetoothにもつながる、というものです。
以前触ったArduinoと比べると、箱に入っていて、とっちらかっていないのが魅力的なのと、LED光らせていた時代と比べると、ディスプレイがついてて画像を出せるのはおもしろそう。
開発中もこれをUSBケーブルでPCにつなげば完結していて配線もスッキリしている。

f:id:hitode909:20201220121321j:plainf:id:hitode909:20201220121307j:plain
スッキリしている

実装

Arduino IDEでコードを書いて実機で動かす形で開発していきます。4年前に買ったMacBookで開発していたところ、コンパイルに30秒くらい待たされたりして、意外とのんびりしている。
Hello, Worldが動くことを確認してから、何段階かのステップに分けて実装しました。

毎フレームランダムな4つの数字を描画し、1つずつ止めていく。フレームカウントに応じた周波数の音を出す。

インタラクティブなプログラムを書くときには、画像が出てないだけで動いているのか、それとも、まったく動いていないのか、の判断のためにとりあえず音を出しておくと便利です。画像の描画が間に合わず真っ黒な画面が出ているだけ、みたいなことも考えられる。
仮で入れてた音だけど、ずっと聞いてるとマサワダ…マサワダ…ってメロディーに聞こえてきたので、そのまま残すことにしました。


LCDに直接描画するとチラつくので、スプライトを使うと良いようでした。

github.com


末永く遊べるようにするため、最初はマサワダの文字も三角形を組み合わせて書こうとしていたのですが、ダを書くのが面倒になってきて、画像を読み込んで完成にしました。
SDカードから画像を読む必要があるかと思って近所の電気屋まで買いに行ってしまったけど、実はSDカードは不要で、バイナリデータを実行ファイルに組み込んでpushImageすれば画像を表示できました。
PNGをpushImageで扱える形式のバイナリに変換するのはこのツールを使いました。ありがたい。
github.com

みどころ紹介

各画像がヘッダファイルに書き出されているので順番にincludeしている。PROGMEM const uint16_t ma[]って変数にマの文字のバイナリデータが入っています。

#include "ma.png.h"
#include "sa.png.h"
#include "wa.png.h"
#include "da.png.h"

ボタンの入力もこんな感じで取れて簡単。

if (M5.BtnA.wasPressed() || M5.BtnB.wasPressed() || M5.BtnC.wasPressed()) {

現在のフレームカウント*10のヘルツの音を80ミリ秒鳴らしたいとき。

M5.Speaker.tone(frame * 10, 80);

コードはここに置いています。画像のバイナリを抜きにすると全部で60行くらいでスロットが動いています。forkして画像を差し替えると任意のスロットを作れるはず。
github.com

いかがでしたか

これに限らず、加速度センサーとかついているので、年末年始に何か作って遊んでみようと思います。
f:id:hitode909:20201220115455j:plain


この記事はmasawada Advent Calendar 2020の20日目でした。19日目のid:toyaはまだ出てなさそう。
明日はid:koudenpaです。M5Stackを買ってみようとなったのもkoudenpaさんのブログを読んだのがきっかけでした。サンキューです。
koudenpa.hatenablog.com