DIYレトロゲーム機「Nibble」の開発環境構築 その３

前回からの続きです。

各ゲームのソースコードのダウンロードとビルド

クラウドファンディングサイト「Makuake」でオーダーした、DIYレトロゲーム機「Nibble（ニブル）」。

前回まで工場出荷時の状態に戻す方法を探ってきました。

そうしないと、怖くて色々実験できませんからね！

「Nibble-Launcher」というのが工場出荷時の状態でインストールされているソースコードだと思い、GitHubからダウンロードして「Arduino IDE」でビルドをしたのですが、失敗。

エラーコードの内容は、ソースコードが足りないとのこと。

調べてみると、各ゲームのソースコードは「Nibble-Launcher」には含まれず、各々GitHubからダウンロードする必要がある…というのが前回までのあらすじ。

では、その作業を行っていきましょう！

まず「Cygwin」ターミナルを開いて、以下のディレクトリへ移動しましょう。

$ cd /cygdrive/c/Users/＜ユーザー名＞/Documents/Arduino/Nibble-Launcher/src/Games

まずは、原始的なテニスゲーム「BonK」のソースコードのダウンロードです。

CircuitMess社のGitHubから「Nibble」用のものを探しましょう。

https://github.com/CircuitMess

あった！

コレですね。

「Cygwin」ターミナルで以下のコマンドを打ち込んでダウンロードしましょう。

$ git clone https://gitbub.com/CircuitMess/BonK-Nibble.git

無事ダウンロードができましたか？

Windowsのエクスプローラーで上記のパス、つまり…

c:\Users\＜ユーザー名＞\Documents\Arduino\Nibble-Launcher\src\Games

…を見てみると、以下のように今回ダウンロードした「BonK-Nibble」が追加されていることが分かります。

これを見ると、元々あった「BonK」（中身は空）と新たな「BonK-Nibble」の2つが存在していることが分かります。

ビルドで必要なのは「BonK」という名前のディレクトリでしょう。

なので、元々あった「BonK」を一旦削除してから、新たな「BonK-Nibble」を「BonK」に名前を付け替えるという作業を行います。

それには「Cygwin」ターミナルで以下のコマンドを使います。

$ rm -rf ./BonK

$ mv ./BonK-Nibble/ ./BonK/

次は、隕石をひたすら破壊するシューティングゲーム「SpaceRocks」のソースコードのダウンロードです。

「BonK」の時と同じ要領です。

ダウンロード→「SpaceRocks」ディレクトリの削除→「SpaceRocks-Nibble」を「SpaceRocks」ディレクトリに名称変更…ですね。

$ git clone https://gitbub.com/CircuitMess/SpaceRocks-Nibble.git

$ rm -rf ./SpaceRocks

$ mv ./SpaceRocks-Nibble/ ./SpaceRocks/

さてさてお次は、ヘビを操ってエサを食いまくるゲーム「Snake」のソースコードのダウンロードです。

今までと同じ要領でお願いします。

$ git clone https://gitbub.com/CircuitMess/Snake-Nibble.git

$ rm -rf ./Snake

$ mv ./Snake-Nibble/ ./Snake/

最後に、工場出荷時にはインストールされていなかったゲーム「Invaderz」のソースコードのダウンロードです。

どんなゲームでしょうね？って名前からして、ああいうのでしょうけど…。

こちらも、今までと同じ要領で。

$ git clone https://gitbub.com/CircuitMess/Invaderz-Nibble.git

$ rm -rf ./Invaderz

$ mv ./Invaderz-Nibble/ ./Invaderz/

これで準備は整いました！

いざビルド！！

「Arduino IDE」で「Nibble-Launcher」のプロジェクトを開いて、画面左上の「V」マークをクリック！

よし！！

無事ビルドが通ったみたいですよ～。

プログラムを「Nibble」へ転送

ビルドしたプログラムを「Nibble」へ転送して動かしてみましょう。

