Hology
Hology
Hology
  • 👋Welcome to Hology Docs
  • Getting started
    • Introduction to Hology
    • The first steps
    • Editor basics
      • Flying in scenes
      • Placing objects
      • Select objects
      • Transform
      • Grouping objects
      • Duplicate
    • Starter project - Third person shooter
  • Tutorials
    • Rolling ball - Gameplay programming
    • Character movement programming
    • Character AI behavior
  • Release
    • Distribution
      • Discord Activities
      • Facebook Instant Games
      • Upload to Itch.io
      • Host with GitHub Pages
      • Publishing to Steam
      • iOS and Android
  • Assets
    • 3D Models
      • Custom collision shapes
      • Material slots
    • Materials
    • Textures
    • Prefabs
  • Gameplay
    • Actors
      • Creating actor classes
      • Actor parameters
      • Actor components
      • Actor lifecycle
      • Spawning actors
      • Moving actors
    • Services
      • Load assets
    • Player input
    • Collision detection
    • Physics
      • Physics body types
      • Applying forces
      • Ray casting
    • Trigger volumes
    • Character movement
    • Pointer events
    • Animation
      • Animation system
      • Character Animation
      • Animation State Machine
    • Sound
      • Audio parameter
    • World
    • Navigation
  • Shaders
    • Introduction to shaders
    • Creating shaders
    • Shader parameters
    • Typescript shaders
      • Types
      • Math functions
      • Attributes
      • Varying
      • Uniforms
      • Textures
      • Arrays
      • Select
      • Lighting
    • Painted materials
    • Water shader tutorial
  • Level design
    • Landscape sculpting
    • Landscape painting
    • Grass
  • User Interfaces
    • Creating user interfaces
    • Using React
    • VR
  • Visual Effects
    • Introduction to VFX
    • VFX Assets
  • Integrations
    • Arcweave
Powered by GitBook
On this page
  1. User Interfaces

Creating user interfaces

As Hology Engine runs in yours web browser, it allows you to use existing libraries and tools to create user interfaces with Typescript, HTML and CSS. You can use any existing library or framework such as React, Vue, Angular, and many more. This enables you to leverage existing skillsets and resources rather than having to use something custom for Hology Engine. If you already have a preferred technology stack for building web application, this may be great. If on the other hand, your are new to web development, this may present you with lots of options of which you don't know what to choose. We have a suggested technology stack for UI development that will be used in our official tutorials that you can lean on.

Selecting a UI Framework

When you create a new project in the Hology Engine launcher, you can select a UI Framework. This will set up your project with specific libraries to get you started.

  • React - A single page client side react application. It also comes with Preact Signals to help with communicating state between your game play code such as actors and services with your UI react components.

  • None - A single page clients side typescript application. You could use this as a starting point to install other libraries of your choice.

PreviousGrassNextUsing React

Last updated 1 year ago