M5StackとM5UI.Flowで子供のプログラミング教室#3

今回は今まで勉強した内容を応用しながら、じゃんけんゲームを作ってみたいと思います。

準備

じゃんけんしたいので、グー・チョキ・パーの画像を画面に表示したいです。 素材は、いらすとやの素材を使います。 グー・チョキ・パーの素材とじゃんけんしている姿の素材

M5StackはJpegの画像が表示できて、画面の解像度は320 x 240ということなので、じゃんけんしている子供の画像は、横幅を320に縮小します。この時ファイルサイズが大きいと表示が遅かったり、出来なかったりしたので、10k以下にします。

グー・チョキ・パーは、自分が出したものと、プログラムが選んだものを表示したいので、横幅を120になるように縮小します。

GIMPとかでjpegファイル作ってもM5Stackに表示できずにハマっていたら、こちらのブログConvertimageを使えば表示できる画像に変換できるとのこと。

これで、4つの素材が用意できました。ファイル名は10文字までという制限があるので短くします。

IDEの右上にあるアイコンをクリックすると、M5Stackに画像を転送できるので、ここから作成した画像を登録します。(SDカードに保存してそれを参照させる方法もあるみたい)

f:id:sparkgene:20190901151552p:plain

Resource Managerの「Add Image」ボタンをクリックして、4つのファイルを転送します。

f:id:sparkgene:20190901151815p:plain

課題1 画像を画面に表示する

UIエディタのところで、画像のアイコンをドラッグして、好きな場所に置きます。

f:id:sparkgene:20190901151950p:plain

置いたアイコンをクリックすると、ポップアップが表示されて、画像の設定でじゃんけんしている画像に変更します。これをTop画像とします。

f:id:sparkgene:20190901152125p:plain

次に、ラベルを書くボタンの上に配置して、「rock」、「scissor」、「paper」と入力します。(フォントファイルを用意すれば日本語も表示できますが英語の勉強も兼ねて、全部英語ですすめます)

f:id:sparkgene:20190901152522p:plain

次に、じゃんけんの画像を表示するイメージを配置します。プログラムからこの画像を変更するので、わかりやすいようにイメージの名前を「img_me」にしておきます。

f:id:sparkgene:20190901152702p:plain

ここからがプログラムを組んでいきます。 Setupでは、じゃんけんの画像を非表示にし、Top画像を表示します。ボタンを押されたら、Top画像を非表示にしてボタンに合った画像を表示します。

f:id:sparkgene:20190901153555p:plain

これで実行してみると、押したボタンに合わせて画像が変わります。

課題2 コンピュータ側のじゃんけんの手を選びます

M5Stackと対戦できるゲームなので、相手の手を表示するように画像をUI上に追加します。画像の名前は「img_m5」にします。

「変数」->「変数の作成」を押すと、変数名を入力できるので、「m5_sign」とします。

f:id:sparkgene:20190901154943p:plain

そうすると、作った変数のブロックが表示されるので、「m5_signに〜をセット」をエディタに置きます

f:id:sparkgene:20190901155119p:plain

この変数にランダムな値を入れて、グー・チョキ・パーを表示するのですが、ボタンを押す度に同じ処理をすることになるので、この処理には「関数」を使います。関数名は「m5_janken」にします。

f:id:sparkgene:20190901155914p:plain

次に変数にランダムな値を変数に入れるので、「数学」->「〜から〜までのランダムな整数」を使って、1〜3までの整数をランダムに発生させ、1=グー、2=チョキ、3=パーというルールとします。 数字の入力は、「数学」の一番上にあるブロックを使います。

f:id:sparkgene:20190901155541p:plain

これらを組み合わせるとかんな感じになります。

f:id:sparkgene:20190901160123p:plain

この変数の値を元に、表示する画像を変更したいので「もし」を組み合わせます。そして、変数と数字を比較して、画像を切り替えます。

f:id:sparkgene:20190901160459p:plain

これで、対戦相手側のロジックが出来たので、ボタンを押したら呼ばれるようにします。先程関数を作ったときに「関数」->「m5_janken」が選べるようになっているのでそれを使います。

f:id:sparkgene:20190901160729p:plain

出来上がったプログラムはこちら。

f:id:sparkgene:20190901160849p:plain

これで、じゃんけんすることが出来ました!

課題3 勝ち負けで音を鳴らします

勝ち負けを判定するには、自分の手と相手の手を判断する必要があります。そのためには、自分の手も変数に入れておいて、後で比較するのに利用します。この変数を「my_sign」とします。

f:id:sparkgene:20190901161225p:plain

次に、判定を行う処理を関数にまとめます。この関数の名前は「judge」とします。関数の中では自分の手と相手の手を比較して、勝ったら高い音、負けたら低い音を鳴らします。あいこは何もしません。

f:id:sparkgene:20190901161947p:plain

この関数をボタンを押したら呼ばれるようにします。

f:id:sparkgene:20190901162033p:plain

実行をすると、M5Stackでじゃんけんゲームを遊べるようになりました!

まとめ

今回のプログラミングを通して、以下のようなことを勉強しました。

  • 画像をUIで利用すると、文字だけよりもわかりやすいUIが作れる
  • 変数という何らかの値を入れておく物の使い方
  • 繰り返し行なうような処理は関数として作ると便利
  • 複数の条件を使いたいときは「もし」の中に「もし」を入れると作れる

プログラム教室の過去記事

sparkgene.hatenablog.com