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

Updated How to create custom touch control layout (markdown)

redphx 2024-03-10 10:06:14 +07:00
parent 48926ddfbc
commit 3ddb21e79d
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,14 +1,15 @@
## Requirements
- Have Chrome/Edge or any Chromium browsers installed.
- Have an Android device with Kiwi Browser installed if you want to test on real device.
- Basic knowgledge about:
- [JSON format](https://www.freecodecamp.org/news/what-is-json-a-json-file-example/)
- [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.
## Preparations
## 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 `iPhone SE` (or anything you want).
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">
@ -18,6 +19,11 @@
<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
...
## 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)