Program Resource

開発者向け各種コード、アルゴリズム、リソース情報ライブラリ もしくはねふぁの覚え書き

今回はスプライトアニメーションを使ったテキスト表示。

こんな感じの楽しいアニメーションを組んでみる。

まずはイン〇ーダーのアニメーションから。イン〇ーダーやパッ〇マンのアニメーションの絵はParolaライブラリのサンプルスケッチから持ってきている。

displayTextでテキストを設定し、表示時のアニメーションタイプとしてPA_SPRITEを指定しておく。その前にスプライトデータをsetSpriteDataで設定しておくだけ。

setSpriteDataのパラメーターは最初の3つがテキストイン時のアニメーションデータとサイズ。次の3つがテキストアウト時のアニメーションデータとサイズ。インの時だけアニメーションしている。

#include <MD_Parola.h>
#include <MD_MAX72xx.h>

//ドットマトリクス
#define HARDWARE_TYPE MD_MAX72XX::FC16_HW //デバイス種別
#define MAX_DEVICES 4     //8x8のマトリクス表示のユニット数
#define DATA_PIN  11      //DATA
#define CS_PIN    10      //CS
#define CLK_PIN   13      //CLK
MD_Parola dot = MD_Parola(HARDWARE_TYPE, CS_PIN, MAX_DEVICES);

const uint8_t F_INVADER = 2;
const uint8_t W_INVADER = 10;
const uint8_t PROGMEM invader[F_INVADER * W_INVADER] =  // space invader
{
  0x0e, 0x98, 0x7d, 0x36, 0x3c, 0x3c, 0x36, 0x7d, 0x98, 0x0e,
  0x70, 0x18, 0x7d, 0xb6, 0x3c, 0x3c, 0xb6, 0x7d, 0x18, 0x70,
};

void showsplite(){
     dot.setSpriteData(invader, W_INVADER, F_INVADER, invader, W_INVADER, F_INVADER);
     dot.displayText("Invade",PA_LEFT, 50, 0, PA_SPRITE, PA_NO_EFFECT);
}

void setup() {
	dot.displayReset();
	dot.begin();
	showsplite();
}

void loop() {
	dot.displayAnimate();
	delay(10);
	if (dot.getZoneStatus(0)){ //アニメーション完了判定
		showsplite();
	}
}

次にパッ〇マンが入りながらテキスト表示、ゴー〇トに追いかけられながらテキストが消えていくアニメーション。

#include <MD_Parola.h>
#include <MD_MAX72xx.h>

//ドットマトリクス
#define HARDWARE_TYPE MD_MAX72XX::FC16_HW //デバイス種別
#define MAX_DEVICES 4     //8x8のマトリクス表示のユニット数
#define DATA_PIN  11      //DATA
#define CS_PIN    10      //CS
#define CLK_PIN   13      //CLK
MD_Parola dot = MD_Parola(HARDWARE_TYPE, CS_PIN, MAX_DEVICES);

const uint8_t F_PMAN1 = 6;
const uint8_t W_PMAN1 = 8;
static const uint8_t PROGMEM pacman1[F_PMAN1 * W_PMAN1] =  // gobbling pacman animation
{
  0x00, 0x81, 0xc3, 0xe7, 0xff, 0x7e, 0x7e, 0x3c,
  0x00, 0x42, 0xe7, 0xe7, 0xff, 0xff, 0x7e, 0x3c,
  0x24, 0x66, 0xe7, 0xff, 0xff, 0xff, 0x7e, 0x3c,
  0x3c, 0x7e, 0xff, 0xff, 0xff, 0xff, 0x7e, 0x3c,
  0x24, 0x66, 0xe7, 0xff, 0xff, 0xff, 0x7e, 0x3c,
  0x00, 0x42, 0xe7, 0xe7, 0xff, 0xff, 0x7e, 0x3c,
};

const uint8_t F_PMAN2 = 6;
const uint8_t W_PMAN2 = 18;
static const uint8_t PROGMEM pacman2[F_PMAN2 * W_PMAN2] =  // ghost pursued by a pacman
{
  0x00, 0x81, 0xc3, 0xe7, 0xff, 0x7e, 0x7e, 0x3c, 0x00, 0x00, 0x00, 0xfe, 0x7b, 0xf3, 0x7f, 0xfb, 0x73, 0xfe,
  0x00, 0x42, 0xe7, 0xe7, 0xff, 0xff, 0x7e, 0x3c, 0x00, 0x00, 0x00, 0xfe, 0x7b, 0xf3, 0x7f, 0xfb, 0x73, 0xfe,
  0x24, 0x66, 0xe7, 0xff, 0xff, 0xff, 0x7e, 0x3c, 0x00, 0x00, 0x00, 0xfe, 0x7b, 0xf3, 0x7f, 0xfb, 0x73, 0xfe,
  0x3c, 0x7e, 0xff, 0xff, 0xff, 0xff, 0x7e, 0x3c, 0x00, 0x00, 0x00, 0xfe, 0x73, 0xfb, 0x7f, 0xf3, 0x7b, 0xfe,
  0x24, 0x66, 0xe7, 0xff, 0xff, 0xff, 0x7e, 0x3c, 0x00, 0x00, 0x00, 0xfe, 0x73, 0xfb, 0x7f, 0xf3, 0x7b, 0xfe,
  0x00, 0x42, 0xe7, 0xe7, 0xff, 0xff, 0x7e, 0x3c, 0x00, 0x00, 0x00, 0xfe, 0x73, 0xfb, 0x7f, 0xf3, 0x7b, 0xfe,
};

void showsplite(){
     	dot.setSpriteData(pacman1, W_PMAN1, F_PMAN1, pacman2, W_PMAN2, F_PMAN2);
     	dot.displayText("Hello",PA_LEFT, 50, 0, PA_SPRITE, PA_SPRITE);
}

void setup() {
	dot.displayReset();
	dot.begin();
	showsplite();
}

void loop() {
	dot.displayAnimate();
	delay(10);
	if (dot.getZoneStatus(0)){ //アニメーション完了判定
		showsplite();
	}
}

テキストインとテキストアウト両方PA_SPRITEに設定、インとアウトで異なるアニメーションデータを設定している。

テキストイン後、何か処理をしてしばらくしてからテキストアウトする場合インのアニメーションとアウトのアニメーションを分ければOK。

以下は上と同じ動作になるが、テキストインとテキストアウトを分けているので、アニメーション完了後一旦別の処理を挟む事が出来る。

int animation = 0;

void showsplite(){
	if (animation == 0){
     	dot.setSpriteData(pacman1, W_PMAN1, F_PMAN1, pacman2, W_PMAN2, F_PMAN2);
     	dot.displayText("Hello",PA_LEFT, 50, 0, PA_SPRITE, PA_NO_EFFECT);
     	animation = 1;
	}else{
     	dot.setSpriteData(pacman1, W_PMAN1, F_PMAN1, pacman2, W_PMAN2, F_PMAN2);
     	dot.displayText("Hello",PA_LEFT, 50, 0, PA_PRINT, PA_SPRITE);
     	animation = 0;
	}
}

void setup() {
	dot.displayReset();
	dot.begin();
	showsplite();
}

void loop() {
	dot.displayAnimate();
	delay(10);
	if (dot.getZoneStatus(0)){ //アニメーション完了判定
		if (animation == 1){
			//ここで何か処理を入れる
		}
		showsplite();
	}
}

コメントを残す

メールアドレスが公開されることはありません。


*

CAPTCHA