html 手指皮影戲|AHALab PBL
光影藝術 × 遊戲程式設計 × AI 計算機視覺

手指皮影戲

用手指,演一齣皮影戲

先做一隻關節皮影,給它配上道具。攝影機識別手指後,就能用五根手指控制影人的頭和四肢,再和同伴編一段戲、做一個遊戲。

手指皮影戲宣傳概念圖:攝影機捕捉手指,下方幕布上的孫悟空和哪吒帶著道具表演
宣傳概念圖 · 點選看大圖;實際操作請進入手勢實驗臺。
7至15 歲分齡教案4 次短課 / 8 次主線課1 手 1 角色10 手為實驗目標
01 / 這次做什麼

做一齣同學也會玩的皮影戲

怎樣讓皮影跟著手動,還能讓同學拿來就會玩?

先設計自己的角色

給它取名,想一件它要做的事,再畫頭、身體、四肢和道具。可以用紙剪,也可以在數字畫板上畫;做好後到舞臺試動作,遇到問題再改。

留下角色卡、實體關節皮影、修改前後兩稿、控制規則和實驗記錄,最後演一場兩分鐘的小戲。

每組 3 至 4 人,輪流操偶、寫程式、做測試和安排表演。每個人都要說清自己做過的一次選擇,以及後來改了什麼。

課堂上怎麼做

先做一個動作,把控制規則寫下來,再讓角色照著動。請同伴試玩,記錄哪裡沒成功,找到原因後再修改。

7 至 9 歲先做角色、練動作表達;年齡較大的學生再學習特徵分類、手部模型訓練和多人追蹤。

02 / 一起操偶

一隻手固定控制一個角色

手的動作角色的回應能學到什麼
掌心移動校準後到達舞臺位置座標、映象、對映與誤差
五指分別伸屈中指轉頭,食指和無名指動雙臂,拇指和小指動雙腿關節、夾角與分層動畫
拇指與食指捏合亮月、接住目標比例、閾值與滯回
V 手勢 / 豎拇指 / 握拳後張掌跳躍 / 轉身 / 使用道具(可開關)動作序列、確認時間與冷卻
靠近道具後收攏手指 / 張開手掌拿起並搬動 / 放下道具;半握時保持動作狀態、滯回與物品歸屬
手掌翻到另一面人物、提偶線與隨身道具一起翻面三維朝向與持續確認
手離場後回來保留原角色,確認後恢復;不確定時手動繫結追蹤、重新匹配與異常處理
1

先控制一隻影人
校準後移到指定位置,再停住

2

兩手分別控制角色
觀察交叉、遮擋後是否換人

4

四手合作試驗
記錄同步情況和角色串號

10

十手展演試驗
實測後再確定人數上限

可選影人:孫悟空、哪吒、豬八戒、二郎神、花木蘭、玉兔、嫦娥。預設顯示提偶線,可切換操縱桿或隱藏連線。

舞臺可換成月下山水、花果山、荷塘或燈市。花燈、仙桃、花球和蝴蝶可以搬動,桌子能放東西,鼓和風車會響應。可以按人物組合選擇佈景,也能自己擺放。

當前程式有十個角色槽位,識別手數也能設為十。真人十手能否穩定操控,還沒有驗證。十角色演示使用模擬輸入,頁面會明確標出。

03 / 課堂安排

選一套適合學生的課

先按年齡選一套教案,再根據學生的閱讀、操作和實驗經驗調整難度。

年齡與課時課堂怎麼說、怎麼做開啟課件
7至9 歲
4 次 × 60 分鐘
“動一動中指,看看哪裡動了。”
一次一步,可畫圖、指認或口述。
四次短課 ↗
10至12 歲
8 次 × 90 分鐘
“只改一個設定,再試同樣的目標。”
寫規則、記次數,請新同伴試玩。
八課詳案 ↗
13至15 歲
8 次 × 90 分鐘
“哪條記錄支援你的判斷?”
讀小段程式碼,設計對照,說明結果適用範圍。
八課詳案 ↗

每課都寫了課堂提問、學生可能卡住的地方,以及老師可以怎樣幫忙,下課前還有一個小任務。可切換教師詳案和五頁學生投屏,也可列印記錄單。15 歲以上的研究課另排時間。

年齡供備課參考,選課還要看學生已有的閱讀、操作和實驗經驗。下面是 10至12 歲的八課摘要。