まず「Nibble」と開発用のパソコンをUSBケーブルで接続します。

そして必ず「Nibble」のスイッチをONにしてください。

そうしないと、パソコンに認識されません。

このとき、デバイスマネージャを確認してみてください。

もし「Nibble」とパソコンを接続したのに、以下のように「ほかのデバイス」以下「USB Serial」と表示されている場合は、デバイスドライバのインストールが必要です。

この「Nibble」にはUSB-Serial変換のICとして「CH340C」という石が使われているようです。

そのため、このIC用のデバイスドライバをパソコンにインストールしなければなりません。

ダウンロードは、メーカーのWCH社のページからダウンロードできます。

以下のページを開いて「下載？」（多分ダウンロードという意味）という部分をクリックします。

https://www.wch.cn/downloads/CH341SER_ZIP.html

中国の会社のWebページからソフトウェアをダウンロードしてインストールするのは怖いですよね！？

でも私の環境では、特に悪さをすることもなく正常に動いているので安心してください。

ダウンロードしたZIPファイルを展開して、勇気を出してその中の「SETUP.EXE」をダブルクリックします。

以下のように、インストーラが起動しますので「INSTALL」をクリック！

インストールが完了すると以下のダイアログが表示されますので「OK」ボタンをクリックしてインストーラを終了させましょう。

デバイスドライバが正常にインストールされると、デバイスマネージャは、以下のように変化するはずです。

ちゃんと「ポート（COMとLPT）」以下「USB-SERIAL CH340」と表示されており、私のパソコンの場合は、ポート番号は4番に振り分けられたようですね。

（ポート番号は、パソコンによって異なります。）

このような表示になっていれば、パソコンは「Nibble」を正常に認識しています。

それでは「Arduino IDE」に戻って、プログラムの転送を行いましょう。

「Arduino IDE」画面上部の「Tools」メニューから「Port」→「COMx（デバイスマネージャで確認したポート番号）」と各項目を順にクリックしていきます。

そして、いよいよだ…いよいよプログラムの転送を行います！

「Arduino IDE」の画面左上の「→」マークをクリック！

緊張の時間は、結構長く感じます。

「Arduino IDE」の出力エリアに以下の表示出れば転送成功です！！

転送後の「Nibble」の表示はどうなっているでしょう？

再起動の後に…。

映りました！

ああ！これは「Invaderz」というゲームのアイコンみたいですね！

この「Invaderz」というゲーム、まあ、まんまインベーダーですけど、他のゲームの中で一番面白いかも！

名古屋打ちができるかどうかは試していませんが…。

他のゲームも一通り動作確認しましたが、正常に工場出荷時の状態に戻せるようになったみたいです。

しかも「Invaderz」という新しいゲームも追加されました！

手間はかかりましたが、この一連の作業で開発環境の基本的な操作や仕組みは理解できたような気がしますね。

さて、これでオリジナルのゲームが作れるようになりました。

ゲームのライブラリなどの使い方は、既存のゲームのソースコードを参考にすれば解析できるでしょう。

取っ掛かりとしては、一番シンプルそうな「BonK」のソースコードなんかがいいかも。

機会があれば、何か作ってこのブログで紹介できるといいですね～。

お付き合い、ありがとうございました。

＜終わり＞

DIYレトロゲーム機「Nibble」の開発環境構築 その２

前回からの続きです。

「Nibble-Launcher」のビルド

クラウドファンディングサイト「Makuake」でオーダーした、DIYレトロゲーム機「Nibble（ニブル）」。

執筆時点では、まだコチラで購入できますよ～。

これを使って色々なゲームをプログラミングしたいのだけれど、プログラムを書き込んだ後に元に戻せなかったらどうしよう！？

…というわけで、工場出荷時の状態に戻す方法を探っています。

工場出荷状態で書き込まれているプログラムは、この「Nibble」の開発メーカーであるCircuitMess社のGitHubから入手できるようです。

どうやら、そのプログラムは「Nibble-Launcher」というもののようです。

