Windowsネイティブ環境でM5Unifiedを動かす

概要

M5UnifiedはESP32用のライブラリですが、描画周りに関してはPlatformIOとMSYS2のビルと環境とSDL2ライブラリを利用することでESP32ボードが無くても動かすことができます。

ボードへの転送が必要なく、Windows上のアプリとして動きますのでデバッグがしやすくビルド時間も短くなったりと描画周りの調整などで役にたちます。

PlatformIO環境の構築

  • Visual Studio Codeのセットアップ
  • (必要であれば)日本語表示拡張機能の追加
  • PlatformIOの拡張機能の追加

上記は前提として入っているものとします。新規でセットアップするにしても検索すればすぐに手順がわかるとは思います。

複数のパソコンでVisual Studio Codeを使う人の場合にはGitHubアカウントでログインをしておくと、拡張機能の設定などが同期されるので便利だと思います。

ちなみにVisual Studio Codeのセットアップだけは普通にWinGetを利用するとcodeのショートカットが使えないので、一度は正規の手順でセットアップして環境変数への設定だけはしたほうがよいと思います。

winget install Microsoft.VisualStudioCode --override "/VERYSILENT /NORESTART /MERGETASKS=!runcode,addcontextmenufiles,addcontextmenufolders,associatewithfiles,addtopath"

もしくはオプションを指定してセットアップします。環境が変更されるのが嫌な場合には「winget install Microsoft.VisualStudioCode」でも構いません。code .で今いるディレクトリを開いた状態でVisual Studio Codeを起動するのは便利なので個人的には追加しています。

ビルド環境であるMSYS2のセットアップ

Windowsネイティブで実行するためには、Windows用のビルド環境を用意する必要があります。M5Unified(M5GFX/LovyanGFX)ではMSYS2環境に対応しているので、MSYS2をセットアップします。

winget install MSYS2.MSYS2

いろいろな入れ方がありますが、最近のWindowsの場合、標準で入っているはずのWinGetでいれるのが好ましいです。この場合C:\msys64にインストールされます。このときPathは変更されていないはずです。

gcc等のビルドツールを入れる

MSYS2はWindows上にLinuxっぽい環境を作ってくれるアプリであり、デフォルトではgccはインストールされていません。

C:\msys64\usr\bin\pacman -S mingw-w64-ucrt-x86_64-gcc mingw-w64-ucrt-x86_64-gdb

上記のコマンドでgccとデバッグ用のgdbをいれます。環境への変化を減らすためにMSYS2へのPathを追加していませんのでフルPathで呼び出しています。

描画環境であるSDL2をセットアップ

SDL2(Simple DirectMedia Layer 2)はゲーム開発環境を提供するライブラリであり、この環境上でESP32の描画を再現しています。現在バージョン3がありますが、ここでは2の最新版をいれます。

C:\msys64\usr\bin\pacman -S mingw-w64-ucrt-x86_64-SDL2

MSYS2のパッケージ管理ツールであるpacmanを使っていれると非常にかんたんに追加できます。公式の追加手順は結構乱雑で面倒になります。

gccのpath追加

(個人的非推奨)Windowsのユーザー環境変数への追加

システムの環境変数から入って、ユーザー環境変数のPathを編集する方法です。

setx PATH "%PATH%;C:\msys64\ucrt64\bin"

画面から追加してもいいのですが、上記のコマンドでも追加可能です。

ただ個人的には非推奨です。gccみたいなコマンドは標準pathにいないほうが安全な気がします。複数の開発をしているといろいろなgccが環境にあったりするので、path設定をしてしまうと意図しないものが呼び出される原因となります。

(個人的推奨)

コマンドプロンプトで環境設定を変更してからVisual Studio Codeを起動します。都度実行前にPathを設定しているので安全ですが、コマンドプロンプトの黒い画面が表示されてしまいます。

set PATH=%PATH%;C:\msys64\ucrt64\bin
"C:\Users\%USERNAME%\AppData\Local\Programs\Microsoft VS Code\bin\code" .

上記のようにsetでこのコマンドプロンプトだけ環境設定を変更してから、codeでVisual Studio Codeを起動しています。サンプルではcodeのPathが通っていない場合を想定してフルパスで記述しています。

C:\Users\%USERNAME%\.platformio\penv\Scripts\platformio.exe pkg update

set "fullpath=%CD%"
for %%F in ("%fullpath%") do set "foldername=%%~nF"
set PLATFORMIO_BUILD_DIR=C:\work\pio\%foldername%\build
set PLATFORMIO_LIBDEPS_DIR=C:\work\pio\%foldername%\libdeps

set PATH=%PATH%;C:\msys64\ucrt64\bin
"C:\Users\%USERNAME%\AppData\Local\Programs\Microsoft VS Code\bin\code" .

サンプルは最小構成で書いていましたが、個人的には上記のスクリプトを使っています。１行目はPlatformIOのプロジェクト利用しているパッケージの更新です。PlatformIO自体は自動更新するのですが、ボードライブラリとかはこのコマンドでたまに更新する必要があります。