L01做一隻會動的影人90 分鐘

不說名字,怎樣讓同伴看懂它在做什麼?

畫出頭、身體、四肢和道具,並標出連線處。 讓同伴猜一個動作,按他的反饋改一處。

會用到的知識
輪廓、透光、鏤空連線、關節、角色與道具
怎麼安排
10 分鐘看輪廓,猜角色 → 10 分鐘寫角色卡 → 15 分鐘試一個關節 → 30 分鐘分片製作 → 20 分鐘不報名字演動作 → 5 分鐘收好兩稿
留下什麼
角色卡、標有關節的分片圖、同伴猜動作的原話、修改前後兩稿。

10至12 歲教師詳案 ↗ · 13至15 歲教師詳案 ↗

L02鏡頭裡為什麼會認錯90 分鐘

手被擋住一點,畫面上的點會怎麼辦?

指認手部關鍵點,區分畫面、骨架和角色動作。 只改變遮擋或光照中的一項,記錄兩種條件。

會用到的知識
畫素、檢測、21 個手部關鍵點、模型輸出與規則
怎麼安排
10 分鐘先玩再看 → 20 分鐘畫出識別過程 → 25 分鐘遮住一部分再試 → 20 分鐘交換記錄 → 15 分鐘用證據解釋
留下什麼
一張標註骨架圖、兩組條件對照、一例尚不能確定原因的錯誤。

10至12 歲教師詳案 ↗ · 13至15 歲教師詳案 ↗

L03讓影人停在想停的地方90 分鐘

手不用伸得很遠,能走到舞臺兩邊嗎?

用舒適的兩個角完成校準,併到達中心與邊角。 在相同目標上比較兩檔平滑設定,說明自己的選擇。

會用到的知識
歸一化座標、映象、範圍對映、平滑與延遲
怎麼安排
10 分鐘紙上指位置 → 15 分鐘預測對映 → 20 分鐘校準並輪換 → 30 分鐘兩檔設定做對照 → 15 分鐘選擇與說明
留下什麼
同一套目標下兩檔引數記錄、一次校準前後比較、引數選擇理由。

10至12 歲教師詳案 ↗ · 13至15 歲教師詳案 ↗

L04五根手指各管一處90 分鐘

怎樣讓角色只在你想做動作時才動作?

正確連出五指和頭、四肢的對應,並試兩種拇指動作。 寫出一條“當……就……”規則,用成功和誤觸記錄檢查它。

會用到的知識
條件判斷、比例、閾值、滯回、持續時間、事件
怎麼安排
10 分鐘先猜哪根線會動 → 15 分鐘給拇指找合適幅度 → 20 分鐘寫一條動作規則 → 30 分鐘分兩類嘗試 → 15 分鐘拿放道具並複述
留下什麼
五指連線卡、一條條件規則、有意動作 10 次與普通移動 10 次的分開記錄。

10至12 歲教師詳案 ↗ · 13至15 歲教師詳案 ↗

L05請同伴來玩你的遊戲90 分鐘

你不站在旁邊解釋,同學知道要做什麼嗎?

用現有場景和道具設計一個有完成條件的小任務。 觀察兩位新玩家,按卡住的地方修改規則。

會用到的知識
變數、計分、碰撞、狀態、遊戲反饋
怎麼安排
10 分鐘體驗一個任務 → 15 分鐘在紙上寫規則 → 30 分鐘佈景和自測 → 25 分鐘請兩位新玩家 → 10 分鐘保留一次修改
留下什麼
一張規則卡、一次可執行任務、至少兩位新玩家的首次嘗試記錄及一次修改。

10至12 歲教師詳案 ↗ · 13至15 歲教師詳案 ↗

L06兩隻手,別換錯角色90 分鐘

你和同伴換了位置,角色還跟著原來的手嗎?

用編號區分“誰”和“在哪裡”。 按同樣步驟測試兩手交換、遮擋和離場,記錄有無換錯。

會用到的知識
檢測與追蹤、唯一 ID、資料關聯、遮擋、降級
怎麼安排
10 分鐘先玩編號卡 → 15 分鐘寫繫結約定 → 30 分鐘三種情景各試三次 → 20 分鐘找回離場角色 → 15 分鐘告訴下一組
留下什麼
三種情景各三次的身份記錄、一個可復現的失敗步驟、一句有條件的能力說明。

