React-Dialogic
一個專為 React 應用開發的對話系統 UI 套件,提供類遊戲風格的對話介面
A dialogue system UI kit for React applications with game-style interface
介紹 Introduction
React-Dialogic 是一個功能完整的 React 對話系統元件庫,專為建立互動式對話體驗而設計。無論是視覺小說、游戲對話、教學引導還是角色驅動的用戶界面,本套件都能提供令人印象深刻的對話流程。
React-Dialogic is a comprehensive React dialogue system component library designed for creating interactive dialogue experiences. Whether for visual novels, game dialogues, onboarding tutorials, or character-driven interfaces, this library provides engaging conversation flows.
📺 Live Demo
✨ 主要特性 Key Features
🖥️ 沉浸式顯示系統 Immersive Display System
- 組件初始化時自動佔滿整個視窗/容器 | Components automatically fill the entire container
- 響應式設計,適配不同屏幕尺寸 | Responsive design for all screen sizes
👥 角色配置系統 Character Configuration
- 支援設定角色信息(名稱、圖片、顏色等)| Support for character settings (name, images, colors)
- 多個表情/狀態的圖片管理 | Multiple emotion/state image management
- 角色在對話中的位置控制 | Character positioning control
💬 對話框系統 Dialogue Box System
- 打字機效果逐字顯示文本 | Typewriter effect for text display
- 可調整文字顯示速度 | Adjustable text display speed
- 支援文字特效和停頓 | Support for text effects and pauses
🔄 選項系統 Choice System
- 支援對話選項分支 | Support for dialogue branching options
- 選項結果影響後續對話流程 | Choices affecting dialogue flow
- 條件性選項顯示 | Conditional option display
🎨 主題系統 Theme System
- 支援自定義主題配置 | Support for custom theme configuration
🏞️ 背景管理 Background Management
- 自定義背景圖片或顏色 | Custom background images or colors
- 背景轉場效果 | Background transition effects
🔌 事件鉤子系統 Event Hook System
- 完整的事件處理機制 | Comprehensive event handling
- 自定義事件處理和遊戲邏輯整合 | Custom game logic integration
📦 安裝 Installation
npm install react-dialogic
yarn add react-dialogic
📝 使用範例 Usage Examples
最簡使用方式 Simplest Usage
import { ReactDialogic } from 'react-dialogic';
import 'react-dialogic/dist/styles.css';
function App() {
return (
<ReactDialogic
characters={characters} // 角色配置
dialogue={dialogue} // 對話內容
startScene="start" // 起始場景
/>
);
}
程式碼範例 Code Examples
詳細範例代碼可在此查看:https://github.com/marshal604/react-dialogic/tree/main/src/examples
Detailed example code can be found here: https://github.com/marshal604/react-dialogic/tree/main/src/examples
CSS 主題樣式 CSS Theme Styles
CSS主題樣式可在此查看:https://github.com/marshal604/react-dialogic/blob/main/src/styles/theme.css
CSS theme styles can be viewed here: https://github.com/marshal604/react-dialogic/blob/main/src/styles/theme.css
🇬🇧 English Usage Guide
Use Cases
React-Dialogic is particularly well-suited for:
- Visual novels and interactive games: Create character dialogues and storyline branches
- Tutorials and user onboarding: Guide users through product features with character-driven tutorials
- Interactive storytelling: Create engaging story experiences
- Character-driven user interfaces: Personify your application interfaces
- Educational applications: Build interactive learning content
- Customer service chat interfaces: Develop personalized service chat interfaces
- Product showcases: Present product features through dialogue
Support and Contribution
- Issue reporting: Submit issues on the GitHub Issues page
- Feature requests: Suggest new features
- Code contributions: Submit Pull Requests following contribution guidelines
- Documentation improvements: Help improve documentation
🇹🇼 繁體中文使用指南
應用場景
React-Dialogic 特別適合以下應用場景:
- 視覺小說和互動式遊戲:建立角色對話和情節分支
- 教學引導和使用者導覽:透過角色引導用戶了解產品功能
- 互動式故事敘述:創建引人入勝的故事體驗
- 角色驅動的用戶介面:將應用程式介面擬人化
- 教育應用:建立互動式教學內容
- 客戶服務聊天界面:開發有個性的客服對話介面
- 產品展示:透過對話方式介紹產品特點
支援與貢獻
- 問題報告:如發現問題,請在 GitHub Issues 頁面提交
- 功能請求:歡迎提出新功能建議
- 代碼貢獻:請參閱貢獻指南提交 Pull Request
- 文檔改進:幫助我們完善文檔
相關連結 Links