Tauri + Vue + PIXI.js Game Template

A modern game template built with Tauri, Vue 3, and PIXI.js. This template provides a foundation for creating desktop games with a beautiful UI and smooth animations.

Features

• 🎮 Game Structure: Complete game flow with title screen, game screen, and congratulations screen
• 🎨 Modern UI: Beautiful and responsive user interface with smooth transitions
• ✨ PIXI.js Integration: Powerful 2D rendering capabilities for game graphics
• 🖥️ Desktop App: Cross-platform desktop application using Tauri
• 🎯 TypeScript Support: Type-safe development with TypeScript
• 🎭 Animations: Smooth transitions and particle effects
• 🎨 Styling: Modern CSS with scoped styles and transitions

Project Structure

src/
├── components/
│   ├── TitleCanvas.vue    # Title screen with welcome animation
│   ├── GameCanvas.vue     # Main game screen with game logic
│   └── Congratulations.vue # Completion screen
├── App.vue               # Main application component
└── main.ts              # Application entry point

Screens

Title Screen

• Welcome animation with particle effects
• Start and Quit buttons
• Smooth transitions

Game Screen

• Interactive game elements
• Game rules explanation
• Progress tracking
• Reset functionality

Congratulations Screen

• Victory celebration
• Restart option
• Quit option

Getting Started

Prerequisites

• Node.js (Latest LTS version recommended)
• Rust (for Tauri development)
• Your system's build tools

Installation

1. Clone the repository:

git clone [repository-url]
cd tauri-pixi-vue

2. Install dependencies:

npm install

3. Start the development server:

npm run tauri dev

Building for Production

npm run tauri build

Development

Key Technologies

• Tauri: For building cross-platform desktop applications
• Vue 3: Progressive JavaScript framework
• PIXI.js: 2D WebGL renderer
• TypeScript: For type-safe development
• Vite: Next generation frontend tooling

Customization

1. Game Logic: Modify GameCanvas.vue to implement your game mechanics
2. UI Design: Update styles in component files
3. Animations: Customize PIXI.js animations in each component
4. Transitions: Modify transition effects in App.vue

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Tauri
• Vue.js
• PIXI.js
• Vite