用Ai-M61点亮屏幕后，显示精灵动画

安信可科技 · 公众号 · · 2025-03-10 18:03

正文

以下作品由安信可社区用户

之前笔者用Ai-M61点亮了屏幕，并显示了图片（教程在这里： M61 gpio模拟i2c 点亮0.96寸屏幕），这次准备在屏幕上显示动画，制作会走路的小人以及会动的背景~

先看效果（如图），由于视频太大，转成gif后文件也过大，只能缩小分辨率、帧数和时长了，原动画是不断绕地图一周。

上一次教程在屏幕上画了一张图，但它是静态的，如果想做点有趣的东西，那动画也是基础，必不可少，所以这次来学画动画。

像电影一样，一系列不同的“画面”连续播放就形成了动画。而创造不同“画面”一般有两种方式，一种是画面本身不同，另一种是画面里面的东西在动。想象一下这个画面，角色从迷宫左上角走到右下角。

第一种：有4张不同的图，逐次播放，称为帧动画。

第二种：有一张背景和主角，每次播放时，背景直接画，角色画在不同的位置，这样的角色称为精灵（精灵本身也可以有帧动画）。

显然需要角色从迷宫左上角走到右下角，第二种更适合，实际应用中需两种结合来使用。最典型的例子比如RPG动画里面，角色精灵移动时的左右脚迈步动画就是帧动画，精灵则是画在地图中的不同位置。

那其实就很简单了， 每一帧都是先在屏幕画出背景，再在指定位置画上角色，如果角色可操控，那只需要用中断改变其位置。

貌似很容易实现，但这时又想到了个问题，图片没有透明信息。

如果精灵的图片直接覆盖画上去，会有个矩形白边，如图1。
如果是用“位或”的方式画（暂且不论能不能实现），则连精灵都看不到了，如图2。

而想要的效果是最后的效果，部分覆盖，部分透明，如图3。

这个问题最经典的解决方案就是用遮罩，遮罩如图1。先用遮罩“位与运算”图1，得到图2，再用精灵“位或运算”图2，得到最终结果图3。

或者就是只画黑色的部分，白色的部分直接忽略不画。

为了实现或绘图的图片能进行或运算，也为了能提高性能，得换种画图方式。

原来的方式是直接在屏幕上逐个绘制图像，那改为 把所有精灵图像逐个画在画板上，画完之后再把画板贴到屏幕 上。

可以理解画板是内存数据，操作内存肯定比i2c的画到屏幕快得多，原来要画多个图像，现在合并成了只画一次。而最关键的是内存操作可以进行位运算。

那么接下来简单说下位运算，以上个教程画的大道寺知世为例：