つまり、コイツをダウンロード、ビルドして「Nibble」に転送すれば工場出荷時の状態に戻せるのでは？

早速やってみましょう！

CircuitMess社のGitHubのURLは以下の通り。

https://github.com/CircuitMess

このページから、その「Nibble-Launcher」を探していきましょう。

ページを下の方に移動してもらって…。

以下のように「View all repositories」の部分をクリックして、全てのリポジトリを展開しましょう。

「Nibble-Launcher」どこかなぁ～？

あった！

これだね！！

さて、この「Nibble-Launcher」は、そのルートディレクトリに「.ino」という拡張子のファイルがあることから、開発環境は「Arduino IDE」を使う必要があるみたいです。

まずは「Nibble-Launcher」をどこにダウンロードしましょうか？

ここでは、前回の作業で「Arduino IDE」のインストール時に自動的に作成された以下のディレクトリ以下にダウンロードすることにしましょう。

C:\Users\＜ユーザー名＞\Documents\Arduino

「Nibble-Launcher」のダウンロードは、GitHubのサイトからZIPファイルをダウンロードをして、それを展開して上記のディレクトリにコピーしても良いのですが、ここではナウい方法として「git clone」コマンドを使いましょう。

その場合は「Cygwin」を使うと良いでしょう。

「Cygwin」のインストール方法は、こちらのページを参考にしてください。

「Cygwin」のインストールが終了しターミナルを開いたら、以下のコマンドで上記のディレクトリまで移動します。

$ cd /cygdrive/c/Users/＜ユーザー名＞/Documents/Arduino

そうしたら、ここのディレクトリに以下のコマンドで「Nibble-Launcher」をダウンロードしましょう。

$ git clone https://github.com/CircuitMess/Nibble-Launcher.git

「Arduino IDE」のインストール時に自動的に作成されたディレクトリを確認してください。

以下のように「Nibble-Launcher」というディレクトリが作成されていますか？

では「Arduino IDE」を起動させましょう。

画面左上の「File」メニューから「Open...」の項目をクリックします。

「開く」ダイアログが表示されますので、ダウンロードした「Nibble-Launcher」直下にある「Nibble-Launcher.ino」というファイルを選択し、「開く」ボタンをクリックです。

新たに「Nibble-Launcher」用の画面が開きましたね。

元の画面はもう閉じちゃって構いません。

試しにこの状態でビルドしてみましょう。

「Arduino IDE」の画面左上の「V」マークをクリック！

ビルド通るかなぁ～？

…

う～ん、エラーが出てしまいました。

エラーメッセージを見てみると、ターゲットのボードが有効ではない…とかなんとか。

あーそうか！

この「Nibble-Launcher」のプロジェクトを開いてから、ターゲットの設定をしてないや！

というわけで、ターゲットの設定をします、

「Arduino IDE」画面上部の「Tools」メニューから「Board」→「CircuitMess ESP6266 Boards」→「Nibble」と各項目を順にクリックしていきます。

これで再度ビルド！

…

しかし、またダメ～！！

うーむ、どうやらビルドに必要なソースコードが足りないみたいですね。

その場所というのが以下のディレクトリです。

C:\Users\＜ユーザー名＞\Documents\Arduino\Nibble-Launcher\src\Games

この中のディレクトリは「Nibble」の工場出荷時にインストールされている各ゲームの名前です。

まあ「Invaderz」というゲームは記憶にありませんが…。

そして、各ディレクトの中は案の定、空っぽです！

ということは、各ゲームのソースコードは「Nibble-Launcher」とは分離されていて、各々のソースコードをGitHubからダウンロードしないといけないのでしょうね。

さて、長くなっちゃうので一旦ここで区切りましょう。

次回は、各ゲームのソースコードをダウンロードしてビルドを通し「Nibble」へ転送して動作確認を行っていきます。

この一連の作業をもって、開発環境を学んでいきましょう。

＜続く＞

