PIXI Game UI

A comprehensive PIXI.js UI library with game components for React applications.

✨ Features

• 🎮 Complete set of game UI components built with PIXI.js
• ⚛️ Ready-to-use React wrapper component
• 🎨 Beautiful pre-designed assets and themes
• 📱 Responsive design support
• 🔧 Fully customizable and extensible
• 📦 TypeScript support with complete type definitions
• 🚀 Optimized for performance

📦 Installation

npm install pixi-game-ui

🚀 Quick Start

React Component

import React, { useRef } from 'react';
import { PixiGameUI, TitleScreen, type PixiGameUIRef } from 'pixi-game-ui/react';

function App() {
  const pixiRef = useRef<PixiGameUIRef>(null);

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <PixiGameUI
        ref={pixiRef}
        width={800}
        height={600}
        autoResize={true}
        initialScreen={TitleScreen}
        onInitialized={(app) => {
          console.log('PIXI app initialized:', app);
        }}
      />
    </div>
  );
}

export default App;

Direct PIXI.js Usage

import { 
  Button, 
  Window, 
  colors,
  initAssetsForNpm,
  Application 
} from 'pixi-game-ui';

// Initialize PIXI app
const app = new Application();
await app.init({
  width: 800,
  height: 600,
  backgroundColor: colors.bg,
});

// Initialize assets
await initAssetsForNpm();

// Create UI components
const myButton = new Button('Click Me!', () => {
  console.log('Button clicked!');
});

app.stage.addChild(myButton);

📋 Available Components

UI Components

• Button - Fancy button with hover/press states
• SmallButton - Compact button variant
• Window - Modal window with title ribbon
• CheckBox - Checkbox input
• Slider - Value slider
• Switch - Toggle switch
• LoadingSpinner - Loading indicator
• Counter - Animated number counter
• DottedProgress - Progress indicator

Screens

• TitleScreen - Main menu screen
• GameScreen - Game play screen
• LoadScreen - Asset loading screen

Windows

• SettingsWindow - Settings modal
• PauseWindow - Pause menu
• InfoWindow - Information display
• LoginWindow - User login form
• LevelsWindow - Level selection

React Hooks

• usePixiGame - Game state and screen management
• usePixiAssets - Asset loading utilities
• usePixiResponsive - Responsive canvas handling

📚 Documentation

For detailed usage instructions, examples, and API documentation, see USAGE.md.

🎨 Assets

The library includes a comprehensive set of pre-designed game assets:

• UI Buttons and Windows
• Icons and Controls
• Progress Bars and Sliders
• Background Elements
• Example Screenshots

Assets are automatically served from the npm package or can be customized with your own.

🔧 Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build library
npm run build:lib

# Run linter
npm run lint

# Format code
npm run format

🎯 TypeScript

The library is written in TypeScript and includes complete type definitions:

import type { 
  PixiGameUIProps, 
  PixiGameUIRef, 
  SceneData,
  AssetConfig,
  AppScreenConstructor 
} from 'pixi-game-ui/react';

📄 License

MIT License - see LICENSE for details.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

⭐ Show your support

Give a ⭐️ if this project helped you!