The first steps
Installing the editor
The editor can be installed on Windows, Mac and Linux. Follow the link below.
Installing on Windows
If you download for windows, you may see a blue window saying that "Windows protected your PC". Simply click "More info" and then click "Run anyway".
Prerequisites
Software
In addition to the editor, you need to have both Node.js installed as well as a code editor. Any code editor should work. A popular one is Visual Studio Code.
Knowledge
In order to create something with Hology, some previous knowledge of web development and related technologies is necessary. This includes Typescript, HTML, CSS and how to use a terminal.
Create a new project
To create a new project, open the Hology editor on your computer.
Click "Create a new project". Then set the name of the project, which could be the name of a game you will create. A template can be selected as a starting point. Select a UI framework such as React which will be set up for you in the project's code base that will be created that when creating the project.
After clicking "Create", the project's code base will be setup and various dependencies necessary to build your project will be installed. After the installation has completed, your project should open in a new window.
A scene, which can represent the entire world of your game or a single game level, is created for you called demo. In order to use that scene in your game, you will refer to the name of the scene in your code.
Running your game in a browser
The project is essentially just a website which means that during development, you can run the project game inside your browser.
To run you project, open a terminal and navigate to the project's folder and run the commandnpm run dev.
A "localhost" address is logged (http://localhost:5173/). Open this address in your browser and you should now see your scene. Any changes you make to the scene in the Hology editor will be reflected in the browser window after refreshing.
Using Powershell (Windows only)
If you are using windows, your default terminal is normally set to Powershell. You may get an error like below. This is expected if you have not previously configured Powershell to allow running scripts.
Run the following command in the Powershell terminal to enable running scripts.
Recommended VS Code extensions
If you are using VS Code as your code editor, the following extensions can help improving your workflow.
Copy with imports - This automatically generates imports for you when you copy code. When following tutorials, you will be copying and pasting code a lot and this extensions helps to not having to specify the imports manually.
Pretty Typescript Errors - Improves formatting of errors in code
Move TS - Move TypeScript files and update relative imports - When moving files, it can be tedious to update imports. This fixes this.
Git Graph - Git it the recommended version control solution and you definitely should have version control in any coding project including hology engine projects. This extension makes it easier to have an overview of the git history and branches in VS Code as it shows the entire history of commits and you can easily inspect the changes performed in a previous commit as well as to revert back to a previous state.
Last updated