DIYレトロゲーム機「Nibble」の開発環境構築 その１

「Nibble（ニブル）」の開発環境

クラウドファンディングサイト「Makuake」でオーダーした、DIYレトロゲーム機「Nibble（ニブル）」。

以前このブログで、キットの内容と組立てて電源を入れるまでを紹介させていただきました。

執筆時点では、まだコチラで購入できますよ～。

最初から入っているゲームは一通り遊んでみたので、次は自分でプログラミングです！

とりあえず、簡単なサンプルプログラムをビルド、転送して、その後、工場出荷状態に戻すまでを確認してみようと思いました。

工場出荷状態に戻せないと、せっかく最初から入っていたゲームが遊べなくなってしまうので、この確認は重要です。

この「Nibble」は、知育玩具という扱いなので、子供向けには「CircuitBlocks」（ブロックを組み合わせるビジュアル言語）という開発環境を使用することが推奨されています。

この「CircuitBlocks」については付属のドキュメント - コーディング最初のステップ - Nibble_JP coding-first steps.pdf - を参照してください。

ここでは、C++での開発環境構築に挑戦します！

その場合の開発環境としては「Arduino IDE」と「VisualStudio Code」の2種類が使えるようです。

両方とも見ていきましょう。

Arduino IDEでの開発

付属のドキュメント - セットアップガイド - Nibble_JP Setup Guide.pdf - の通りに開発環境を構築してみました。

特に問題は無さそうですが、このドキュメント、サンプルのソースコードが文字欠け、文字化けしてますね！

正しくは、以下の通りです（だと思います）。

1. #include <Nibble.h>
3. Display* display;
4. Sprite* sprite;
6. void setup() {
7.   // put your setup code here, to run once:
8.   Nibble.begin();
9.   display = Nibble.getDisplay();
10.   sprite = display->getBaseSprite();
12.   sprite->clear(TFT_BLACK);
13.   sprite->setTextColor(TFT_WHITE);
14.   sprite->setTextFont(2);
15.   sprite->setCursor(0, 0);
16.   sprite->print("Hello World!");
17.   display->commit();
18. }
20. void loop() {
21.   // put your main code here, to run repeatedly:
22.   delay(1000);
23. }

このスケッチは、そのままビルドが通りました！

こんな感じ。

ドキュメントと異なるのは、今回はまだパソコンと「Nibble」を接続して、このスケッチを転送していないことです。

今の段階では工場出荷状態に戻す方法が分からないので、このプログラムを「Nibble」に書き込んでしまったら、元に戻せなくなってしまうからです！

なので今回は、ビルド＆転送の「→」ではなく、ビルドの「V」をクリックするだけ！

VisualStudio Codeでの開発

付属のドキュメント - プログラミングガイド - Nibble_JP Programming Guide.pdf - の通りに開発環境を構築してみました。

が…。

これが難題！

「VisualStudio Code」と、その拡張「PlatformIO」をインストールするまでは良かったんです。

これらの作業が終わって「VisualStudio Code」を再起動します。

そして、画面左側の「アリの顔面」マークをクリックします。

コイツね。

次は、切り替わった画面左側の階層構造のリストから「QUICK ACCESS」→「PIO Home」→「Open」をクリックです。

以下のような表示に切り替わりますので「New Project」をクリック。

続けて、ドキュメント通りにプロジェクトを作成していきます。

必要な項目を埋めて「Finish」ボタンをクリック！

途中の以下のような表示も「Yes, I trust the authers」ボタンをクリックします。

さて、ここでドキュメントに不穏な表記が！

「簡単なプログラムの作成」の章です。

それによると…

ここで、必要なライブラリや設定ファイルをGitHubのリポジトリからダウンロードし、プロジェクトディレクトリに配置する必要があります。

…？？？

なんのこっちゃ！？

じゃあ、その必要なライブラリとか設定ファイルとか、GitHubのリポジトリの場所は？

リンクも何の表記もありません！

