Skip to main content
Unlock a faster, smarter way to build custom touch controls. no tedious JSON editing required! With GitHub Copilot and Visual Studio Code, you can easily create and edit custom touch control layouts simply by giving natural language instructions. This guide provides clear, practical steps—setting up the necessary tools, designing and editing touch layouts with Copilot, and finally creating and testing Touch Adaptation Bundles. Learn how to instruct Copilot effectively and discover tips to streamline your workflow, making it easy for even first-time users to get started with touch control development. For deeper insights into touch control design, see A designer’s guide to building touch controls. Figure 1. Screenshot of generating touch layout by Copilot Chat in VS Code. Screenshot of generating touch layout by Copilot Chat in VS Code.

​
Prerequisites

​
Steps

  1. Launch Visual Studio Code.
  2. Follow the TAK Editor Setup to open workspace and create a new bundle and layout.
  3. Create a .github folder at the root of the workspace folder where the bundle exists, and place the copilot-instructions.md file in the .github folder. Placing the instructions here ensures that Copilot can reference the design rules when editing the layout JSON. Figure 2. Screenshot of .github folder and copilot-instructions.md file directory tree. Screenshot of .github folder and copilot-instructions.md file directory tree.
  4. Open Copilot Chat Window (Ctrl+Alt+I keyboard shortcut).
  5. In Visual Studio Code’s explorer, select the layout JSON file you created in the layout folder. This selection ensures that Copilot Chat uses the file as context for your editing session. Figure 3. Screenshot of select target json file to add it as context for Copilot. Screenshot of select target json file to add it as context for Copilot.
  6. Ensure you have Agent mode selected for Copilot to provide detailed explanation about the edit result, and then select your preferred AI model. Figure 4. Screenshot of ensure agent mode selected and select AI model. Screenshot of ensure agent mode selected and select AI model.
  7. Preparing the controller button mapping for your title is recommended to ensure optimal configuration and usability. For example:
  1. Ask Copilot to edit the target layout JSON using your controller button mapping. For example:
Make sure Copilot refers to copilot-instructions.md after you instruct Copilot to edit so it can apply the appropriate design rules to your layout.Figure 5. Screenshot of confirm Copilot instructions usage.Screenshot of confirm Copilot instructions usage.Be sure to allow Copilot to fetch the resources, schema, and designer’s guide from the reference URLs when prompted in the chat window. This action ensures accurate responses and delivers the best possible results for your request.Figure 6. Screenshot of allow Copilot to fetch resources.Screenshot of allow Copilot to fetch resources.
  1. Iterate and test until complete
Use Copilot Chat to refine the layout JSON file until it meets your design requirements. Rename the file to reflect its intended game scenario (for example, battle.json, menu.json, map.json). If multiple layouts are needed, repeat the same process for each. After each edit, validate the layout in your game environment: Continue iterating between Copilot-driven edits and in-game testing until the layout is finalized. Figure 7. Screenshot of touch control layouts generated by Copilot. Screenshot of touch control layouts generated by Copilot.
Use official terminology for better results Only use the terms in designer’s guide to ensure Copilot can provide better results:
  • “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.”
Pro tip: You can also edit the copilot-instructions.md file to match your specific needs. By customizing the instructions, you can fine-tune Copilot’s behavior and receive guidance that aligns perfectly with your design goals.
Last modified on October 20, 2026