M5StickC Plus を使ってみる

-

 今回はM5StickC Plusを使って遊んでいきます。

特に今のところ大きな目的はありませんが、使い方や公式のExampleなどを見てどのようなことが出来るのか試していきたいと思います。

使い方

ほぼ公式が載せている手順にしたがって行うだけでした。

以下にURL載せておきます。

docs.m5stack.com

サイトがすべて英語だったので大まかな流れを追っていきます。

M5StickC PLUSの場合は最初のドライバのインストールは無視して良いみたいなのでスキップしました。

ArduinoIDEも事前にインストール済みだったのでスキップしましたが、出来てない方はサイトの通りにダウンロードを行いましょう。 ダウンロードサイトに行って各自のPC環境に合ったモノをダウンロードすれば良いだけです。

今回はArduino IDEの使い方の細かい説明は省きます。

次にボード情報を取得するためにウィンドウ左上の

File > Preferences > Additional Board Manager URLs に以下のURLを追記して”OK”を押す

https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/arduino/package_m5stack_index.json

次にウィンドウ左上の

Tools > Boards > Boards Manager で M5stackと検索して出てくるM5StackをInstallを押して”Close”を押す

Tools > Board > M5Stack Arduino > M5Stick-C-Plusを選択

これで大体は問題なく終わりです。

動作確認のために簡単なLチカを行っていきます。

void setup() {
  pinMode(10, OUTPUT);
}

void loop() {
  digitalWrite(10, HIGH);
  delay(1000);
  digitalWrite(10, LOW);
  delay(1000);
}

オンボードのLEDが10番ピンに割り当てられているのでコードを書き込んであげればすぐ試せます。

他にもブザーや赤外線LEDなどもオンボードで搭載されているようですね。

IMUもついているので加速度から速度を出してモニターに表示とかもすぐにできるし、バッテリー内臓なのでUSBを引っこ抜いて振り回して速度を見るのもすぐできます。M5系なら割と当たり前にできることですが小さいのは良いことです。

公式Exampelのゲーム

Files > Examples > M5StickCPlus > Games の中にゲームが2種類入っています。

  1. FlappyBird
  2. Dices

FlappyBirdはM5Stack系でもExamplesに入っているので定番のようですね。 StackではTetrisなどが入っていますがStickではその代わりにDicesが入っているみたいです。

それぞれ書き込んで実際に遊んでみた画像

 プログラムは案の定長いですが、よくできています。

 Dicesに関してはかなりプログラムも短く、分かりやすい内容になっていました。

スピーカー、モニタを使ってみる

以下の公式サイトを見れば詳しく書いてありますが、英語なので参考にしながら軽くまとめておきます。

https://docs.m5stack.com/en/api/stickc/lcd_m5stickc

またサイトではM5StackCPlusとしての説明はなくM5StackCと同様にメソッドは使えるためライブラリをインクルードする際に

#include <M5StickC.h>

ではなく

#include <M5StickCPlus.h>

となるようにしましょう。

LCDモニター

まずLCDモニターを触っていきます。

LCDを使うAPIはM5系でほぼ共通化されているようなので（未検証）別のLCDがついたM5系でもある程度コードを再利用できると思います。（その場合インポートするライブラリはM5系の名前と合わせる必要があります。）

なので逆に、公式でStick系のAPIリファレンスに載っていないスプライト関係のAPIも使えるので興味がある方はそちらを試すとより面白いと思います。

LCDの項で最後に載っているコードを試すのが手っ取り早いのでM5StackC Plusでも使えるようにしたものが以下になります。

#include <M5StickCPlus.h>

void setup() {
  M5.begin();

  M5.Lcd.fillScreen(WHITE); // set the default background color
  M5.Lcd.drawLine(0, 0, 100, 100, GREEN);
  M5.Lcd.drawTriangle(22, 22, 69, 98, 51, 22, RED);
  M5.Lcd.fillTriangle(22, 22, 69, 98, 51, 22, RED);
  M5.Lcd.drawRect(50, 100, 30, 10, BLUE);
  M5.Lcd.fillRect(50, 100, 30, 10, BLUE);
  M5.Lcd.drawRoundRect(40, 70, 20, 10, 4, BLUE);
  M5.Lcd.fillRoundRect(40, 70, 20, 10, 4, BLUE);
  M5.Lcd.print("print text");
}
void loop() {}

