Installation
Installation Guide
To get started with Preactor, follow these steps for installation and setup.
1. Install Preactor via Unity’s Package Manager
-
Open Unity.
-
Navigate to
Window > Package Manager
. -
Click the + button in the top-left corner and select Install package from Git URL….
-
Enter the following Git URL:
https://github.com/Rikarin/preactor.git?path=/Assets/Plugins/Preactor
This will install Preactor into your Unity project.
2. Initialize the Preactor Directory
After installation, you’ll need to initialize the Preactor directory and set up the base npm package.
-
In the root directory of your Unity project, open a terminal and run the following commands:
Terminal window mkdir PreactorThis creates a
Preactor
folder for managing the package files, including JavaScript views and other assets.
3. Copy Solution Files
To ensure Preactor works with your project, copy the contents of the ./Preactor/solution
directory from the Preactor Git repository into your <Project>/Preactor
directory:
- Download or clone the repository and locate the
solution
folder. - Copy everything from
./Preactor/solution
into<Project>/Preactor
.
4. Compile JavaScript Views
You’ll need to compile your JavaScript views into the Unity asset directory as .js
files using TypeScript, Tailwind CSS, and esbuild.
-
Run the following command in your terminal to start the build process:
Terminal window npm run start
This command will compile your TypeScript views and automatically generate the necessary .js
files inside the Unity asset directory.
5. Set Up Preactor in the Scene
-
In the Unity Editor, create a global object for Preactor by right-clicking in the Hierarchy window and selecting:
Preactor > Preactor GlobalPreactor Global includes all of the basic js files to bridge JS with C# and run the compiled view.
-
Next, create a Renderer Object by right-clicking in the hierarchy of the current scene and selecting:
Preactor > Preactor Renderer -
Finally, import the compiled JavaScript view into the renderer object by navigating to:
Assets/view/<Name of your View>/index.jsThis will link your Preact-based JavaScript views to Unity’s UI system.
Addressables Integration
Preactor supports Unity’s Addressables system, allowing for efficient asset management and asynchronous loading. Here’s how to use it with your Preactor-rendered prefabs:
-
Place your prefab with the
Preact Renderer
component into an Addressable Group along with its correspondingindex.js
file. -
These assets can now be packaged, distributed, and loaded asynchronously as part of your Addressables workflow.
Benefits:
- Seamless Updates: With this setup, you can push game updates that include new UI views or UI changes without needing to release a new version through app distribution platforms like the App Store or Google Play.
- Flexible Delivery: Addressables allow your game to load only the necessary assets on-demand, optimizing performance and reducing initial download size.