美術素材：用 AI 生圖與授權須知

到目前為止，接便當的美術都是 emoji。emoji 很方便，但有兩個小問題：第一，同一個 🍱 在 iPhone、Android、Windows 上長得都不一樣，你沒辦法控制玩家看到什麼；第二，用 emoji 的遊戲很難讓人記住「這是你做的」。

這堂課我們要讓遊戲擁有自己的樣子。好消息是，你不需要會畫畫。壞消息是……其實也沒有壞消息，只有一件事要特別小心：授權。我們會在後半段好好講。

先決定風格，再開始做圖

新手最常見的狀況是：每個素材單獨看都不錯，放在一起卻像三款不同的遊戲。原因是風格不一致。

畫得簡單沒關係，簡單得「一致」就會好看。

動手之前，先寫一段風格說明，接下來不管是請 Claude 畫，還是用生圖工具，每次都附上它。以接便當為例：

風格說明：可愛的扁平插畫，正面視角，深藍色 3 像素外框，
色盤只用珊瑚紅、琥珀黃、青綠、奶油白、深藍五種顏色，
造型圓潤簡單，不要漸層、不要陰影、不要文字。

方法一：請 Claude 用程式畫

第一種方法最快，也最沒有授權疑慮：請 Claude 用 Canvas 的畫圖指令（長方形、圓形、曲線）把素材「畫」出來。還記得第三堂說台灣沒有雞排 emoji 嗎？現在可以自己畫一塊了。

參考程式碼：

function drawCutlet(x, y, size) {
  const s = size / 40; // 以 40 x 40 為基準來畫，再依 size 縮放
  ctx.save();
  ctx.translate(x + 20 * s, y + 20 * s); // 把原點移到雞排中心
  ctx.scale(s, s);
  ctx.rotate(-0.3); // 稍微歪一點比較自然
  ctx.fillStyle = '#e0a040';
  ctx.beginPath();
  ctx.ellipse(0, 0, 19, 14, 0, 0, Math.PI * 2);
  ctx.fill();
  ctx.fillStyle = '#b5762a'; // 酥皮顆粒
  for (const [dx, dy] of [[-8, -3], [2, 4], [8, -5], [-3, 8], [5, 9]]) {
    ctx.beginPath();
    ctx.arc(dx, dy, 1.8, 0, Math.PI * 2);
    ctx.fill();
  }
  ctx.restore();
}

// draw 裡畫掉落物的地方改成：
for (const it of items) {
  if (it.emoji === '🍗') drawCutlet(it.x, it.y, it.w);
  else ctx.fillText(it.emoji, it.x + it.w / 2, it.y + it.h / 2);
}

用同樣的方式，你可以把便當、珍奶、鬧鐘、托盤都換成自己的版本。這種「幾何風」的美術看起來乾淨，而且在任何裝置上都長得一模一樣。

方法二：用 AI 生圖工具

如果你想要更豐富的插畫，可以用 AI 生圖工具，例如 ChatGPT、Gemini、Adobe Firefly、Midjourney 等。每個工具的功能、費用和規定都會改變，選用前請到官方網站確認最新說明。

讓生圖結果風格一致的幾個訣竅：

• 每張圖都貼上同一段風格說明，只替換「畫什麼」的部分。
• 一次只畫一個物件，並要求「純色背景」或「透明背景」，之後比較好去背、放進遊戲。
• 先畫一張滿意的，再拿它當參考。 很多工具可以上傳圖片，請它「用和這張相同的風格，畫一個鬧鐘」。
• 尺寸要小。 遊戲裡的便當只有 40 像素大，太細的花紋縮小後根本看不見，反而顯得髒。

圖片做好之後，放進 bento-game/assets/ 資料夾，請 Claude 幫你載入：

const bentoImg = new Image();
bentoImg.src = 'assets/bento.png';

// draw 裡：圖片載入完成就畫圖，還沒好就先用 emoji 頂著
if (bentoImg.complete && bentoImg.naturalWidth > 0) {
  ctx.drawImage(bentoImg, it.x, it.y, it.w, it.h);
} else {
  ctx.fillText('🍱', it.x + it.w / 2, it.y + it.h / 2);
}

方法三：免費素材網站

不想自己做，也可以使用別人分享的素材。以下是遊戲開發者常用的地方：

網站	有什麼	授權要注意
Kenney（kenney.nl）	大量風格統一的 2D、3D、音效素材包	多數標示為 CC0，下載頁會寫
OpenGameArt.org	社群分享的圖片、音樂、音效	每個素材授權不同，逐一確認
itch.io 的素材區	獨立創作者的素材包，有免費也有付費	看每個素材頁的說明
Freesound.org	各式各樣的音效	每個音效授權不同
Google Fonts	免費字型，包含不少中文字型	多數是 OFL 授權，可用在遊戲裡

看懂授權：四種最常見的標示

「免費下載」不等於「可以隨便用」。每個素材都有作者，作者用授權告訴你可以怎麼使用。網路上最常見的是 Creative Commons（創用 CC）系列：

拿不定主意的時候，就選 CC0 或自己做的素材。

關於 AI 生成的圖片，還有兩件事值得知道：

• 先讀你用的工具的使用條款。 條款會說明生成的圖能不能商業使用、有沒有其他限制。
• 純 AI 生成的圖，著作權歸屬在許多國家還沒有定論。 你通常可以使用它，但不一定能阻止別人也拿去用。如果你未來想把遊戲拿去賣，或是很在意作品被抄，就要多留意這件事。

以上是一般性的說明，不是法律意見。遇到要收費、要上架商店的情況，請以各素材與工具的官方條款為準，必要時請教專業人士。

做一份製作名單

不管用了什麼素材，都建議在資料夾裡放一個 CREDITS.md，記下每個素材的來源和授權。這不只是 CC BY 的要求，也是對創作者的尊重，更是給未來的自己一份紀錄。

# 接便當 製作名單

設計與程式：你的名字（與 Claude 一起完成）
雞排、托盤：用 Canvas 程式繪製
便當插畫：使用 AI 生圖工具產生，已確認該工具條款允許此用途
背景音效：「某某音效」by 作者名稱，Freesound.org，CC BY 4.0

也可以請 Claude 在開始畫面的角落加一行小字「製作名單」，點了就顯示這些內容。