実行するとこうなります。

  • M5.begin();
    これはM5系の十八番ですね。
    M5系を扱うときの最初に呼ぶ関数です。


  • M5.Lcd
    LCDを扱うためのクラスです。 以降で取り上げるLCDのメソッドでは表記を省略します。


  • fillScreen(WHITE);
    スクリーン全体を引数で指定した色に塗りつぶす。


  • drawLine(0, 0, 100, 100, GREEN); 2つの点に挟まれた直線（線分）を書く int16_t = 16ビットの符号付き整数 引数
    1. 1点目のx座標(int16_t)
    2. 1点目のy座標(int16_t)
    3. 2点目のx座標(int16_t)
    4. 2点目のy座標(int16_t)
    5. 色（任意 *指定しない場合は背景色が適用される）


  • drawTriangle(22, 22, 69, 98, 51, 22, RED); 三角形（3つの線分）を書く（線のみ）
    • 引数
      1. 1点目のx座標
      2. 1点目のy座標
      3. 2点目のx座標
      4. 2点目のy座標
      5. 3点目のx座標
      6. 3点目のy座標
      7. 色


  • fillTriangle(22, 22, 69, 98, 51, 22, RED); 三角形の内側を塗りつぶした図形を書く
    • 引数
      • drawTriangleと同じ


  • drawRect(50, 100, 30, 10, BLUE); 四角形（4つの線分）を書く（線のみ）
    • 引数
      1. 左上の点x座標
      2. 左上の点y座標
      3. 幅
      4. 高さ
      5. 色


  • fillRect(50, 100, 30, 10, BLUE); 四角形の内側を塗りつぶした図形を書く
    • 引数
      • drawRectと同じ


  • drawRoundRect(40, 70, 20, 10, 4, BLUE); 四角形の角を面取りした図形の外側の線のみ書く
    • 引数
      1. 左上の点x座標
      2. 左上の点y座標
      3. 幅
      4. 高さ
      5. 面取り半径
      6. 色


  • fillRoundRect(40, 70, 20, 10, 4, BLUE); 四角形の角を面取りした図形を指定した色で塗りつぶした図形を書く
    • 引数
      • drawRoundRectと同じ


  • print("print text"); 文字表示

他にも

  • setRotation(1); 画面を引数×90度回転（M5の刻印が読める縦の状態が0）
  • setTextColor(TFT_BLACK); 引数の色に文字色を指定
  • setTextSize(3); 文字サイズ指定
  • setCursor(10, 30); 文字を表示するときの位置変更

等があります。

スピーカー

Stick C PlusのスピーカーはCore系のライブラリとは違って、M5.Speakerとは書かずM5.Beepとして使うようなので注意する必要があります。

検証していませんがメソッドはほぼ同じようだったので使って行きます。

M5stick系のAPI一覧にはスピーカーに関しての項目がない代わりに、Core系で説明がされているのでそちらを参考にします。以下にリンクを載せておきます。

docs.m5stack.com

クラス名がSpeakerとなっている所をBeepと読み替えればある程度扱えます。

しかし、setVolumeメソッドを試したましたが音量に変化がありませんでした。

まずは動かせるコードをお見せします。

公式リファレンスに少々手を加えたものになります。

#include <Arduino.h>
#include <M5StickCPlus.h>

uint8_t i = 0;
void setup(){
  M5.begin();
  M5.Beep.begin();
  M5.Beep.setVolume(i);
}

void loop(){
  M5.update();
  M5.Lcd.fillScreen(BLACK);
  M5.Lcd.setCursor(10, 10);
  if(M5.BtnA.wasPressed()) {
    M5.Beep.tone(661, 200);
  }else if(M5.BtnB.wasPressed()){
    i++;
    // M5.Beep.setVolume(i);
  }
  M5.Lcd.print(i);
  delay(100);
}

先ほども説明したようにsetVolumeメソッドはうまく動作しないため、19行目のsetVolumeメソッド部分をコメントアウトしているのでボタンBを押すとカウントアップされた数字がLCD左上に数字が表示されるだけになっています。

Bボタンで周波数を変えたい場合は少しいじって以下のようにするとBボタンを押すたびに10Hzずつ増やしていくようになります。

#include <Arduino.h>
#include <M5StickCPlus.h>

