This guide describes the features of the Hummingbird integration in Unity3D. A basic understanding of the Unity3D engine, as well as HTML/JavaScript is assumed.

Brief overview of Hummingbird

Hummingbird is a modern user interface middleware solution that allows you to integrate HTML pages built with CSS and JavaScript in your game. The communication between your game and the HTML engine is done through the HummingbirdUISystem component. Each HTML page is called a View. The View component allows you to perform operations on the page, such as resizing, navigating to a different URL, sending input events and so on.

Installation

Hummingbird for Unity3D is distributed in a unitypackage file. You can import this package in your project by either double-clicking on it, or by importing it through Unity in the Project window.

First, open your project in Unity3D Editor, then:

1. From the menu bar choose Assets -> Import package -> Custom package
2. Navigate in the file chooser dialog to the folder with your Hummingbird package.
3. Click Open and a Unity3D dialog with all files of the package files listed should open.
4. Click Import.

The trial version includes a 30 day trial license key. After the key expires you won't be able to initialize Hummingbird and an error message will be logged in the console.

The pro version requires entering your license key first. The license key is located at Standard Assets/Hummingbird/Detail/License.cs. You should've received this file already prefilled with your license key when you bought the pro version. Replacing the existing empty License.cs file from the package with the provided one will activate Hummingbird.

Note

The trial and pro packages contain different libraries. When upgrading to pro from trial, you should reimport the pro package and replace the libraries.

Package contents and structure

The package has the following structure:

• Gizmos/Hummingbird - icons only for Unity Editor integration.
• Hummingbird - contains samples and documentation.
• Plugins - contains the Hummingbird libraries. These are automatically copied when building.
• Standard Assets/Hummingbird - contains the Hummingbird integration classes. You'll find a Detail folder inside which contains classes that are internal for the implementation and are used by the "public" classes. The interface you should be using is outside the Detail folder:
  • HummingbirdView.cs - component used for displaying html pages.
  • HummingbirdUISystem.cs- component used to initialize and manage the UI.
• StreamingAssets/Hummingbird/UIResources - contains the UI resources for Hummingbird. These are automatically copied when building.

Note

If you want to uninstall the package you should remove the folders listed above. Exception is the Plugins folder when you have other plugins there.

[Planned] Uninstall option in the Hummingbird menu

Add Hummingbird view to your scene

In Hummingbird there are two types of views - Screen and World views, the first is used for HUDs and menus, while the latter can be used for in-game UI (interactions between the player and the game). Let's start by creating and displaying a simple HTML page - call it HelloHTML.html

Create an HTML file and place it in the UIResources folder (By default, this is the Assets/Streaming Assets/Hummingbird folder.). The page will be displayed instead of a HUD, so click on the MainCamera (it will be the GameObject on which the html will be attached), open Hummingbird (in the main menu) and choose Add Screen View. Go to the Page property of the view and set the relative URL of the HelloHTML page here, for example: coui://uiresources/HelloHTML.html. Click Play and you'll see the result.

Warning

If you have a space in the name of your project, this could forestall the HTML from loading.