sb3-png

主要功能

• 產生繪圖關卡需要的解答圖片
• 產生question.sb3檔案 (去除已拖拉積木、設定背景圖片)

處理 Scratch 3.0 專案檔案 (.sb3)

• 執行後進行截圖
  • 執行後圖片(解答圖片)
• 將指定圖片放入sb3檔案中
  • 題目背景圖片 (透明化、去角色、設筆粗)
• 去除指定sb3檔案中已拖拉的積木
  • 修正question檔案

安裝

全域安裝

npm install -g sb3-png

本地開發

cd sb3-png
npm install
npm link

使用方式

sb3-png <input.sb3> [output.png] [options]

參數說明

• input.sb3 - 必要，輸入的 Scratch 專案檔案
• output.png - 選用，輸出的 PNG 檔名（預設使用輸入檔名）
• --time <seconds> - 選用，設定執行幾秒後擷圖（預設 5 秒）
• --transparency <percent> - 選用，設定圖片透明度（0-100，例如 90 表示調整為 10% 透明）
• --trim actor - 選用，移除所有角色
• --pen <color> <width> - 選用，設定筆的顏色和寬度（例如：--pen #a0a0a0 3）
• --setpng <image> - 選用，將指定圖片設定為專案的舞台背景
• --remove - 選用，移除 SB3 檔案中的所有積木（題目製作工具）

範例

# 自動使用輸入檔名作為輸出（test.sb3 → test.png）
sb3-png test.sb3

# 指定輸出檔名
sb3-png project.sb3 screenshot.png

# 設定等待 10 秒後擷圖
sb3-png test.sb3 --time 10

# 設定透明度為 50%
sb3-png test.sb3 --transparency 50

# 移除所有角色
sb3-png test.sb3 --trim actor

# 設定筆的顏色為灰色，寬度為 3 pixel
sb3-png test.sb3 --pen #a0a0a0 3

# 將指定圖片設定為專案的舞台背景
sb3-png project.sb3 --setpng ./background.png

# 移除 SB3 檔案中的所有積木（題目製作工具）
sb3-png --remove ./question.sb3

# 組合使用：等待 3 秒後移除角色、設定筆為灰色 3px、透明度 50%
sb3-png draw.sb3 --time 3 --trim actor --pen #a0a0a0 3 --transparency 50

# 指定檔名並設定時間
sb3-png project.sb3 output.png --time 3

# 處理包含特殊字符的檔名
sb3-png "我的專案(1).sb3"  # 輸出為：我的專案(1).png

# 查看說明
sb3-png -h
sb3-png --help

功能特色

• ✨ 無需外部伺服器 - 內建 Express 伺服器，自動啟動和關閉
• 🚀 簡單易用 - 單一指令即可完成截圖
• 🎯 自動執行 - 自動點擊綠旗並等待專案執行
• ⏱️ 可調整時間 - 支援自訂等待時間（--time 參數）
• 🎨 透明度調整 - 支援調整圖片透明度（--transparency 參數）
• ✂️ 元素移除 - 可在截圖前移除角色，只保留背景（--trim 參數）
• 🖊️ 筆跡控制 - 可自訂筆的顏色和寬度（--pen 參數）
• 🖼️ 背景設定 - 可直接將圖片設定為專案的舞台背景（--setpng 參數）
• 🗑️ 積木移除 - 可移除 SB3 檔案中的所有積木，保留角色和資源（--remove 參數）
• 📝 智慧檔名 - 自動使用輸入檔名作為輸出
• 🔧 智慧埠號 - 自動選擇可用的埠號
• 📁 支援特殊字符 - 正確處理中文和特殊字符檔名
• 🧹 自動清理 - 執行完畢自動清理臨時檔案

工作原理

1. 內建伺服器自動啟動於可用埠號
2. 使用 Puppeteer 開啟無頭瀏覽器
3. 載入 Scratch VM 執行專案
4. 自動執行綠旗開始專案
5. 等待執行穩定後擷取舞台畫面
6. 儲存為 PNG 圖片
7. 自動關閉伺服器和清理檔案

系統需求

• Node.js >= 14.0.0
• 支援 Puppeteer 的作業系統

授權

MIT

問題回報

https://github.com/marty5499/scratch-judge/issues