Interacting with the Browser

Note: Please make sure to complete Getting Started beforehand.

Now that you've got an Alacrity Browser, you may want to interact with it at runtime to achieve certain goals. Some examples of what you may want to do can be found on this page.

Load a URL

To load a new URL on the Alacrity Browser, first take a reference to the AlacrityBrowser object wherever you need it (for example, some sort of Game Controller or Game Manager class). Then, simply invoke AlacrityBrowser.LoadUrl with your desired URL. Note that you can pass files here via the file:// schema.

Change the framerate

You can set the default framerate on the Alacrity Browser via the framerateOnLoad property, but changing that at runtime will not do anything. To change the target framerate of the Alacrity Browser at runtime, you'll need to take a reference to an AlacrityBrowser object and invoke AlacrityBrowser.SetFramerate.

Detecting User Input/Focus

If you want to use Alacrity Browser as a UI or even display a webpage, you probably want to know if the user has any web UI element focused or if their mouse is over top of a UI element. Alacrity conveniently exposes two methods to get this information:

• AlacrityBrowser.IsUIFocused() tells you if a UI element is focused on the page, such as a textarea or input element being typed into.
• AlacrityBrowser.IsUIHovered() tells you if any UI element is currently being hovered over by the cursor. Note that by default, even your documents body will be able to be hovered over, meaning this will always be true. To resolve this, you can set the css property pointer-events: none on any elements you wish to ignore, and they will subsequently not be interactable by the user.

Recommendation: It is recommended to use a css structure similar to the following if you wish to use Alacrity to create a UI for your game:

* {
  user-select: none; /* Prevent users from selecting text by default */
  pointer-events: none; /* Prevent users from interacting with elements */
}

/* Prevent your main page from overflowing with scrollbars */
body {
  overflow: hidden;
}

/* Enable pointer events whever you want the user to be able to interact */
input,
textarea,
button {
  pointer-events: auto;
}

/* Enable text-selection if you want users to be able to copy/paste text */
.my-copyable-text {
  user-select: auto;
  pointer-events: auto; /* You must enable pointer events to select text */
}