SolidJS Support

With the latest versions of Gameface, we have actively worked on supporting SolidJS. This addition allows developers to leverage SolidJS’s reactive programming model and fine-grained reactivity to create dynamic and efficient game UIs.

Using Create Solid for Project Setup

To begin a new SolidJS project, refer to the Quick start guide from SolidJS. This guide explains how to set up a project using the create-solid tool, which generates all required configurations and dependencies. Since there are several templates available, we will highlight the one most compatible with Gameface.

Setting Up a New SolidJS Project

The steps to create a new SolidJS project are as follows:

  1. Open a terminal in the directory where you want to create your project.
  2. Run the npm init solid command and follow the prompts to set up your project.
    1. For Project name, enter your desired project name.
    2. For What type of project would you like to create?, select SolidJS + Vite.
    3. If you want to use TypeScript in your project select Yes for Use TypeScript?.
    4. For Which template would you like to use?, select basic.
  3. The tool will generate a new directory with your chosen name and scaffold the project files.
  4. Navigate into your project directory using cd your-project-name.
  5. Install the project dependencies by running npm install.

Configuring closing tags

By default, SolidJS omits the last closing tag for performance reasons. However, Gameface expects all tags to be properly closed. To ensure compatibility, you need to configure the vite-plugin-solid in your generated vite.config.ts file by setting the omitLastClosingTag option to false.

If you skip this step, Gameface will display warnings about unclosed tags in the console.

Your final vite.config.ts file should look like this:

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import devtools from 'solid-devtools/vite';

export default defineConfig({
  plugins: [devtools(), solidPlugin({
    solid: {
      omitLastClosingTag: false,
    }
  })],
  server: {
    port: 3000,
  },
  build: {
    target: 'esnext',
  },
});

Running the project in development mode

After you have completed the above steps you can now start the development server by running npm run dev and begin building your game UI.

When you started the development server you will see a message in the terminal indicating that the server is running and providing the local URL where you can access your application, usually http://localhost:3000.

To run the project in Gameface, you will need to have the Player running. To open the UI inside the Player.exe you need to open it with the url parameter set to the local URL provided by the development server - for example: http://localhost:3000.

This can be done by running the Player.bat with http://localhost:3000 argument: Player.bat http://localhost:3000

The Player.bat file is typically located in the root directory of your Gameface package.

Running the project in production mode

To prepare your SolidJS project for production build you need to make sure that the base option in the vite.config.ts file is set to ./. This ensures that all the assets are correctly referenced relative to the index.html file when the project is built for production. Here is how the vite.config.ts file should look with the base option set:

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import devtools from 'solid-devtools/vite';

export default defineConfig({
  plugins: [devtools(), solidPlugin({
    solid: {
      omitLastClosingTag: false,
    }
  })],
  server: {
    port: 3000,
  },
  base: './',
  build: {
    target: 'esnext',
  },
});

Then to build your SolidJS project for production, you can run the npm run build command in your project root directory. This will create an optimized version of your application in the dist directory.

After building the project you can preview the UI directly by drag and dropping the index.html file from the dist directory into the Player.exe.

Using the Gameface UI

With the support for SolidJS in Gameface we have introduced GamefaceUI that is comprehensive collection of components designed to simplify the prototyping of game user interfaces. These components are built using SolidJS and are optimized for performance and ease of use in Gameface. GamefaceUI comes with the following features:

  • Getting started guide to help you set up your project quickly.
  • A boilerplate project to kickstart your development.
  • Components for building intuitive game user interfaces.
    • Basic components like buttons, sliders, toggles, inputs, dropdowns and others.
    • Layout components like grids, rows, columns and others.
    • Media components for handling images, live views and others.
    • Feedback components like modals, tooltips and others.
    • Complex components like carousel, color picker and others.
  • Seamless integration with the SolidJS framework for reactive and efficient UI development.
  • Setup for testing your UI by writing E2E tests.
  • Comprehensive HUD and Menu UIs demonstrating how to use the components in a real-world scenario.
  • Support for using SVGs as SolidJS components.

Additional SolidJS plugins

To enhance the development experience with SolidJS and Gameface, you can also consider using the following Vite plugins that we have created:

  • Gameface Vite Plugin - The plugin applies fixes for some known issues with solid such as:
    • Properly closing all the HTML tags.
    • Fixes empty text nodes generated by SolidJS.
    • Correctly quoting SVG attributes.
  • Solid Style to CSS Plugin - Convert style properties to class, enhancing performance by reducing inline styles and leveraging CSS for better caching and reusability.

Known Issues with SolidJS support

  • By default SolidJS omits the last closing tag for better performance. This produces warnings in Gameface about unclosed tags. The fix is explained in the Configuring closing tags section.
  • In some cases, SolidJS generates empty text nodes that can cause errors in Gameface. To resolve this, we developed the Gameface Vite Plugin, which addresses these issues.
  • Currently the router provided by SolidJS does not work properly with Gameface. If you need to develop and use router in your SolidJS project you can use the provided solutions by GamefaceUI.
← Simple Opacity
Tailwind support →