ANSI Escape Sequence 下落的方塊

1. ANSI Escape 的用途

無意中發(fā)現(xiàn) B站有人講解， 完全基于終端實現(xiàn)俄羅斯方塊。 基本想法是借助于 ANSI Escape Sequence 實現(xiàn)方方塊的繪制、 下落動態(tài)效果等。對于只了解 ansi escape sequence 用于 log 的顏色打印的人來說， 這無疑是拓寬了認識。

這一篇簡單的列一下 ansi escape sequence 中的稀奇古怪的數(shù)字的含義， 并最終給出一個綠色方塊下落的動態(tài)效果和對應(yīng)的代碼。 基于本篇給出的表格和代碼， 可以把它拓展為自由落體的游戲效果， 也可以跟著 B 站視頻更容易的寫出終端里的俄羅斯方塊。

同時也注意到， ansi escape sequence 有它的局限性， 無法繪制比較大的圓形， 使用 ansi escape sequence 會限制界面顯示、 游戲開發(fā)的上限。

2. ANSI Escape Sequence 有什么用？

終端會把 ANSI Escape 序列的字符解釋為命令，而不是原本的內(nèi)容。這些命令在終端上控制如下內(nèi)容：

• 鼠標(biāo)位置
• 顏色
• 字體樣式
• 其他選項

使用 ANSI Escape Sequence 做 log 打印的例子比較多， 但其實還可以那它用作繪圖顯示： 把終端當(dāng)成是 256 色的圖像， 在終端顯示圖像內(nèi)容。

3. 形式

3.1 格式概況

