marcel/better-xcloud
1
0
Fork 0
mirror of https://github.com/redphx/better-xcloud.git synced 2025-06-07 16:17:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

Updated How to create custom touch control layout (markdown)

redphx 2024-05-04 16:46:16 +07:00
parent 9e455b53df
commit 15ecb87701
1 changed files with 121 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
How-to-create-custom-touch-control-layout.md

@ -3,9 +3,10 @@
## Limitations ## Limitations
- Doesn't support custom layout assets - Doesn't support custom layout assets
- Only supports one layout for the entire game (cannot dynamically switch layout based on context) - Cannot dynamically switch layouts based on the game's context (one layout for the entire game, unless you manually switch it)
## Requirements ## Requirements
- [Visual Studio Code](https://code.visualstudio.com/)
- Have Chrome/Edge or any Chromium browsers installed. - Have Chrome/Edge or any Chromium browsers installed.
- Have an Android device with Kiwi Browser installed if you want to test on real device. - Have an Android device with Kiwi Browser installed if you want to test on real device.
- Basic knowgledge about: - Basic knowgledge about:
@ -13,37 +14,17 @@
- [Chrome DevTools](https://developer.chrome.com/docs/devtools/) and its [Console Panel](https://developer.chrome.com/docs/devtools/console) - [Chrome DevTools](https://developer.chrome.com/docs/devtools/) and its [Console Panel](https://developer.chrome.com/docs/devtools/console)
- Get familiar with the [Touch Adaptation Kit](https://learn.microsoft.com/en-us/gaming/gdk/_content/gc/system/overviews/game-streaming/game-streaming-touch-touch-adaptation-kit-overview). This is the same tech that is being used to create touch control layouts in xCloud and Better xCloud. The tool isn't provided publicly so we have to create the layout manually. - Get familiar with the [Touch Adaptation Kit](https://learn.microsoft.com/en-us/gaming/gdk/_content/gc/system/overviews/game-streaming/game-streaming-touch-touch-adaptation-kit-overview). This is the same tech that is being used to create touch control layouts in xCloud and Better xCloud. The tool isn't provided publicly so we have to create the layout manually.
## Preparations for testing on desktop ## How to create layout
1. Open the xCloud website in Chrome/Edge/Chromium browser. 1. Install [TAK CLI](https://github.com/microsoft/xbox-game-streaming-tools) and [Touch Adaptation Kit Editor extension](https://marketplace.visualstudio.com/items?itemName=xbox-tools.vscode-xbox-input-editor-extension) in VS Code.
2. Open the `Chrome DevTools`. 2. Read [Touch Adaptation Kit Editor extension's documentation](https://marketplace.visualstudio.com/items?itemName=xbox-tools.vscode-xbox-input-editor-extension) to create an empty bundle and play around with the layout.
3. Click on the `Toggle device emulation` button and set `Dimensions` to any device you want. I prefer `iPhone SE` because it has 16:9 screen ratio. Don't select Android devices or Chrome will become fullscreen every time you load a game. 3. Use the [Touch Adaptation Kit documentation](https://learn.microsoft.com/en-us/gaming/gdk/_content/gc/system/overviews/game-streaming/game-streaming-touch-touch-adaptation-kit-overview) to design your own layout. You can also look at [other custom layouts](https://github.com/redphx/better-xcloud/tree/gh-pages/touch-layouts/layouts) for references.
<img width="352" alt="image" src="https://github.com/redphx/better-xcloud/assets/96280/38e27f71-9148-4eb4-873c-81d3b1184a3e"> 4. One you're satisfied with the layout, go to the next section.
<img width="285" alt="image" src="https://github.com/redphx/better-xcloud/assets/96280/0ee0fcf6-58a6-4828-b3d6-2f9838035f27"> Here is the default layout if you need it:
4. Reload the page. This step is necessary, don't skip it. ```json
5. Make sure the `Touch controller > Availability` setting is set to `All games`. Reload the page if needed.
<img width="455" alt="image" src="https://github.com/redphx/better-xcloud/assets/96280/1ba3118d-9680-4adc-9e66-3aa5b27e89e0">
6. Done.
## Preparations for testing on Android device
1. Enable `Developer mode > USB Debugging` on your Android device.
2. Connect the device with your PC.
3. Open xCloud in Kiwi Browser.
4. On PC, open `about:inspect` in Chrome/Edge.
5. Find the xCloud row and click on "inspect fallback"
6. Done
## Getting started
1. Do all the preparation steps.
2. Open Chrome DevTools, enable `Toggle device emulation`, reload page.
3. Load the game you want to create custom layout for. It must not having official touch support. In this guide I'll pick [DOOM (1993)](https://www.xbox.com/en-US/play/games/doom-1993/9PLZPHBNHTMF).
![image](https://github.com/redphx/better-xcloud/assets/96280/d57753b2-3b2b-4ed9-89bf-35ad4a6d99cd)
4. Switch to `Console panel` in `Chrome DevTools`. Click on the 🚫 button to clear the console.
5. We'll pass the custom layout to the `BX_EXPOSED.test_touch_control()` function to test it. Paste this code into the console then press Enter to reset back to default layout:
```javascript
BX_EXPOSED.test_touch_control(
{ {
"$schema": "https://raw.githubusercontent.com/microsoft/xbox-game-streaming-tools/master/touch-adaptation-kit/schemas/layout/v4.0/layout.json",
"content": {
"left": { "left": {
"inner": [ "inner": [
{ {
@ -51,11 +32,7 @@ BX_EXPOSED.test_touch_control(
"expand": false, "expand": false,
"axis": { "axis": {
"input": "axisXY", "input": "axisXY",
"output": "leftJoystick", "output": "leftJoystick"
"deadzone": {
"threshold": 0.05,
"radial": true
}
} }
} }
], ],
@ -120,11 +97,7 @@ BX_EXPOSED.test_touch_control(
"type": "joystick", "type": "joystick",
"axis": { "axis": {
"input": "axisXY", "input": "axisXY",
"output": "rightJoystick", "output": "rightJoystick"
"deadzone": {
"threshold": 0.05,
"radial": true
}
} }
} }
] ]
@ -142,16 +115,57 @@ BX_EXPOSED.test_touch_control(
} }
] ]
} }
}
}
```
## Preparations for testing on desktop
1. Open the xCloud website in Chrome/Edge/Chromium browser.
2. Open the `Chrome DevTools`.
3. Click on the `Toggle device emulation` button and set `Dimensions` to any device you want. I prefer `iPhone SE` because it has 16:9 screen ratio. Don't select Android devices or Chrome will become fullscreen every time you load a game.
<img width="352" alt="image" src="https://github.com/redphx/better-xcloud/assets/96280/38e27f71-9148-4eb4-873c-81d3b1184a3e">
<img width="285" alt="image" src="https://github.com/redphx/better-xcloud/assets/96280/0ee0fcf6-58a6-4828-b3d6-2f9838035f27">
4. Reload the page. This step is necessary, don't skip it.
5. Make sure the `Touch controller > Availability` setting is set to `All games`. Reload the page if needed.
<img width="455" alt="image" src="https://github.com/redphx/better-xcloud/assets/96280/1ba3118d-9680-4adc-9e66-3aa5b27e89e0">
6. Done.
## Preparations for testing on Android device
1. Enable `Developer mode > USB Debugging` on your Android device.
2. Connect the device with your PC.
3. Open xCloud in Kiwi Browser.
4. On PC, open `about:inspect` in Chrome/Edge.
5. Find the xCloud row and click on "inspect fallback"
6. Done
## Getting started
1. Do all the preparation steps.
2. Open Chrome DevTools, enable `Toggle device emulation`, reload page.
3. Load the game you want to create custom layout for. It must not having official touch support. In this guide I'll pick [DOOM (1993)](https://www.xbox.com/en-US/play/games/doom-1993/9PLZPHBNHTMF).
![image](https://github.com/redphx/better-xcloud/assets/96280/d57753b2-3b2b-4ed9-89bf-35ad4a6d99cd)
4. Switch to `Console panel` in `Chrome DevTools`. Click on the 🚫 button to clear the console.
5. We'll pass the custom layout to the `BX_EXPOSED.test_touch_control()` function to test it. Paste the entire content of the layout that you created in VS Code to the console, then press Enter:
```javascript
BX_EXPOSED.test_touch_control(
{
"$schema": "https://raw.githubusercontent.com/microsoft/xbox-game-streaming-tools/main/touch-adaptation-kit/schemas/layout/v4.0/layout.json",
"content": {
...
}
} }
) )
``` ```
6. Use the [Touch Adaptation Kit documentation](https://learn.microsoft.com/en-us/gaming/gdk/_content/gc/system/overviews/game-streaming/game-streaming-touch-touch-adaptation-kit-overview) to design your own layout. You can also look at [other custom layouts](https://github.com/redphx/better-xcloud/tree/gh-pages/touch-layouts/layouts) for references.
7. Pass your modified layout to the `BX_EXPOSED.test_touch_control()` function to update it. Do this step again and again until you satisfy with the result.
## Submit layout ## Submit layout
1. Fork the [`gh-pages`](https://github.com/redphx/better-xcloud/tree/gh-pages) branch: 1. Remove `"$schema"` line from the layout
2. Create two files: `<XBOX_TITLE_ID>.json` and `layouts/<LAYOUT_FILE_NAME>.json` 2. Add `"name": "Layout Name"` line into the layout (Replace "Layout Name" with the real name)
3. Fork the [`gh-pages`](https://github.com/redphx/better-xcloud/tree/gh-pages) branch:
4. Create two files: `touch-layouts/<XBOX_TITLE_ID>.json` and `touch-layouts/layouts/<LAYOUT_FILE_NAME>.json`
- `<XBOX_TITLE_ID>.json`: - `<XBOX_TITLE_ID>.json`:
- To find the value of `XBOX_TITLE_ID`: - To find the value of `XBOX_TITLE_ID`:
1. Find the game on [dbox.tools](https://dbox.tools). [Here](https://dbox.tools/store/products/9PLZPHBNHTMF/) is the page for DOOM 1993. 1. Find the game on [dbox.tools](https://dbox.tools). [Here](https://dbox.tools/store/products/9PLZPHBNHTMF/) is the page for DOOM 1993.
@ -173,17 +187,14 @@ BX_EXPOSED.test_touch_control(
{ {
"schema_version": 1, "schema_version": 1,
"layouts": { "layouts": {
"LAYOUT_ID": { "LAYOUT_ID": <LAYOUT_JSON>
"name": "Layout Name",
"content": <LAYOUT_JSON>
}
} }
} }
``` ```
3. ⚠️ Use [DuckDuckGo's JSON Beautifier tool](https://duckduckgo.com/?t=ffab&q=format+json&ia=answer) (indent with 2 spaces) to beautify & validate the JSON files. 5. ⚠️ Use [DuckDuckGo's JSON Beautifier tool](https://duckduckgo.com/?t=ffab&q=format+json&ia=answer) (indent with 2 spaces) to beautify & validate the JSON files. Copy the result and paste it back into the layout file.
4. Create a pull request including the screenshot of the layout. Chrome/Edge has a built-in screenshot feature: 6. Create a pull request including the screenshot of the layout. Chrome/Edge has a built-in screenshot feature:
<img width="366" alt="Screenshot 2024-03-10 at 10 39 49" src="https://github.com/redphx/better-xcloud/assets/96280/cb6d0211-9f6b-4a37-ae84-f6df5c14d7bf"> <img width="366" alt="Screenshot 2024-03-10 at 10 39 49" src="https://github.com/redphx/better-xcloud/assets/96280/cb6d0211-9f6b-4a37-ae84-f6df5c14d7bf">
5. Done! That's the basic of it. I'll update with more details later. 7. Done! That's the basic of it. I'll update with more details later.