const uint8_t picture_tab[]={
0x1,0x2,0x4,0x8,0xF0,0xA0,0x0,0x10,0x10,0x10,0x8,0x8,0x8,0x18,0x10,0x11,

图像的数据逐个改为二进制，比如 0x1 = 00000001，0x2 = 00000010，...，0x11 = 00010001，共16个uint8_t，从左到右的每一竖列，在1的位置涂黑，就得到了下图的0~15列。

把图片数据全部画完，就得到下图

那么图像合并就很明显了，当两张图像使用“或运算”时，只要相同位置有一个是涂黑的，就涂黑。

“与运算”反之，所以我们只需遮罩用&，图像用|，即可得到目标图像，再把目标图像画到屏幕上。

就像这样，把左下角的精灵贴到背景上，背景就是知世。

另外一个难点，就是绘制时是8位一起，所以当精灵在竖轴的坐标不是8的整倍数时，需要跨越两个page绘制，处理起来麻烦，但不是无法处理，就直接看代码了。

这次代码分为3个文件了。main、spirit和resources

main.c

/**




    
* @file main.c* @author lclight* @brief* @version 0.1* @date 2023-11-26** @copyright Copyright (c) 2023**/// 头文件，为省事直接写了一大堆#include #include #include #include #include #include #include #include "board.h"#include "log.h"#include "bflb_mtimer.h"#include "bflb_i2c.h"#include "bflb_gpio.h"#include "bflb_audac.h"#include "bflb_dma.h"#include "bl616_glb.h"#include "bflb_flash.h"#include "spirit.h"#include #include #include 
// 选择支持i2c的两个针脚，接线也要按这个来接#define SDA GPIO_PIN_31#define SCL GPIO_PIN_30
// sleep函数，封装一层，方便修改// 因为精度不够，这里用1太耗时，改为0比较合适，用usleep同样不行#define waittime(t) vTaskDelay(0) 
struct bflb_device_s *gpio;
 // 从机地址，从手册或者卖家给的例子中获得，如果没有，甚至可以用for从0~127逐个初始化再确定是哪个uint8_t addr = 0x78;
// i2c协议的开始位void i2c_start(){    bflb_gpio_set(gpio, SDA);    waittime(1);    bflb_gpio_set(gpio, SCL);    waittime(1);    bflb_gpio_reset(gpio, SDA);    waittime(1);    bflb_gpio_reset(gpio, SCL);}// i2c协议的结束位void i2c_stop(){    bflb_gpio_reset(gpio, SDA);    waittime(1);    bflb_gpio_set(gpio, SCL);    waittime(1);    bflb_gpio_set(gpio, SDA);}// i2c协议发送一个字节void send_byte(uint8_t dat){    uint8_t i;    for (i = 0; i<8; i++)    {        if (dat & 0x80)        {            bflb_gpio_set(gpio, SDA);        }        else        {            bflb_gpio_reset(gpio, SDA);        }        waittime(1);        bflb_gpio_set(gpio, SCL);        waittime(1);        bflb_gpio_reset(gpio, SCL);        waittime(1);        dat <<= 1;    }    bflb_gpio_set(gpio, SDA);    waittime(1);    bflb_gpio_set(gpio, SCL);    waittime(1);    bflb_gpio_reset(gpio, SCL);    waittime(1);}
// 发送一帧数据void oled_wr_byte(uint8_t dat, uint8_t mode){    i2c_start();    send_byte(addr);    mode ? send_byte(0x40) : send_byte(0x00);    send_byte(dat);    i2c_stop();}// 发送一帧命令数据




    
void oled_cmd(uint8_t cmd){    // printf("cmd:%d\r\n", cmd);    oled_wr_byte(cmd, 0);}// 发送一帧Data数据void oled_data(uint8_t dat){    oled_wr_byte(dat, 1);}// 发送定位到页的命令void page_set(uint8_t page){    oled_cmd(0xb0 + page);}// 发送定位到列的命令void column_set(uint8_t col){    oled_cmd(0x10 | (col >> 4));    oled_cmd(0x00 | (col & 0x0f));}// 清屏，就是把填满数据0void oled_clear(){    uint8_t page,col;    for (page = 0; page < 8; ++page)    {        page_set(page);        column_set(0);        for (col = 0; col < 128; ++col)        {            oled_data(0x00);        }    }}// 清屏，就是把填满数据1void oled_full(){    uint8_t page,col;    for (page = 0; page < 8; ++page)    {        page_set(page);        column_set(0);        for (col = 0; col < 128; ++col)        {            oled_data(0xff);        }    }}// 显示图片void oled_display(const uint8_t *ptr_pic){    uint8_t page,col;    for (page = 0; page < 8; ++page)    {        page_set(page);        column_set(0);        for (col = 0; col < 128; ++col)        {            oled_data(*ptr_pic++);        }    }}// 显示图片，1和0反转，就是反色void oled_display_r(const uint8_t *ptr_pic){    uint8_t page,col,data;    for (page = 0; page < 8; ++page)    {        page_set(page);        column_set(0);        for (col = 0; col < 128; ++col)        {            data=*ptr_pic++;            data=~data;            oled_data(data);        }    }}// 刷新，即时把内存的图像画到屏幕上// 由于实际上黑底白线比较好看，所以用反色画void refresh(){    uint8_t page,col,data;    dc = dc0;    for (page = 0; page < 8; ++page)    {        page_set(page);        column_set(0);        for (col = 0; col < 128; ++col)        {            data=*dc++;            data=~data;            oled_data(data);        }    }}// 初始化，点亮屏幕，按手册执行一些列命令即可，有些命令不是必要的void init_display(){    uint8_t cmds[25] =     {       0xAE,//关闭显示       0xD5,//设置时钟分频因子,震荡频率       0x80,  //[3:0],分频因子;[7:4],震荡频率       0xA8,//设置驱动路数       0X3F,//默认0X3F(1/64)       0xD3,//设置显示偏移       0X00,//默认为0       0x40,//设置显示开始行 [5:0],行数.                                     0x8D,//电荷泵设置       0x14,//bit2，开启/关闭       0x20,//设置内存地址模式       0x02,//[1:0],00，列地址模式;01，行地址模式;10,页地址模式;默认10;       0xA1,//段重定义设置,bit0:0,0->0;1,0->127;       0xC8,//设置COM扫描方向;bit3:0,普通模式;1,重定义模式 COM[N-1]->COM0;N:驱动路数       0xDA,//设置COM硬件引脚配置       0x12,//[5:4]配置                   0x81,//对比度设置       0xEF,//1~255;默认0X7F (亮度设置,越大越亮)       0xD9,//设置预充电周期       0xf1,//[3:0],PHASE 1;[7:4],PHASE 2;       0xDB,//设置VCOMH 电压倍率       0x30,//[6:4] 000,0.65*vcc;001,0.77*vcc;011,0.83*vcc;       0xA4,//全局显示开启;bit0:1,开启;0,关闭;(白屏/黑屏)       0xA6,//设置显示方式;bit0:1,反相显示;0,正常显示               0xAF,//开启显示         };    uint8_t i;    for (i = 0; i < 25; ++i)    {        oled_cmd(cmds[i]);    }    sleep(1);}void led_run(void* param){
    // 创建我们操控的主角，称为英雄    uint8_t heroWalkImg1[] = HERO_IMG1;    uint8_t heroWalkImg2[] = HERO_IMG2;    uint8_t heroMask[] = HERO_MASK;     struct frameImg heroFrames[2] = {        // 脚不用覆盖，所以可以共用一个遮罩        {8, 16, heroWalkImg1, heroMask},        {8, 16, heroWalkImg2, heroMask}    };    //默认左上角{0,0}，默认第一帧，总共2帧，当前状态1    struct




    
 spirit hero = {0,0, 1,2, SPIRIT_STATE_SHOW, heroFrames};    //    uint8_t tmpDir = 0; // 方向，走路demo用到    gpio = bflb_device_get_by_name("gpio");    /* I2C0_SDA */    bflb_gpio_init(gpio, SDA, GPIO_OUTPUT | GPIO_PULLUP);    /* I2C0_SCL */    bflb_gpio_init(gpio, SCL, GPIO_OUTPUT | GPIO_PULLUP);    bflb_gpio_init(gpio, GPIO_PIN_18, GPIO_INPUT | GPIO_FLOAT | GPIO_SMT_EN | GPIO_DRV_0);    bflb_gpio_init(gpio, GPIO_PIN_14, GPIO_OUTPUT | GPIO_FLOAT | GPIO_SMT_EN | GPIO_DRV_1);    // 初始化，点亮屏幕    // 图片轮播    init_display();    oled_full();    sleep(3);    while (true)    {        clean();        // 背景也是一个精灵，静态创建即可        draw(&bg);         draw(&hero);        refresh();        // vTaskDelay(1);        // 让小人绕屏幕一圈        switch (tmpDir)        {            case 0:                if (hero.px<110)                {move(&hero, 1, 0);}                else                {                    if (bg.px>-72)                    {move(&bg, -1, 0);}                    else                    {tmpDir++;}                }                break;            case 1:                if (hero.py<52)                {move(&hero, 0, 1);printf("hero.py:%d\r\n", hero.py);}                else                {tmpDir++;}                break;            case 2:                if (hero.px>10)                {move(&hero, -1, 0);}                else                {                    if (bg.px<0)                    {move(&bg, 1, 0);}                    else                    {tmpDir++;}                }                break;            case 3:                if (hero.py>0)                {move(&hero, 0, -1);}                else                {tmpDir=0;}                break;        }        // 小人切换走路动画帧        nextFrame(&hero);    }    }int main(void){    board_init();    xTaskCreate(led_run, (char*)"led_run", 1024*4, NULL, 1, NULL);    vTaskStartScheduler();}

文件名：spirit.h



#ifndef SPIRIT_H#define SPIRIT_H#include #include "resources.h"
#define SPIRIT_STATE_HIDE 0#define SPIRIT_STATE_SHOW 1struct frameImg{    uint8_t w;  // 1~N    uint8_t h;  // 1~N，一定是8的整数倍    uint8_t *img;    uint8_t *mask;};struct spirit {    short px;  // -N~N    short py;  // -N~N    uint8_t curFrame;    uint8_t maxFrame;    uint8_t state; // 精灵当前状态,0是正常,1是隐身    struct frameImg *frames;};

// 背景，实际上也是精灵uint8_t bgImg[] = BG_IMG;struct frameImg bgFrame[] = {    {200, 64, bgImg, NULL}};struct spirit bg = {0,0, 1,1, SPIRIT_STATE_SHOW, bgFrame};
// 先把背景和所有精灵都画到dc上，再画到屏幕uint8_t dc0[1024];uint8_t *dc;
// 让精灵进入下一帧uint8_t nextFrame(struct spirit * sp){    sp->curFrame ++;    if (sp->curFrame > sp->maxFrame){        sp->curFrame = 1;    }    return sp->curFrame;}// 让精灵进入指定帧uint8_t frame(struct spirit * sp, uint8_t tarFrame){    sp->curFrame = tarFrame;    if (sp->curFrame > sp->maxFrame){        sp->curFrame = 1;    }    return sp->curFrame;}// 让精灵移动,注意需要支持负数void move(struct spirit * sp, short opx, short opy){    sp->px +=opx;    sp->py +=opy;}void draw(struct spirit * sp){    short spCol,spLine,spPage,spIdx,dcCol,dcLine,dcIdx,dcNIdx,dcPage,offset;    if (sp->state != SPIRIT_STATE_HIDE){        // 取出要画的那一帧        struct frameImg * spFrame = & sp->frames[sp->curFrame-1];        // 两个for从上到下，从左到右，把精灵绘制到内存上        for (spCol = 0; spCol < spFrame->w; ++spCol)        {            // 1个像素算一行，每个列有8个像素            for (spLine = 0; spLine < spFrame->h; spLine+=8)             {                // 计算出当前绘制到哪里 (page*8)-col                dcLine = sp->py+spLine; dcCol = sp->px+spCol;                // 超出屏幕范围的不画                if (dcLine>=0 && dcLine < 64 && dcCol>=0 && dcCol < 128){                    // 分别是绘制位置的page和精灵的page                    dcPage = dcLine/8;                    spPage = spLine/8;                    // Idx就是数组下标                    dcIdx = (dcCol)+(dcPage)*128;                    spIdx = spCol+spPage*spFrame->w;                    // 精灵位置精确到像素，跨越了page，偏移多少要在下个page绘制                    offset = dcLine % 8;                    if (offset == 0){                        if (spFrame->mask != NULL) { dc0[dcIdx] &= spFrame->mask[spIdx]; }                        dc0[dcIdx] |= spFrame->img[spIdx];                    }else{                        // 为了让左移后补上的位是1，取反->左移->再取反                        if (spFrame->mask != NULL) { dc0[dcIdx] &= (~((~spFrame->mask[spIdx]) << offset)); }                        // if (spFrame->mask != NULL) { dc0[dcIdx] &= ((spFrame->mask[spIdx] << offset) | (0xFF >> (8-offset)))); }                        dc0[dcIdx] |= (spFrame->img[spIdx] << offset);                        // 跨越了page，要在下个page绘制偏移出去的精灵，下个page的数组下标就是dcNIdx                        dcNIdx = (dcCol)+(dcPage+1)*128;                        // 选了下个page，需要判断是否超出屏幕范围                        if (dcNIdx>=0 && dcNIdx < 1024){                            // 右移无法保证补位是0还是1，干脆就用|填充1                            if (spFrame->mask != NULL) { dc0[dcNIdx] &= ((spFrame->mask[spIdx] >> (8-offset) ) | (0xFF << offset) ); }                            dc0[dcNIdx] |= ((spFrame->img[spIdx] >> (8-offset) ) & (~(0xFF << offset))); // 这里是或运算，补0                        }                    }                }            }        }    }}void clean(){    for (size_t i = 0; i < 1024; ++i)    {        dc0[i] = 0;    }}#endif /* MBEDTLS_CONFIG_H */

文件名：resources.h



#ifndef RESOURCES_H#define RESOURCES_H#include 

// HERO_IMG1 HERO_IMG2// ████████  ████████// █______█__█______█//_█_██_█_█__█_██_█_█//_█______█__█______█//_█______█__█______█//_█__██__█__█__██__█//_█______█__█______█//_████████__████████//___█_█_______█_█___//__█___█_______█____//__█___█______█_█___//__██__██_____████__#define HERO_IMG1  {0xFF,0x81,0x85,0xA5,0xA1,0x85,0x81,0xFF,0x0,0xE,0x9,0x0,0x1,0xE,0x8,0x0}#define HERO_IMG2  {0xFF,0x81,0x85,0xA5,0xA1,0x85,0x81,0xFF,0x0,0x0,0xD,0xA,0xD,0x8,0x0,0x0}#define HERO_MASK  {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xFF,0xFF,0xFF,0xFF,0xFF,0xFF,0xFF,0xFF}
#define

用Ai-M61点亮屏幕后，显示精灵动画

正文

请到「今天看啥」查看全文