LCDモジュールを使ったレベルメータの製作(5)

このページをスマートフォンなどでご覧になる場合は、画面を横長にする方が読みやすくなる事があります。

10.オリジナルの絵柄のレベルメータの作り方

はちゅねミクがネギを振るレベルメータは、MGLCDライブラリのビットマップ転送の機能を使って、アニメーションを実現しています。ここでは、ビットマップ画像を書き換えて、オリジナルの絵柄のレベルメータを作る方法を説明します。なお、この記事は、Windows環境でArduinoの開発をしている前提で書いています。

10-1.アニメーション表示の原理

はちゅねミクがネギを振るレベルメータは、音量に応じて、以下の9種類のビットマップ画像を切り替えて表示する仕組みになっています。(原寸のままでは、ウェブサイトで表示するには小さすぎるので、縦横各3倍に拡大して表示しています)

図11、miku0.bmp

図12、miku1.bmp

図13、miku2.bmp

図14、miku3.bmp

図15、miku4.bmp

図16、miku5.bmp

図17、miku6.bmp

図18、miku7.bmp

図19、miku8.bmp

これらのビットマップファイルは、レベルメータのスケッチのフォルダの中の、bmpというフォルダにあります。(例えば、ユニバーサル基板版レベルメータの場合は、S12232ZA_LEVEL_METER5\bmpというフォルダにある)

図20、bmpフォルダ内のmiku0.bmp～miku8.bmp

これら9枚のビットマップ画像は全て横100×縦32ピクセルのサイズで、白と黒の2色のみを使って描かれています。ファイル名はmiku?.bmpという形式(?のところには0～8の数字が入る)となっていますが、数字が小さいほど小さな音量に、数字が大きいほど大きな音量に対応しています。

これらのビットマップ画像は、そのままではArduinoのスケッチが読み込む事ができませんので、C++のヘッダファイルに変換します。変換の方法は後で説明しますが、変換した結果が、スケッチのフォルダの中の、miku0.h～miku8.hというファイルです。

図21、miku0.bmpの内容

miku0.hの中身を見れば分かるように、ビットマップ画像は、PROGMEM unsigned char型の1次元配列で表現されています。

スケッチのメインファイル(.inoファイル)は、次の様に、各画像の配列の宣言を#include指令でインクルードしています。

図22、ビットマップ画像のインクルード

以上の説明から分かるように、miku0.h～miku8.hを、オリジナルの画像を変換したものに差し替えれば、自分の好みの絵柄のレベルメータに作り変える事ができます。

10-2.画像を用意する

オリジナルの絵柄のレベルメータを作るには、まず横100×縦32ピクセルの、白と黒のみを用いたビットマップ画像を用意する必要があります。Windowsに標準で付いてくるペイントなどで、画像を描いて下さい。Windows 7の場合は、スタート→すべてのプログラム→アクセサリ→ペイントと選べば、ペイントが起動します。

図23、ペイントの起動

本来は、ここで皆さんに絵を描いていただきたいのですが、とりあえずビットマップ画像の差し替え方法を確認してみたい方のために、サンプルの画像を用意しました。

図24、差し替え用miku0.bmp

図25、差し替え用miku1.bmp

図26、差し替え用miku2.bmp

図27、差し替え用miku3.bmp

図28、差し替え用miku4.bmp

図29、差し替え用miku5.bmp

図30、差し替え用miku6.bmp

図31、差し替え用miku7.bmp

図32、差し替え用miku8.bmp

これらの画像は、下のリンクをクリックして、ファイルを適当な作業用フォルダにダウンロードしてください。

レベルメータ用サンプルビットマップ LMBmpSample.zip (5kB)

なお、ご自分でビットマップ画像を描かれた方は、画像のサイズが100X32ピクセルであることを確認して、ビットマップファイル(拡張子.bmp)として、適当な作業用フォルダに保存してください。モノクロビットマップでも、16色ビットマップでも、256色ビットマップでも、24ビットビットマップでもかまいません。ファイル名はmiku0.bmp～miku8.bmpとしてください。

図33、画像サイズの確認

図34、ビットマップ画像として保存

10-3.画像をヘッダファイルに変換する

ビットマップ画像をヘッダファイルに変換するBMP2Hというソフトが、MGLCDライブラリに付属しています。MGLCDライブラリをインストールしたフォルダの中に、BMP2Hというフォルダがあるはずです。(MGLCDライブラリのバージョンによってはextrasというフォルダがあり、さらにその中にBMP2Hというフォルダがある) その中のBMP2H.exeがBMP2Hの実行ファイルです。このソフトはWindows XPおよびWindows 7の32ビット版で動作確認をしていますが、おそらくWindows VistaやWindows 8でも動作するでしょう。

図35、BMP2H.exeの起動

BMP2H.exeを起動して、Load BMP file...と書いたボタンをクリックしてください。

図36、BMP2H.exeの起動時の画面

次に、開いたダイアログボックスで、先ほどダウンロード(または作成)した、miku0.bmpを選択してください。

図37、miku0.bmpの選択

すると、miku0.bmpの画像が表示されますので、画像を確認した上で、Create header file...のボタンをクリックしてください。

図38、画像の確認とヘッダファイルへの変換

miku0.bmpのヘッダファイルへの変換が行われ、Created a header file.のメッセージが表示されます。OKファイルをクリックしてください。

図39、変換終了時のメッセージ

miku0.bmpと同じフォルダに、miku0.hというファイルができているはずです。

図40、変換後のファイル(miku0.h)

同様に、Load BMP file...ボタンでビットマップ画像を選び、Create header file...ボタンでヘッダファイルに変換して、miku1.h～miku8.hも作成してください。

10-4.画像を入れ替えたスケッチを書き込む

この様にして出来たヘッダファイルを、レベルメータのスケッチのフォルダのmiku0.h～miku8.hに上書き保存すれば、画像の差し替えは完了です。後は、各レベルメータの製作記事の説明参考に、レベルメータのマイコン(Arduino)にスケッチを書き込んでください。オリジナル画像のレベルメータが動作するはずです。

図41、スケッチの書き込み

写真35、アニメーションを入れ替えたレベルメータ

画面右側の「測音ミク」のスクロール表示については、書き換え方を詳しくは説明しません。各自研究してください。logo0.bmp～logo7.bmpを書き換えれば、この部分も書き換えることができます。

このページで使われている用語の解説

2014年11月09日	公開。
2015年08月15日	MGLCDライブラリのバージョンによってBMP2Hフォルダの位置が変わる事に言及。

	商品名	LCDレベルメータ
	税抜き小売価格	3500円
	販売店	スイッチサイエンス
	サポートページ	LCDレベルメータサポートページ

	商品名	S12232ZA
	税抜き小売価格	400円
	販売店	スイッチサイエンス
	サポートページ	S12232ZAサポートページ

	商品名	122X32モノクログラフィックLCDシールド
	税抜き小売価格	3333円
	販売店	スイッチサイエンス
	サポートページ	122X32モノクログラフィックLCDシールドサポートページ

	商品名	Arduino Uno用ブートローダスケッチライタシールドキット
	税抜き小売価格	1440円
	販売店	スイッチサイエンス
	サポートページ	Arduino Uno用ブートローダライタシールドキットサポートページ