まんなかにあるのがビルド系のファイルをプロジェクトの中に保存するのではなく、\work以下に隔離しています。プロジェクトはDropboxの中に保存しているので、ビルド時の大量ファイルは同期したくないので環境変数で別の場所に隔離しています。

動かしてみる

GitHub - tanakamasayuki/M5Unified-WindowsNative-examples: Windows環境でM5Unifiedを動かすためのサンプル
Windows環境でM5Unifiedを動かすためのサンプル. Contribute to tanakamasayuki/M5Unified-WindowsNative-examples development by creating an...
github.com

上記に最低限のサンプルを用意してみました。全体をダウンロードしてSimpleを開いてみてください。

start.batを実行することでVisual Studio Codeが起動されるはずです。起動直後いろいろ更新処理などが動きますので、しばらく待ちます。

対象ボードの選択

M5Unified(M5GFX)ではすべてのボードがWindowsでも利用できるのですが、専用のガワが用意されているボードがあります。

M5GFX/src/picture_frame at master · m5stack/M5GFX
Graphics library for M5Stack series. Contribute to m5stack/M5GFX development by creating an account on GitHub.
github.com

上記のフォルダにあります。

M5Stack

M5StackCore2

M5StackCoreS3

M5StackCoreInk

M5StickCPlus

M5StickCPlus2

M5Dial

現時点では上記の７種類が対応していました。M5Dialとかは画面が特殊なので、実機で描画調整をするのが面倒だと思うのですが、Windowsネイティブ環境の場合には比較的微調整がしやすいとは思います。

ちなみにピクチャーフレームに対応していないボードの場合には上記のように画面だけが表示されます。開発自体は問題ないのですが、黒い画面だけだとどのボードかわかりにくいのでピクチャーフレームがあったほうがわかりやすいですよね。ただし、ピクチャーフレームのボタンとかはクリックしても反応しないのでご注意ください。

ボードの切り替えはVisual Studio Codeの一番下のところのenvをクリックすると選択可能です。ここで選択をして、そのまま右矢印のUploadボタンを押すことでビルドしたあとに、ボードの画面が表示あれます。注意点としては、画面を表示したまま再度Uploadをしても自動的に更新されません。画面を消してからUploadを実行する手順のほうがおすすめです。

実行の仕組み(platformio.ini解説)

[platformio]
default_envs = native

最初にnativeをデフォルトに指定しています。あとでボードを指定すればデフォルト設定はいらないですが念の為だと思います。よく使うボードがあればそのボードを指定するのもおすすめです。

[env]
lib_deps = 
   M5GFX
   M5Unified

envではM5GFXとM5Unifiedを指定しています。ここは普通のライブラリ設定で、どのボードを選んでも反映される場所となります。

[env:native]
platform = native
build_type = debug
build_flags = -O0 -xc++ -std=c++14 -lSDL2
  -DM5GFX_SHOW_FRAME             ; Display frame image.
  -DM5GFX_BACK_COLOR=0x222222u   ; Color outside the frame image

nativeがSDL2を利用する環境となります。M5GFXのサンプルですとSDL2のPathを指定していましたがMSYS2環境でpacmanを利用してSDL2をインストールしている場合には内部で自動設定されているので必要ありませんでした。

[env:native_M5Stack]
extends = native
platform = native
build_flags = ${env:native.build_flags}
  -DM5GFX_ROTATION=0
  -DM5GFX_BOARD=board_M5Stack

native(SDL2)環境で動くM5Stackの設定です。指定しているのは画面の向きとボード名になります。

[env:native_StickCPlus]
extends = native
platform = native
build_flags = ${env:native.build_flags}
  -DM5GFX_SCALE=1
  -DM5GFX_ROTATION=0
  -DM5GFX_BOARD=board_M5StickCPlus

StickCPlusの例ですが、DM5GFX_SCALEのオプションも渡しています。通常のCoreでも指定できるのですが、2を指定すると2倍サイズで表示されます。高解像度モニタなどを利用している場合には倍率をあげるのがおすすめです。

[esp32_base]
build_type = debug
platform = espressif32
board = esp32dev
upload_speed = 1500000
monitor_speed = 115200
monitor_filters = esp32_exception_decoder

他にもいろいろボードがありますが省略してesp32_baseです。こちらは実機のESP32を動かすときのボード設定です。

[env:esp32c3_arduino]
extends = esp32_base
framework = arduino
board = esp32-c3-devkitm-1

こんな感じでボード名と環境を指定して動かすこともできます。実機の場合には自動判定をするのでボードネームを指定しなくてもESP32やESP32-C3などの種類だけ設定すれば問題ないはずです。このへんは通常のM5Unifiedと同じ設定が利用できます。

まとめ

M5GFX/examples/PlatformIO_SDL/README.md at master · m5stack/M5GFX
Graphics library for M5Stack series. Contribute to m5stack/M5GFX development by creating an account on GitHub.
github.com

ちなみに上記が公式の導入方法です。SDL2の導入がちょっと面倒だったので紹介していなかったのですが、今回もう少しシンプルに導入できそうだったので手順を整理してみました。

ただこのままだとArduino系の関数が使えないのでダミー関数などの整備が必要となります。

コメント