Introduction

Get started with Xyba Elements and learn by exploring interactive examples.

Overview

A library of web components with first-class React support for making touch controls for games and game-like interfaces that runs in browsers or web views.

CDN

You can load Xyba Elements via CDN to get started quickly.

<script type="module" src="https://cdn.jsdelivr.net/npm/xyba-elements/dist/cdn/elements/index.js"></script>

You can also cherry pick elements to avoid loading the full library.

<script type="module" src="https://cdn.jsdelivr.net/npm/xyba-elements/dist/cdn/elements/analog/analog.js"></script>

NPM Install

If you don’t want to use the CDN, you can install Xyba Elements from npm with the following command.

npm install xyba-elements

Importing

Once installed, you can import via xyba-elements.

// Custom Elements
import "xyba-elements/elements/analog/analog.js";

// React 
import { Analog } from "xyba-elements/react";

In this quick overview, we'll take a look at the elements Xyba Elements offers.

Usage

The xyba-analog element

The analog element is designed to mimic a gamepad joystick and d-pad.

html

<xyba-analog adapt trail></xyba-analog>

React

<Analog adapt trail />

The xyba-button element

The button element is designed to mimic gamepad buttons with support for sliding pointers.

A

html

<xyba-button>A</xyba-button>

React

<Button>A</Button>

The xyba-capture element

The capture element is a complementary element for the analog and button elements to capture the pointer and let the elements decide if they ignore specific captures.

A B

html

<xyba-analog adapt capture></xyba-analog>
<xyba-capture id="my-capture" capture>
    <xyba-button ignore-capture="#my-capture">A</xyba-button>
    <xyba-button ignore-capture="#my-capture">B</xyba-button>
</xyba-capture>

React

<Analog adapt capture></Analog>
<Capture id="my-capture" capture>
    <Button ignore-capture="#my-capture">A</Button>
    <Button ignore-capture="#my-capture">B</Button>
</Capture>

css

#my-capture {
    display: flex;
    justify-content: space-between;
}

The xyba-pad element

The pad element is designed to mimic a touch-pad where the data on pointer movement between events or frames is useful.

{"x": 0, "y": 0}

html

<xyba-pad id="my-pad" onmovement="window.handleMovement">{"x": 0, "y": 0}</xyba-pad>

javascript

function handleMovement(event) {
    event.target.innerHTML = JSON.stringify(event.detail);
}

window['handleMovement'] = handleMovement;

React

const [movement, setMovement] = useState({x: 0, y: 0});

return <Pad id="my-pad" onMovement="(e) => setMovement(e.detail)">{JSON.stringify(movement)}</Pad>

css

#my-pad {
    border: 1px dashed currentColor;
    width: 300px;
    height: 200px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}