• 絕大多數(shù)有用的序列： ESC[ 開頭
• 序列的重置： ESC[0m， 意思是各種設(shè)置的屬性都撤銷掉，恢復(fù)為沒有設(shè)置時的狀態(tài)

一些“黑話”:

• CSI (Control Sequence Introducer): ESC[ 的別名, ASCII escape 數(shù)值是27， 實際使用時 ESC 換成 \x1b(16進制), \033(8進制) 或 \e
• SGR (Select Graphic Rendition): CSI n m 的別名，用于設(shè)定字符的顏色和風(fēng)格。其中:
  • CSI 要換成 \x1b[, \033[ 或 \e[
  • n 要換成具體的數(shù)字，在 0~107 之間

根據(jù) wikipedia 得到的解釋：

• 起始: ESC[ (這個組合又叫做 CSI, Control Sequence Introducer)
• parameter bytes: 任意數(shù)量的 0x30-0x3F 范圍的字符, 也就是 0-9:;<=>?
• intermediate bytes: 任意數(shù)量的 0x20-0x2F 范圍的字符，也就是 !"#$%&'()*+,-./
• final bytes: 任意數(shù)量的 0x40-0x7E 范圍的字符，也就是 “@A–Z[]^_`a–z{|}~”
• private bytes: 包含 <=>? 或 0x70-0x7E 范圍(p-z{|}~) 的字符, 各廠商自行定義和使用的
• 設(shè)定多個屬性: ; 分隔的單個屬性
• 重置: ESC[0m

而網(wǎng)上其他資料， 以及實際驗證， 發(fā)現(xiàn)維基百科有遺漏內(nèi)容， ESC[ (CSI) 之后可以緊跟著 0~0x2F 范圍的數(shù)字, 例如 n=1 對應(yīng)到 “字體加粗” 的屬性。

3.2 格式的具體情況

n	名字	含義、作用
0	Reset or normal	重置所有屬性
1	Bold or increased intensity	字體加粗
2	Faint, decresed intensity, or dim	字體變暗
3	Italic	斜體。據(jù)說沒有被廣泛使用
4	Underline	下劃線. 算是擴展， 在 Kitty, VTE, mintty, iTERM2, Konsole 里有效
5	Slow blink	設(shè)定光標(biāo)閃爍時間在每分鐘內(nèi)小于150次(暫時不會用)
6	Rapid blink	光標(biāo)閃爍加速，每分鐘內(nèi)超過150次; 沒有被廣泛支持
7	Reverse video or invert	對調(diào)背景和前景的顏色
8	Conceal or hide	沒有被廣泛的支持，iTerm2 上沒有效果
9	Crossed-out, or strike	讓字符帶有刪除線
10	Primary(default) font	默認字體
11~19	Alternative font	選擇編號為 n-10 的字體
20	Fraktur(Gothic)	很少使用。iTerm2 上沒有效果
21	Doubly underlined; or: not bold	雙下劃線、或者不要加粗
22	Normal intensity	既不加粗、也不變暗
23	Neither italic, nor blackletter	既不斜體， 也不黑色字母
24	Not underlined	不要有單個下劃線， 也不要有雙下劃線
25	Not blinking	不要閃爍光標(biāo)
26	Proportional spacing	終端上沒有在使用
27	Not reserved	iTerm2 上沒有效果
28	Reveal	不要"隱瞞"
29	Not crossed out	去掉“刪除線"
30-37	Set foreground color	設(shè)置前景顏色
30	Black 黑色前景
31	Red 紅色前景
32	Green 綠色前景
33	Yellow 黃色前景
34	Blue 藍色前景
35	Magenta 紫色前景
36	Cyan 靛藍色前景
37	White 白色前景
38	Set foreground color	設(shè)置前景顏色, 接下來的參數(shù)是 5;n 或 2;r;g;b
39	Default foreground color	默認前景顏色
40-47	設(shè)置背景顏色
40	Black 黑色背景
41	Red 紅色背景
42	Green 綠色背景
43	Yellow 黃色背景
44	Blue 藍色背景
45	Magenta 紫色背景
46	Cyan 靛藍色背景
47	White 白色背景
48	Set background color	設(shè)置前景顏色， 接下來的參數(shù)是 5;n 或 2;r;g;b
49	默認背景顏色
50	Disable proportional spacing	禁用等比例空格
51	Framed	mintty 中被實現(xiàn)為 emoji 選擇器(?)
52	Encircled	同上
53	Overlinked	沒效果
54	Neither framed nor encircled
55	Not overlined
58	Set underline color	設(shè)置下劃線顏色。不是標(biāo)準(zhǔn)規(guī)定的。Kitty, VTE, iTerm2里有實現(xiàn)；下一個參數(shù)需要是 5;n 或 2;r;g;b 形式
59	Default underline color	默認下劃線顏色. 非標(biāo)準(zhǔn)。在 Kitty, VTE, iTerm2里有實現(xiàn)
60~65	通常沒有實現(xiàn)
73-74	Superscript, Subscript	上標(biāo)和下標(biāo)。只在 mintty 里有實現(xiàn)
75-76	Neither superscript nor subscript	取消上標(biāo)和下標(biāo)
90-97	Set bright foreground color	設(shè)置前景顏色亮度。非標(biāo)準(zhǔn). iTerm2里有效
90	Bright Black	亮黑色前景色
91	Bright Red	亮紅色前景色
92	Bright Green	亮綠色前景色
93	Bright Yellow	亮黃色前景色
94	Bright Blue	亮藍色前景色
95	Bright Magenta	亮紫色前景色
96	Bright Cyan	亮靛藍色前景色
97	Bright White	亮白色前景色
100-107	Set bright background color	背景顏色亮度. iTerm2里有效
100	Bright Black	亮黑色背景色
101	Bright Red	亮紅色背景色
102	Bright Green	亮綠色背景色
103	Bright Yellow	亮黃色背景色
104	Bright Blue	亮藍色背景色
105	Bright Magenta	亮紫色背景色
106	Bright Cyan	亮靛藍色背景色
107	Bright White	亮白色背景色

其中 n 為 38 是設(shè)置前景顏色 ESC[38;5;{ID}m， n 為 48 是設(shè)置背景顏色 ESC[48;5;{ID}m, ID 是具體的顏色， 見下圖:

3.3 常見私有模式 (Common Private Modes)

https://gist.github.com/fnky/458719343aabd01cfb17a3a4f7296797

ESC 代碼序列	描述
ESC[?25l]	隱藏光標(biāo)
ESC[?25h]	顯示光標(biāo)
ESC[?47l]	恢復(fù)屏幕
ESC[?47h]	保存屏幕
ESC[?1049h]	啟用可選buffer
ESC[?1049l]	禁用可選bufer

3.4 控制光標(biāo)

https://gist.github.com/fnky/458719343aabd01cfb17a3a4f7296797#cursor-controls

ESC 代碼序列	描述
ESC[H	光標(biāo)移動到 (0, 0) 位置
ESC[#A	光標(biāo)向上移動 # 行
ESC[#B	光標(biāo)向下移動 # 行

3.5 擦除功能 (Erase Functions)

https://gist.github.com/fnky/458719343aabd01cfb17a3a4f7296797#erase-functions

ESC Code	Description
ESC[J	清除光標(biāo)位置到屏幕結(jié)束位置
ESC[0J	同 ESC[J
ESC[1J	清除光標(biāo)位置到屏幕開始
ESC[2J	清除整個屏幕
ESC[3J	清除保存的行
ESC[K	清除當(dāng)前光標(biāo)位置到當(dāng)前行末尾
ESC[0K	同 ESC[K
ESC[1K	刪除當(dāng)前光標(biāo)位置到當(dāng)前行首
ESC[2K	刪除整行

4. 簡單例子

#include <stdio.h>
#include <iostream>
#include <string>
#include <vector>
#include <numeric>int main()
{std::vector<int> codes = {1, 2, 3, 4, 7, 8, 9};std::generate_n(std::back_inserter(codes), 8, [n = 30]() mutable { return n++; });std::generate_n(std::back_inserter(codes), 8, [n = 40]() mutable { return n++; });std::generate_n(std::back_inserter(codes), 8, [n = 90]() mutable { return n++; });std::generate_n(std::back_inserter(codes), 8, [n = 100]() mutable { return n++; });for (const auto code : codes){printf("\e[%dmHello\e[mworld  (n=%d)\n", code, code);}printf("\e[1;34mHello\e[0mworld  (n=1;34)\n");printf("\e[38;5;2mHello\e[0mworld  (n=38;5;2)\n");printf("\e[48;5;2mHello\e[0mworld  (n=48;5;2)\n");return 0;
}

5. 復(fù)雜例子 - 方塊下落

繪制最小的綠色矩形： 打印“空格” 字符， 并且讓空格字符的前景顏色紅色的：

printf("\e[42m \e[0m\n"); 

繪制較大的紅色矩形： 每一行打印多個空格， 連續(xù)打印多行； 每一行打印時使用轉(zhuǎn)義字符。

printf("\e[42m    \e[0m\n"); 

繪制會下落的紅色矩形框: 先繪制一個，長度持續(xù)增加的。

void draw_box()
{for (int i = 0; i < 10; i++){printf("\e[42m    \e[0m\n");std::this_thread::sleep_for(std::chrono::milliseconds(100));}
}

通過 ANSI Escape Sequence, 修改光標(biāo)位置， 然后再繪制矩形:

void draw_box2()
{printf("\e[H");     // 光標(biāo)移動到 (0,0) 位置printf("\e[42m    \e[0m"); // 繪制綠色背景的空格printf("\e[1B");  // 光標(biāo)往下一行。 注意此時 column 方向上， 光標(biāo)不是在0位置printf("\e[43m    \e[0m"); // 繪制黃色背景的空格
}

讓每一行的繪制， 都從第 6 列開始繪制, 并且每次繪制后， 等待 100 毫秒:

void draw_box6()
{printf("\e[?25l"); // 隱藏光標(biāo)， 避免光標(biāo)導(dǎo)致的白色小方框for (int i = 0; i < 10; i++){printf("\e[2J");    // 清空整個屏幕printf("\x1b[%d;%dH\e[0m", i, 6); // 光標(biāo)一定到第i 行，第 6 列printf("\e[42m    \e[0m"); // 繪制綠色矩形： 也就是繪制綠色背景的空格fflush(stdout); // 確保繪制到控制臺std::this_thread::sleep_for(std::chrono::milliseconds(500)); // 暫停 500 毫秒，營造下落的視覺效果}printf("\e[?25h"); // 恢復(fù)光標(biāo)的可見性
}

6. ANSI Escape 的局限

無法繪制圓形。 因為終端繪制的最小單位， 是單個字符，每個字符通常是豎條而不是正方形， 并且豎條比較大， 大于通?？吹降膱D像像素。 這就導(dǎo)致， 稍微復(fù)雜的圖形無法繪制， 需要選擇其他的方案：

• 使用 opencv 的 Mat 繪制， 用 imshow 顯示
• 使用 SFML / SDL / Dear imgui / Qt 繪制和顯示

7. References

• 手把手教你寫俄羅斯方塊：2-如何在終端上繪圖
• ANSI Escape Codes
• C語言實現(xiàn) log 庫