> ## Documentation Index
> Fetch the complete documentation index at: https://devdocs.xbox.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 使用 GitHub Copilot 建立自訂觸控控制項配置

> 使用 GitHub Copilot 建立自訂觸控控制項配置

以更快速、更聰明的方式建置自訂觸控控制項。**不需要繁瑣的 JSON 編輯！** 透過 GitHub Copilot 和 Visual Studio Code，您只需提供自然語言指示，就能輕鬆建立和編輯自訂觸控控制項配置。

本指南提供清楚、實用的步驟：設定必要的工具、使用 Copilot 設計和編輯觸控配置，最後建立並測試觸控調整套件組合 (Touch Adaptation Bundle)。了解如何有效地指示 Copilot，並探索簡化工作流程的秘訣，讓即使是初次使用的使用者也能輕鬆開始進行觸控控制項開發。如需深入了解觸控控制項設計，請參閱[建置觸控控制項的設計師指南](/zh-TW/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-designers-guide)。

**圖 1.  在 VS Code 中透過 Copilot Chat 產生觸控配置的螢幕擷取畫面。**

![在 VS Code 中透過 Copilot Chat 產生觸控配置的螢幕擷取畫面。](https://mintcdn.com/microsoft-4404708b/nTPVBuko1tKGsd6P/images/gdk/features/common/github-copilot-generate-touch-layout.webp?fit=max\&auto=format\&n=nTPVBuko1tKGsd6P\&q=85\&s=6caeeb2b79dd47f63548fc0d32b3f2ef)

## 必要條件

* 安裝最新版的 [Visual Studio Code](https://code.visualstudio.com/download)。
* 安裝[觸控調整套件命令列工具 (TAK CLI)](https://github.com/microsoft/xbox-game-streaming-tools?tab=readme-ov-file#touch-adaptation-kit-command-line-tool-tak-cli)。
* 安裝[適用於 Visual Studio Code 的觸控調整套件編輯器延伸模組](https://marketplace.visualstudio.com/items?itemName=xbox-tools.vscode-xbox-input-editor-extension)，並完成 [TAK 編輯器設定](/zh-TW/build/core-features/common/game-streaming/tak-editor/game-streaming-tak-editor-setup)。
* [在 Visual Studio Code 中設定 GitHub Copilot](https://code.visualstudio.com/docs/copilot/setup)。
* 將 [copilot-instructions.md](https://github.com/microsoft/xbox-game-streaming-tools/tree/main/touch-adaptation-kit/copilot-instructions) 下載到您的電腦。
  此檔案是一組自訂指示，用於在建立自訂觸控控制項配置時自訂 GitHub Copilot 的回應。如需詳細資訊，請參閱[關於自訂 GitHub Copilot 回應](https://docs.github.com/en/copilot/concepts/prompting/response-customization)。

## 步驟

1. 啟動 Visual Studio Code。

2. 依照 [TAK 編輯器設定開啟工作區](/zh-TW/build/core-features/common/game-streaming/tak-editor/game-streaming-tak-editor-setup#open-a-folder-or-workspace)，並[建立新的套件組合和配置](/zh-TW/build/core-features/common/game-streaming/tak-editor/game-streaming-tak-editor-create-bundle)。

3. 在套件組合所在工作區資料夾的根目錄建立 `.github` 資料夾，並將 copilot-instructions.md 檔案放在 `.github` 資料夾中。將指示放在這裡，可確保 Copilot 在編輯配置 JSON 時能參考設計規則。

   **圖 2.  .github 資料夾和 copilot-instructions.md 檔案目錄樹狀結構的螢幕擷取畫面。**

   ![.github 資料夾和 copilot-instructions.md 檔案目錄樹狀結構的螢幕擷取畫面。](https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/github-folder-copilot-instructions.png?fit=max\&auto=format\&n=UZTRJSf0emX1fheE\&q=85\&s=4357244630aa6bf7a70d69961088522d)

4. [開啟 Copilot Chat 視窗](https://code.visualstudio.com/docs/copilot/chat/getting-started-chat) (`Ctrl+Alt+I` 鍵盤快速鍵)。

5. 在 Visual Studio Code 的總管中，選取您在配置資料夾中建立的配置 JSON 檔案。此選取可確保 Copilot Chat 將該檔案作為您編輯工作階段的內容。

   **圖 3.  選取目標 JSON 檔案以將其新增為 Copilot 內容的螢幕擷取畫面。**

   ![選取目標 JSON 檔案以將其新增為 Copilot 內容的螢幕擷取畫面。](https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/select-json-file-to-add-as-context.png?fit=max\&auto=format\&n=UZTRJSf0emX1fheE\&q=85\&s=07537d4f75db57712b310d13a1691892)

6. 確定您已選取 `Agent` 模式，讓 Copilot 提供有關編輯結果的詳細說明，然後選取您偏好的 [AI 模型](https://code.visualstudio.com/docs/copilot/customization/language-models)。

   **圖 4.  確認已選取代理程式模式並選取 AI 模型的螢幕擷取畫面。**

   ![確認已選取代理程式模式並選取 AI 模型的螢幕擷取畫面。](https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/select-agent-mode-and-ai-model.png?fit=max\&auto=format\&n=UZTRJSf0emX1fheE\&q=85\&s=f2373c7b7d031d952339d513e8141f8a)

7. 建議為您的遊戲準備控制器按鈕對應，以確保最佳的設定和可用性。
   例如：

```
   A button: Jump
   B button: Dodge
   X button: Punch
   Y button: Kick
   Directional Pad: Select items
   Left Stick: Move character
   Right Stick: Camera control
   Left Trigger: Throw granade
   Right Trigger: Fire weapon
   View button: Open map
   Menu button: Open menu
```

1. 要求 Copilot 使用您的控制器按鈕對應來編輯目標配置 JSON。
   例如：

```
   Can you edit the touch layout JSON for a game scene that consists of the following controller button mapping?
   A button: Jump
   B button: Dodge
   X button: Punch
   Y button: Kick
   Directional Pad: Select items
   Left Stick: Move character
   Right Stick: Camera control
   Left Trigger: Throw granade
   Right Trigger: Fire weapon
   View button: Open map
   Menu button: Open menu
```

> [!NOTE]
>
> 在您指示 Copilot 進行編輯後，請確定 Copilot 有參考 copilot-instructions.md，以便將適當的設計規則套用到您的配置。
>
> **圖 5.  確認使用 Copilot 指示的螢幕擷取畫面。**
>
> ![確認使用 Copilot 指示的螢幕擷取畫面。](https://mintcdn.com/microsoft-4404708b/sIrPFR_ir_sNKVEv/images/gdk/features/common/confirm-copilot-instructions-usage.png?fit=max\&auto=format\&n=sIrPFR_ir_sNKVEv\&q=85\&s=30fbc0faf30b123df423f94cd6b0e943)
>
> 當聊天視窗中出現提示時，請務必允許 Copilot 從參考 URL 擷取資源、結構描述和設計師指南。此動作可確保回應正確，並為您的要求提供最佳結果。
>
> **圖 6.  允許 Copilot 擷取資源的螢幕擷取畫面。**
>
> ![允許 Copilot 擷取資源的螢幕擷取畫面。](https://mintcdn.com/microsoft-4404708b/sIrPFR_ir_sNKVEv/images/gdk/features/common/copilot-allow-fetch-resources.png?fit=max\&auto=format\&n=sIrPFR_ir_sNKVEv\&q=85\&s=9c754ec8283b7b994c73f20b4510f88b)

9. 反覆修改並測試直到完成

使用 Copilot Chat 精簡配置 JSON 檔案，直到符合您的設計需求。重新命名檔案以反映其預期的遊戲情境 (例如 `battle.json`、`menu.json`、`map.json`)。如果需要多個配置，請針對每個配置重複相同的程序。

每次編輯後，請在您的遊戲環境中驗證配置：

* 使用 [Web 內容測試應用程式 (CTA)](/zh-TW/build/core-features/common/game-streaming/game-streaming-web-content-test-application) 串流您的遊戲。
* 使用 [TAK serve 命令](/zh-TW/build/core-features/common/game-streaming/tak-command-line-tool/game-streaming-tak-command-line-serve-command)提供觸控配置。

持續在 Copilot 驅動的編輯和遊戲內測試之間反覆進行，直到配置定案為止。

**圖 7.  Copilot 產生的觸控控制項配置螢幕擷取畫面。**

![Copilot 產生的觸控控制項配置螢幕擷取畫面。](https://mintcdn.com/microsoft-4404708b/CwRBzaXvHw9zaPoe/images/gdk/features/common/touch-control-layouts-generated-by-copilot.png?fit=max\&auto=format\&n=CwRBzaXvHw9zaPoe\&q=85\&s=cc2f05aea2e65528cd16e684f30135d5)

> [!TIP]
>
> **使用正式術語以獲得更好的結果**
> 請只使用[設計師指南](/zh-TW/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-designers-guide)中的術語，以確保 Copilot 能提供更好的結果：
>
> * "move A button to the right wheel inner."
> * "move B button to the left in the same right outer wheel."
> * "can you assign an interact icon to the A button?"
> * "exchange the position of the X button and Y button in the right outer wheel."
> * "remove R thumb from the layout."
>
> **專業秘訣：** 您也可以編輯 `copilot-instructions.md` 檔案以符合您的特定需求。透過自訂指示，您可以微調 Copilot 的行為，並獲得與您的設計目標完美一致的指引。


## Related topics

- [建置觸控控制項的設計師指南](/zh-TW/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-tak-designers-guide.md)
- [建置觸控控制項配置](/zh-TW/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-touch-building-touch-layout.md)
- [為 XBOX 遊戲串流建置觸控控制配置](/zh-TW/build/core-features/common/game-streaming/building-touch-layouts/index.md)
- [觸控調整套件編輯器：自訂預覽](/zh-TW/build/core-features/common/game-streaming/tak-editor/game-streaming-tak-editor-customize-preview.md)
- [格鬥遊戲觸控控制配置](/zh-TW/build/core-features/common/game-streaming/building-touch-layouts/samples/game-streaming-touch-tak-sample-fighter.md)