uint16_t i = 0;
void setup(){
  M5.begin();
  M5.Beep.begin();
  M5.Beep.setVolume(i);
}

void loop(){
  M5.update();
  M5.Lcd.fillScreen(BLACK);
  M5.Lcd.setCursor(10, 10);
  if(M5.BtnA.wasPressed()) {
    M5.Beep.tone(i, 200);
  }else if(M5.BtnB.wasPressed()){
    i += 10;
  }
  M5.Lcd.print(i);
  delay(100);
}

動作確認が取れなかったメソッドもありますが音を出すだけなら、使い方はとても簡単です。


  • M5.Speaker.begin() 又は M5.begin() これをsetup関数内で実行してあげればスピーカを使い始めることが出来る。 M5.beginに関しては使えるすべての機能を初期化しているようなのでスピーカー以外使いたくないといった場合はM5.Speaker.beginを使うと良いでしょう。 特にこだわりがない方はLCDでも使っていたM5.beginで良いと思うます。


  • M5.Speaker.update() 又は M5.update() これは状態の更新をするために用意されています。M5.update()とすることでスピーカーを含む状態の更新しているので、わざわざM5.Speaker.updateを使って個別で更新する場合を除いてM5.updateを使うと良いでしょう。


  • M5.Speaker.tone(661, 200); スピーカーを初期化したらこれで音を鳴らすことが出来ます。
    • 引数
      1. 周波数 (int16_t)
      2. 音を鳴らす（ミリ指定）秒数 (int16_t)
        • 任意で指定可能

以上がスピーカーの使い方になります。

おまけ（別で調査したこと）

M5Stick C Plus本体の背面を見てみるとGPIOのピン割り当てがシールとして貼られています。

赤枠で囲んだG36/G25となっている箇所の使い方がいまいち直感的にわからなかったため確かめてみました。

Switch Scienceには

G36/G25は同じポートを利用しています。片方のピンを利用しているとき、もう片方のピンはフローティング入力（プルアップもプルダウンもしない状態）にしておいてください。例えば、G36ピンをADCの入力として使っている場合、G25ピンはフローティングにしてください。

setup()
{
   M5.begin();
   pinMode(36, INPUT);
   gpio_pulldown_dis(GPIO_NUM_25);
   gpio_pullup_dis(GPIO_NUM_25);
}

と書かれています。

36番を使いたいときは以上のように記述する必要があるようです。

しかし、25番ピンの使い方に関しては特になかったので普通に扱えるか戸惑ってしまいました。

qiita.com

調べたところ、上記の記事に25ピンの使い方が載っていました。

デジタルとアナログの入出力は可能ですが、内臓の6軸センサと併用はできないようです。

25番ピンを使う場合は36番ピンとは排他的なのは当たり前で、普通のピンを扱うときと同じような記述の仕方で問題ないようです。

例えばこんな感じ。。。

#include <Arduino.h>
#include <M5StickCPlus.h>

uint16_t i = 0;
void setup(){
  M5.begin();
  pinMode(25, OUTPUT);
}

void loop(){
  digitalWrite(25, HIGH);
  delay(1000);
  digitalWrite(25, LOW);
  delay(1000);
}

逆に36番ピンは以下のサイトにもあるようにデジタル・アナログの入力のみに対応しているようです。

それ以外の用途には使えないようなので注意が必要です。

lang-ship.com

まとめ

  • GPIOとして出ているピンが少ないので外部の回路と組み合わせるのは限度がありそう。
  • LCDが無印の時と違って大きくなったため、何かを表示させることの利点が高まった。


HaLakeは、ニャンパス株式会社の運営するコワーキングスペースです。
受託開発をメインに行うニャンパス株式会社では、ウェブサービスやアプリ開発、記事にあるようなIoTデバイスの開発を含め様々なご注文にお応えいたします。お気軽にご連絡ください。
ニャンパスへのお問い合わせ

コメント

コメントを投稿

このブログの人気の投稿

レイクタウンにある生産緑地

