Arduboy ことはじめ

概要

Arduboy のセットアップから簡単なスケッチを動かすところまで解説します。

環境セットアップ

Arduino IDE をダウンロードする

Arduino - Home 2016-06-05 11-07-16.png

Download をクリックして先に進みます。

Arduino - Software 2016-06-05 11-09-46.png

右側の一覧から、自分の環境に合ったものを選びます。

Arduino - Donate 2016-06-05 11-14-01.png

気が向いたら寄付しましょう。寄付しない場合は、 JUST DOWNLOAD で。

ダウンロード後、インストールします。

Arduino IDE の設定

Screen Shot 2016-06-05 at 11.50.53.png

メニューからボードを Arduino Leonardo にします。

Screen Shot 2016-06-05 at 11.52.35.png

ポートも、 Arduino のものにしておくとあとで便利です。

Arduboy ライブラリの追加

Arduboy でプログラムするにあたって必要なライブラリを IDE に追加します。

Screen Shot 2016-06-05 at 12.08.27.png

メニューの Include Library > Manage Libraris... を選びます。

Screen Shot 2016-06-05 at 12.10.50.png

検索フィルタに boy と入れると、 Arduboy 用のライブラリが出てくるので、最新のバージョンをインストールします。

Arduboy を繋ぐ

IMG_5323.JPG

USB<>USB-Micro ケーブルでホスト PC と Arduboy を繋ぎます。

Arduboy の電源を入れると、既にインストールされているプログラムが即時実行されますが、開発中も電源入れっぱなしで、プログラムが実行されたままでも大丈夫です。

スケッチを用意する

Screen Shot 2016-06-05 at 12.05.18.png

新規スケッチを用意すると、上記画面のようになっていると思います。

これから、ここにプログラムを書き込んでいきます。

スケッチに書き込む

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#include <Arduboy.h>

Arduboy arduboy;

void setup() {
arduboy.begin();
}

void loop() {
if (!arduboy.nextFrame()) return;
arduboy.clear();
arduboy.drawCircle(128/2, 64/2, 16, 1);
arduboy.display();
}

スケッチの中身を上記のソースに置き換えて、 Command+U (Windows なら Ctrl+U) を押して Arduboy に転送します。

しばらくすると、 Arduboy が起動し、真っ黒な画面の中心に円が描かれているのが確認出来ると思います。

これで、プリインストールされていたゲームの代わりに、あなたが書き込んだプログラムが実行されたことになります。

1フレームの時間を測る

概要

ヒャッハー!約60fpsだぜ!

計測してみる

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
#include <Arduboy.h>

Arduboy boy;

typedef signed char s8;
typedef signed short s16;
typedef signed int s32;

typedef unsigned char u8;
typedef unsigned short u16;
//typedef unsigned int u32;

typedef signed short fx16;

s16 x = 0;
s32 cnt = 0;
unsigned long frameload = 0;
unsigned long prev_count = 0;

#define FX16_SHIFT (7)
#define FX16_ONE (1<<FX16_SHIFT)
#define FX16_CONST(v) ((s16)((v) * 128.0f))
#define FX16_TOINT(v) ((v)>>FX16_SHIFT)
#define FX16_MUL(a, b) (((a)*(b))>>FX16_SHIFT)
#define FX16_DIV(a, b) ((s16)(((s32)(a)<<FX16_SHIFT)/(b)))

struct Object {
fx16 x, y;
};

Object obj;

void update() {
if (boy.pressed(LEFT_BUTTON)) {
obj.x -= FX16_CONST(1.5f);
}
if (boy.pressed(RIGHT_BUTTON)) {
obj.x += FX16_CONST(1.5f);
}
if (boy.pressed(UP_BUTTON)) {
obj.y -= FX16_CONST(1.5f);
}
if (boy.pressed(DOWN_BUTTON)) {
obj.y += FX16_CONST(1.5f);
}
boy.drawCircle(FX16_TOINT(obj.x), FX16_TOINT(obj.y), 8, 0xff);
}


void setup() {
boy.begin();
boy.setFrameRate(60);
}

void loop() {
if (!boy.nextFrame()) return;
auto now = micros();
frameload = now - prev_count;
prev_count = now;
boy.clear();
update();
boy.display();
if (++cnt > 60) {
Serial.println(frameload);
cnt = 0;
}
}

関係ないコードも混じってますが、とりあえず、毎フレーム micros() で起動後から経過した時間を取得して、一秒に一回シリアルへ出力。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
[k-ya@meteor] ~/Documents/Arduino/build
% picocom /dev/cu.usbmodem1411
picocom v2.1

port is : /dev/cu.usbmodem1411
flowcontrol : none
baudrate is : 9600
parity is : none
databits are : 8
stopbits are : 1
escape is : C-a
local echo is : no
noinit is : no
noreset is : no
nolock is : no
send_cmd is : sz -vv
receive_cmd is : rz -vv -E
imap is :
omap is :
emap is : crcrlf,delbs,

Type [C-a] [C-h] to see available commands

Terminal ready
16384
16384
16384
16384
16384
15360
15360
15360
16384
16384
16384
16384
16384
15360
15368

Thanks for using picocom

タイマー精度の関係なのか、16384というこれはこれでキリのいい数字が出ているが、大体60fps出ているようだ。

Arduboy のフレームバッファ

概要

Arduboy の画面に色々表示させるために、フレームバッファの構造について検証します。

フレームバッファの構造

1bit が 1 ドットに対応しており、 1 バイト毎に縦に並んでいる。

1
unsigned char* ptr = arduboy.getBuffer();

として、 ptr の添え字と座標の関係は以下の表の通り。

x0 x1 x2 x127
y0-y7 0 1 2 127
y8-y15 128 129 130 255
:
y48-y55 768 769 770 895
y56-y63 896 897 898 1023
1
2
3
4
auto ptr = arduboy.getBuffer();
ptr[0] = 0xff; // 1111_1111
ptr[8] = 0x11; // 0001_0001
ptr[16] = 0xa7; // 1010_0111

例えば上記のように描き込んだ場合は、

screenshot.png

このように表示されます。

このことから、ビットの対応は、

bit
y0 0
y1 1
y2 2
y3 3
y4 4
y5 5
y6 6
y7 7

になってることがわかりました。