genshin-interface

genshin-interface

Genshin Impact's interface, rebuilt as an unofficial, non-commercial fan work and not affiliated with HoYoverse. It holds the pieces every screen of the game's is made from, as presentational Vue components:

• GameScreen, the root a screen is drawn in: the game's 1920 by 1080 unit, its face and its pointer;
• its round buttons and their glyphs, the server bar, the progress bar, the prompt band, the notice card, the wait mark and the ornamented divider.

It ships no image or font from the game: each glyph is a vector path traced from the game's own, and the face is the open one nearest it.

Table of Contents

• 🚀 Getting Started
• 📖 Documentation
• ⚖️ License

🚀 Getting Started

pnpm i genshin-interface vue

Draw a screen inside GameScreen, lay it out in calc(var(--unit) * n), and load the styles once:

<script setup lang="ts">
import { GameScreen, InterfaceIcon, RoundButton } from "genshin-interface";
import "genshin-interface/style.css";
</script>

<template>
  <GameScreen>
    <RoundButton :icon="InterfaceIcon.Exit" label="Exit" />
  </GameScreen>
</template>

📖 Documentation

We highly recommend you take a look at the documentation to level up. It compares the library against the game.

⚖️ License

This project is licensed under the Apache-2.0 license.