-
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdoc_editor.html
More file actions
2287 lines (2276 loc) · 242 KB
/
doc_editor.html
File metadata and controls
2287 lines (2276 loc) · 242 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
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="icon.jpg" type="image/x-icon">
<title>Tuesday JS visual novel engine Tutorial / Documentation / Lessons</title>
<link rel="shortcut icon" href="icon.jpg" type="image/x-icon">
<meta content="#5f5196" name="theme-color" charset="UTF-8">
<meta name="description" content="simple web-based free and open source visual novel editor, it can be used in web browser. The engine uses standard HTML elements DOM this allows the use any media format supported by browsers, including vector graphics svg, gif animations and CSS styles.">
<meta name="keywords" content="Editor, Maker, Interactive Fiction, Visual Novel, Fairy Tale, Kinetic Novel, Open Source,">
<meta name='viewport' content='width=device-width, initial-scale=1'/>
<meta name="author" content="Kirill Live">
<style>
*{
font-family:Arial;
font-size:14px;
border-collapse:collapse;
border:none;
margin:0;
padding:0;
border-spacing:0px;
outline:none;
}
li {margin:16px 8px 8px 16px;}
a{color:#000;}
#bookmarks{
width:220px;
height:calc(100vh - 34px);
overflow-y:auto;
overflow-x:hidden;
background-color:#fff;
}
a:link {color: #8d7fbd;}
a:visited{color: #8d7fbd;}
a:hover{color: #cec8e3;}
a:active{color: #cec8e3;}
code{
background-color: #efefff;
display:block;
padding:10px 48px 10px 12px;
margin-right:16px;
border-radius:8px;
position:relative;
pointer-events: none;
overflow-wrap: anywhere;
}
code::before{content:'';
width:46px;height:100%;display:block;
background-size:22px 22px;
background-repeat:no-repeat;
background-position:center;
pointer-events: auto;
cursor:pointer;
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 64 64'%3e%3cpath fill='none' fill-opacity='0' stroke='%23000' stroke-width='3' stroke-linejoin='round' d='M8,61L29,40M30,53V39H16M17,31V14a4,4,0,0,1,4-4h6v4H45V10h6a4,4,0,0,1,4,4V48a4,4,0,0,1-4,4H37M27,18V7h5a4,4,0,0,1,8,0h5V18H27Z'/%3e%3c/svg%3e");
position:absolute;
top:0px;
right:-4px;
}
#search_bookmarks {
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 48 48'%3e %3ccircle fill='none' stroke='%23ccc' stroke-width='4' stroke-linejoin='round' stroke-linecap='round' cx='32' cy='17' r='14' /%3e %3cpath fill='none' stroke='%23ccc' stroke-width='4' stroke-linejoin='round' stroke-linecap='round' d='M 4,45 22,27'/%3e%3c/svg%3e");
background-position:6px 6px;
background-size:20px 20px;
background-repeat:no-repeat;
height:32px;
width:220px;
padding-left:32px;box-sizing:border-box;
border-bottom:1px solid #cec8e3;
-webkit-appearance:none;
}
.accordion{
width:100%;
outline:none;
cursor:pointer;
}
.block:hover{background-color:#cec8e3;}
.link{cursor:pointer;text-decoration:underline;}
.panel{display:none;}
.element{
background-color:#cec8e3;
padding:16px;
border-radius:16px;
}
.block{
padding:8px;
padding-bottom:10px;
cursor: pointer;
}
.block_open{
background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAyNTYgMjU2Ij4NCiAgPHBhdGggZmlsbD0ibm9uZSIgZmlsbC1vcGFjaXR5PSIwIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMTIiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0yNDYsNDBIMTAiLz4NCiAgPHBhdGggZmlsbD0ibm9uZSIgZmlsbC1vcGFjaXR5PSIwIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMTIiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0yNDYsMTMwSDEwIi8+DQogIDxwYXRoIGZpbGw9Im5vbmUiIGZpbGwtb3BhY2l0eT0iMCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEyIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNMjQ2LDIyMEgxMCIvPg0KPC9zdmc+");
background-position:right 6px top 9px;
background-size:14px 14px;
background-repeat:no-repeat;
}
.three_1{margin-left:16px;}
.three_2{margin-left:32px;}
.three_3{margin-left:48px;}
#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:0;visibility:hidden;transition-duration:0.5s;}
.content{max-height:96vh;max-width:96%;height:auto;width:auto;background-size:100% 100%;background-repeat:no-repeat;border-radius:6px;}
.img_t{cursor:pointer;height:auto;width:90%;
transition-duration:0.8s;transform:scale(1, 1);
box-shadow: 0px 2px 24px rgba(110, 95, 165, 0.3);
border-radius:6px;
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);}
.leftbor{border-left:1px solid #cec8e3;}
.textarr{padding-left:4%;padding-top:4%;}
.head{font-size:16px;height:64px;display:flex;align-items:center;justify-content:center;}
path.lines {fill:none;stroke:#000;stroke-width:2px;}
text.texts {fill:#000;font-size: 28px;font-family:Arial;cursor:pointer;}
.img_w{height:auto;width:100%;cursor:pointer;
border-radius:6px;
background-size:100% 100%;
background-repeat:no-repeat;}
.flash_anim{animation:flashS 0.4s linear;}
@keyframes flashS{from{color:rgba(0,0,0,0)}to{color:rgba(0,0,0,1)}}
</style>
</head>
<body style="background-color:#fff;">
<table style="height:100vh;width:100vw;" border="0">
<tbody>
<tr>
<td style="width:220px;height:32px;"><input type="text" id="search_bookmarks" oninput="search_bookmarks()" placeholder="search"></td>
<td style="border-left: 1px solid #cec8e3;" rowspan="3" valign="top">
<div id="doc_view" style="overflow-y:auto;overflow-x:hidden;height:100vh;width:100%;padding:16px 16px 92px 16px;box-sizing:border-box;">
<div align="center" style="margin-top:32px; margin-bottom:32px;">
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128">
<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;">visual novel engine</p>
<br><br><br>
<div>
<p><b>A quick tutorial to create a visual novel with Tuesday JS</b></p><br><br>
<div align="left" style="width:370px;">
<p><a href="https://kirilllive.github.io/tuesday-js/doc_editor.html#quick_tutorial"><b>EN</b> - A Quick Guide to Creating a Visual Novel</a></p><br>
<p><a href="https://kirilllive.github.io/tuesday-js/doc_editor.html#quick_tutorial_ja"><b>JA</b> - Tuesday JSでビジュアルノベルを作ってみよう</a></p><br>
<p><a href="https://kirilllive.github.io/tuesday-js/doc_editor.html#quick_tutorial_es"><b>ES</b> - Una guía rápida para crear una novela visual</a></p><br>
<p><a href="https://kirilllive.github.io/tuesday-js/doc_editor.html#quick_tutorial_ru"><b>RU</b> - Руководство по созданию визуальной новеллы</a></p><br>
<p><a href="https://kirilllive.github.io/tuesday-js/doc_editor.html#quick_tutorial_pt"><b>PT</b> - Um guia rápido para criar uma visual novel</a></p><br>
</div><br><br><br>
<p><b>You can support the project on Patreon or Boosty!</b></p><br><br>
<p><a href='https://www.patreon.com/kirill_live' target='_blank'><svg height='40' width='198' viewBox='0 0 1000 200' xmlns='http://www.w3.org/2000/svg'><rect width='1000' height='200' fill='#FF424D'/><path d='M310 129V72h19c7 0 12 1 15 4 4 2 5 6 5 11 0 3 0 5-2 7-1 3-3 4-6 5a13 13 0 0110 13c0 6-2 10-6 13-3 2-8 4-14 4zm10-26v18h11l7-2c2-2 3-4 3-7 0-6-3-9-9-9zm0-7h10l7-2c2-2 2-4 2-6 0-3 0-5-2-6l-8-2h-9zm58 34c-6 0-11-2-14-6-4-4-6-9-6-15v-1l2-12c2-3 4-6 7-7 3-2 6-3 10-3 6 0 10 2 13 5 4 4 5 9 5 16v4h-27c0 3 1 6 3 8s5 3 8 3c4 0 8-2 10-5l5 5-6 6zm-1-37c-3 0-5 1-6 3-2 2-3 5-3 8h18v-1c0-3-1-5-3-7-1-2-3-3-6-3zm43 29l6-2 2-5h9l-2 7-7 6-8 2c-6 0-11-2-14-6-4-4-5-9-5-16v-1c0-6 1-12 5-15 3-4 8-6 14-6 5 0 9 1 12 4s5 7 5 12h-9l-2-6-6-3c-3 0-6 2-7 4-2 2-3 5-3 10v1c0 5 1 8 3 11 1 2 4 3 7 3zm23-15c0-4 0-8 2-11s4-6 7-7c3-2 6-3 10-3 6 0 11 2 14 5 4 4 6 9 6 15v2c0 4-1 8-3 11-1 4-3 6-6 8s-7 3-11 3c-6 0-10-2-14-6s-5-10-5-16zm9 1c0 5 1 8 3 10 2 3 4 4 7 4s6-1 8-4c2-2 2-6 2-11 0-4 0-7-2-10-2-2-5-4-8-4s-5 2-7 4c-2 3-3 6-3 11zm47-21v4c3-3 7-5 12-5 6 0 10 2 12 6 3-4 7-6 13-6 5 0 8 1 10 4 3 2 4 6 4 11v28h-10v-28l-1-6-6-1-6 1-2 5v29h-10v-28c0-5-3-7-8-7-3 0-6 1-8 4v31h-9V87zm79 43c-6 0-11-2-15-6-3-4-5-9-5-15v-1l2-12c2-3 4-6 7-7 3-2 6-3 10-3 6 0 10 2 13 5 4 4 5 9 5 16v4h-28l4 8c2 2 5 3 8 3 4 0 8-2 10-5l5 5-6 6zm-1-37c-3 0-5 1-6 3-2 2-3 5-3 8h18v-1c-1-3-1-5-3-7-1-2-3-3-6-3zm71 36l-1-4c-3 3-7 5-12 5-4 0-7-2-10-4s-4-5-4-9 2-8 5-10c3-3 8-4 14-4h6v-3c0-2 0-4-2-5l-5-2-6 2-2 4h-9l2-7 6-4c3-2 6-2 9-2 5 0 9 1 12 4 3 2 5 6 5 10v19l1 9v1zm-11-7l5-1 4-4v-8h-5l-8 2c-2 1-2 3-2 5l1 4zm59-14v21h-10V72h22c7 0 12 2 15 5 4 3 6 8 6 13 0 6-2 10-6 13-3 3-8 5-15 5zm0-8h12c4 0 6-1 8-3 2-1 3-4 3-7s-1-5-3-7-4-3-7-3h-13zm66 29l-1-4c-3 3-7 5-11 5s-8-2-11-4c-2-2-4-5-4-9s2-8 5-10c4-3 9-4 15-4h6v-3l-2-5-6-2-5 2c-2 1-2 2-2 4h-10c0-3 1-5 3-7 1-2 3-3 6-4 2-2 5-2 9-2 5 0 9 1 12 4 2 2 4 6 4 10v19l2 9v1zm-10-7l5-1 4-4v-8h-6l-8 2-2 5c0 2 0 3 2 4 1 1 2 2 5 2zm40-46v11h7v7h-7v23l1 4 3 1 4-1v8l-7 1c-7 0-11-4-11-12V94h-7v-7h7V76zm37 19h-4c-5 0-7 2-9 5v29h-9V87h9v4c2-3 5-5 9-5h4zm4 12l2-11c2-3 4-6 7-7 3-2 7-3 11-3 5 0 10 2 13 5 4 4 6 9 6 15v2l-2 11c-2 4-4 6-7 8s-6 3-10 3c-6 0-11-2-15-6-3-4-5-10-5-16zm9 1c0 5 1 8 3 10 2 3 4 4 8 4 3 0 5-1 7-4 2-2 3-6 3-11 0-4-1-7-3-10-2-2-4-4-7-4-4 0-6 2-8 4-2 3-3 6-3 11zm47-21v4c3-3 8-5 13-5 8 0 13 5 13 15v28h-9v-28l-2-5c-1-2-3-2-6-2-4 0-7 1-8 5v30h-10V87z' fill='#fff'/><path d='M165 39c-25 0-45 21-45 46s20 46 45 46 45-21 45-46-20-46-45-46' fill='#fff'/><path d='M83 161V39h23v122z' fill='#fff'/></svg></a></p><br>
<!-- <p><a href='https://boosty.to/kirilllive' target='_blank'><svg width='145' height='40' viewBox='0 0 145 40' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><linearGradient x1='61.5370404%' y1='13%' x2='34%' y2='129%' id='line'><stop stop-color='#EF7829' offset='0%'/><stop stop-color='#F0692A' offset='28%'/><stop stop-color='#F15E2C' offset='63%'/><stop stop-color='#F15A2C' offset='100%'/></linearGradient></defs><path id='boosty' d='M138.1,13.1 L132.0,22.6 L131.3,13.1 L122.5,13.1 C123.3,10.3 124.0,8.1 124.0,8.1 L124.3,7 L117.6,7 L117.3,8.1 L115.8,13.1 L108.6,13.1 C102.7,13.1 99.4,14.8 98.0,18 C97.2,15 94.6,13.1 90.5,13.1 C87.2,13.1 84.1,14.3 81.6,16.5 C80.4,14.4 78.1,13.1 74.8,13.1 C71.2,13.1 67.9,14.5 65.4,16.9 C64.3,14.6 61.8,13.1 58.3,13.1 C57.1,13.1 55.9,13.3 54.8,13.6 L55.3,11.7 C55.4,11.7 55.4,11.7 55.4,11.6 L56.7,7 L50.0,7 L45.7,21.7 C45.6,22 45.5,22.3 45.4,22.6 C45.2,23.2 45.1,23.9 45.0,24.6 C44.5,28.7 46.3,31.8 51.3,32 C51.8,32 52.3,32.1 52.8,32.1 C56.2,32 59.6,30.7 62.1,28.3 C63.1,30.6 65.5,32.1 69.2,32.1 C72.5,32 75.6,30.8 78.1,28.7 C79.2,30.8 81.5,32.1 85.0,32.1 L101.9,32.1 C107.1,32.1 110.0,31 111.6,28.8 C111.6,30.9 112.8,32.1 115.9,32.1 C118.4,32.1 121.7,31.5 126.3,30.4 L119.6,39.9 L126.4,39.9 L144.8,13.1 L138.1,13.1 Z M58.9,22.6 C58.3,24.7 56.2,26.5 54.4,26.5 C52.5,26.5 51.5,24.7 52.1,22.6 C52.8,20.4 54.8,18.7 56.6,18.7 C58.5,18.7 59.5,20.4 58.9,22.6 Z M75.4,22.6 C74.7,24.7 72.7,26.5 70.9,26.5 C69.0,26.5 68.0,24.7 68.6,22.6 C69.3,20.4 71.3,18.7 73.2,18.7 C75.0,18.7 76.0,20.4 75.4,22.6 Z M84.4,22.6 C85.0,20.4 87.1,18.7 88.9,18.7 C90.7,18.7 91.8,20.4 91.1,22.6 C90.5,24.7 88.5,26.4 86.7,26.5 L86.6,26.5 C84.8,26.4 83.8,24.7 84.4,22.6 Z M106.1,25.8 C105.7,26.6 103.1,26.5 102.4,26.5 L95.9,26.5 C96.8,25.3 97.4,24 97.8,22.6 C97.9,22.4 97.9,22.3 98.0,22.2 C98.7,23.2 100.2,24.1 103.1,24.6 C105.8,25.2 106.3,25 106.1,25.8 Z M112.7,23.7 C112.2,21.4 109.7,20.6 106.2,20.2 C104.7,20 103.9,19.9 104.1,19.3 C104.2,18.8 105.0,18.7 106.5,18.7 L114.2,18.7 L112.7,23.7 Z M119.4,23.7 C119.4,23.7 120.1,21.4 120.9,18.7 L125.2,18.7 L125.9,25.8 C118.8,27.3 118.7,26.9 119.4,23.7 L119.4,23.7 Z' fill='#242B2C' fill-rule='nonzero'/><path d='M1.0,23.8 L7.8,0 L18.2,0 L16.1,7.4 C16.0,7.4 16.0,7.4 16.0,7.5 L10.5,27.1 L15.6,27.1 C13.5,32.5 11.8,36.8 10.6,40 C1.1,39.8 -1.5,32.9 0.7,24.7 L1.0,23.8 Z M10.6,40 L23.2,21.6 L17.8,21.6 L22.5,9.8 C30.4,10.6 34.1,17 31.9,24.7 C29.6,33 20.1,40 10.8,40 L10.6,40 Z' fill='url(#line)'/></svg></a></p><br>-->
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div id="bookmarks">
<div class="accordion"><div class="block block_open">Quick tutorial</div></div>
<div class="panel">
<div class="block" onclick="get_doc('quick_tutorial')"><span class="three_1">English</span></div>
<div class="block" onclick="get_doc('quick_tutorial_es')"><span class="three_1">Spanish</span></div>
<div class="block" onclick="get_doc('quick_tutorial_ja')"><span class="three_1">Japanese</span></div>
<div class="block" onclick="get_doc('quick_tutorial_ru')"><span class="three_1">Russian</span></div>
<div class="block" onclick="get_doc('quick_tutorial_pt')"><span class="three_1">Portuguese</span></div>
</div>
<div class="accordion"><div class="block block_open">User interface</div></div>
<div class="panel">
<div class="block" onclick="get_doc('user_interface')"><span class="three_1">Main interface</span></div>
<div class="block" onclick="get_doc('new_project')"><span class="three_1">New project</span></div>
<div class="block" onclick="get_doc('open_project')"><span class="three_1">Open project</span></div>
<div class="block" onclick="get_doc('save_project')"><span class="three_1">Save project</span></div>
<div class="accordion"><div class="block block_open"><span class="three_1">Settings project</span></div></div>
<div class="panel">
<div class="block" onclick="get_doc('settings_project')"><span class="three_2">Project</span></div>
<div class="block" onclick="get_doc('settings_languages')"><span class="three_2">Languages</span></div>
<div class="block" onclick="get_doc('settings_characters')"><span class="three_2">Characters</span></div>
<div class="block" onclick="get_doc('settings_keyboard')"><span class="three_2">Keyboard</span></div>
<div class="block" onclick="get_doc('settings_variables')"><span class="three_2">Variables</span></div>
<div class="block" onclick="get_doc('settings_cursors')"><span class="three_2">Cursors</span></div>
<div class="block" onclick="get_doc('settings_sounds')"><span class="three_2">Sounds</span></div>
<div class="block" onclick="get_doc('settings_addon')"><span class="three_2">Add-on</span></div>
<div class="block" onclick="get_doc('settings_fonts')"><span class="three_2">Fonts</span></div>
<div class="block" onclick="get_doc('editor_options')"><span class="three_2">Editor</span></div>
</div>
<div class="block" onclick="get_doc('w_json_edit')"><span class="three_1">JSON editor</span></div>
<div class="block" onclick="get_doc('export_csv')"><span class="three_1">Export text to CSV / TSV</span></div>
<div class="block" onclick="get_doc('w_build')"><span class="three_1">Build project</span></div>
<div class="block" onclick="get_doc('run')"><span class="three_1">Run project</span></div>
<div class="block" onclick="get_doc('add_story_block')"><span class="three_1">Add story block</span></div>
<div class="block" onclick="get_doc('metadata')"><span class="three_1">Metadata</span></div>
</div>
<div class="accordion"><div class="block block_open">Project structure</div></div>
<div class="panel">
<div class="block" onclick="get_doc('story_blocks')"><span class="three_1">Story block</span></div>
<div class="block" onclick="get_doc('scene_edit')"><span class="three_1">Scene</span></div>
<div class="block" onclick="get_doc('dialog')"><span class="three_1">Dialog</span></div>
<div class="accordion"><div class="block block_open"><span class="three_1">Dialog elements</span></div></div>
<div class="panel">
<div class="block" onclick="get_doc('dialog_back_to')"><span class="three_2">Back to</span></div>
<div class="block" onclick="get_doc('dialog_art')"><span class="three_2">Art</span></div>
<div class="block" onclick="get_doc('dialog_text')"><span class="three_2">Text</span></div>
<div class="block" onclick="get_doc('dialog_text_add')"><span class="three_2">Text add</span></div>
<div class="block" onclick="get_doc('dialog_choice')"><span class="three_2">Choice</span></div>
<div class="block" onclick="get_doc('dialog_video')"><span class="three_2">Video</span></div>
<div class="block" onclick="get_doc('dialog_stop_sound')"><span class="three_2">Stop sound</span></div>
<div class="block" onclick="get_doc('dialog_play_sound')"><span class="three_2">Play sound</span></div>
<div class="block" onclick="get_doc('dialog_timer')"><span class="three_2">Timer</span></div>
<div class="block" onclick="get_doc('dialog_variables')"><span class="three_2">Variables</span></div>
<div class="block" onclick="get_doc('dialog_go_to')"><span class="three_2">Go to</span></div>
<div class="block" onclick="get_doc('dialog_ID_event')"><span class="three_2">ID event</span></div>
<div class="block" onclick="get_doc('dialog_hide_interface')"><span class="three_2">Hide interface</span></div>
<div class="block" onclick="get_doc('dialog_no_autosave')"><span class="three_2">No autosave</span></div>
<div class="block" onclick="get_doc('dialog_HTML_code')"><span class="three_2">HTML code</span></div>
<div class="block" onclick="get_doc('dialog_JavaScript')"><span class="three_2">JavaScript code</span></div>
<div class="block" onclick="get_doc('dialog_toast')"><span class="three_2">Toast</span></div>
</div>
<div class="block" onclick="get_doc('legacy_choice')"><span class="three_1">Legacy choice</span></div>
<div class="block" onclick="get_doc('terrain_map')"><span class="three_1">Terrain map</span></div>
<div class="block" onclick="get_doc('hidden_object')"><span class="three_1">Hidden object</span></div>
</div>
<div class="accordion"><div class="block block_open">Add-on</div></div>
<div class="panel">
<div class="block" onclick="get_doc('speech')"><span class="three_1">Speech</span></div>
<div class="block" onclick="get_doc('game_pad')"><span class="three_1">Game Pad</span></div>
<div class="block" onclick="get_doc('hidden_object')"><span class="three_1">Hidden objects</span></div>
<!--<div class="block" onclick="get_doc('screen_control')"><span class="three_1">Screen control</span></div>-->
<!--<div class="block" onclick="get_doc('show_toast')"><span class="three_1">Show toast</span></div>-->
<div class="block" onclick="get_doc('terrain_map')"><span class="three_1">Terrain map</span></div>
<!--<div class="block" onclick="get_doc('touch_swipe')"><span class="three_1">Touch swipe</span></div>-->
</div>
<div class="block" onclick="get_doc('editor_options')">Editor Options</div>
<div class="block" onclick="get_doc('css_class')">CSS Class</div>
<div class="block" onclick="get_doc('android')">Android Version</div>
<div class="accordion"><div class="block block_open">Lessons</div></div>
<div class="panel">
<div class="block" onclick="get_doc('unlocked_content')"><span class="three_1">Make hidden content</span></div>
<div class="block" onclick="get_doc('enter_name')"><span class="three_1">How to enter player name</span></div>
<div class="block" onclick="get_doc('bot_telegram')"><span class="three_1">Bot for Telegram</span></div>
</div>
</div>
</td>
</tr>
<tr>
<td style="height:1px;">
</td>
</tr>
</tbody>
</table>
<div id='window_zone' onclick="modal_window('close')" align='center'></div>
<div id="user_interface" style="display:none">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="max-height:700px;width:100%;height:auto;" viewBox="0 0 2048 1400">
<image width="2048" height="1400" xlink:href="tutorial_img/user_interface.png"/>
<rect fill-opacity="0" x="1360" y="1247" width="285" height="96" onclick="get_doc('add_story_block')" style="cursor:pointer;"/>
<rect fill="none" x="872" width="193" height="80"/>
<path class="lines" d="M1686,1267V1127"/><text class="texts" x="1682" y="1112" onclick="get_doc('metadata')">Metadata</text>
<path class="lines" d="M1856,1267v-90"/><text class="texts" x="1852" y="1162">Scaling</text>
<path class="lines" d="M799,524V434"/><text class="texts" x="796" y="418">Expand / Close block</text>
<path class="lines" d="M1160,524V484"/><text class="texts" x="1156" y="468">Block settings</text>
<path class="lines" d="M1266,542h92"/><text class="texts" x="1368" y="546">Run block preview </text>
<path class="lines" d="M1266,612h92"/><text class="texts" x="1368" y="616">Scene context menu </text>
<path class="lines" d="M1266,680h92"/><text class="texts" x="1368" y="684">Dialog context menu</text>
<path class="lines" d="M1266,748h92"/><text class="texts" x="1368" y="752">Edit dialog element</text>
<path class="lines" d="M1266,871h92"/><text class="texts" x="1368" y="874">Add element to dialog</text>
<path class="lines" d="M1266,935h92"/><text class="texts" x="1368" y="938">Create a new dialog</text>
<path class="lines" d="M1266,999h92"/><text class="texts" x="1368" y="1002">Create new element</text>
<path class="lines" d="M42,580V65"/><text class="texts" x="40" y="618" onclick="get_doc('new_project')">New project</text>
<path class="lines" d="M124,530V65"/><text class="texts" x="122" y="568" onclick="get_doc('open_project')">Open project</text>
<path class="lines" d="M215,480V65"/><text class="texts" x="214" y="518" onclick="get_doc('save_project')">Save project</text>
<path class="lines" d="M305,430V65"/><text class="texts" x="304" y="468">Cloud storage</text>
<path class="lines" d="M395,380V65"/><text class="texts" x="392" y="418">Undo</text>
<path class="lines" d="M475,330V65"/><text class="texts" x="474" y="368">Redo</text>
<path class="lines" d="M565,280V65"/><text class="texts" x="562" y="318" onclick="get_doc('settings_project')">Settings project and editor</text>
<path class="lines" d="M652,230V65"/><text class="texts" x="650" y="268" onclick="get_doc('w_json_edit')">JSON editor</text>
<path class="lines" d="M739,180V65"/><text class="texts" x="736" y="218" onclick="get_doc('export_csv')">Export text to CSV/TSV</text>
<path class="lines" d="M826,130V65"/><text class="texts" x="824" y="168">About / info</text>
<path class="lines" d="M1102,230V65"/><text class="texts" x="1100" y="268">Choose a language to edit</text>
<path class="lines" d="M1189,180V65"/><text class="texts" x="1186" y="218" onclick="get_doc('w_build')">Build project</text>
<path class="lines" d="M1276,130V65"/><text class="texts" x="1274" y="168" onclick="get_doc('run')">Run project</text>
</svg>
</div>
<div id="dialog_text" style="display:none">
<div style="width:100%;text-align: center;">
<p class="head">Dialog text</p>
<img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/w_text_edit.png" style="max-height:620px;max-width:867px;"/>
</div>
<p>Specifies the text to be displayed in the text of "text Pabnel". On the right side of the window, there are separate "text panel" options that will only be used in this dialog.
<br><br>Additionally, on the right side you can set the name of the character that will be displayed in the "Name panel", each new name with all the parameters will be automatically added to the character catalog, after which, when creating a new dialogue, you do not have to re-enter its name, you can select it from the list, You can additionally edit the list of characters in <a href="doc_editor.html#settings_characters" target='_blank'>the project settings in the characters section</a>. The changes you make will apply to the entire project, so you only need to change the character's name in the project settings section to make it change throughout the project.</p>
<br><br>You can display values from variables in the text of the dialog. To do this, you need to write the name of the variable in angle brackets in the text <b>"text <var_name> text"</b>, after which it will be replaced in the project with the value from the specified variable.
<br><br>If the number of phrases in the dialogs of different translations differ from each other, then you can write <b>"skip"</b>, then the phrase will be automatically skipped in the selected localization.
<br><br>To add transcription, furigana, additional anatation and texts, you can use <b>< 簡単 = かんたん ></b> what will be displayed as <ruby> 簡単 <rt style="font-size:10px">かんたん</rt></ruby></b>.
</div>
<div id="dialog_toast" style="display:none">
<div style="width:100%;text-align: center;">
<p class="head">Dialog toast</p>
<img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/w_dialog_toast.png" style="max-height:307px;max-width:579px;"/>
</div>
<p>Not recommended for use</p><br>
<p>Element for the plugin of the same name, it will not appear in the elements menu until this plugin is enabled in the project settings</p>
<p>In it you can write a short message for Pop-up notification, at the top of the window</p><br>
<div style="width:100%;text-align: center;"><img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/e_toast.png" style="max-height:auto;max-width:317px;"/></div>
<p>For the correct display of the element, you must specify its appearance in <a href="#" onclick="get_doc('settings_project')">CSS file</a> for the element "#toast" </p>
</div>
<div id="dialog_JavaScript" style="display:none">
<div style="width:100%;text-align: center;">
<p class="head">JavaScript code</p>
<img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/w_dialog_JavaScript.png" style="max-height:670px;max-width:821px;"/>
</div>
<p>You can set JavaScript to execute after the scene or dialog is rendered. В этом случае используются стандартные браузерные JavaScript APIs.</p>
<p>All of Tuesday's components are in the document element ID "tuesday".<br><br><code>document.getElementById("tuesday");</code><br><br>Or in a global variable in RunTime "tuesday" so you can access elements using code<br><br><code>var element = tuesday.children;</code><br><br></p>
<p>All elements have default classes by which you can access them.</p><br>
<ul>
<li><b>tue_art</b> - Images</li>
<li><b>tue_choice</b> - Choice buttons and other "choice" elements</li>
<li><b>tue_controll</b> - Interface buttons</li>
<li><b>tue_html_scene</b> - html component</li>
</ul>
<br><p>Some elements have their own id.</p><br>
<ul>
<li><b>tue_video</b> - Video playback element</li>
<li><b>tue_bg_music</b> - background music playback element</li>
<li><b>tue_text_view</b> - Element for displaying text in the text panel</li>
<li><b>tue_text_block</b> - Text panel element</li>
<li><b>tue_name_block</b> - Named panel element</li>
</ul>
</div>
<div id="dialog_HTML_code" style="display:none">
<div style="width:100%;text-align: center;">
<p class="head">HTML code</p>
<img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/w_dialog_HTML_code.png" style="max-height:670px;max-width:821px;"/>
</div>
<p>You can add your own HTML markup to the scene and add any element from the HTML.</p>
<p>The HTML layer will be displayed above the text panel inside the "Tuesday" element under the id "tue_html_dialog".</p>
<p>This element can use classes from the <a href="#" onclick="get_doc('settings_project')">CSS file</a> included in the project (they will not be displayed in the editor, but will be visible in the preview) and using the JS files</p>
</div>
<div id="dialog_no_autosave" style="display:none">
<div style="width:100%;text-align: center;">
<p class="head">No autosave</p>
<img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/e_no_autosave.png" style="max-height:auto;max-width:317px;"/>
</div>
<p>Autosaves will be ignored in dialog or scene. the player will not be able to continue their progress from the specified location, only before or after "No autosave"</p>
<p>This feature may be needed to avoid spoiling the player's progress with non-story scenes such as menu screens or gallery screens.</p>
</div>
<div id="dialog_hide_interface" style="display:none">
<div style="width:100%;text-align: center;">
<p class="head">Hide interface</p>
<img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/e_hide_interface.png" style="max-height:auto;max-width:317px;"/>
</div>
<p>Specifies to hide or show interface buttons in the scene. You can choose to hide buttons only in a specific dialog, or you can specify the dialog where you want to hide the buttons and then the dialog where you want to bring back interface buttons.</p>
<p>This function can be used to hide interface buttons in galleries, videos, or other screens that are not part of the story.</p>
<br>
<p>Warning! if you specify to hide the interface from a specific location, then if the user uses "autosave", the interface can still be shown. it is recommended to disable "autosave" in dialogs without interface.</p>
</div>
<div id="dialog_ID_event" style="display:none">
<div style="width:100%;text-align: center;">
<p class="head">ID event</p>
<img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/e_ID_event.png" style="max-height:auto;max-width:317px;"/>
</div>
<p>An element intended for external use in JavaScript. It sends a signal that can be tracked using a JavaScript event handling method. <br><br><code>tuesday.addEventListener( "you_event", function(event) { alert("event starting") } );</code></p>
<br>
<p>This way you can link Tuesday JS project to your JavaScript code. so that it can react to the moments of the story that you define.</p>
</div>
<div id="dialog_go_to" style="display:none">
<div style="width:100%;text-align: center;">
<p class="head">Go to</p>
<img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/e_go_to_go_back.png" style="max-height:341px;max-width:824px;"/>
</div>
<p>Specifies the block the player will move to after the current dialogue.</p>
</div>
<div id="dialog_variables" style="display:none">
<div style="width:100%;text-align: center;"><p class="head">Dialog variables</p><img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/w_dialog_variables.png" style="max-height:374px;max-width:547px;"/></div><br>
<p>When the dialog is displayed, you can make changes to the values of the variables. you can use two basic operations such as add (add) and change (set), both operations work on both numbers and text.</p>
<div style="width:100%;text-align: center;"><img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/e_variables.png" style="max-height:auto;max-width:317px;"/></div>
<p>Changes to variables happen before the text is displayed, if you use the displayed value of the variable in the text <b><a href="doc_editor.html#dialog_text" target='_blank'><var_name></a></b> then the changed value will be shown.</p>
</div>
<p></p>
</div>
<div id="dialog_play_sound" style="display:none">
<div style="width:100%;text-align: center;">
<p class="head">Dialog play sound</p>
<img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/e_play_sound.png" style="max-height:auto;max-width:317px;"/>
</div>
<p>Specifies the sound file to be played in the dialog. this sound does not loop and will not stop until the recording ends or is interrupted by the <a href="#" onclick="get_doc('dialog_stop_sound')">"Dialog stop sound"</a> element</p>
</div>
<div id="dialog_stop_sound" style="display:none">
<div style="width:100%;text-align: center;">
<p class="head">Dialog stop sound</p>
<img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/e_stop_sound.png" style="max-height:auto;max-width:317px;"/>
</div>
<p>Stops the sound triggered by <a href="#" onclick="get_doc('dialog_play_sound')">"Dialog Sound Play"</a>" element.</p>
</div>
<div id="dialog_choice" style="display:none">
<div style="width:100%;text-align: center;">
<p class="head">Dialog choice</p>
<img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/w_dialog_choice.png" style="max-height:297px;max-width:635px;"/><br>
</div>
<br><br><p>An element designed to control the plot by the user, with its help he can move through the plot blocks and control the sequence of the plot.</p>
<br><br><p>It can also be part of a decoration or an interactive object. in it you can write text, display images and values from variables</p>
<br><br><div style="width:100%;text-align: center;">
<img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/choice_yes_no.jpg" style="max-height:466px;max-width:682px;"/>
</div>
<br><br><p>By default, the button is displayed in the middle of the scene. the appearance of each new button is automatically copied from the already created ones.</p>
<br><br><p>To arrange the selection buttons in the scene, the Scene Editor is used, which also displays their appearance and size. To quickly add a choice element, you can use the settings window in the Story block.</p>
<br><br><br><br><table style="width:100%;"><tbody><tr>
<td style="width:50%;padding-bottom:64px;" valign="top">
<br><br>Individual settings for choice
<br><br><b>Go to</b> - Specifies the block of story that the user navigates to, or a system function.
<br><br><b>Only text from</b> - Alternative to "Go to". Specifies the block from which only the dialog will be used
<br><br><b>Text</b> - button text You can specify individual text for each localization.
<br><br><b>Indent text</b> - An indent for text within an element. You can use percentages (%) of pixels (px) and other CSS units and specify only certain padding for each side, just like the standard CSS text padding feature.
<br><br><b>Width / Height</b> - Artistic dimensions, default dimensions are 100% relative to "Choice" element. You can use percentages (%) of pixels (px) and other CSS units.
<br><br><b>Sound</b> - The sound that will be played when this element is clicked.
<br><br><b>JavaScript</b> - You can specify JavaScript to be executed when the element is clicked.
<br><br><b>Font size</b> - The font size for the button text. You can use percentages (%) of pixels (px) and other CSS units.
<br><br><b>Font family</b> - The name of the font for the text, you can specify the font from the default ones in the browser or <a href="#" onclick="get_doc('settings_fonts')">from those connected to the project</a>
<br><br><b>Align text</b> - text alignment side inside "Choice" element
<br><br><b>Position Top / Left / Bottom / Right</b> - coordinates the location of the object relative to the side of the scene. if "Time transform" is used, all values will be translated to the Top / Left position. You can use percentages (%) of pixels (px) and other CSS units.
<br><br><b>OffSet X / Y</b> - The offset coordinates of the object's display point relative to itself.
<br><br><b>Angle</b> - Values for the angle of inclination or rotation of the object.
<br><br><b>Style CSS</b> - You can give an object a unique CSS style
<br><br><b>Class Name</b> - You can specify the class from an external <a href="#" onclick="get_doc('settings_project')">CSS file</a> included with the project or for use in JavaScript.
<br><br><b>Color</b> - The color for the element's background.
<br><br><b>Art</b> - Specifies a file from the working folder for the art, you can set an individual image for each localization. By default, all languages will be set to the image selected when creating the scene.
<br><br><b>Size</b> - Image fill options inside the "Choice" element
<br><br><b>Width / Height</b> - Dimensions for the image inside the element, the default dimensions are 100% in relation to the "Select" element. You can use percentages (%) of pixels (px) and other CSS units.
<br><br><b>Align art</b> - Image alignment side inside "Choice" element
<br><br><b>Position Top / Left / Bottom / Right</b> - coordinates the location of the object relative to the side of the scene. if "Time transform" is used, all values will be translated to the Top / Left position. You can use percentages (%) of pixels (px) and other CSS units.
<br><br><b>Variables</b> - You can make changes to the values of variables when you click on an element. you can use two basic operations such as add (add) and change (set), both operations work on both numbers and text.
<br><br><b>Display conditions</b> - additional setting of conditions for showing or hiding an object in scene relative to the values in the variables. <a href="#" onclick="get_doc('unlocked_content')">Lessons: Make hidden content</a>
</td>
<td width="50%;" align="center"><img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/p_choice.png" style="max-height:1697px;max-width:286px;box-shadow: 0px 2px 18px rgba(110,95,165,0.25);"/></td>
</tr></tbody></table>
</div>
<div id="dialog_text_add" style="display:none">
<div style="width:100%;text-align: center;">
<p class="head">Dialog text add</p>
<img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/w_text_edit.png" style="max-height:620px;max-width:867px;"/>
</div>
<p>Identical to <a href="#" onclick="get_doc('dialog_text')">"text"</a> element, but does not erase the previous text, but adds new text to the existing one</p><br>
<p>Warning! The two elements "text" and "add text" cannot be in the same dialog box.</p>
</div>
<div id="dialog_art" style="display:none">
<div style="width:100%;text-align: center;">
<p class="head">Dialog art</p>
<img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/set_art.jpg" style="max-height:466px;max-width:682px;"/>
</div>
<br><br><p>The "Art" element adds additional images to the scene at specified coordinates and sizes. for this, any graphic formats supported by the browser can be used, such as jpg, png, gif, svg and many others.</p>
<p>The scene editor is used to add and edit Art elements. after adding and selecting an image from the working folder in the "Art" section, the image settings panel will appear.</p>
<p>If you change images using drag and drop, then the coordinate and size parameters will be in percentage of the same scene value</p>
<br><br><table style="width:100%;"><tbody><tr>
<td style="width:50%;padding-bottom:64px;" valign="top">
<br><br>Individual settings for art
<br><br><b>Art</b> - Specifies a file from the working folder for the art, you can set an individual image for each localization. By default, all languages will be set to the image selected when creating the scene.
<br><br><b>Width / Height</b> - Artistic dimensions, default dimensions are 33% relative to the scene. You can use percentages (%) of pixels (px) and other CSS units.
<br><br><b>Align art</b> - Image alignment side inside "Art" element
<br><br><b>Position Top / Left / Bottom / Right</b> - coordinates the location of the object relative to the side of the scene. if "Time transform" is used, all values will be translated to the Top / Left position. You can use percentages (%) of pixels (px) and other CSS units.
<br><br><b>OffSet X / Y</b> - The offset coordinates of the object's display point relative to itself.
<br><br><b>Angle</b> - Values for the angle of inclination or rotation of the object.
<br><br><b>Time transform</b> - If the value is greater than 0, then the animation function will be activated, the scene dialogs will be used as keyframes for the same objects (using the same file). by specifying the same files in several successive dialogs, you can set the time for their smooth transition from one state to another. for a smooth conversion, take into account all the parameters of the same images, including CSS styles.
<br><br><b>Speed transform</b> - Animation styles that determine how the object's acceleration and deceleration will be used during the transformation.
<br><br><b>Opacity</b> - Object transparency value
<br><br><b>Style CSS</b> - You can give an object a unique CSS style
<br><br><b>Class Name</b> - You can specify the class from an external <a href="#" onclick="get_doc('settings_project')">CSS file</a> included with the project or for use in JavaScript.
<br><br><b>Display conditions</b> - additional setting of conditions for showing or hiding an object in scene relative to the values in the variables. <a href="#" onclick="get_doc('unlocked_content')">Lessons: Make hidden content</a>
</td>
<td width="50%;" align="center"><img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/p_art.png" style="max-height:1033px;max-width:286px;box-shadow: 0px 2px 18px rgba(110,95,165,0.25);"/></td>
</tr></tbody></table>
</div>
<div id="dialog_back_to" style="display:none">
<div style="width:100%;text-align: center;">
<p class="head">Dialog back to</p>
<img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/e_go_to_go_back.png" style="max-height:341px;max-width:824px;"/>
</div>
<p>Specifies the previous block for the current dialog. The player will switch to it if they move backwards in the story.</p>
</div>
<div id="dialog_timer" style="display:none">
<div style="width:100%;text-align: center;">
<p class="head">Dialog timer</p>
<img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/e_timer.png" style="max-height:auto;max-width:317px;"/>
</div>
<p>This element will allow you to perform a given action after a certain amount of time specified in seconds.</p>
<p>The available actions are similar to those available in the <a href="#" onclick="get_doc('dialog_choice')">"choice"</a> element. you can specify the story block switching or transition to the next dialog.</p>
<p>You can use this element for quick time events or for automatic scene switching.</p>
</div>
<div id="dialog_video" style="display:none">
<div style="width:100%;text-align: center;">
<p class="head">Dialog video</p>
<img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/e_video.png" style="max-height:auto;max-width:317px;"/>
</div>
<p>An element that allows you to play a video clip in any browser-accessible format, including .mp4 and .m4a.</p>
<p>You can set basic playback options such as audio volume, autoplay and loop. In addition, you can specify a video fragment to play by specifying the start and end time. Set the action as a transition to another block or dialog at the end of the video or at the end of its fragment.</p>
<br><div style="width:100%;text-align: center;"><img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/w_dialog_video.png" style="max-height:509px;max-width:707px;"/></div>
<p>the "size" option will allow you to align the video to the dimensions of the scene, or specify its specific coordinates and size in the scene using the scene editor.</p><br>
<p>Warning! many browsers block audio playback until user activity, so there may be a situation where the video starts, but there is no sound. Try not to play the video before the user's first click in the project.</p><br>
<p>An example demonstrating how the video element works <a href="example/example_interactive_movie.zip" target='_blank'>example_interactive_movie.zip</a></p>
</div>
<div id="unlocked_content" style="display:none">
<div style="width:100%;text-align: center;">
<table cellpadding="10" cellspacing="16" style="width:100%;"><tbody>
<tr>
<td align='center' colspan="2" style="text-align:center;"><p class="head">Make unlocked or hidden content</p></td>
</tr>
<tr>
<td align='center' colspan="2" height='64px'>Step 1</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Often there is a need to add unlocked content that becomes available to the player as it progresses or for certain actions. To implement this functionality, you can use additional variables and conditions for displaying the element ("show" parameter). You can assign changes to the values of variables on clicking on a select button or on going to a specific dialog, with "show" you assign conditions for displaying an element based on the values in the values of the variables.<br><br> First, let's go to <b>the project settings</b> for creating variables. </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_project_settings.svg" style="background-image:url('tutorial_img/main_screen.png');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Step 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_var.svg" style="background-image:url('tutorial_img/new_var.png');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>In the window "the project settings" go to the tab "Variables"<br><br> Click on the plus (+) and a variable named variable1 will be created in the window, rename it Level and set the default value to 0.<br><br>The value of this variable will be used to unlock the content.</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Step 3</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Let's create a button with a choice, and add to one of the buttons the modification "set" the "Level" variable to the value "1". In the future, this will be used as a condition for displaying the object, if the "Level" value is greater than 0, then it will be displayed.<br><br>In this case, clicking on the button with the modifier unblocks the content<br><br> In both buttons, set "Go To" option to "Next Scene", the next scene will contain content to unlock.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/choise_modification_var.svg" style="background-image:url('tutorial_img/choise_modification_var.png');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Step 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/choise_stor_block.svg" style="background-image:url('tutorial_img/choise_stor_block.png');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>Let's create a new scene or dialog in which we will create two more select buttons<br><br>The first one will repeat the dialogue with the unlock offer by restarting the plot block. To do this, in the “go” we set the name of the same block.<br><br>The second button will lead to blocked content, so we specify "go to" as "next scene".</td>
</tr>
<td align='center' colspan="2" height='128px'>Step 5</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Finds the "Show" parameter for the button leading to unlocked content, sets the conditions for its display if the value of the "Level" variable is greater than 0.<br><br>Now if the user clicks "No", the modifier variable will not be used and the value in the variable "level" will remain at 0, which means that this button will be displayed in the scene.</td>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/choise_showifh.svg" style="background-image:url('tutorial_img/choise_showifh.png');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Step 6</td>
</tr>
<tr>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/choise_showifv.svg" style="background-image:url('tutorial_img/choise_showifv.png');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>Finds the "Show" option for another select button and sets the conditions for it to be displayed if the value of the "Level" variable is greater than 0. as we showed in the modifier for the "Yes" button<br><br>Thus, if the content has already been unlocked, then the offer to repeat the request will not appear, but in its place there will be a button to show cool content.</td>
</tr>
<td align='center' colspan="2" height='128px'>Step 7</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Let's create a new scene where we will display previously locked content, but also make it locked again when the project is restarted.<br>To do this, add the "variables" element to the scene.</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_set_var.svg" style="background-image:url('tutorial_img/add_set_var.png');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Step 8</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/w_edit_set_var.png"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>By clicking on (+) we will add the modifier "Lvevl" and set it to "set" and the value 0, as we set earlier the conditions for displaying hidden content, the value in the variable Lvevl is 1 .</td>
</tr>
<tr>
<td align='left' colspan="2" height='128px'>In this way, we create conditions for displaying a button that sees hidden content in which the user needs to perform the necessary actions in order to access it. You can use this to reveal hidden answer options to navigate through hidden scenes or unlock art in the gallery.<br>This example shows how the Show option and variables work in general. You can use these options in other ways as well.<br>You don't have to create a variable for every object, you can use one variable for multiple elements and only change the value in the variable itself.<br><br>Download the source code for this example here <a href="example/example_unlocked_content.zip" target='_blank'>example_unlocked_content.zip</a></td>
</tr>
</tbody></table>
</div>
<p></p>
</div>
<div id="enter_name" style="display:none">
<div style="width:100%;text-align: center;">
<table cellpadding="10" cellspacing="16" style="width:100%;"><tbody>
<tr>
<td align='center' colspan="2" style="text-align:center;"><p class="head">How to enter player name</p></td>
</tr>
<tr>
<td align='center' colspan="2" height='64px'>Step 1</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>In the project settings, create a variable to store the name, for example "user_name"</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_var.svg" style="background-image:url('tutorial_img/new_var.png');"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Step 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/scene_choices_javascript.svg" style="background-image:url('tutorial_img/scene_choices_javascript.jpg');"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>Add a JavaScript element to the scene, or create a button and add code to its JavaScript settings.<br><br><code>story_json.parameters.variables.user_name=prompt("Please enter your name:","User Name");</code><br><br>Note that the full address is used to store variables in the <br><br><code>story_json.parameters.variables.user_name</code><br> where user_name can be replaced by any other variable you use to store the name.<br><br>Learn more about the "Prompt" feature at <a href="https://www.w3schools.com/jsref/met_win_prompt.asp" target='_blank'>w3schools</a></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Step 3</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Now, when you click a button or go to the stage, a dialog box will appear prompting you to enter a name or other parameter.<br><br>You can display values from variables in the text. To do this, you need to write the name of the variable in angle brackets in the text "text <var_name> text", after which it will be replaced in the project with the value from the specified variable. </td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/enter_name.jpg"/></td>
</tr>
<tr>
<td align='left' colspan="2" height='128px'>Download the source code for this example here <a href="example/example_enter_name.json" target='_blank'>example_enter_name.json</a></td>
</tr>
</tbody></table>
</div>
<p></p>
</div>
<div id="bot_telegram" style="display:none">
<div style="width:100%;text-align: center;">
<table cellpadding="10" cellspacing="16" style="width:100%;"><tbody>
<tr>
<td align='center' colspan="2" style="text-align:center;"><p class="head">Starting from version 32, Tuesday JS has a project export to a telegram bot.<br>Warning: Not all Tuesday JS functions can be used in a bot.</p></td>
</tr>
<tr>
<td align='center' colspan="2" height='64px'>Step 1 bot registration in Telegram</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>In Telegram app, find <a href="https://t.me/BotFather" target='_blank'>@BotFather</a> user.<br><br>Write to the chat or select /newbot from the menu<br><br>Enter all the required data and get an token for bot.<br><br>In the future, in this chat, you can change the data of the bot, set an avatar for it or delete it.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/telegram_botfather.jpg" style="width:70%;"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Step 2 installation of additional software</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/install_npm.jpg"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>Install the appropriate <a href="https://nodejs.org/en" target='_blank'>Node.js</a> version for your PC<br><br>After the installation is complete, launch the console: the <a href="https://en.wikipedia.org/wiki/Terminal_(macOS)" target='_blank'>Terminal</a> if you have macOS, or <a href="https://en.wikipedia.org/wiki/Cmd.exe" target='_blank'>CMD</a> (command-line interface) if you have Windows.<br><br>Install npm by writing command:<br><br><code>npm install -g npm</code><br><br>After installation, do not close the console</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Step 3 Create local server</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Create a folder for the project using the command, The example uses the name "telegram_bot" in the user's root folder, but you can use any other directory<br><br><code>mkdir telegram_bot</code><br><br>Go to the folder with the command:<br><br><code>cd telegram_bot</code><br><br>Initialize the folder with the command:<br><br><code>npm init -y</code><br><br>Download <a href="https://www.npmjs.com/package/node-telegram-bot-api" target='_blank'>Telegram Bot API</a> with the command:<br><br><code>npm i node-telegram-bot-api</code><br><br>You can close the console after installation is complete.</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/bot_init.png"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Step 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/bot_package.png"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>In the folder for the bot, find the <b>"package.json"</b> file<br><br>Open it in a text editor and change the line "scripts" to<br><br><code>"scripts":{"start":"node index.js"},</code><br><br>The index.js file will contain your bot code, its name can be anything.</td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Step 5 Creating a bot</td>
</tr>
<tr>
<td width='50%' align='left' class='textarr' valign='top'>Open your Tuesday JS project and click <a href="doc_editor.html#user_interface" target='_blank'>the build button</a>.<br><br>Select "Telegram bot"<br><br>You will be prompted to enter the bot token you received when registering the bot in telegram.<br><br>In the future, the bot token can be changed in <a href="doc_editor.html#settings_project" target='_blank'>the project settings</a>.<br><br>Save the resulting <b>"index.js"</b> file to the bots folder</td>
<td width='50%' align='center' class='leftbor'><img class="img_t" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/bot_build.jpg"/></td>
</tr>
<tr>
<td align='center' colspan="2" height='128px'>Step 6 Bot launch</td>
</tr>
<tr>
<td width='50%' align='center'><img class="img_w" onclick="modal_window('open',this.src,this.style.backgroundImage)" src="tutorial_img/bot_start.jpg"/></td>
<td width='50%' align='left' class='leftbor textarr' valign='top'>Launch the console and go to the folder with the bot with the command:<br><br><code>cd telegram_bot</code><br><br>We start the bot with the command<br><br><code>npm run start</code><br><br>If no error messages appear in the console, then you can find and use your bots in the telegram service<br><br>the bot will work while the console is enabled</td>
</tr>
</tbody></table>
</div>
<p></p>
</div>
<div id="legacy_choice" style="display:none">
<div style="width:100%;text-align: center;">
<p class="head">Legacy choice</p>
<img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/legacy_choice.png" style="max-height:311px;max-width:727px;"/>
</div>
<p>This is a logical element that determines the next story block based on the values in the variables. it will not be visible to the user.<br><br>As you progress through the story, you can specify in dialogs or on the selection buttons what changes to make to the variables that you created in the project settings. And then use the obtained values in the Legacy selection to draw a conclusion or decision for the further development of the story.<br><br><div style="width:100%;text-align: center;"><img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/w_legacy_choice.png" style="max-height:396px;max-width:579px;"/></div><br><br>You can set up multiple value checks and their order will be determined by this "if eles" list, with the last "else" value always present, which is triggered if none of the above comparisons matched.<br><br>This element is most often used to create tests to test knowledge or to determine the ending of a story.</p>
</div>
<div id="terrain_map" style="display:none">
<div style="width:100%;text-align: center;">
<p class="head">Terrain map</p>
<img class="img_t" onclick="modal_window('open',this.src)" src="tutorial_img/map_screen.jpg" style="max-height:466px;max-width:682px;"/>
</div>
<br><br><p>The scene view is intended to display game space maps or other navigation. To use it, you need to select a new image for the map from the working folder and place markers on it that will lead to another plot block or continue the current one. Map scene with all elements will be automatically scaled to the size of the screen or project window, and scrolling functionality will be added. </p>
<br><br><table style="width:100%;"><tbody><tr>
<td style="width:50%;padding-bottom:64px;">
<br><br>Individual settings for displaying a scene with a map in a project.
<br><br><b>Art</b> - Specifies a file from the working folder for the map background image, you can set an individual image for each localization. By default, all languages will be set to the image selected when creating the scene.
<br><br><b>Width / Height</b> - Map dimensions, by default, the dimensions of the image that was selected when creating the scene are used. Resizing does not affect the scaling of the scene, if you want to increase the size of the map, it is recommended to use the "Scale" option
<br><br><b>Start scroll X / Y</b> - Sets the initial scroll position when the map is first launched, later the scene remembers the last map scroll position so that the user can continue from the same place.
<br><br><b>Size</b> - Options for filling the scene with a map background image.
<br><br><b>Scale</b> - Specifies the scale of the map so that it can be enlarged or reduced in proportion to its size and the size of the project window.
<br><br><b>Color</b> - Scene background color.
<br><br><b>Button sound</b> - The default sound for keyboards, if the marker has its own sound, then this file will not be played.
<br><br><b>Music</b> - Specifies the file for the background music, the selected music will be looped, if the file is the same as the background music of the previous scene, the music will not be interrupted or restarted when switching to the card.
<br><br><b>Class name</b> - For the scene, you can specify the style class from the <a href="#" onclick="get_doc('settings_project')">CSS file</a> specified in the project settings. It allows you to use additional options for the map that are not provided by the main functionality, such as filters or gradients.
<br><br><b>Style CSS</b> - Sets individual CSS style options for the map. It allows you to use additional options that are not provided by the main functionality, such as filters or gradients.
</td>
<td width="50%;" align="center"><img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/map_scene.png" style="max-height:521px;max-width:286px;box-shadow: 0px 2px 18px rgba(110,95,165,0.25);"/></td>
</tr><tr>
<td width="50%;" align="center"><img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/map_item.png" style="max-height:708px;max-width:270px;box-shadow: 0px 2px 18px rgba(110,95,165,0.25);"/></td>
<td style="width:50%;padding-bottom:64px;">
<br><br>Markers for the map are created in the "items" section, before creation you will be prompted to select an image for the marker, this image will be used by default for all languages.
<br><br><b>Name</b> - Adds a text caption for the marker.
<br><br><b>Go to</b> - Sets the transition to another story block
<br><br><b>Art</b> - An image for the marker selected from the working folder.
<br><br><b>Left / Top position</b> - Marker location coordinates on the map in pixels
<br><br><b>Width / Height size</b> - Marker sizes, by default, the size of the image that was selected when creating the marker is used.
<br><br><b>Angle</b> - Angle or rotation of marker image
<br><br><b>Size</b> - Options for filling the scene with a marker image.
<br><br><b>Sound</b> - A file from the working folder with the sound that will be played when you click on this marker.
<br><br><b>Class name</b> - For the marker, you can specify the style class from the <a href="#" onclick="get_doc('settings_project')">CSS file</a> specified in the project settings. It allows you to use additional options.
<br><br><b>Style CSS</b> - Sets individual CSS style options for the marker. Allows you to use additional options
<br><br><b>JavaScript</b> - Executes JavaScript after the marker is clicked
<br><br><b>Show</b> - Conditions based on variable values under which the marker will be hidden or shown
</td>
</tr></tbody></table>
<br><br>Download the source code for this example here <a href="example/example_map.zip" target='_blank'>example_map.zip</a>
</div>
<div id="hidden_object" style="display:none">
<div style="width:100%;text-align: center;">
<p class="head">Hidden object</p>
<img class="img_t" onclick="modal_window('open',this.src)" src="tutorial_img/ho_screen.jpg" style="max-height:466px;max-width:682px;"/>
</div>
<br><br><p>Scene with game mechanics "hidden object" also called "hidden picture" or "hidden object puzzle adventure". The player's task is to find all the items from the list on the playing field.
<br><br>This game scene displays a list of items for search in a text panel from the main interface. You can specify the number of items to search in the "Labels" scene parameters section, if there are fewer items in the scene than specified in the parameter, then the random entry of the item into the list is not applied, if more is specified, then the list will be determined randomly each time. The more elements in the scene, the more diverse the list will be created.</p>
<br><br><table style="width:100%;"><tbody><tr>
<td style="width:50%;padding-bottom:64px;">
<br><br>Settings for displaying item label in the search list
<br><br><b>Width / Height</b> - item label dimensions in text panel
<br><br><b>Items for search</b> - Number of items in the search list, if there are fewer items in the scene than specified in the parameter, then the random entry of the item into the list is not applied, if more is specified, then the list will be determined randomly each time.
<br><br><b>Style CSS</b> - Sets individual CSS style options for the item label. It allows you to use additional options that are not provided by the main functionality, such as filters or gradients.
<br><br><b>Removable label</b> - Removes the label of the found element from the search list
<br><br><b>Removable item</b> - Removes the found item from the search list from the playing field
<br><br><b>Default color label</b> - The background color of the item label of an element not yet found
<br><br><b>Find color label</b> - Found item label background color
<br><br><b>Tip label</b> - item label appearance (text only, image only, text with image)
<br><br><b>Align text</b> - Align text with element name inside item label
<br><br><b>Default color text</b> - The text color of an element not yet found
<br><br><b>Find color text</b> - Found item text color
<br><br><b>Width / Height art</b> - Item label sizes in the search item list
<br><br><b>Fill art</b> - Item label image filling options.
<br><br><b>Align art</b> - Image alignment inside item label.
<br><br><b>Sound</b> - The default sound to play when an item from the list has been found, if the item has its own sound, then this file will not be played.
<br><br><b>Default class name</b> - The style class from the <a href="#" onclick="get_doc('settings_project')">CSS file</a> specified in the project settings for the label of the not yet found element.
<br><br><b>Find class name</b> - Style class from the <a href="#" onclick="get_doc('settings_project')">CSS file</a> specified in the project settings for the label of the found element.
<br><br><b>
</td>
<td width="50%;" align="center"><img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/ho_labels.png" style="max-height:932px;max-width:286px;box-shadow: 0px 2px 18px rgba(110,95,165,0.25);"/></td>
</tr><tr>
<td width="50%;" align="center"><img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/ho_scene.png" style="max-height:480px;max-width:286px;box-shadow: 0px 2px 18px rgba(110,95,165,0.25);"/></td>
<td style="width:50%;padding-bottom:64px;">
<br><br>Individual settings for displaying a scene.
<br><br><b>Art</b> - Specifies a file from the working folder for the playing field background image, you can set an individual image for each localization. By default, all languages will be set to the image selected when creating the scene.
<br><br><b>Width / Height</b> - the dimensions of the playing field, by default, the dimensions of the image that was selected when creating the scene are used. Resizing does not affect the scaling of the scene, if you want to increase the size of the scene, it is recommended to use the "Scale" option
<br><br><b>Size</b> - Options for filling the scene with a map background image.
<br><br><b>Scale</b> - Specifies the scale of the playing field so that it can be enlarged or reduced in proportion to its size and the size of the project window.
<br><br><b>Color</b> - Scene background color.
<br><br><b>Music</b> - Specifies the file for the background music, the selected music will be looped, if the file is the same as the background music of the previous scene, the music will not be interrupted or restarted when switching to the card.
<br><br><b>Go to</b> - Specifies the next block or dialog that the player will move to after all items in the list have been found.
<br><br><b>Class name</b> - For the scene, you can specify the style class from the <a href="#" onclick="get_doc('settings_project')">CSS file</a> specified in the project settings. It allows you to use additional options for the map that are not provided by the main functionality, such as filters or gradients.
<br><br><b>Style CSS</b> - Sets individual CSS style options for the playing field. It allows you to use additional options that are not provided by the main functionality, such as filters or gradients.
<br><br><b>JavaScript</b> - Executes JavaScript at the beginning of the game scene
</td>
</tr><tr>
<td style="width:50%;padding-bottom:64px;">
<br><br>Placement of an object on the playing field.
<br><br><b>Name</b> - Adds a text caption for the item. which will be displayed in the list of items to search.
<br><br><b>Art</b> - An image for the item selected from the working folder.
<br><br><b>Left / Top position</b> - Item location coordinates on the map in pixels
<br><br><b>Width / Height size</b> - Item sizes, by default, the size of the image that was selected when creating the item is used.
<br><br><b>Angle</b> - Angle or rotation of item image
<br><br><b>Size</b> - Options for displaying the image of the item.
<br><br><b>Sound</b> - A file from the working folder with a sound that will be played when this item is clicked, if it is in the search list.
<br><br><b>Class name</b> - For the item, you can specify the style class from the <a href="#" onclick="get_doc('settings_project')">CSS file</a> specified in the project settings. It allows you to use additional options.
<br><br><b>Style CSS</b> - Sets individual CSS style options for the item. Allows you to use additional options
<br><br><b>JavaScript</b> - Executes JavaScript after the item is clicked
</td>
<td width="50%;" align="center"><img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/ho_item.png" style="max-height:581px;max-width:270px;box-shadow: 0px 2px 18px rgba(110,95,165,0.25);"/></td>
</tr></tbody></table>
<br><br>Download the source code for this example here <a href="example/example_hidden_objects.zip" target='_blank'>example_hidden_objects.zip</a>
</div>
<div id="dialog" style="display:none">
<div style="width:100%;text-align: center;">
<p class="head">Dialog</p>
<img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/dialog.png" style="max-height:788px;max-width:877px;"/>
</div>
<p>The dialog defines all other elements that will be displayed in the project, such as dialog text, character images, select buttons, additional sounds, and more. To edit the layout, it is recommended to use the "Scene Editor" with the Drag end Drop visual interface, it can be called in the context menu of the dialog or when adding the "art" element. Options and elements in a dialog are used only in that dialog and are not carried over to the next dialog.</p>
</div>
<div id="scene_edit" style="display:none">
<div style="width:100%;text-align: center;">
<p class="head">Scene</p>
<img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/scene_edit.jpg" style="max-height:497px;max-width:707px;"/>
</div>
<p>The scene is part of the story block, which sets the basic parameters for subsequent dialogues, such as background image, color, and music.
<br><br><b>Image</b> - File for the background image that will be displayed in all subsequent dialogue of this scene (analogue of background-image in CSS). You can set a separate file for each translation, if you specify only one file and leave the rest empty, that single file will be used for all translations. For this, any graphic formats supported by the browser can be used, such as jpg, png, gif, svg and many others
<br><br><b>Music</b> - Specifies a file for background music, the selected music will be looped, if you specify the same file in several scenes in a row, then the music will not be interrupted or restarted when switching to a scene. If you leave the parameter empty, then the previously started music will be stopped. Playback cannot be affected by the "Play Sound" and "Stop Sound" dialog items, the sounds they control play in parallel with the background music.
<br><br><b>Color</b> - Scene background color (analogue of background-color in CSS).
<br><br><b>Size</b> - Options for filling a window or screen with a background image (analogue of background-size in CSS).
<br><br><b>Position</b> - property sets the starting position of a background image to align it in the scene relative to the size of the window or screen (analogue of background-position in CSS). For example, by specifying the lower right corner, the image will be stretched relative to this corner, and at any size, the lower right corner of the image will be visible.
<br><br><b>Class</b> - For the scene, you can specify the style class from the <a href="#" onclick="get_doc('settings_project')">CSS file</a> specified in the project settings. It allows you to use additional scene parameters that are not provided by the main functionality, like filters or gradients.
</p>
</div>
<div id="story_blocks" style="display:none">
<div style="width:100%;text-align: center;">
<p class="head">Story block</p>
<img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/story_blocks.png" style="max-height:318px;max-width:937px;"/>
</div>
<p>The script structure is divided into various elements. The main element is a "block" that is part of a narrative or a storyline, and their sequence will be determined by the user's choices. Blocks consist of scenes with a set of graphic and sound elements. And already inside the scene, a sequence of dialogues and other elements.</p>
</div>
<div id="w_build" style="display:none">
<div style="width:100%;text-align: center;">
<p class="head">Build project</p>
<img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/w_build.png" style="max-height:423px;max-width:499px;"/>
</div>
<p>Building the final project into an executable file. All build options include an HTML file with an embedded RunTime and a JSON array of the project with all dialogs and options.
<br><br><b>Html file</b> - The fastest build option, only the index.html file will be created, without adding files from the working folder, only the paths to the files relative to the working folder will be indicated.<br>The resulting file can be launched in the browser even without additional files, if you add it to the working folder and run, the files specified in the project will be used.<br>It is recommended to use if the project does not use additional files.
<br><br><b>Zip file</b> - Creates an uncompressed archive with the index.html file (to start the project) and other files used in the project, if the file from the working folder is not specified in the project, then it will not be added to the archive. You can publish the resulting ZIP archive to most browser game distribution services.<br>It is recommended to be used by default, and this option is suitable for most use cases and distribution of the project. To create a ZIP archive, <a href="https://stuk.github.io/jszip/" target='_blank'>JSZip</a> is used, which has good compatibility with various systems. .
<br><br><b>Base64</b> - Only index.html is created with all the data in one file. All files used in the project from the working folder are encoded in Base64 format and added to the generated index.html, if the file from the working folder is not specified in the project, then it will not be added to index.html.<br><b>Important!</b> when encoding files in Base64, the data size increases by about 25%. Some browsers may have problems using HTML over 30MB. Therefore, this export is not recommended for large projects with a lot of data.
</p>
</div>
<div id="add_story_block" style="display:none">
<div style="width:100%;text-align: center;">
<p class="head">Add story block</p>
<img class="img_w" onclick="modal_window('open',this.src)" src="tutorial_img/w_new_block.png" style="max-height:351px;max-width:447px;"/>
</div>
<p>The story in "Tuesday JS" consists of story blocks that contain scenes and dialogues of a certain part of the story. With blocks, you separate parts of the plot to create a non-linear narrative.
<br><br>The first created story block in the project is automatically added as the starting block from which the project will be launched. You can specify another start block in <a href="doc_editor.html#settings_project" target='_blank'>the project settings</a>, the main interface will not be displayed in the specified block (in the first scene), so you can make the main menu or start screen.
<br><br>The block name is indicated only in Latin letters and without the use of special characters. this name will not be displayed in the project, but will be used in the project structure, in fact, you set the name (key) for the data array, which will contain all subsequent data of this part of the story.
<br><br>For ease of navigation, you can set the color of the block. this color will be used by all elements that will refer to this block (selection buttons, lines, etc.)
<br><br>In the future, you can change the name and color of the block by clicking on the edit button in the header of the selected block.</p>
</div>
<div id="quick_tutorial_pt" style="display:none">
<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>