10至12 歲教師詳案 ↗ · 13至15 歲教師詳案 ↗

L07換個人,它還認得嗎90 分鐘

它認識了我的手,能不能認識你的手?

把取樣者和測試者分開,記錄每類採了幾段。 用未參與取樣者的嘗試,說明它會認錯哪些動作。

會用到的知識
特徵、標籤、訓練集、測試集、分類器、混淆矩陣
怎麼安排
10 分鐘先猜換人結果 → 20 分鐘分段採集 → 20 分鐘看輸出並試用 → 25 分鐘讓 B 獨立測試 → 15 分鐘回看預測
留下什麼
按人和段記錄的資料卡、未參與取樣者的分類結果、錯誤或拒絕案例、適用範圍說明。

10至12 歲教師詳案 ↗ · 13至15 歲教師詳案 ↗

L08排一段戲,請同學來看90 分鐘

觀眾能看懂發生了什麼,也能學會怎麼玩嗎?

用角色、場景和道具演出有開頭和結尾的兩分鐘故事。 每人用一次觀察解釋自己的修改。

會用到的知識
敘事、可用性、測量、署名、反思
怎麼安排
15 分鐘排出故事順序 → 20 分鐘小組排演 → 25 分鐘演出和邀請體驗 → 20 分鐘聽反饋,講修改 → 10 分鐘整理作品
留下什麼
兩分鐘作品、每人一次具體講解、一張觀眾反饋單和下一版的一項改動。

10至12 歲教師詳案 ↗ · 13至15 歲教師詳案 ↗

這套課仍是備課草案,尚未試教。第七課可以在本機用 kNN 學習個人動作;手部 Pose 神經網路訓練仍安排在延展課。

04 / 識別與測試

看看它為什麼會認錯

攝影機→手部關鍵點→角色繫結→動作與座標→皮影舞臺 / 桌面

課堂用 MediaPipe,研究課再看 YOLO

課堂先用 MediaPipe 識別手部關鍵點。YOLO26 通用 Pose 權重識別的是人體骨架;要控制手指,需要另外訓練或取得手部模型,留給年齡較大的學生做研究。

依據:MediaPipe 官方指南 · Ultralytics Pose 文件

測一測有多準

用五點定位看位置誤差,另外記錄停手時的抖動、從手移動到畫面響應的延遲、手勢誤觸和角色換錯的情況。引數上限、推理幀率和實際可玩人數也要分開驗證。

識別在本機執行,不自動錄影。目前可以用鍵鼠練習或開啟攝影機,玩接月遊戲,也可以把皮影放到透明桌面窗口裡;另有個人手勢分類功能。多屏、積木編輯器和手部關鍵點模型訓練還沒有實現。

語文習作 / 三至六年級

先演一段,再寫一件事

把《我來編童話》《故事新編》《變形記》等十個習作任務搬到皮影舞臺。先編一段、演給同伴看,留下動作和對話,再寫自己的文章。每個任務有教師備課、三格故事、觀察記錄和修改問題。

開啟手指皮影戲 · 語文 ↗ · 看十個任務的備課安排 ↗

可以自選角色與佈景,自己的臺詞會顯示在舞臺提詞器。習作儲存在當前瀏覽器,支援列印、匯出和備份。這些任務對應三至六年級的習作單元,使用時請以本班教材為準。

英語戲劇 / 展演選題

一句臺詞,一個動作

給影人排一段英語小戲。先聽老師領讀,人工圈出需要幫助的詞,再輪換旁白、對白和操偶。三份分齡教案配六出短劇。舞臺裡可以聽示範、開麥克風跟讀,再把臺詞和動作合起來演。

開啟英語戲劇課件 ↗

可替換 J04 或 L08 的故事內容,原課時不增加。已支援逐句錄音、回聽和跟讀變色:提詞器上下句灰色、當前句黑色;讀到並達到練習線的詞變藍,其他詞保持原樣。老師可按年齡調節點亮門檻。發音分尚未用兒童語音校準,需教師複核。

05 / 繼續製作

課程資料和程式碼

本專案仍在課程研發區,尚未公開發布。下一步先用真人單手、雙手測試定位、誤觸和交叉時的角色歸屬,再根據結果決定四手、十手版本怎麼做。