-
イメージ
１９９２年に改正された生産緑地法に基づいて定められた地域区域で市街化区域にありながら３０年間の農業の継続することや・１５１坪以上所有などの条件で税制優遇が受けれる地区を生産緑地地区(生産緑地)と呼ばれますが、生産緑地２０２２年問題と騒がれた税制優遇の廃止や農家の高齢化(後継者問題)によって手放す懸念が増す中、続けて頑張って下さっている農家の皆さまには頭が上りません。 都内でも、練馬や世田谷での生産緑地手放しの声は耳にしますが意外にも皆さん延長されているようです。というのも３０年経過前に特定生産緑地に指定しておけば１０年後まで税制優遇も延長できるのです。地球温暖化現象を抑えてる緑地を少しでも無くさないためにも、これからもご尽力頂ければ幸いです。   HaLake は、 ニャンパス株式会社 の運営するコワーキングスペースです。 受託開発をメインに行うニャンパス株式会社では、ウェブサービスやアプリ開発、IoTデバイスの開発を含め様々なご注文にお応えいたします。お気軽にご連絡ください。 ニャンパスへのお問い合わせ
続きを読む

越谷レイクタウンに新たに民間キャンプ場がオープン

-
イメージ
 越谷レイクタウンでアウトドア施設といえば、レイクタウンアウトレットに隣接し 湖畔を一望しながらBBQが楽しめる  KOSHIGAYA Lake side BBQ   が思い浮かびますが、 今年９月に、越谷市東町の中川沿いに新たにBBQはもちろんサイクリングやカヌーも楽しめ、 テントによるキャンプができる観光スポットがオープンすることになったという。 キャンプ場予定地に上げられる東町にある中川河川緑地。 昨年、吉川橋がリニューアルし交通の便が良くなりこの河川緑地のスペースに何かできる予感はしていましたが、期待以上の施設が計画されておりました。 　テントサイトは１０区画(大型 12 × 8m・小型 6 × 5m)・管理施設や炊事場も完備する予定だとか。 　天気も良く風がなければ、中川や元荒川はカヌーに適した場所なので期待できるでしょう！ HaLake は、 ニャンパス株式会社 の運営するコワーキングスペースです。 受託開発をメインに行うニャンパス株式会社では、ウェブサービスやアプリ開発、IoTデバイスの開発を含め様々なご注文にお応えいたします。お気軽にご連絡ください。 ニャンパスへのお問い合わせ
続きを読む

Phaser3 + Typescriptを使ってRPGゲームの基礎を作ろう！その２

-
イメージ
前回の記事 に引き続きPhaser3+Typescriptを使って RPG の基礎を作っていきます。 この記事は前回の記事を呼んだ前提で説明していきますので、ぜひそちらを先に読むことをお勧めします。 また、今回の記事は前回よりも難易度と内容量が上がっていますが、記事の最後に作業後の リポジトリ のリンクがありますので、そちらを先にダウンロードしてそちらと比較しながら学習することができます。 前回まで作成した状態のプログラムが以下の リポジトリ からダウンロードできますので前回まででうまくいっていない方は参考にしてみてください。 github.com 最終目標（再掲） ・Phaser3とTypescriptで RPG ゲームの基礎を作る。 ・Phaser3をTypescriptで使う方法を学ぶ ・Phaser3の使い方を学ぶ 今回の目標 ・ゲームの作り方の断片を知る ・キャラの表示できるようにする ・キャラを移動できるようにする ・当たり判定をつける ・ NPC の追加してみる ・話しかけられるようにする 開発前提（再掲） ・Nodejsの環境・知識がある ・ Javascript ・Typescriptがある程度かける ・当ページ紹介の環境を試す場合はgit・ github の知識がある 使用した主要Nodeモジュール（再掲） ・typescript（Typescriptの コンパイル 用） ・phaser（フロントの Javascript 用ゲームライブラリ） ・live-server（ソースを監視してブラウザのページをリロード） ・ts-loader（webpackがTypescriptをバンドルする用）webpack（言わずと知れたモジュール依存をいい感じに解決しバンドルする） ・webpack- cli （webpackを コマンドライン で使用するのに必要） 注：各Nodeモジュールバージョンは後述 当ブログ仕様の画像素材の注意点 当ブログで使用する画像素材は『 ピポヤ倉庫 』より許可なしで無償再配布・改変が認められたものを改変して作成されたものです。 中には許可なく再配布・改変してはいけない素材もインターネット上には多く存在するのでそれらを使用するときは十分に規約を呼んでから使用しましょう。 1. キャラの表示 想定画面 今回は、はじめにキャラつまり操作
続きを読む