なんでソコの説明を端折っちゃうかな～？

まあいいや、と作成されたプロジェクトの「main.cpp」を開いて…

ここに「Arduino IDE」で書いたスケッチと同じソースをコピペしてビルドすれば動くやろ！

ビルドコマンドのボタンは、画面下部にある小さなチェックマークです。

これをクリック！

結果…

エラー発生でビルド通らず！

撃沈！！

…うん。

まあ。

人生そんなもんだよ。

...しかし、諦めずにそれから色々調べました！

その甲斐あって、以下の手順を踏めばビルドが通るようにはなりました。

まず、先程のビルドのエラーメッセージから、何らかのファイルが不足していると推察。

今の時点で、この「Hello World」プロジェクトは以下のディレクトリに生成されているハズです。

C:\Users\<ユーザー名>\Documents\PlatformIO\Projects\Hello World

このディレクトリの中の「lib」というディレクトリにご注目を。

この「lib」ディレクトリの中には「README」ファイル以外は何も入っていません。

ここに不足しているファイルを配置すれば良いのでは？

足りないファイル（ていうかライブラリ）は「Arduino IDE」で使っているものを持ってきましょう！

その場所は、普通にインストール作業を進めて頂いた場合は、以下のディレクトリに入っています。

C:\Users\<ユーザー名>\AppData\Local\Arduino15\packages\cm\hardware\esp8266\1.2.1\libraries

…トライ＆エラーを繰り返しながら、少なくともこの中にある以下の3つのディレクトリを「Hello World」プロジェクトの「lib」ディレクトリにコピーすればよいことが分かりました。

・TFT_eSPI

・CircuitOS

・Nibble

その後「Hello World」プロジェクトのディレクトリ直下にある「platformio.ini」というファイル…。

これを以下のように編集します。

1. ; PlatformIO Project Configuration File
2. ;
3. ; Build options: build flags, source filter
4. ; Upload options: custom upload port, speed and extra flags
5. ; Library options: dependencies, extra library storages
6. ; Advanced options: extra scripting
7. ;
8. ; Please visit documentation for the other options and examples
9. ; https://docs.platformio.org/page/projectconf.html
11. [env:esp12e]
12. platform = espressif8266
13. board = esp12e
14. framework = arduino
16. ; 以下追記！
17. build_flags =   -Os
18.                 -g
19.                 -DCIRCUITOS_LITTLEFS
20.                 -DCIRCUITOS_TONE
21.                 -DCIRCUITOS_LOWRAM
22.                 -DST7735_DRIVER
23.                 -DTFT_WIDTH=128
24.                 -DTFT_HEIGHT=128
25.                 -DST7735_GREENTAB128
26.                 -DTFT_RGB_ORDER=TFT_BGR
27.                 -DTFT_MOSI=13
28.                 -DTFT_SCLK=14
29.                 -DTFT_MISO=-1
30.                 -DTFT_CS=-1
31.                 -DTFT_DC=2
32.                 -DTFT_RST=-1
33.                 -DSPI_FREQUENCY=27000000
34.                 -DLOAD_GFXFF
35. build_unflags = -Werror=return-type

この状態で、再ビルドです！

うぉし！

ビルドが通りました～！！

この「VisualStudio Code」でビルドして生成された「Hello World」プログラムのバイナリと、冒頭の「Arduino IDE」で生成したスケッチのバイナリは、全く同じではないにしろ、似たようなファイルサイズです。

なので、このまま転送して「Nibble」で動作させれば同様の動きをするものと思われます。

多分「Nibble」の画面に黒をバックに白地で「Hello World!」と表示されるのかな？

さて、思いのほか情報が少なくて「VisualStudio Code」の方は、いきなりドツボにハマってしまいました。

以降は、そのソースコードの入手法も含め、工場出荷状態に戻す方法を探っていきたいと思います。

そうしないと、オリジナルのプログラムを動かすこともできませんからねぇ...。

頑張ります！

＜続く＞