1.14.0.5
Hummingbird
A modern user interface library for games
The purpose of this document is to guide you through the UI development process. It goes over all the major phases and describes the software and technologies used. Please note that this a general workflow guide.
Hummingbird is a graphical user interface system specially designed for games. Game developers and UI artists can use standard modern HTML5, CSS3, and JavaScript to design and implement game UI and interaction.
Above you can see the basic functional diagram of Hummingbird. Essentially the result of the UI development (discussed further on in detail) is a HTML page that is placed inside of a Hummingbird View. The Hummingbird View is basically a HTML5 page and the JavaScript context for it. The View allows you to perform various operations on the page, such as resizing, navigating to a different URL, sending input events, executing custom JavaScript code and so on. The HTML content in the View is rendered by the Hummingbird Renderer (the Renoir graphics library) to a texture that is passed to the game engine which displays it in the game.
The HTML UI development process can be broken down in three major tasks – UI vector and bitmap assets design, UI composing and animation and UI programming. All three tasks can be carried out in parallel and the combined result is HTML page/pages that are displayed in Hummingbird view/views that are integrated in the game engine. The tasks are discussed in greater detail further on in the guide but in the diagram above you can see the team member involved and the software used for each phase.
Although you can create basic shapes such as circles, rectangles, ellipses directly with HTML elements very often you'll need more complex shapes for your UI. These shapes are typically created as bitmap (raster) or vector images by UI artist or a graphic designer. Bitmap (raster) graphics images broadly speaking represent the image as rectangular grid of pixels. Bitmap images are used for all sorts of UI elements: artwork, photos and detailed UI elements. Their major drawback is that their quality degrades if they are scaled. Vector images on the other hand are based on geometrical primitives and scale perfectly regardless of the size of the UI. Furthermore the file size of the generated files is smaller than that of raster images. Hummingbird even supports SVG vector images that can be modified by CSS/JS at runtime (check the SVG images section for more information). The major drawback of vector images is that they are actually rendered at runtime and complex images might have effect on the performance. It is advisable to use vector images only when the UI has to be scaled for large resolutions or when you design simple shapes. On the diagram above you can see the software used for the different types of UI image assets.
Currently Hummingbird supports a subset of SVG Tiny. We plan to implement SVG Full in the future.
This stage is typically carried out by Web animator, Front end developer or 2D animator It has three main tasks:
This stage is very closely related to the UI composing and animation stage and it's typically carried out by a Front end developer or a JavaScript developer. It has three main tasks:
In this stage you can use the Hummingbird Debugger in collaboration with the game developer to debug for HTML/CSS/JS errors.
[Planned] The Hummingbird Debugger is still in development.
This phase is typically carried out by a game developer. He is responsible for adding the Hummingbird View component and setting its settings in the game engine. Furthermore the game developer also writes the game engine binding code.
Adding responsive scaling functionality to your UI is essential to make it render properly regardless of the resolution. The best way to achieve this is using CSS vw/vh units or ems.