Skip to content

html input

Jump to bottom
Peter Klooster edited this page Mar 13, 2019 · 3 revisions

HTML: Input

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.

Page

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

Button

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

Axis

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

Joystick

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

Device motion & orientation

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>

Unity reference

Pan (drag)

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

Swipe

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

Custom data

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

Profile image

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

Positioning Helper

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

Classes

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 -->

Clone this wiki locally