-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathnovelengine.html
More file actions
294 lines (278 loc) · 21 KB
/
Copy pathnovelengine.html
File metadata and controls
294 lines (278 loc) · 21 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ノベルゲームエディタ プロジェクト概要</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Chosen Palette: "Tech Neutral with Muted Blue" -->
<!-- Application Structure Plan: [The application transforms the static project specification into an interactive, single-page guided tour. It uses a thematic, top-down structure with a sticky navigation bar (Overview, Architecture, UI/UX, Data Structure, Roadmap, Scenario Assistant) to allow users to easily jump between key project aspects. This structure was chosen over a direct representation of the report's linear format because it allows for a more intuitive and non-linear exploration of complex technical concepts, making the information more digestible for developers and stakeholders alike.] -->
<!-- Visualization & Content Choices: [Report Info: Basic components -> Goal: Organize/Inform -> Viz/Method: Interactive HTML/CSS diagram showing nodes and connections -> Interaction: Hover effects to highlight elements -> Justification: More engaging than a static bullet list. | Report Info: Screen layout -> Goal: Organize -> Viz/Method: HTML/CSS diagram illustrating the two-view architecture -> Interaction: Static visual -> Justification: Clearly shows the relationship between separate views and shared components. | Report Info: Data structure (JSON) -> Goal: Explain -> Viz/Method: Interactive code block -> Interaction: Click on JSON keys to reveal explanatory tooltips -> Justification: Demystifies the data format for users. | Report Info: Future plans -> Goal: Show change -> Viz/Method: Horizontal timeline diagram (HTML/CSS) -> Interaction: Hover over points for details -> Justification: Presents future work in a more dynamic and organized way than a list. | New Feature: Scenario Assistant -> Goal: Create/Engage -> Viz/Method: Text input and output area with interactive button -> Interaction: User input + button click for LLM generation -> Justification: Demonstrates a practical application of AI for creative content generation, aligning with the project's purpose. No traditional charts were used as the source is a technical spec, not a dataset.] -->
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
<style>
body {
font-family: 'Inter', 'Noto Sans JP', sans-serif;
background-color: #f8f7f4;
color: #2c3e50;
}
.section-card {
background-color: #ffffff;
border-radius: 12px;
padding: 2.5rem;
margin-bottom: 2rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease-in-out;
}
.nav-link {
transition: color 0.3s, border-color 0.3s;
}
.nav-link.active {
color: #3b82f6;
border-bottom-color: #3b82f6;
}
.tooltip {
visibility: hidden;
opacity: 0;
transition: opacity 0.3s;
}
.has-tooltip:hover .tooltip {
visibility: visible;
opacity: 1;
}
.timeline-item::before {
content: '';
position: absolute;
left: -2.75rem;
top: 50%;
transform: translateY(-50%);
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
background-color: #ffffff;
border: 4px solid #3b82f6;
z-index: 1;
}
.timeline-line {
position: absolute;
left: -2.25rem;
top: 0;
bottom: 0;
width: 2px;
background-color: #dbeafe;
}
</style>
</head>
<body class="antialiased">
<header class="sticky top-0 bg-white/80 backdrop-blur-md z-50 shadow-sm">
<nav class="container mx-auto px-4">
<div class="flex items-center justify-between h-16">
<h1 class="text-xl font-bold text-gray-800">ノベルゲームエディタ</h1>
<div class="hidden md:flex items-center space-x-8">
<a href="#overview" class="nav-link text-gray-600 hover:text-blue-500 border-b-2 border-transparent pb-1">概要</a>
<a href="#architecture" class="nav-link text-gray-600 hover:text-blue-500 border-b-2 border-transparent pb-1">アーキテクチャ</a>
<a href="#ui_ux" class="nav-link text-gray-600 hover:text-blue-500 border-b-2 border-transparent pb-1">UI/UX</a>
<a href="#data" class="nav-link text-gray-600 hover:text-blue-500 border-b-2 border-transparent pb-1">データ構造</a>
<a href="#roadmap" class="nav-link text-gray-600 hover:text-blue-500 border-b-2 border-transparent pb-1">ロードマップ</a>
<a href="#assistant" class="nav-link text-gray-600 hover:text-blue-500 border-b-2 border-transparent pb-1">AIアシスタント</a>
</div>
</div>
</nav>
</header>
<main class="container mx-auto px-4 py-8 md:py-12">
<section id="overview" class="text-center mb-16">
<h2 class="text-4xl font-bold text-gray-900 mb-4">ビジュアルノベル開発のための<br>直感的なノードベースエディタ</h2>
<p class="max-w-3xl mx-auto text-lg text-gray-600">
このプロジェクトは、Unreal Engineのブループリントのように、視覚的な操作でノベルゲームの複雑なシナリオ分岐を構築できる開発ツールです。コーディングの知識がなくても、誰でも簡単に物語のロジックを設計・管理できます。
</p>
</section>
<div class="space-y-8">
<div id="overview-content" class="section-card min-h-[300px]">
<h3 class="text-2xl font-bold mb-6 text-gray-800">プロジェクト概要</h3>
<p class="text-gray-600 mb-8">
このエディタの核心は、物語の各シーンを「ノード」として視覚化し、それらを線で繋ぐことでストーリーの流れを直感的に構築できる点にあります。このアプローチにより、開発者は複雑な分岐や物語構造全体を俯瞰しながら、効率的に制作を進めることができます。
</p>
<div class="grid md:grid-cols-2 gap-8 items-center">
<div>
<h4 class="font-semibold text-lg mb-4">基本構成要素</h4>
<ul class="space-y-3 text-gray-700">
<li class="flex items-center"><span class="w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mr-3 font-bold">1</span>ノード（シーン）をキャンバスに配置</li>
<li class="flex items-center"><span class="w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mr-3 font-bold">2</span>ノード同士を線で接続し、分岐を構築</li>
<li class="flex items-center"><span class="w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mr-3 font-bold">3</span>各ノードに演出情報（背景、キャラ等）を設定</li>
<li class="flex items-center"><span class="w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mr-3 font-bold">4</span>無限スクロールとズームで大規模な物語も管理</li>
</ul>
</div>
<div class="p-6 bg-gray-50 rounded-lg border border-gray-200 flex items-center justify-center h-full">
<div class="w-full max-w-sm space-y-2">
<div class="relative has-tooltip bg-white p-3 rounded-lg shadow-md border flex justify-between items-center group">
<span class="font-semibold">冒頭シーン</span>
<div class="w-3 h-3 bg-blue-500 rounded-full"></div>
<div class="tooltip absolute bottom-full mb-2 w-max px-2 py-1 bg-gray-800 text-white text-xs rounded">シーンの開始点</div>
</div>
<div class="pl-12 text-2xl text-gray-400">↓</div>
<div class="relative has-tooltip bg-white p-3 rounded-lg shadow-md border flex justify-between items-center group">
<span class="font-semibold">選択肢シーン</span>
<div class="w-3 h-3 bg-green-500 rounded-full"></div>
<div class="tooltip absolute bottom-full mb-2 w-max px-2 py-1 bg-gray-800 text-white text-xs rounded">物語の分岐点</div>
</div>
</div>
</div>
</div>
</div>
<div id="architecture" class="section-card min-h-[300px]">
<h3 class="text-2xl font-bold mb-6 text-gray-800">アーキテクチャ</h3>
<p class="text-gray-600 mb-8">
本エディタは、効率的な開発とメンテナンス性を両立させるため、画面の役割を明確に分離した設計を採用しています。物語全体の構造を編集する画面と、個々のシーンの詳細を編集する画面は分かれていますが、UIコンポーネントを共通化することで、一貫性のあるユーザー体験を提供します。描画エンジンには、高速なCanvasベースのライブラリであるPixi.jsを採用しています。
</p>
<div class="bg-gray-50 border border-gray-200 rounded-lg p-8 flex flex-col md:flex-row items-center justify-around gap-8">
<div class="text-center p-6 bg-white rounded-lg shadow-md w-full md:w-1/3">
<h4 class="font-bold text-lg text-blue-600">ストーリー分岐編集画面</h4>
<p class="text-sm text-gray-600 mt-2">ノードを繋ぎ、物語の全体像を構築する</p>
</div>
<div class="text-3xl font-light text-gray-400 transform md:-rotate-90">⬍</div>
<div class="text-center p-6 bg-white rounded-lg shadow-md w-full md:w-1/3">
<h4 class="font-bold text-lg text-green-600">シーン詳細編集画面</h4>
<p class="text-sm text-gray-600 mt-2">セリフ、背景、BGMなど個別の演出を設定する</p>
</div>
</div>
<div class="mt-6 text-center text-gray-700 bg-blue-50 rounded-lg p-4">
<p><span class="font-bold">共通UIコンポーネント:</span> 両方の画面でノードの見た目などを共通化し、一貫性を保ちます。</p>
</div>
</div>
<div id="ui_ux" class="section-card min-h-[300px]">
<h3 class="text-2xl font-bold mb-6 text-gray-800">UI/UX とインタラクション</h3>
<p class="text-gray-600 mb-8">
ユーザーがストレスなく創造的な作業に集中できるよう、直感的な操作性を追求しています。マウス操作を基本とし、ドラッグによるスクロール、ホイールによるズーム、ノード間のドラッグ＆ドロップによる接続など、視覚的で分かりやすいインタラクションを実現します。
</p>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-50 p-6 rounded-lg border">
<h4 class="font-semibold text-lg mb-2">ズーム操作</h4>
<p class="text-sm text-gray-600">マウスホイールでキャンバスを拡大・縮小。物語の全体像と詳細をシームレスに行き来できます。</p>
</div>
<div class="bg-gray-50 p-6 rounded-lg border">
<h4 class="font-semibold text-lg mb-2">スクロール操作</h4>
<p class="text-sm text-gray-600">キャンバスをドラッグして自由に移動。広大なストーリーマップも快適に探索できます。</p>
</div>
<div class="bg-gray-50 p-6 rounded-lg border col-span-1 md:col-span-2 lg:col-span-1">
<h4 class="font-semibold text-lg mb-2">ノード接続</h4>
<p class="text-sm text-gray-600">出力ソケットからドラッグし、入力ソケットにドロップするだけで、簡単にシーンを接続できます。</p>
</div>
</div>
</div>
<div id="data" class="section-card min-h-[300px]">
<h3 class="text-2xl font-bold mb-6 text-gray-800">データ構造</h3>
<p class="text-gray-600 mb-8">
エディタで作成されたシナリオデータは、汎用性の高いJSON形式で管理されます。各ノードの位置情報、タイトル、入出力設定、そしてシーン固有のデータ（背景画像、登場キャラクター、セリフなど）が構造化されて保存されます。この明確な構造により、外部ツールとの連携やデータのインポート・エクスポートが容易になります。
</p>
<div class="bg-gray-800 rounded-lg p-6 font-mono text-sm text-white overflow-x-auto">
<pre><code id="json-code">{
<span class="has-tooltip relative cursor-pointer text-pink-400">"id"</span>: <span class="text-green-400">"scene_001"</span>,
<span class="has-tooltip relative cursor-pointer text-pink-400">"x"</span>: <span class="text-yellow-400">100</span>,
<span class="has-tooltip relative cursor-pointer text-pink-400">"y"</span>: <span class="text-yellow-400">200</span>,
<span class="has-tooltip relative cursor-pointer text-pink-400">"title"</span>: <span class="text-green-400">"冒頭シーン"</span>,
<span class="has-tooltip relative cursor-pointer text-pink-400">"inputs"</span>: [<span class="text-green-400">"in"</span>],
<span class="has-tooltip relative cursor-pointer text-pink-400">"outputs"</span>: [<span class="text-green-400">"out"</span>],
<span class="has-tooltip relative cursor-pointer text-pink-400">"data"</span>: {
<span class="has-tooltip relative cursor-pointer text-blue-400">"background"</span>: <span class="text-green-400">"bg_school.png"</span>,
<span class="has-tooltip relative cursor-pointer text-blue-400">"characters"</span>: [<span class="text-green-400">"char_a"</span>],
<span class="has-tooltip relative cursor-pointer text-blue-400">"dialogue"</span>: [
{ <span class="text-purple-400">"speaker"</span>: <span class="text-green-400">"A"</span>, <span class="text-purple-400">"text"</span>: <span class="text-green-400">"こんにちは！"</span> }
]
}
}</code></pre>
</div>
<div id="tooltip-container" class="mt-4 text-gray-600 bg-blue-50 p-4 rounded-md min-h-[50px] flex items-center justify-center">
<p>JSONのキーにカーソルを合わせると説明が表示されます。</p>
</div>
</div>
<div id="roadmap" class="section-card min-h-[300px]">
<h3 class="text-2xl font-bold mb-6 text-gray-800">拡張予定 / ロードマップ</h3>
<p class="text-gray-600 mb-8">
プロジェクトはまだ始まったばかりです。今後は、より複雑なゲームロジックに対応するための機能追加や、制作したストーリーを実際にプレイできるランタイムの開発など、継続的な機能強化を計画しています。
</p>
<div class="relative pl-12 py-4">
<div class="timeline-line"></div>
<div class="space-y-12">
<div class="relative timeline-item">
<h4 class="font-semibold text-lg mb-1">複雑なロジックノードの追加</h4>
<p class="text-gray-600">条件分岐、選択肢、変数操作、フラグ管理など、高度なゲームロジックをGUIで構築可能にします。</p>
</div>
<div class="relative timeline-item">
<h4 class="font-semibold text-lg mb-1">ノベルゲームランタイムの構築</h4>
<p class="text-gray-600">エディタで作成したシナリオデータを解釈し、実際にゲームとして実行・プレイできる環境を開発します。</p>
</div>
<div class="relative timeline-item">
<h4 class="font-semibold text-lg mb-1">インポート/エクスポート機能</h4>
<p class="text-gray-600">作成したJSONデータの書き出しと読み込み機能を実装し、プロジェクトの共有やバックアップを容易にします。</p>
</div>
<div class="relative timeline-item">
<h4 class="font-semibold text-lg mb-1">プレビュー再生機能</h4>
<p class="text-gray-600">編集中のシナリオをエディタ内で即座にプレビューし、演出の確認やデバッグを効率化します。</p>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="bg-gray-100 mt-16">
<div class="container mx-auto px-4 py-6 text-center text-gray-500">
<p>© 2025 Novel Game Editor Project. All rights reserved.</p>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', () => {
const sections = document.querySelectorAll('section[id], div[id].section-card');
const navLinks = document.querySelectorAll('.nav-link');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href').substring(1) === entry.target.id) {
link.classList.add('active');
}
});
}
});
}, { rootMargin: '-50% 0px -50% 0px' });
sections.forEach(section => {
observer.observe(section);
});
navLinks.forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
const jsonTooltips = {
"id": "各ノードを一位に識別するためのID。",
"x": "キャンバス上のX座標。",
"y": "キャンバス上のY座標。",
"title": "エディタ上に表示されるノードのタイトル。",
"inputs": "このノードへの入力ソケット定義。",
"outputs": "このノードからの出力ソケット定義。",
"data": "このシーン固有の演出データを含むオブジェクト。",
"background": "シーンで使用される背景画像ファイル名。",
"characters": "シーンに登場するキャラクターのID配列。",
"dialogue": "セリフの配列。話者とテキストのペアで構成される。"
};
const tooltipContainer = document.getElementById('tooltip-container');
const codeBlock = document.getElementById('json-code');
const tooltipSpans = codeBlock.querySelectorAll('.has-tooltip');
tooltipSpans.forEach(span => {
const key = span.textContent.replace(/"/g, '');
if (jsonTooltips[key]) {
span.addEventListener('mouseenter', () => {
tooltipContainer.innerHTML = `<p><span class="font-bold">${key}:</span> ${jsonTooltips[key]}</p>`;
});
span.addEventListener('mouseleave', () => {
tooltipContainer.innerHTML = `<p>JSONのキーにカーソルを合わせると説明が表示されます。</p>`;
});
}
});
});
</script>
</body>
</html>