-
-
Notifications
You must be signed in to change notification settings - Fork 82
Expand file tree
/
Copy pathdoc_editor.html
More file actions
2493 lines (2434 loc) · 265 KB
/
doc_editor.html
File metadata and controls
2493 lines (2434 loc) · 265 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
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<html>
<head>
<meta charset="UTF-8">
<title>Tuesday JS documentation</title>
<meta content="#cec8e3" name="theme-color" charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1' />
<style>
a {text-decoration: none; color:#000;}
* {
font-family:Arial;
border-collapse:collapse;
font-size:13px;
border:none;
margin:0;
padding:0;
border-spacing:0px;
outline:none;
box-sizing:border-box;
}
*::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: transparent;
}
*::-webkit-scrollbar-thumb {
background: #004080;
border-radius: 4px;
}
body {background-color: #cec8e3;}
.body {
min-height:100vh;
max-width:1024px;
min-width:656px;
width:100%;
margin:0px auto;
padding:32px 0;
scrollbar-gutter: stable;
}
.small_img{
background-color: #fff;
border-radius: 11px;
width:100%;
object-fit:contain;
}
.button_icon{
display:inline-block;
background-repeat:no-repeat;
background-position:center center;
height:28px;
width:28px;
cursor:pointer;
}
.icon_search{background-size:18px 18px;background-image:url("data:image/svg+xml,%3csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath vector-effect='non-scaling-stroke' d='M17 17L12 12' stroke-width='1.2' stroke='%236e5fa5'/%3e%3ccircle cx='7.5' cy='7.5' r='6' stroke-width='1.2' stroke='%236e5fa5'/%3e%3c/svg%3e")}
.icon_close{background-size:24px 24px;background-image:url("data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath vector-effect='non-scaling-stroke' d='M4 4.5L12 12.5 M12 4.5L4 12.5' stroke='%236e5fa5' stroke-linecap='round' stroke-width='1.25'/%3e%3c/svg%3e")}
select,input[type="text"]{
border:0;
color:var(--color_dark);
text-align-last:left;
-webkit-appearance:none;
appearance: none;
border-bottom:1px solid #6e5fa5;
background-color:transparent;
width:100%;
height:100%;
}
input::placeholder{color:#cec8e3;}
.panel{
background-color:#fff;
box-shadow: 0px 2px 24px rgba(110,95,165,0.25);
border-radius:16px;
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
display:grid;
align-content: start;
grid-template-columns:256px minmax(400px, auto);
grid-template-rows: 48px auto;
grid-template-areas:
'search content'
'catalog content';
}
.catalog {
padding: 8px;
grid-area: catalog;
}
.catalog summary {
padding: 8px 0;
cursor:pointer;font-weight: bold;
}
.catalog a {
display:block;
padding: 6px 0 6px 14px;
margin:2px 0;
border-radius: 4px;
}
.catalog a:hover{background-color:#cec8e3;}
.catalog details:not(:last-child)[open] {
border-bottom:1px solid #cec8e3;
margin-bottom:32px;
}
.catalog details details {
display:block;
margin-left:16px;
}
.catalog details a {
display:block;
padding:6px 0 6px 26px;
}
.content:after{
z-index:-2;
content:"";
position:absolute;
left:0;top:16px;
display:block;
height:calc(100% - 32px);
width:100%;
border-left:1px solid #cec8e3;
}
.content {
padding: 16px;
padding-bottom: 32px;
grid-area: content;
position:relative;
}
.search{
grid-area: search;
display:grid;
grid-template-columns:46px auto 46px;
align-items:center;
justify-items:center;
height:48px;
width:100%;
}
.search input{height:28px;}
@supports selector(:has(*)){
:not(:has(.doc:target)) #home{display:inline;}
}
.doc{
display:none;
}
.doc:target{
display:inline;
scroll-snap-align: start;
scroll-margin-top: 40px;
}
.doc ul {
padding-left:16px;
list-style-type: disc;
}
.doc ul li {
margin:12px 0;
}
.doc a {color:#6e5fa5;}
.title {font-weight:bold;font-size:20px;scroll-margin-top: 2em;}
.hidden{display:none;}
.search_title{color:#6e5fa5;font-size:16px;}
.search_description{color:#000;padding:8px 0;}
#search{display:none;}
#search:target{display:inline;}
#search a{color:#000;}
hr{
border-bottom:1px solid #cec8e3;
margin:8px 0;
}
.img_t{cursor:pointer;height:auto;width:90%;
transition-duration:0.8s;transform:scale(1, 1);
border:1px solid #cec8e3;
background-size:100% 100%;
background-repeat:no-repeat;
}
.img_t:hover{transition-duration: 0.3s;transform: scale(1.01, 1.01);box-shadow: 0px 2px 18px rgba(110, 95, 165, 0.25);}
.img_w{height:auto;width:100%;cursor:pointer;
border-radius:6px;
background-size:100% 100%;
background-repeat:no-repeat;
}
pre{
background-color: #efefff;
border-radius: 11px;
padding:18px;
color:#6e5fa5;
line-height: 18px;
white-space: pre-wrap;
font-size:12px;font-family:monospace;
}
#window_zone {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0);
position: fixed;
left: 0;
top: 0px;
visibility: hidden;
transition-duration: 0.5s;
}
#window_zone img{
max-height: 96vh;
max-width: 96%;
height: auto;
width: auto;
background-size: 100% 100%;
background-repeat: no-repeat;
border-radius: 6px;
}
.head{font-size:16px;height:64px;display:flex;align-items:center;justify-content:center;}
</style>
</head>
<body>
<div class="body">
<div class="panel">
<div class="search">
<span class="icon_search button_icon" onclick="doc_search(this.nextElementSibling.value)" ></span>
<input type="text" placeholder="Search" onchange="doc_search(this.value);">
<span class="icon_close button_icon" onclick="this.previousElementSibling.value='';doc_search('');" ></span>
</div>
<div class="catalog">
<details open>
<summary>Quick tutorial</summary>
<a href="#quick_tutorial">English</a>
<a href="#quick_tutorial_es">Spanish</a>
<a href="#quick_tutorial_ja">Japanese</a>
<a href="#quick_tutorial_ru">Russian</a>
<a href="#quick_tutorial_pt">Portuguese</a>
</details>
<details>
<summary>User interface</summary>
<a href="#user_interface">Main interface</a>
<a href="#new_project">New project</a>
<a href="#open_project">Open project</a>
<a href="#save_project">Save project</a>
<details>
<summary>Settings project</summary>
<a href="#settings_project">Project</a>
<a href="#settings_languages">Languages</a>
<a href="#settings_characters">Characters</a>
<a href="#settings_keyboard">Keyboard</a>
<a href="#settings_variables">Variables</a>
<a href="#settings_cursors">Cursors</a>
<a href="#settings_sounds">Sounds</a>
<a href="#settings_addon">Add-on</a>
<a href="#settings_fonts">Fonts</a>
<a href="#editor_options">Editor</a>
</details>
<a href="#w_json_edit">JSON editor</a>
<a href="#export_csv">Export text to CSV / TSV</a>
<a href="#w_build">Build project</a>
<a href="#run">Run project</a>
<a href="#add_story_block">Add story block</a>
<a href="#metadata">Metadata</a>
</details>
<details>
<summary>Project structure</summary>
<a href="#story_blocks">Story block</a>
<a href="#scene_edit">Scene</a>
<a href="#dialog">Dialog</a>
<details>
<summary>Dialog elements</summary>
<a href="#dialog_back_to">Back to</a>
<a href="#dialog_art">Art</a>
<a href="#dialog_text">Text</a>
<a href="#dialog_text_add">Text add</a>
<a href="#dialog_choice">Choice</a>
<a href="#dialog_video">Video</a>
<a href="#dialog_stop_sound">Stop sound</a>
<a href="#dialog_play_sound">Play sound</a>
<a href="#dialog_timer">Timer</a>
<a href="#dialog_variables">Variables</a>
<a href="#dialog_go_to">Go to</a>
<a href="#dialog_ID_event">ID event</a>
<a href="#dialog_hide_interface">Hide interface</a>
<a href="#dialog_no_autosave">No autosave</a>
<a href="#dialog_HTML_code">HTML code</a>
<a href="#dialog_JavaScript">JavaScript code</a>
<a href="#dialog_toast">Toast</a>
</details>
<a href="#legacy_choice">Legacy choice</a>
<a href="#terrain_map">Terrain map</a>
<a href="#hidden_object">Hidden object</a>
</details>
<details>
<summary>Add-on</summary>
<a href="#speech">Speech</a>
<a href="#game_pad">Game Pad</a>
<a href="#hidden_object">Hidden objects</a>
<!--<a href="#screen_control">Screen control</a>-->
<!--<a href="#show_toast">Show toast</a>-->
<a href="#terrain_map">Terrain map</a>
<!--<a href="#touch_swipe">Touch swipe</a>-->
</details>
<a href="#editor_options">Editor Options</a>
<a href="#css_class">CSS Class</a>
<a href="#android">Lessons</a>
<details>
<summary>Lessons</summary>
<a href="#unlocked_content">Make hidden content</a>
<a href="#enter_name">How to enter player name</a>
<a href="#tuesday_js_translate">Translation of the Tuesday JS</a>
<!--<a href="#bot_telegram">Bot for Telegram</a>-->
</details>
</div>
<div class="content">
<div class="doc" id="search"></div>
<div id="home" align="center" class="doc" name="home">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="128" viewBox="0 0 128 128" style="margin-top:32px;">
<path fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8px" d="M17,10.015H64c26.346,0,48,21.763,48,48.18s-21.654,48.18-48,48.18V102.36"></path>
<path fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8px" d="M42,108V10m22,0v98"></path>
<circle fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8px" cx="53" cy="108" r="11"></circle>
</svg>
<p style="font-size: 64px;">TuesdayJS</p>
<p style="font-size:36px;padding-bottom:64px;">visual novel engine</p>
<div align="center" style="width:100%; ">
<div align="left" style="width:max-content;">
<p style="padding-bottom:32px;"><b>A quick tutorial to create a visual novel with Tuesday JS</b></p>
<p><a href="#quick_tutorial"><b>EN</b> - A Quick Guide to Creating a Visual Novel</a></p><br>
<p><a href="#quick_tutorial_ja"><b>JA</b> - Tuesday JSでビジュアルノベルを作ってみよう</a></p><br>
<p><a href="#quick_tutorial_es"><b>ES</b> - Una guía rápida para crear una novela visual</a></p><br>
<p><a href="#quick_tutorial_ru"><b>RU</b> - Руководство по созданию визуальной новеллы</a></p><br>
<p><a href="#quick_tutorial_pt"><b>PT</b> - Um guia rápido para criar uma visual novel</a></p><br>
</div>
</div>
</div>
<div id="quick_tutorial_ja" class="doc" name="Tuesday JSでビジュアルノベルを作ってみよう(入門者用クイックガイド)">
<table cellpadding="10" cellspacing="16" style="width:100%;"><tbody>
<tr>
<td align='center' colspan="2" style="text-align:center;"><p class="head">Tuesday JSでビジュアルノベルを作ってみよう(入門者用クイックガイド)</p><p><a href="https://twitter.com/onigi123" target='_blank'>Translation and adaptation by Onigi</a></p></td>
</tr>
<tr>
<td align='center' colspan="2" height='64px'>その1 新規プロジェクトを作成してみよう</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>新しくゲーム制作プロジェクトを作成します。画面左上の書類(ファイル)型アイコンを押してください。</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/icon_load.svg" style="background-image:url('tutorial_img/main_screen.png');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>その2 新規プロジェクトの設定</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_folder.svg" style="background-image:url('tutorial_img/new_project.png');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>設定ウィンドウで、ゲーム制作に使用するリソース(画像ファイルや音楽ファイルなど)が入った作業フォルダーを指定します。<br><br><span style="color:#f00;">プロジェクトを作成した段階では、コンピューターにもブラウザーにもデータが保存されていません。</span>〈Save〉機能を手動で操作して保存(バックアップ)する必要があります(《その32 プロジェクトの保存〉参照)。保存せずにTuesday JSを終了したりブラウザーを更新したりすると作業中のデータが消えてしまいます。<br><br>保存済みのプロジェクトから作業を再開する際は、JSONファイルではなく、プロジェクトに使用している作業フォルダーを指定してください。Tuesday JSはプロジェクトをJSONファイルとして保存しますが、このファイルには作業フォルダーを基点にした画像や音声のファイルの相対パスの情報があるだけで、リソース自体は保存していません。JSONファイルは、作業フォルダー以外にあるとリソースを認識できなくなるので、常に作業フォルダーに配置しておいてください。</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>その3 対応言語の設定</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>プロジェクトの名称とゲームの対応言語を設定します。<br><br>プロジェクトの名称は言語ごとに設定してください。重複していると正しく表示されません。<br><br>一列目の言語はゲームの標準言語になります。ゲームを起動したデバイスがいずれの言語にも対応していない場合、ゲームは標準言語で起動します。<br><br>対応言語は「Setting project(プロジェクトの設定)」から後から変更できます。<br><br>入力が終わったら【Create Project(プロジェクト作成)】を選択してください。</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_languages.svg" style="background-image:url('tutorial_img/new_project.png');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>その4 ストーリー・ブロックを配置してみよう</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_project.svg" style="background-image:url('tutorial_img/main_screen.png');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>では〈ストーリー・ブロック〉を設置してみましょう。右下の【Add story block(ストーリー・ブロックを追加)】を押してください。<br><br>Tuesday JSでは、無数のストーリー・ブロックを連結させながらゲームの物語を組み立てていきます。プレイヤーの様々な操作(選択肢など)に応じて、あるブロックから他のブロックへと処理を切り替えることでゲームが進行する仕組みです。</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>その5 ストーリー・ブロックの設定</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>ストーリー・ブロックの名称と色を決めましょう。ラテン語アルファベットのみ対応しています。<br><br>名称と色は制作者が全体構造を把握するための目印で、プレイヤーからは見えません。<br><br>では、【Create Block(ブロック作成)】を押してください。<br><br>初めて作成したストーリー・ブロックは、ゲームの起動直後に処理するプロックになります。最初に処理するブロックは【project setting(プロジェクトの設定」から変更できます。</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_block.svg" style="background-image:url('tutorial_img/new_block.png');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>その6 シーンの追加</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_scene.svg" style="background-image:url('tutorial_img/new_scene.png');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>左側の【・・・】から作成したストーリー・ブロックを展開してみましょう。<br><br>(+)ボタンを押すと要素(elements)追加メニューが開きます。<br><br>ここから〈シーン(Scene)〉要素を追加してみましょう。</td>
</tr><tr>
<td align='center' colspan="2" height='128px'>その7 シーンの背景</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>シーン設定ウィンドウです。フォルダー・アイコンで背景画像(Background image)を指定してみましょう。<br><br>背景画像は言語ごとに設定できます。一枚だけ設定していれば、言語に関わらず同じ背景になります。</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/set_scene.svg" style="background-image:url('tutorial_img/set_scene.png');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>その8</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src)" src="tutorial_img/add_bg_scene.jpg"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>ダイアログボックスが開きます。適合する形式のファイルが全て並ぶので、背景にする画像ファイルを選びましょう。</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>その9</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>背景色やBGMを設定してみるのもいいですね。<br><br>【Apply(設定を適応)】を押すと、ストーリー・ブロックにシーンが加わっているはずです。</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/add_scene.svg" style="background-image:url('tutorial_img/apply_scene.jpg');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>その10 ダイアログを埋め込もう</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_dialog.svg" style="background-image:url('tutorial_img/new_dialog.jpg');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>シーンには〈ダイアログ(Diealog)〉が必要です。ダイアログとは台詞、地の文、選択肢、システムメッセージや、その挙動に関する設定の総称です。上部の(+)を押して【Add Dialog(ダイアログの追加)】を選択してください。<br><br>ストーリー・ブロックはシーンを埋め込んで作っていきます。そしてシーンはダイアログが集まって成立し、ダイアログはテキストや画像や選択肢といった要素が合わさって成立する入れ子構造になっていきます。</td>
</tr><tr>
<td align='center' colspan="2" height='128px'>その11 シーンの編集画面の起動</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>追加したダイアログのメニューボタン(三本線)を押して、【Scene Edit(シーンの編集)】を選択します。</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_dialog.svg" style="background-image:url('tutorial_img/scene_menu.jpg');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>その12 シーン編集画面を見てみよう</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/add_choice.svg" style="background-image:url('tutorial_img/scene_editor.jpg');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>これが〈Scene Editor(シーン編集画面)〉です。設定を変更しない限り、最初に作成したストーリー・ブロックはゲーム起動直後に処理するブロックなので、メインメニューとしての機能を追加してみましょう。<br><br>【Buttons & Choices(ボタンと選択肢)】タブの下にある(+)ボタンを押してください。</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>その13 ボタンと選択肢</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>レイアウト画面にボタンが出現しましたね。ボタンのパラメーターを操作する設定パネルも右側に表示されています。</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src)" src="tutorial_img/choice.jpg"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>その14</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/set_choice.svg" style="background-image:url('tutorial_img/set_choice.jpg');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>作ったボタンの【Go to(進行先)】パラメーターを〈Next scene(次のシーンへ)〉に設定しましょう。<br><br>これは［プレイヤーがボタンを押すと、現在のストーリー・ブロック内にある次の処理を実行する］という意味になります。<br><br>設定が終わったら【Back(戻る)」を押して前の画面に戻りましょう。</td>
</tr><tr>
<td align='center' colspan="2" height='128px'>その15 ダイアログにテキストを設定</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>今作ったボタンとは別にもう一つダイアログを追加し、(+)ボタンから「テキスト(文章)」要素を追加してください。</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_dialog.svg" style="background-image:url('tutorial_img/new_text.jpg');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>その16 テキストの設定</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src)" src="tutorial_img/text_edit.jpg"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>テキストの設定ウィンドウです。ここで表示する文章を言語別に追加していきます。<br><br>テキスト欄が空白の場合、作成画面でもゲームでもテキスト欄は表示されません(処理上無視されます)。複数言語に対応させる場合は、テキストを入力し忘れた言語がないよう気を付けてください。<br><br><skip>とだけ表記したそのダイアログはゲームで省略されます。言語ごとにテキストの表示回数が異なる場合、使用してみてください。<br><br>「text <var_name> text」という風に変数名を<>で囲んで記述すると、その値がテキストとして表れます。(例:今日は林檎100 g<変数名> 円です。)</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>その17</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>ダイアログ編集画面は基本的に今のような感じです。<br><br>たった今作成したダイアログのメニューを開き【Scene edit(シーンの編集)】を選択してください。</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_dialog.svg" style="background-image:url('tutorial_img/scene_menu2.jpg');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>その18 インターフェイス設定画面</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src)" src="tutorial_img/scene_editor_text.jpg"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>〈Text panel(テキストパネル)〉では、テキスト表示欄の見た目や配置を編集します。<br><br>〈interface buttons(インターフェイス用ボタン)〉は、インターフェイス用ボタンの追加とその見た目を設定します。<br><br>なおインターフェイス設定では、ラスター形式の画像とベクター形式の画像が両方使用できます。更にCSS Styleの書式で設定を記述することもできます。</td>
</tr><tr>
<td align='center' colspan="2" height='128px'>その19 スプライトの追加</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>では、シーンにスプライト画像を追加してみましょう。<br><br>【Arts(画像類)】タブの(+)ボタンを押してください。</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/add_art.svg" style="background-image:url('tutorial_img/scene_editor_text.jpg');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>その20</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src)" src="tutorial_img/choice_art.jpg"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>ウィンドウが開くので、スプライトとして使う任意の画像を作業フォルダーから指定してください。</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>その21</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>配置方法やパラメーターの入力は、ボタン配置で学んだやり方と同じです。<br><br>ゲームを複数の言語に対応させる場合は、忘れずに言語別に設定してください。</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src)" src="tutorial_img/set_art.jpg"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>その22 要素の複製</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_dialog.svg" style="background-image:url('tutorial_img/duplicate_scene.jpg');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>選択(Selection)要素を作ってゲームを更に進行させましょう。<br><br>またスプライトを設定するのは手間ですから、ダイアログのメニューから【複製(Duplicate)】を選択してコピーし、これを選択肢として作り替えることにしましょう。</td>
</tr><tr>
<td align='center' colspan="2" height='128px'>その 23</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>コピーして作ったダイアログから、【Scene edit(シーンの編集)】を選択してください。</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_dialog.svg" style="background-image:url('tutorial_img/duplicate_scene2.jpg');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>その 24</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/scene_editor_text_edit.svg" style="background-image:url('tutorial_img/scene_editor_text_edit.jpg');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>Scene Content欄から【Text edit(テキスト編集)】を選択してテキストを変更しましょう。</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>その 25 キャラクター名について</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>今回は〈キャラクターネーム(Character name)〉を設定して、テキストが人物の台詞であることを示します。<br><br>キャラクターネームもテキストと同じで言語別に翻訳して入力してください。<br><br>新規に設定したキャラクターネームは言語別の名称とパラメーター類を含めTuesday JSが記録するので、二回目からは一覧から選択するだけで済みます。作成したキャラクターはプロジェクトの設定から編集できます。</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/text_edit_add_name.svg" style="background-image:url('tutorial_img/text_edit_add_name.jpg');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>その26 ネームパネル</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/name_panel_edit.svg" style="background-image:url('tutorial_img/name_panel_edit.jpg');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>キャラクターネームがシーンの画面に表示されましたね。<br><br>テキスト欄と同様、キャラクターネーム欄もテキストが何も入力されていないと表示されません。<br><br>キャラクターネーム欄の見た目と配置は変更できます。画像(ラスター形式、ベクター形式共に対応)や、CSSスタイルシートの書式も利用できます。</td>
</tr><tr>
<td align='center' colspan="2" height='128px'>その27 選択肢</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>〈Choice(選択肢)〉として使うボタンを用意しましょう。メニューボタンの作成と同じように【Buttons & Choice(ボタンと選択肢)】から選択肢用ボタンを二つ配置します。<br><br>そのうち一つの〈go to(進行先)〉は〈Next scene(次のシーンへ)〉にしてください。<br><br>ストーリー・ブロックの編集画面に戻ります。</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src)" src="tutorial_img/choice_yes_no.jpg"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>その28</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/next_scen.svg" style="background-image:url('tutorial_img/next_scen.jpg');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>〈Next scene(次のシーンへ)〉に設定したボタンを押したときの進行先になるダイアログを作成しておきます。</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>その29</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>では、先ほどの選択肢で分岐した展開も作りましょう。今までに覚えた手順でストーリー・ブロックを新しく作り、その中にシーンを追加し、そこにスプライトを付きのダイアログを組み込んでください。</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/copy_past_scene.svg" style="background-image:url('tutorial_img/copy_past_scene.jpg');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>その30 ストーリー・ブロックの接続</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/choice_line.svg" style="background-image:url('tutorial_img/choice_line.jpg');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>その27で作成した選択肢用ボタンのうち、二つ目のボタンの〈Go to(進行先)〉の値を新しく作ったストーリー・ブロックの名称にしてください。<br><br>選択肢ボタンと指定したストーリー・ブロックの間に接続を示す線が表示されましたね。</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>その31 動作テスト</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>不備なく動作するか調べるため、【動作テスト(preview)】機能で動作を確かめてみましょう。<br><br>動作テストは任意の言語設定で任意の地点から開始できます。</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/icon_preview.svg" style="background-image:url('tutorial_img/choice_line.jpg');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>その32 プロジェクトの保存</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/icon_save.svg" style="background-image:url('tutorial_img/choice_line.jpg');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>プロジェクトを記録したJSONファイルの保存先は環境によって異なります。<br><br><b>Tuesday JS</b>をブラウザーで動作させている場合<br>特に設定を変更していない場合、プロジェクトを記録したJSONファイルはダウンロードフォルダーに保存されます。次回、作業を再開する前にJSONファイルを作業フォルダーに移動させてから読み込んでください。<br><br>保存してローカル環境で動作させている場合<br>保存先を指定するウィンドウが開くので、作業フォルダーに保存してください。<br><br><b>Android OS</b>のデバイスに保存して動作させている場合<br>作業フォルダ―に保存されます。</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>その33 プロジェクトを開く</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>プロジェクトを開くときは、保存したJSONファイルを移動させた作業フォルダーを指定してください。JSONファイルそのものを指定するのではありません。JSONファイルは読み込みファイル一覧に表示されませんが、正常なので心配しないでください。<br><br>作業フォルダーにJSONファイルが二つ以上あれば、どのJSONファイルを読み込むか選ぶよう指示が出ます。</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/icon_open.svg" style="background-image:url('tutorial_img/main_screen.png');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>その34 プロジェクトをゲームソフトとして出力</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/build_choice.svg" style="background-image:url('tutorial_img/build_choice.jpg');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>画面上部の【Build(構築)】ボタンを押すと、どの形式でゲームを出力するか選択肢が出ます。推奨はZip形式です。<br><br>完成したプロジェクトの出力先はプロジェクトの保存と同様、動作環境で異なります。<br><br>ゲームを公開するときはこのzipファイルをゲーム公開サイト(game portals)などにアップロードしてください。base64.htmlに変換して公開することもできます。<br><br>ゲーム公開サイトの一例です。<br><br><ul><li><a href="https://itch.io/" target='_blank'>itch.io</a></li><li><a href="https://www.newgrounds.com/" target='_blank'>NewGrounds</a></li></ul><br><br>(以上のサイトを利用するときは英語版を用意したほうがいいでしょう)</td>
</tr>
<td align='center' colspan="2" height='128px'><!--Tuesday JSは開発中のソフトウェアなので、正常に動作しない部分もあると思います。<br>-->不具合に遭遇したときは報告をお願いします。<a href="mailto:tuesdayjsengine@gmail.com" target='_blank'>tuesdayjsengine@gmail.com</a></td>
</tr>
</tbody></table>
</div>
<div id="quick_tutorial_pt" class="doc" name="Um guia rápido para criar uma visual novel com Tuesday JS">
<table cellpadding="10" cellspacing="16" style="width:100%;"><tbody>
<tr>
<td align='center' colspan="2" style="text-align:center;"><p class="head">Um guia rápido para criar uma visual novel com Tuesday JS</p><p><a href="https://www.linkedin.com/in/sarah-carolina-camargo/" target='_blank'>Portuguese translation and adaptation by Sarah Camargo</a></p></td>
</tr>
<tr>
<td align='center' colspan="2" height='64px'>Passo 1: Crie um novo projeto</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Crie um novo projeto clicando no ícone do arquivo no canto superior esquerdo.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/icon_load.svg" style="background-image:url('tutorial_img/main_screen.png');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Passo 2: Configurando um novo projeto</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_folder.svg" style="background-image:url('tutorial_img/new_project.png');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>Na janela que é aberta, especifique a pasta de trabalho com os recursos para o projeto.<br><br><b>Atenção!</b><br>O projeto não é salvo automaticamente no seu dispositivo ou na memória do seu navegador, quando você precisar realizar uma cópia para backup do projeto, utilize a função de Salvar (Passo 32: Salvando o projeto).<br><br>Para abrir o projeto, você também precisa especificar a pasta de trabalho, não o arquivo JSON. O JSON não contém os arquivos do projetos da pasta de trabalho, apenas os caminhos para elas relacionados à pasta de trabalho. Entretanto, é importante que o JSON do projeto esteja localizado dentro da pasta de trabalho do projeto.</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Passo 3: Localização Disponível</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Indica o nome do projeto e os idiomas disponíveis.<br><br>Para cada idioma, você pode imediatamente especificar o nome do projeto traduzido.<br><br>O primeiro idioma adicionado será setado como o idioma padrão da novela.<br>Se o dispositivo do jogador não suportar nenhum dos idiomas especificados, o jogo irá trocar a linguagem para o primeiro idioma da lista.<br><br>Após a criação do projeto, você pode remover e adicionar traduções nas configurações do projeto.<br><br>Clique em <b>"Criar Projeto" / "Create project"</b>.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_languages.svg" style="background-image:url('tutorial_img/new_project.png');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Passo 4: Adicione um bloco de história</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_project.svg" style="background-image:url('tutorial_img/main_screen.png');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>Agora nós podemos proceder para a criação de um bloco de história clicando no botão <b>"Adicionar bloco de história" / "Add story block"</b> no canto inferior direito.<br><br>Uma história em Tuesday JS é constituída de blocos de história os quais o leitor pode alternar ao longo do progresso da história, utilizando as escolhas ou suas consequências.</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Passo 5: Configurando um bloco de história</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Nós configuramos o nome do bloco em letras do Latin e a cor do bloco como desejamos.<br><br>O jogador não verá esses nomes ou cores, eles são necessários para praticidade quando navegando pelo enredo.<br><br>Clique em <b>"Criar bloco" / "Create block"</b>.<br><br>O primeiro bloco de história criado será considerado por padrão como o bloco inicial. Se necessário, você pode modificar posteriormente nas configurações do projeto.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_block.svg" style="background-image:url('tutorial_img/new_block.png');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Passo 6: Adicionar Cena</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_scene.svg" style="background-image:url('tutorial_img/new_scene.png');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>Abra o bloco de história criado clicando no três pontos ao lado esquerdo.<br><br>Clique em <b>(+)</b> para chamar o menu de elementos.<br><br>E adicione um novo elemento de cena para o bloco de história no menu de pop-up.</td>
</tr><tr>
<td align='center' colspan="2" height='128px'>Passo 7: Plano de Fundo da Cena</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Na janela de opções de cena que é mostrada, configure a imagem de fundo clicando no ícone de pasta.<br><br>Aqui você também pode escolher seu próprio plano de fundo para outras traduções. Se você configurar apenas um plano de fundo, será automaticamente aplicado para todas as traduções.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/set_scene.svg" style="background-image:url('tutorial_img/set_scene.png');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Passo 8</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src)" src="tutorial_img/add_bg_scene.jpg"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>A caixa de diálogo mostrada apresenta todos os arquivos da pasta de trabalho, dentro dela selecione o arquivo desejado para o plano de fundo.</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Passo 9</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Opcionalmente, você pode especificar as opções de visualização do plano de fundo, cor de plano de fundo, e a música de fundo para a cena.<br><br>Clique em <b>"Aplicar" / "Apply"</b> e você verá a cena aparecer no bloco de história.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/add_scene.svg" style="background-image:url('tutorial_img/apply_scene.jpg');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Passo 10: Adicionar Diálogo</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_dialog.svg" style="background-image:url('tutorial_img/new_dialog.jpg');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>Agora você precisa adicionar um elemento de diálogo para a história. Clique no botão <b>(+)</b> superior e selecione <b>"Adicionar Diálogo" / "Add dialog"</b>.<br><br>Blocos de história consistem em cenas contendo os diálogos com todos os elementos como texto, gráficos e escolhas.</td>
</tr><tr>
<td align='center' colspan="2" height='128px'>Passo 11: Executar o editor de cena</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>No item mostrado, selecione o botão de menu e clique em <b>"Editar de Cena" / "Scene edit"</b>.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_dialog.svg" style="background-image:url('tutorial_img/scene_menu.jpg');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Passo 12: Menu Principal</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/add_choice.svg" style="background-image:url('tutorial_img/scene_editor.jpg');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>Agora nós estamos no editor de cena. Como o primeiro bloco de história criado automaticamente torna-se o inicial, você pode criar um menu inicial nele. O bloco inicial pode ser trocado nas configurações do projeto.<br><br>Abaixo de <b>"Botões e Escolhas" / "Buttons & Choice"</b>, clique em <b>(+)</b>.</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Passo 13: Botões e Escolhas</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Um botão é apresentado no esquema.<br><br>E um painel com seus parâmetros é apresentado no menu à direita.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src)" src="tutorial_img/choice.jpg"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Passo 14</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/set_choice.svg" style="background-image:url('tutorial_img/set_choice.jpg');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'><br><br>Para o botão, sete o parâmetro <b>"ir para" / "go to"</b> com o valor <b>"Próxima cena" / "Next scene"</b>.<br><br>O que significa que quando você clicá-lo, a história irá continuar no bloco de história atual.<br><br>Após isso, selecione o botão de <b>"Voltar" / "Back"</b> para retornar ao roteiro.</td>
</tr><tr>
<td align='center' colspan="2" height='128px'>Passo 15: Adicionar Diálogo de Texto</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Adicione outro diálogo para a cena clicando em <b>(+)</b> e selecionando o elemento de <b>"texto" / "text"</b>.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_dialog.svg" style="background-image:url('tutorial_img/new_text.jpg');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Passo 16: Configuração de Texto</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src)" src="tutorial_img/text_edit.jpg"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>Uma janela será mostrada com opções para o diálogo. Nela você pode instalar frases para todos os idiomas disponíveis.<br><br>A área de texto tanto no editor quanto na novela já criado não será apresentada se não houver texto especificado, então o texto deve ser especificado para todas as traduções.<br><br>Se a tradução do texto difere no número de frases, você pode escrever "skip", assim a frase será automaticamente ignorada. Se o nome da variável é utilizada com símbolos de maior e menor, então o diálogo mostrará o conteúdo dessa variável "texto <nome_varivel> texto".</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Passo 17</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Agora você consegue ver como toda a interface se parece.<br><br>Clique no menu dessa caixa de diálogo e escolha <b>"Editor de Cena" / "Scene edit"</b>.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_dialog.svg" style="background-image:url('tutorial_img/scene_menu2.jpg');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Passo 18: Visualização da Interface</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src)" src="tutorial_img/scene_editor_text.jpg"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>Na seção <b>"Painel de texto" / "Text panel"</b> você pode customizar as áreas de texto para mostrar os diálogos.<br><br>Na seção <b>"Botões da Interface" / "Interface buttons"</b> adicione novos botões para a interface e suas aparências.<br><br>Adicionalmente, nas configurações dos elementos, você pode utilizar imagens rasteirizadas e gráficos vetorizados, bem como estilos CSS.</td>
</tr><tr>
<td align='center' colspan="2" height='128px'>Passo 19: Adicionar Personagem (Sprite)</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Agora adicione a imagem do personagem na cena,<br><br>Encontre o item <b>"Artes" / "Arts"</b> e pressione <b>(+)</b>.
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/add_art.svg" style="background-image:url('tutorial_img/scene_editor_text.jpg');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Passo 20</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src)" src="tutorial_img/choice_art.jpg"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>Na janela que é aberta, selecione a imagem desejada da pasta de trabalho.</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Passo 21</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Nós posicionamos o elemento na cena e configuramos seus parâmetros do mesmo jeito que fazemos com os botões.<br><br>E não esqueça da localização.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src)" src="tutorial_img/set_art.jpg"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Passo 22: Duplicar elemento</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_dialog.svg" style="background-image:url('tutorial_img/duplicate_scene.jpg');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>Nós criamos a seleção de elementos para o futuro desenvolvimento da história.<br><br>Para fazer isso, no menu do último item de diálogo, selecione o item <b>"Duplicar" / "Duplicate"</b>, para não precisar colocar as imagens novamente.</td>
</tr><tr>
<td align='center' colspan="2" height='128px'>Passo 23</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>No diálogo copiado, selecione <b>"Editor de Cena" / "Scene edit"</b></td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_dialog.svg" style="background-image:url('tutorial_img/duplicate_scene2.jpg');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Passo 24</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/scene_editor_text_edit.svg" style="background-image:url('tutorial_img/scene_editor_text_edit.jpg');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>Na seção de Conteúdo da Cena clique em <b>"Editar texto" / "Text edit"</b> e coloque um novo texto para o diálogo,</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Passo 25: Nome do Personagem</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Dessa vez nós setaremos o nome do personagem na seção de Painel de Nomes das Configurações;<br><br>A tradução do nome é colocada junto com o texto.<br><br>Tuesday JS lembra de todos os nomes novos, junto com a tradução e seus parâmetros. então você pode posteriormente selecioná-los na lista de personagens. A lista de personagens é editada nas configurações do projeto.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/text_edit_add_name.svg" style="background-image:url('tutorial_img/text_edit_add_name.jpg');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Passo 26: Painel de Nomes</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/name_panel_edit.svg" style="background-image:url('tutorial_img/name_panel_edit.jpg');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>Agora podemos ver que o nome do personagem apareceu na cena,<br><br>Assim como no painel de texto, o <b>"painel de nomes" / "Name panel"</b> não aparece se o nome não for especificado.<br><br>Você mudar modificar a aparência e posição desse elemento no <b>"painel de nomes" / "Name panel"</b>. Você também pode utilizar imagens rasteirizadas e gráficos vetorizados, bem como estilos CSS nessas configurações.</td>
</tr><tr>
<td align='center' colspan="2" height='128px'>Passo 27: Escolhas</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Logo após, adicione botões de seleção da mesma forma como na criação de um menu. Na seção <b>"Botões e Escolhas" / "Buttons & Choice"</b>.<br><br>Em um dos botões sete o valor <b>"ir para" / "go to"</b> para <b>"Próxima cena" / "Next scene"</b>.<br><br>E volte para o roteiro.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src)" src="tutorial_img/choice_yes_no.jpg"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Passo 28</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/next_scen.svg" style="background-image:url('tutorial_img/next_scen.jpg');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>Na cena, adicione outro diálogo para a escolha com o valor <b>"Próxima Cena" / "Next scene"</b>.</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Passo 29</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Agora nós criaremos um novo bloco de história para o desenvovimento de uma história alternativa e adicionar uma cena e uma imagem de personagem para ele. (Seguindo os mesmos passos dos parágrafos anteriores)</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/copy_past_scene.svg" style="background-image:url('tutorial_img/copy_past_scene.jpg');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Passo 30: Relacionando blocos do enredo</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/choice_line.svg" style="background-image:url('tutorial_img/choice_line.jpg');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>Para o segundo botão, insira o valor com o nome do novo bloco de história.<br><br>Agora nós vemos no roteiro uma linha levando do botão de seleção para o outro bloco de história.</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Passo 31: Prévia</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Para ter certeza que tudo está feito corretamente, abrimos o projeto utilizando a prévia.<br><br>Você pode executar o projeto com qualquer uma das traduções criadas e de qualquer lugar da história.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/icon_preview.svg" style="background-image:url('tutorial_img/choice_line.jpg');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Passo 32: Salvando o Projeto</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/icon_save.svg" style="background-image:url('tutorial_img/choice_line.jpg');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>O salvamento do projeto é feito de diferentes maneiras em diferentes plataformas.<br><br><b>Navegadores</b><br>A maioria dos navegadores salva arquivos por padrão na pasta de Download. Para reabrir o projeto, você precisa mover o arquivo JSON do projeto para a pasta de trabalho.<br><br><b>Área de Trabalho</b><br>Dá a escolha de salvar o projeto JSON na pasta desejada.<br><br><b>Android</b><br>Salva o JSON para a pasta de trabalho do projeto.</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Passo 33: Abrindo o Projeto</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Para abrir o projeto você precisa especificar a pasta de trabalho na qual o arquivo JSON está localizado. Sem um arquivo JSON especificado, não será mostrado na lista de arquivos disponíveis.<br><br>Se existir múltiplos arquivos JSON na pasta, Tuesday JS irá perguntar qual arquivo você deseja abrir.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/icon_open.svg" style="background-image:url('tutorial_img/main_screen.png');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Passo 34: Construir o Projeto</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/build_choice.svg" style="background-image:url('tutorial_img/build_choice.jpg');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>Clique no botão de <b>"Construir" / "Build project"</b> no menu superior e selecione a opção desejada na janela apresentada (arquivo zip é recomendado).<br><br>Salvar um projeto compilado é similar à salvar um projeto, dependendo da plataforma que você está utilizando.<br><br>Você pode publicar o arquivo zip gerado ou base64 e HTML em portais de jogos:<br><br><ul><li><a href="https://itch.io/" target='_blank'>itch.io</a></li><li><a href="https://www.newgrounds.com/" target='_blank'>NewGrounds</a></li></ul></td>
</tr>
<td align='center' colspan="2" height='128px'>Se você tiver algum problema, certifique-se de enviar-me um email: <a href="mailto:tuesdayjsengine@gmail.com" target='_blank'>tuesdayjsengine@gmail.com</a></td>
</tr>
</tbody></table>
</div>
<div id="quick_tutorial_ru" class="doc" name="Краткое руководство по созданию визуальной новеллы с помощью Tuesday JS">
<table cellpadding="10" cellspacing="16" style="width:100%;"><tbody>
<tr>
<td align='center' colspan="2" style="text-align:center;"><p class="head">Краткое руководство по созданию визуальной новеллы с помощью Tuesday JS</p><p><a href="https://twitter.com/LolerFox" target='_blank'>Translation and adaptation by LolerFox</a></p></td>
</tr>
<tr>
<td align='center' colspan="2" height='64px'>Шаг 1: Создайте новый проект</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Создайте новый проект, нажав на значок файла в левом верхнем углу.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/icon_load.svg" style="background-image:url('tutorial_img/main_screen.png');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Шаг 2: Процесс создания нового проекта</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_folder.svg" style="background-image:url('tutorial_img/new_project.png');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>В появившемся окне укажите рабочую папку с ресурсами проекта.<br><br><b>Внимание!</b><br>Проект не сохраняется автоматически в памяти вашего устройства или браузера, если вам нужно сделать резервную копию проекта, используйте функцию Сохранения (Шаг 32: Сохранение проекта).<br><br>Чтобы открыть проект, вам необходимо указать рабочую папку, а не файл JSON<br><br>JSON не содержит файлов проекта из рабочей папки, только пути к ним относительно рабочей папки. Поэтому важно, чтобы JSON проекта находился в рабочей папке проекта.</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Шаг 3: Локализация</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Укажите <b>название проекта</b> и доступные языки.<br><br>Для каждого языка вы можете сразу указать переведенное название проекта.<br><br>1-й добавленный язык будет установлен в качестве языка по умолчанию.<br>Если устройство игрока не поддерживает ни один из указанных языков, игра переключится на первый язык в этом списке.<br><br>После создания проекта вы можете удалять и добавлять локализации в настройках проекта.<br><br>Нажмите на кнопку "Create Project".</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_languages.svg" style="background-image:url('tutorial_img/new_project.png');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Шаг 4: Добавьте сюжетный блок</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_project.svg" style="background-image:url('tutorial_img/main_screen.png');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>Теперь мы можем приступить к созданию сюжетного блока, нажав на кнопку <b>"Add story block"</b> в правом нижнем углу.<br><br>История в Tuesday JS состоит из сюжетных блоков, читатель может переключаться между блоками по мере прохождения истории, используя варианты выбора или их последствия.</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Шаг 5: Настройка сюжетного блока</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Задайте название блока латинскими буквами и цвет блока по желанию.<br><br>Игрок не увидит это название или цвет, они нужны для вашего удобства при навигации по сюжету.<br><br>Нажмите <b>"Create Block"</b>.<br><br>Первый созданный блок сюжета по умолчанию будет считаться начальным блоком. При необходимости вы можете изменить его в настройках проекта.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_block.svg" style="background-image:url('tutorial_img/new_block.png');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Шаг 6: Добавление сцены</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_scene.svg" style="background-image:url('tutorial_img/new_scene.png');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>Откройте созданный блок истории, нажав на три точки с левой стороны.<br><br>Нажмите <b>(+)</b> для вызова меню элементов.<br><br>И добавьте из появившемся меню элемент <b>scene</b>.</td>
</tr><tr>
<td align='center' colspan="2" height='128px'>Шаг 7: Фон сцены</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>В появившемся окне <b>"Settings scene"</b> установите фоновое изображение, щелкнув на значок папки.<br><br>Здесь вы также можете выбрать альтернативные фоны для других локализаций.<br><br>Если вы установите только один фон, он будет автоматически применен ко всем локализациям.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/set_scene.svg" style="background-image:url('tutorial_img/set_scene.png');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Шаг 8</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src)" src="tutorial_img/add_bg_scene.jpg"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>В появившемся диалоговом окне отображаются все соответствующие файлы из рабочей папки проекта, в нем выберите нужный файл для фона.</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Шаг 9</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>При желании вы можете указать параметры отображения фона, цвет фона и фоновую музыку для этой сцены.<br><br>Нажмите <b>“Apply”</b>, и вы увидите, как сцена появится в сюжетном блоке.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/add_scene.svg" style="background-image:url('tutorial_img/apply_scene.jpg');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Шаг 10: Добавление диалога</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_dialog.svg" style="background-image:url('tutorial_img/new_dialog.jpg');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>Теперь вам нужно добавить в него элемент диалога. Нажмите кнопку <b>(+)</b> и выберите <b>"Add Dialog"</b>.<br><br>Сюжетные блоки состоят из сцен, содержащих диалоги со всеми элементами, такими как текст, графика и варианты выбора.</td>
</tr><tr>
<td align='center' colspan="2" height='128px'>Шаг 11: Запуск редактирования сцены</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Нажмите кнопку "Меню сцены" и выберите пункт <b>Edit Scene</b>.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_dialog.svg" style="background-image:url('tutorial_img/scene_menu.jpg');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Шаг 12: Главное меню</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/add_choice.svg" style="background-image:url('tutorial_img/scene_editor.jpg');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>Теперь мы находимся в редакторе сцен. Поскольку первый созданный сюжетный блок автоматически становится начальным, вы можете создать в нем главное меню. Стартовый блок можно изменить в настройках проекта.<br><br>В разделе <b>"Buttons & Choices"</b> нажмите <b>(+)</b>.</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Шаг 13: Кнопки и варианты выбора</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>На макете появилась кнопка.<br><br>И в правом меню появилась панель с его настройками.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src)" src="tutorial_img/choice.jpg"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Шаг 14</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/set_choice.svg" style="background-image:url('tutorial_img/set_choice.jpg');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'><br><br>Для кнопки установите параметр <b>"go to"</b>, значение <b>"Next scene"</b>.<br><br>Это означает, что когда вы нажмете на нее, история продолжится в текущем сюжетном блоке.<br><br>После, нажмите кнопку <b>"Back"</b> и вернитесь к сюжетным блокам.</td>
</tr><tr>
<td align='center' colspan="2" height='128px'>Шаг 15: Добавление текста диалога</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Добавьте еще один диалог на сцену, нажав <b>(+)</b> и выбрав элемент <b>"text"</b>.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_dialog.svg" style="background-image:url('tutorial_img/new_text.jpg');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Шаг 16: Настройка текста</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src)" src="tutorial_img/text_edit.jpg"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>Появится окно с настройками диалога. В нем вы можете задать фразы для всех доступных локализаций.<br><br>Текстовая область не будет отображаться, если текст не указан.<br><br>Если тексты перевода отличаются количеством фраз, то вы можете написать “skip" тогда фраза будет автоматически пропущена.<br><br>Если имя переменной написать в угловых скобках, то в диалоговом окне будет показано значение из этой переменной "текст <var_name> текст".</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Шаг 17</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Теперь мы можем посмотерть, как выглядит весь интерфейс.<br><br>Перейдите в меню этого диалогового окна и выберите <b>"Scene edit"</b>.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_dialog.svg" style="background-image:url('tutorial_img/scene_menu2.jpg');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Шаг 18: Создание интерфейса</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src)" src="tutorial_img/scene_editor_text.jpg"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>В разделе <b>"Text panel"</b> вы можете настроить внешний вид и функцианал текстовой области.<br><br>В разделе <b>"interface buttons"</b> добавьте новые кнопки интерфейса и настройте их внешний вид.<br><br>Кроме того, в настройках всех элементов можно использовать растровую и векторную графику, а также стили CSS.</td>
</tr><tr>
<td align='center' colspan="2" height='128px'>Шаг 19: Добавление спрайта</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Теперь добавьте спрайт на сцену,<br><br>Найдите пункт <b>"Arts"</b> и нажмите <b>(+)</b>.
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/add_art.svg" style="background-image:url('tutorial_img/scene_editor_text.jpg');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Шаг 20</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src)" src="tutorial_img/choice_art.jpg"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>В появившемся окне выберите нужный спрайт из рабочей папки.</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Шаг 21</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Располагаем спрайт на сцене и задаем его параметры аналогично как и с кнопками.<br><br>И не забывайте о локализации.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src)" src="tutorial_img/set_art.jpg"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Шаг 22: Дублирование элементов</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_dialog.svg" style="background-image:url('tutorial_img/duplicate_scene.jpg');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>Создание дубликата выбранной сцены созданно для более быстрого создания истории.<br><br>Для этого в контекстном меню последнего диалога, выберите пункт <b>"Duplicate"</b>, чтобы не создавать все элементы заново.</td>
</tr><tr>
<td align='center' colspan="2" height='128px'>Шаг 23</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>В контексном меню скопированной сцены выберите <b>"Scene edit"</b>.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/new_dialog.svg" style="background-image:url('tutorial_img/duplicate_scene2.jpg');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Шаг 24</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/scene_editor_text_edit.svg" style="background-image:url('tutorial_img/scene_editor_text_edit.jpg');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>В разделе "Scene Content" нажмите <b>"Edit Text"</b> и задайте новый текст для диалога.</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Шаг 25: Имя персонажа</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Теперь мы задать имя персонажа в разделе "Name Panel".<br><br>Локализация имени устанавливается вместе с текстом.<br><br>Tuesday JS запоминает все новые имена вместе со всеми вариантами перевода и другими параметрами, чтобы в дальнейшем вы могли выбрать их из списка персонажей. Список персонажей редактируется в настройках проекта.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/text_edit_add_name.svg" style="background-image:url('tutorial_img/text_edit_add_name.jpg');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Шаг 26: Панель имен</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/name_panel_edit.svg" style="background-image:url('tutorial_img/name_panel_edit.jpg');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>Теперь мы видим, что имя персонажа появилось на сцене,<br><br>Как и с текстовой панелью, <b>"Name panel"</b> не отображается, если имя не указано.<br><br>Вы можете изменить внешний вид и положение этого элемента в разделе <b>"Name panel"</b>. В этих настройках вы также можете использовать растровую и векторную графику, а также стили CSS.</td>
</tr><tr>
<td align='center' colspan="2" height='128px'>Шаг 27: Выбор</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Затем добавьте кнопки выбора таким же образом, как и при создании меню. В разделе <b>"Buttons & Choice"</b>.<br><br>На одну из кнопок устанавливаем значение <b>"go to"</b> на <b>"Next scene"</b>.<br><br>И возвращаемся к сценарию.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src)" src="tutorial_img/choice_yes_no.jpg"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Шаг 28</td>
</tr>