html input - crashkonijn/AirController GitHub Wiki
The HTML follows a very simple boilerplate to make the controller. The AirController.css will remove all default CSS off a browser so you start off with a blank slate that will completely fill the screen.
First off everything has to be put in pages, these pages can be switched by the unity plugin. A page is created like this:
<air-page name"loading">
<!-- page content -->
</air-page>AirPage uses the Base Mixin | Unity reference
The air-button can be used to send simple inputs to Unity. A variety of event modes can be chosen.
<air-button name"jump" mode="down">Jump</air-button>
<air-button name"select-character" mode="down" value="1">Character 1</air-button>
<air-button name"select-character" mode="down" value="2">Character 2</air-button>AirButton has the following properties:
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| mode | String | True | Valid inputs are: down, hold, tap, double-tap. | |
| value | Int | False | Can be an integer value that gets send with the event. |
These are the modes:
| Mode | Description |
|---|---|
| down | Sends the 'down' (onTouchStart) event |
| hold | Sends the 'down' (onTouchStart) and 'up' (onTouchEnd) events |
| tap | Sends the 'down' (onTap) event |
| double-tap | Sends the 'down' (onDoubleTap) event |
AirButton uses the Base Mixin, Anchor Mixin & Premium Mixin | Unity reference
The air-axis element behaves almost the same as a button but is used to send vector data to Unity. The below example can be used to send an input vector called move.
<air-axis name="move" anchor="center-left" mode="left"></air-axis>
<air-axis name="move" anchor="top-left" mode="up-left"></air-axis>
<air-axis name="move" anchor="top-center" mode="up"></air-axis>
<air-axis name="move" anchor="top-right" mode="up-right"></air-axis>
<air-axis name="move" anchor="center-right" mode="right"></air-axis>
<air-axis name="move" anchor="bottom-left" mode="down-left"></air-axis>
<air-axis name="move" anchor="bottom-center" mode="down"></air-axis>
<air-axis name="move" anchor="bottom-right" mode="down-right"></air-axis>AirAxis uses the Base Mixin, Anchor Mixin & Premium Mixin | Unity reference
When touching an air-joystick element a Joystick will appear. It's corresponding input will be send to Unity as a Vector2.
WARNING: This should be used for quick prototyping only. AirConsole strongly advices against it.
<air-axis name="move" anchor="center-left" mode="left"></air-axis>
<air-axis name="move" anchor="top-left" mode="up-left"></air-axis>
<air-axis name="move" anchor="top-center" mode="up"></air-axis>
<air-axis name="move" anchor="top-right" mode="up-right"></air-axis>
<air-axis name="move" anchor="center-right" mode="right"></air-axis>
<air-axis name="move" anchor="bottom-left" mode="down-left"></air-axis>
<air-axis name="move" anchor="bottom-center" mode="down"></air-axis>
<air-axis name="move" anchor="bottom-right" mode="down-right"></air-axis>AirJoystick uses the Base Mixin, Anchor Mixin & Premium Mixin | Unity reference
By adding the air-gyroscope element to a page it will send the device motion & orientation data to Unity.
<air-page name="flying">
<air-gyroscope name="motion"></air-gyroscope>
</air-page>If you add an air-pan element to a page it's area will receive and send pan events.
<air-pan name="aim" anchor="center-center"></air-pan>AirPan uses the Base Mixin & Anchor Mixin | Unity reference
If you add an air-swipe element to a page it's area will receive and send swipe events.
<air-swipe name="swipe" anchor="center-center"></air-swipe>AirSwipe uses the Base Mixin & Anchor Mixin | Unity reference
If you set data on a device by using Device.SetData(key, data) you can let AirController put that in your HTML automatically by using the air-data element.
<air-data key="score"></air-data>AirData has the following properties:
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| key | String | True | The key under which the data is saved. |
AirData uses the Base Mixin & Anchor Mixin | Unity reference
Loading the users profile image with AirController is exceptionally easy. The below example will load the profile image in there
<air-profile-image name="profile" anchor="center-center"></air-profile-image>AirProfileImage uses the Base Mixin & Anchor Mixin
AirController also contains the air-position object which can be used for easier fixed positioning.
<air-position anchor="center-center"></air-position>AirProfileImage uses the Anchor Mixin
Each device in unity has a Classes variable, it's contents will be added to the class attribute of the body tag in the controller's HTML.
Unity:
Device.Classes = "color0";CSS:
.color0 .this-div-needs-color {
background-color: blue;
}
.color1 .this-div-needs-color {
background-color: red
}HTML:
<div class="this-div-needs-color"></div>
<!-- This div will now have a blue background -->