-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1038 lines (985 loc) · 47.2 KB
/
index.html
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>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en" xmlns="http://www.w3.org/1999/html"> <!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="TheTabooBook">
<meta name="author" content="Harry">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="icon" href="img/logo/b.ico" type="image/x-icon">
<link rel="shortcut icon" href="img/logo/b.ico" type="image/x-icon">
<title>The Taboo Book | ATRC</title>
<!-- STYLES -->
<link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/icofont.css">
<link rel="stylesheet" type="text/css" href="css/plugins.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/cursor.css">
<!--[if lt IE 9]> <script type="text/javascript" src="js/modernizr.custom.js"></script> <![endif]-->
<!-- /STYLES -->
</head>
<body>
<video src="video/bg.mp4" loop="loop" autoplay="autoplay" muted = "muted"></video>
<style type="text/css">
body{
margin:0;
}
video{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-filter: grayscale(0%);
}
</style>
<section></section>
<div class="cursor"></div>
<script src="js/cursor.js"></script>
<div id="preloader">
<div class="loader_line"></div>
</div>
<!-- WRAPPER ALL -->
<div class="edina_tm_all_wrap" data-magic-cursor=""> <!-- If you want disable magic cursor add value "hide" -->
<div class="edina_tm_modalbox">
<div class="box_inner">
<div class="close">
<div style="cursor: default">
close
</div>
</div>
<div class="description_wrap"></div>
</div>
</div>
<!-- MOBILE MENU -->
<div class="edina_tm_mobile_menu">
<div class="mobile_menu_inner">
<div class="container">
<div class="mobile_in">
<div class="logo">
<a href="#"><img src="img/logo/2.png" alt="" /></a>
</div>
<div class="my_trigger">
<div class="hamburger hamburger--collapse-r">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="dropdown">
<div class="container">
<div class="dropdown_inner">
<ul class="anchor_nav">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#service">Service</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#testimonial">Testimonial</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#download">Download</a> </li>
</ul>
</div>
</div>
</div>
</div>
<!-- /MOBILE MENU -->
<!-- SIDEBAR -->
<div class="edina_tm_sidebar">
<div class="sidebar_inner">
<div class="logo">
<a href="https://2016tiendu.github.io/"><h3 style="font-family: Arial Black,serif; font-size: 175%; color: #0c5e9c"><b>ATRC</b></h3></a>
</div>
<div class="menu">
<ul class="anchor_nav">
<li>
<div class="list_inner current">
<a href="#home"><img class="svg custom" src="img/svg/home.svg" alt="" />Home</a>
</div>
</li>
<li>
<div class="list_inner">
<a href="#about"><img class="svg custom" src="img/svg/human.svg" alt="" />About</a>
</div>
</li>
<li>
<div class="list_inner">
<a href="#service"><img class="svg custom" src="img/svg/service.svg" alt="" />Feature</a>
</div>
</li>
<li>
<div class="list_inner">
<a href="#portfolio"><img class="svg custom" src="img/svg/portfolio.svg" alt="" />Portfolio</a>
</div>
</li>
<li>
<div class="list_inner">
<a href="#testimonial"><img class="svg custom" src="img/svg/testimonial.svg" alt="" />Character</a>
</div>
</li>
<li>
<div class="list_inner">
<a href="#blog"><img class="svg custom" src="img/svg/devlog.png" alt="" />DevLog</a>
</div>
</li>
<li>
<div class="list_inner">
<a href="#contact"><img class="svg custom" src="img/svg/contact.svg" alt="" />Contact</a>
</div>
</li>
<li>
<div class="list_inner">
<a href="#download"><img class="svg custom" src="img/svg/cloud-computing.png" alt="" />Download</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="edina_tm_mainpart">
<div class="edina_tm_hero" id="home">
<div class="content">
<div class="image">
<div class="main" data-img-url="img/hero/2.jpg"></div>
</div>
<div class="extra">
<h3 class="name">The Taboo Book </h3>
<p class="text" style="color: #323232">Redemption Road, Shown in This Book<br> <font face="AXIS Std UL"><b>償還ロード、この本に示す </b></font></p>
</div>
</div>
</div>
<!-- /HERO -->
<!-- ABOUT -->
<div class="edina_tm_about" id="about">
<div class="container">
<div class="about_title">
<h3>About <br>The Taboo Book</h3>
</div>
<div class="content">
<div class="leftpart wow fadeInLeft" data-wow-duration="1s">
<div class="info">
<h3> <span> Synopsis of First Chapter</span></h3>
<p style="color: #323232">Walking alone on the quiet street, it was not a tediously long journey, but I even thought it could not be finished forever.
"I thought that I am going to end like this..." Thinking like this, I heavily fall to the ground...</p>
</div>
<div class="my_skills">
<h3 class="title"> But, I was saved by her </h3>
<p class="desc" style="color: #323232">『“Hey, Akiichi! Wake up!!』</p>
<p><br></p>
</div>
<div class="image">
<a href="video/tbb.mp4"><img src="img/about/video.jpg" alt=""></a>
</div>
</div>
<div class="rightpart wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.2s">
<div class="image">
<img src="img/thumbs/26-35.jpg" alt="" />
<div class="main" data-img-url="img/about/2.png"></div>
</div>
</div>
</div>
</div>
</div>
<!-- /ABOUT -->
<!-- SERVICES -->
<div class="edina_tm_services" id="service">
<div class="container">
<div class="edina_tm_title">
<h3>Feature of this game</h3>
<p>Being able to show the world about ACGN,
The Taboo Book which is our maiden work of ours,
of course have some special features about that.</p>
</div>
<div class="service_list">
<ul>
<li class="wow fadeInLeft" data-wow-duration="1s">
<div class="list_inner">
<img class="svg custom" src="img/svg/python.png" alt="" />
<div class="service_title"><h3>The Game Engine</h3></div>
<a class="learn_more" href="#">Explore More<span></span></a>
<a class="edina_tm_full_link" href="#"></a>
<div class="popup_informations">
<div class="image">
<img src="img/thumbs/4-3.jpg" alt="" />
<div class="main" data-img-url="img/service/1.png"></div>
</div>
<div class="description">
<h3>What is Ren'Py? </h3>
<p>Ren'Py is a visual novel engine
– used by thousands of creators from around the world –
that helps you use words, images, and sounds to tell
interactive stories that run on computers and mobile devices.
These can be both visual novels and life simulation games.
The easy to learn script language allows anyone to efficiently
write large visual novels, while its Python scripting is enough
for complex simulation games. Ren'Py is open source and free for commercial use.</p>
<h3>Why we chose that as a game engine?</h3>
<p>Visual novels are computer-based stories that are told through words, images, sounds, and music.
Many visual novels also present the player with menu choices that allow the player to control how the story is told.
Ren'Py's script language makes it easy to write visual novels, and other writing-heavy games. It's easy to learn, and
scales well to the largest projects. Even without customization, Ren'Py provides the features players have come to expect
from their visual novels. Life Simulation games, such as management and dating sims, are more interactive games that mix
story with gameplay. Ren'Py's screen language allows one to create complex interfaces, while its support for the Python
scripting language allows for complex game logic, if that's what your project requires.</p>
<div class="in_list">
<ul>
<li><p>Being able to use the Python language to for writing down codes</p></li>
<li><p>Easy to start, grammar of the engine is similar to Python</p></li>
<li><p>Have high level script language, although hard to learn, but it is perfectly beautiful.</p></li>
<li><p>Have some product similar to ours: Doki Doki literature Club for example. </p></li>
</ul>
</div>
<p>It has been our dream to make a visual novel game for ourselves. And here is the chance!</p>
</div>
</div>
</div>
</li>
<li class="wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.3s">
<div class="list_inner">
<img class="svg custom" src="img/svg/drawing.png" alt="" />
<div class="service_title"><h3>Illustrator of the visual Novel</h3></div>
<a class="learn_more" href="#">Explore More<span></span></a>
<a class="edina_tm_full_link" href="#"></a>
<div class="popup_informations">
<div class="image">
<img src="img/thumbs/4-3.jpg" alt="" />
<div class="main" data-img-url="img/service/2.png"></div>
</div>
<div class="description">
<h2>Illustrator of the Visual Novel</h2>
<p>Two outstanding illustrators offered their illustration to us.</p>
<h3>CG Illustrator: 若本然子</h3>
<h3>Character Illustrator: 群青</h3>
<div class="in_list">
</div>
<p>Thanks to the two splendid illustrators who provided us the characters and CG, which enabled our work can be processed more fluently
and succeed in the end.</p>
</div>
</div>
</div>
</li>
<li class="wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.6s">
<div class="list_inner">
<img class="svg custom" src="img/svg/group.png" alt="" />
<div class="service_title"><h3>Members of The Taboo Book</h3></div>
<a class="learn_more" href="#">Explore More<span></span></a>
<a class="edina_tm_full_link" href="#"></a>
<div class="popup_informations">
<div class="image">
<img src="img/thumbs/4-3.jpg" alt="" />
<div class="main" data-img-url="img/service/slide_1.png"></div>
</div>
<div class="description">
<h3>Members of our Group</h3>
<div class="member's list">
<ul>
<li><p><b><i>Emilia</i></b></p></li>
<li><p><b><i>Harry</i></b></p></li>
<li><p><b><i>Nicole</i></b></p></li>
<li><p><b><i>Tien</i></b></p></li>
</ul>
</div>
<h3>Everyone in our group plays an important role</h3>
<p><b>Code, Music, Picture, Website, dubbing, etc</b></p>
</div>
</div>
</div>
</li>
<li class="wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.4s">
<div class="list_inner">
<img class="svg custom" src="img/svg/writing.png" alt="" />
<div class="service_title"><h3>Adapted from the Novel <br><i>"The Taboo Book"</i></h3></div>
<a class="learn_more" href="#">Explore More<span></span></a>
<a class="edina_tm_full_link" href="#"></a>
<div class="popup_informations">
<div class="image">
<img src="img/thumbs/4-3.jpg" alt="" />
<div class="main" data-img-url="img/service/tb.png"></div>
</div>
<div class="description">
<h3>The Taboo Book Novel Version</h3>
<p>Writen by <b><i>Tien</i></b> and <b><i>Harry</i></b></p>
<p>Click to see the novel Version of <b>The Taboo Book</b></p>
<a href="pdf/The Taboo Book-Kiyohime.pdf" target="_blank">The Story line of <i>Kiyohime</i></a>
<br>
<a href="pdf/The Taboo Book-Eunice.pdf" target="_blank">The Story Line of <i>Eunice</i></a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- /SERVICES -->
<!-- PORTFOLIO -->
<div class="edina_tm_portfolio" id="portfolio">
<div class="container">
<div class="edina_tm_title">
<h3>Group Member's Introduction</h3>
<p style="color: #323232">With Their Social Account</p>
</div>
<div class="portfolio_inner wow fadeInLeft" data-wow-duration="1s">
<div class="my_carousel gallery_zoom">
<ul class="owl-carousel">
<li>
<div class="list_inner">
<div class="image">
<img src="img/thumbs/1-1.jpg" alt="" />
<div class="main" data-img-url="img/portfolio/1.png"></div>
</div>
<div class="details">
<h3><a href="#">Harry</a></h3>
<span><a href="#">The Programmer & Public Relations Director</a></span>
</div>
<a class="edina_tm_full_link popup-vimeo" href="https://space.bilibili.com/587947313"></a>
</div>
</li>
<li>
<div class="list_inner">
<div class="image">
<img src="img/thumbs/1-1.jpg" alt="" />
<div class="main" data-img-url="img/portfolio/2.png"></div>
</div>
<div class="details">
<h3><a href="#">Tien Du</a></h3>
<span><a href="#">The Programmer & Chief Designer</a></span>
</div>
<a class="edina_tm_full_link popup-youtube" href="https://space.bilibili.com/14267909"></a>
</div>
</li>
<li>
<div class="list_inner">
<div class="image">
<img src="img/thumbs/1-1.jpg" alt="" />
<div class="main" data-img-url="img/portfolio/7.png"></div>
</div>
<div class="details">
<h3><a href="#">Nicole Ni</a></h3>
<span><a href="#">The Dubber & Art Designer</a></span>
</div>
<a class="edina_tm_full_link soundcloude_link mfp-iframe audio" href="https://www.douyin.com/user/MS4wLjABAAAArQMeedJML-8NkfwLW08VJO3Ea-mk5DGapRD6YCBurRc?enter_from=personal_homepage&enter_method=top_bar"></a>
</div>
</li>
<li>
<div class="list_inner">
<div class="image">
<img src="img/thumbs/1-1.jpg" alt="" />
<div class="main" data-img-url="img/portfolio/6.png"></div>
</div>
<div class="details">
<h3><a href="#">Emilia Fan</a></h3>
<span><a href="#">The Dubber & Proofreader</a></span>
</div>
</div>
</li>
<li>
<div class="list_inner">
<div class="image">
<img src="img/thumbs/1-1.jpg" alt="" />
<div class="main" data-img-url="img/portfolio/4.png"></div>
</div>
<div class="details">
<h3><a href="#">群青</a></h3>
<span><a href="#">Character Illustrator</a></span>
</div>
</div>
</li>
<li>
<div class="list_inner">
<div class="image">
<img src="img/thumbs/1-1.jpg" alt="" />
<div class="main" data-img-url="img/portfolio/5.jpg"></div>
</div>
<div class="details">
<h3><a href="#">若本然子</a></h3>
<span><a href="#">Cg Illustrator</a></span>
</div>
</div>
</li>
</ul>
<a class="prev_button" href="#"><span></span></a>
<a class="next_button" href="#"><span></span></a>
</div>
</div>
</div>
</div>
<!-- PORTFOLIO -->
<!-- TESTIMONIALS -->
<div class="edina_tm_testimonials" id="testimonial">
<div class="container">
<div class="edina_tm_title">
<h3>Character Introduction</h3>
<p>A Brief Introduction of The Characters in the <b><i>Taboo Book</i></b></p>
</div>
<div class="list wow fadeInLeft" data-wow-duration="1s">
<ul class="owl-carousel owl-theme">
<li>
<div class="list_inner">
<div class="details">
<div class="author">
<div class="image">
<div class="main" data-img-url="img/testimonials/1.png"></div>
</div>
<div class="short">
<h3>Ryoko Shimizu</h3>
<span>The Playmate in The Childhood of Kito</span>
</div>
</div>
<div class="icon">
<img class="svg" src="img/svg/quote.svg" alt="" />
</div>
</div>
<div class="text">
<p>Genius, top student, intellect... These adjectives are never too much for her. She is a playmate in the childhood of Kito. She has a sharp tongue but a tender heart, even though she does not
want to admit it at all. She always takes care of Kito, maybe an ambiguous relationship has been formed?</p>
</div>
</div>
</li>
<li>
<div class="list_inner">
<div class="details">
<div class="author">
<div class="image">
<div class="main" data-img-url="img/testimonials/3.png"></div>
</div>
<div class="short">
<h3>Kiyohime</h3>
<span>The Demon Girl Comes From The Taboo Book </span>
</div>
</div>
<div class="icon">
<img class="svg" src="img/svg/quote.svg" alt="" />
</div>
</div>
<div class="text">
<p>“Beloved, so missed, beloved, so missed, betrayed, so sad, so sad, so sad so sad so sad,sohatefulsohatefulsohatefulsohatefulhatehatehatehatehatehatehatehatehatehatehatehatehatehatehate-- So I burned <i>him</i> to death.”</p>
<p style="color: #323232"><i><br>(Click Here to Get More Information→)</i></p>
<a class="edina_tm_full_link popup-youtube" href="https://en.wikipedia.org/wiki/Kiyohime"></a>
</div>
</div>
</li>
<li>
<div class="list_inner">
<div class="details">
<div class="author">
<div class="image">
<div class="main" data-img-url="img/testimonials/2.png"></div>
</div>
<div class="short">
<h3>Eunice</h3>
<span>The Angle Girl Comes From The Taboo Book</span>
</div>
</div>
<div class="icon">
<img class="svg" src="img/svg/quote.svg" alt="" />
</div>
</div>
<div class="text">
<p>An angel from heaven, with a particularly striking silver-white hair (actually it is the source of her magic). She is innocent and careless so that frequently making troubles, but she won’t be annoying at all. However, in the aspect of the contract, she is always very rigorous, even make people feel rigid.</p>
</div>
</div>
</li>
<li>
<div class="list_inner">
<div class="details">
<div class="author">
<div class="image">
<div class="main" data-img-url="img/testimonials/4.png"></div>
</div>
<div class="short">
<h3>Kito Akiichi</h3>
<span>Photographer</span>
</div>
</div>
<div class="icon">
<img class="svg" src="img/svg/quote.svg" alt="" />
</div>
</div>
<div class="text">
<p>A young man working in an Izakaya (traditional Japanese tavern). He suffered an unfortunate event one year ago, thus he became depressed and decadent.
Although understanding some magic tricks, his skill still cannot be called “mastery”.</p>
<br>
</div>
</div>
</li>
<li>
<div class="list_inner">
<div class="details">
<div class="author">
<div class="image">
<div class="main" data-img-url="img/testimonials/5.png"></div>
</div>
<div class="short">
<h3>Parents of Kito</h3>
<span>▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓</span>
</div>
</div>
<div class="icon">
<img class="svg" src="img/svg/quote.svg" alt="" />
</div>
</div>
<div class="text">
<p>▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ , ▓▓▓▓▓▓ , ▓▓▓▓▓▓▓▓▓▓▓▓. ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓......</p>
<p>▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓. ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓, ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓</p>
</div>
</div>
</li>
<li>
<div class="list_inner">
<div class="details">
<div class="author">
<div class="image">
<div class="main" data-img-url="img/testimonials/5.png"></div>
</div>
<div class="short">
<h3>Grandma of Kito</h3>
<span>▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓</span>
</div>
</div>
<div class="icon">
<img class="svg" src="img/svg/quote.svg" alt="" />
</div>
</div>
<div class="text">
<p>▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓, ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓...
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓, ▓▓▓▓▓▓▓▓▓▓▓▓, ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓.
▓▓▓▓▓▓▓▓▓▓▓▓▓▓?
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓!!! ▓▓▓▓▓▓▓▓▓▓▓▓▓. </p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- /TESTIMONIALS -->
<!-- NEWS -->
<div class="edina_tm_news" id="blog">
<div class="container">
<div class="edina_tm_title">
<h3>DevLog</h3>
<p style="color: #323232">The Process of Making the Game step by step...</p>
</div>
<div class="news_inner wow fadeInLeft" data-wow-duration="1s">
<div class="my_carousel">
<ul class="owl-carousel">
<li>
<div class="list_inner">
<div class="image">
<img src="img/thumbs/1-1.jpg" alt="" />
<div class="main" data-img-url="img/news/devlog1.png"></div>
<a class="edina_tm_full_link" href="#"></a>
</div>
<div class="news_details">
<span> September 07, 2021 <a href="#">Determination</a></span>
<h3 class="title"><a href="#">Harry Wang</a></h3>
</div>
<div class="main_content">
<div class="descriptions">
<p class="bigger"> Last week, We had a special Project, unlike other people who are worrying about the topic and the theme of the topic, I, however, was extremely excited about that project. An idea of having a visual novel game soon came to my mind. The reason was quite complex, and I shall introduce that in the following paragraph.</p>
<p>First of all, I am an “Otaku” who is a fan of anime, manga, light novels, and of course the visual novel (or galgame). Since I became interested in visual novel games, an aspiration has gained in my heart: “Someday, I will make a visual novel myself!” and luckily, there is a chance for me to realize this dream.</p>
<p>Secondly, in the last semester of Grade 11, I and Tien worked together and wrote a story which is about 20 thousand words in total. Both we and Reyna were surprised by the work we have done. I remembered that I joked with Tien: “Maybe we can use this as a script of a visual novel someday~” And now, since the chance had come towards us, we started to work together as well, just like the Joke, we are here to create the visual novel that I and Tien are all dreaming about.</p>
<p>However, when we are searching for some materials about how to build a game, we found out that we are too childish. In order to build a visual novel game, we need to programme, draw the animation for characters and backgrounds, music, OP, ED, Voice actor, and so on. It is almost impossible to just build a game with only two people! (Unless we are geniuses) So we found Nicole, Email and invited them to join our group.</p>
<p>Therefore, I started to think about the animation for characters, backgrounds, and CG illustrations. As normal students, we do not have enough energy and time to draw that by ourselves, so we decided to find some artists to draw that instead of us. And we almost spent a whole weekend finding the proper illustrator (Someone’s painting style is not in accordance with our game’s type, while others may be too expensive.) But anyway, we found the right one, and she promised to give us the pics this Friday.</p>
<p>The programme for the game is also difficult. Although we found an application engine particularly for visual novels, it is still very difficult to show the animation, effects, or UI design.</p>
<div class="quotebox">
<p>Tien, Harry, Emilia, Nicole, Four of us will be as a team to build a game that we've been dreaming about.</p>
</div>
<p>Although the way to make a game is filled with thistles and thorns, we will keep on going and try our best to make it.</p>
</div>
</div>
</div>
</li>
<li>
<div class="list_inner">
<div class="image">
<img src="img/thumbs/1-1.jpg" alt="" />
<div class="main" data-img-url="img/news/devlog2.png"></div>
<a class="edina_tm_full_link" href="#"></a>
</div>
<div class="news_details">
<span>15 September,2021 <a href="#">Designing</a></span>
<h3 class="title"><a href="#">Tien Du</a></h3>
</div>
<div class="main_content">
<div class="descriptions">
<p class="bigger">Due to the increase of tasks and assignments this week, I just spent less time on my visual novel game. However, I still achieved an important breakthrough.</p>
<p>To be specific, the first one is that a complicated page had been made for making choices at the end of my story’s prologue. Like what many other visual novels have, there should be some chances for the player to make choices in my project. Compared with directly showing two tags based on the simple code such as True and False menu label, I intended to create a new page or an “image map” to better manifest the alternative for players. – This is because they are going to select one book to start a long and unique plot. Therefore, despite having the official tutorial of the engine I used, it was challenging to outcome this effect. As for the code, it required me not only to prepare two diagrams for both normal and hovered visual expressions but also introduced a function called the hotspot, which enables the engine to judge where the player select and thus trigger a certain program according to the x and y coordinates on the page. To achieve this goal, I tried many times and witnessed my program report errors over and over again. Nevertheless, after a series of tough attempts I did not want to mention, my code successfully worked as what the two pictures show behind.</p>
<img src="img\about\pro.png">
<p>Another breakthrough is our illustrator finished her work and released three lovely artworks of characters. Among them, I was surprised that the artwork of Ryoko, one of the main characters, was so amazing and exceeded our expectations. (I pasted it on the next page) Although there was still the lack of some images for the story, these given artworks had allowed us to deal with the further scripting. In addition, now we really need more background music (BGM) to manifest a certain emotion or theme such as sadness, horror, tension, etc. But the website which provides those resources has a limited number of files for one account every day, so it would time me more time to collect some good BGM. In conclusion, it was also a busy week with plenty of outcomes and challenges. I will continue to do the programming so that the prologue can be finished next week.</p>
<img src="img\about\tc.png">
<br>
</div>
</div>
</div>
</li>
<li>
<div class="list_inner">
<div class="image">
<img src="img/thumbs/1-1.jpg" alt="" />
<div class="main" data-img-url="img/news/devlog3.png"></div>
<a class="edina_tm_full_link" href="#"></a>
</div>
<div class="news_details">
<span>18 September,2021 <a href="#">Script Refining</a></span>
<h3 class="title"><a href="#">Nicole Ni</a></h3>
</div>
<div class="main_content">
<div class="descriptions">
<p>
I'm still refining the script this week. Because the script is just too long. So every time I marked the script, I couldn't feel the end. Fortunately, after two weeks of hard work, I had finished two-thirds of the script. It reminds me of one of Edison's famous sayings - where there is a will, there is a way.<br></p>
<p class="bigger">Of course, This week I'm also preparing for my character's voice. Before that, I need to be familiar with what kind of character my role is.</p>
<p>What state she was in when she was talking. Is her voice pure or mellow? Therefore, in order to better integrate into the role when the official dubbing.
<div class="quotebox">
<p>I found a lot of Gal games. I listened carefully to the voices of the characters in the game.</p>
</div>
<p>All of their timbre is biased towards the Two-dimensional. I felt like I was a girl living in a second dimensional (like a rainbow girl).<br>In this way, I had an idea of where I should work. I would lie in bed every night before going to sleep and read the script and try to dub it. It adds a lot of fun to my life. Although it was the first time in my life, I enjoyed it. Because it can not only enrich my after-school life but also add a lot of experience to me.<br>In addition to all the work I have to do, I got a surprise this week. That's the original map of my character. This is the first time I've seen my character. She wore round glasses and her dark blue hair came down to her waist. There was a hint of coolness and disdain in her eyes. I was pleasantly surprised by this appearance. I think it's really nice! (Photo is at the end) So in order to match such a beautiful role, I will work harder and seriously to complete the dubbing. Strive to make the game experience a deeper sense of immersion.
</p>
<img src="img/about/script.png">
</div>
</div>
</li>
<li>
<div class="list_inner">
<div class="image">
<img src="img/thumbs/1-1.jpg" alt="" />
<div class="main" data-img-url="img/news/devlog4.png"></div>
<a class="edina_tm_full_link" href="#"></a>
</div>
<div class="news_details">
<span>25 September,2021 <a href="#">Design</a></span>
<h3 class="title"><a href="#">Tien</a></h3>
</div>
<div class="main_content">
<div class="descriptions">
<p class="bigger">As I have planned, I have finished the prologue of my visual novel this week, and then, the rest of my time had been mostly spent on my individual work.</p>
<p>My current progress was that half of the first chapter had been done. I was glad to see the appearance of the main character of my story, Eunice. However, what made me slow down was the complicated transition effects of some small objects such as a book. As a visual novel, manipulating any visible images appropriately is the key. That was why I tried to concentrate on enlarging, shrinking, and moving the artworks and decorations shown on the screen. Despite costing much time, I believed that they were crucial for providing a good reading experience.</p>
<img src="img/news/c.png">
<p>On the other hand, my cooperation with Harry had not been thus interrupted. We still worked together for so many things. Among them, the most important item is a mini-game embedded in our visual novel, which came from Harry’s concept – to better manifest and emphasize the scene of conflicts in our stories, we decided to develop the “battle mode” that allows players to control the characters to fight with their enemies. After a series of discussions, we finally aimed to let the mini-game be turn-based like some old Arcade combat games. Initially, the setting including the characters’ Health Points (HP), Magic Points (MP), skills (special abilities), and values of damage caused by their attacks should be well considered. Therefore, it took me one day to come up with so many elements based on the RPG games I had known. As if I were a real game designer, I started comprehensive thinking to ensure that the combat effectiveness of each character would not be too strong or too weak. For instance, I divided characters into some groups, each group belongs to the same career with the same combat role. Characters in the group Auxiliary can use their skills to cure their mates so that their HP will be restored. In a contrast, those who belong to the group Warrior can concentrate on attacking their enemies. Although we did not have an agreement about the final setting, Harry had begun to write codes of the mini-game based on Python. I believed we will make great progress soon.</p>
<p>In conclusion, as usual, this week was still fulfilling but busy. Nevertheless, I need to hurry up and finish Chapter 1 as soon as possible so that there will be more time to deal with the mini- game.</p>
</div>
</div>
</div>
</li>
<li>
<div class="list_inner">
<div class="image">
<img src="img/thumbs/1-1.jpg" alt="" />
<div class="main" data-img-url="img/news/devlog5.png"></div>
<a class="edina_tm_full_link" href="#"></a>
</div>
<div class="news_details">
<span>28 September,2021 <a href="#">The Courage</a></span>
<h3 class="title"><a href="#">Harry Wang</a></h3>
</div>
<div class="main_content">
<div class="descriptions">
<p class="bigger">This week, we kept on working with the coding for our visual novel, which almost drove me crazy.</p>
<img src="img/news/b.png">
<p>This is a screen shot of the code in first chapter, and until now (without some sound effect and voice) it is already 334 lines of code.</p>
<br>
<p>You can imagine how much our work would be… we have 13 chapter in total (separated into two main story lines), which at least we are going to have 10,000 lines of code. Also, because we wanted to add some extra ending to our script, so the actual code may be even higher than that.</p>
<br>
<p>However, when the first chapter (Written by Harry) and the prologue (By Tien), a great sense of satisfaction came from the product that we have gained.</p>
<br>
<p>Also, during the Mid-Autumn Festival, almost all of the illustrators handed their work to us, I’ll show a few pics below.</p>
<img src="img/news/a.png">
<p>Which offered us courage and brave to keep on coding. (๐॔˃̶ᗜ˂̶๐॓)
We also met a lot of problems to solve in the code. For stance, the transformation of pictures and movement.</p>
<br>
<p>Which cost us two hours to start from zero, and gradually reached the effect we wanted. Although the way to success is still long, but I’ll keep on going!</p>
<div class="quotebox">
<p>Most photographers find it hard to see interesting pictures in places in which they are most familiar. A trip somewhere new seems always exactly what our photography needed, as shooting away from home consistently inspires us to new artistic heights.</p>
</div>
<p>Pretend everything is new and that you haven’t seen it before, and then you will be free to notice the leading lines, the places where one edge meets another in delightful geometric harmony, and how the ordinary things in the kitchen are transformed when the light is on or off.</p>
<p>The trick here is to look slowly, and then look again. Take the time to look in detail and to look at the same thing from different angles, with different light, long lenses and wide lenses. Then move to the left a bit. You may never feel the need to leave the house again.</p>
</div>
</div>
</div>
</li>
<li>
<div class="list_inner">
<div class="image">
<img src="img/thumbs/1-1.jpg" alt="" />
<div class="main" data-img-url="img/news/devlog6.png"></div>
<a class="edina_tm_full_link" href="#"></a>
</div>
<div class="news_details">
<span>29 September,2021 <a href="#">Busy Time</a></span>
<h3 class="title"><a href="#">Emilia Fan</a></h3>
</div>
<div class="main_content">
<div class="descriptions">
<p>This week, I had a deeper understanding of programming. I have preliminarily learned the function calculation in programming, and can understand the principle of calculator completed by programming. This is a great achievement in my programming career, and it symbolizes the continuous progress of my programming knowledge.This week I was still working on the script for my game, and rereading it made me understand the story a lot better. Over the next week, I will be voicing characters in the game. I believe that my understanding of the script will be more helpful to my dubbing, so that I can make the characters more vivid and vivid.</p>
<br>
<p>During this week, I need to prepare for my upcoming IELTS exam. I did a lot of problems, and I did a bunch of exercises. Although I am not sure that I can get my ideal score, I believe that I will make some progress through these studies.</p>
<br>
<p>This week is Mid-Autumn Festival holiday, and the first day of the holiday is also my birthday. I bought a cake and received a gift from my friend. We went to a game arcade and sang at a KTV together. We had a big dinner together in the evening.</p>
<br>
<p>Every birthday is memorable to me, but this one is an honor to spend with him. On the last day of the holiday, I plan to go to the Comic-con to play with my friends. After HIGH school, I rarely went to Comic-con. Although I love animation, busy study also compressed my time. It's a good chance to see my friends again and I will cherish it
</p>
</div>
</div>
</div>
</li>
</ul>
<a class="prev_button" href="#"><span></span></a>
<a class="next_button" href="#"><span></span></a>
</div>
</div>
</div>
</div>
<!-- /NEWS -->
<!-- CONTACT -->
<div class="edina_tm_contact" id="contact">
<div class="container">
<div class="edina_tm_title">
<h3>Contact</h3>
<p>We are always be <b>open-minded</b> to receive any opinions or comments to our product.</p>
<p>We are also happy to have the reflections of the bugs of the game as well. </p>
</div>
<div class="extra_info">
<ul class="wrapper">
<li class="wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.2s">
<div class="list_inner">
<h3><img class="svg custom" src="img/svg/email.png" alt="" /> Email:</h3>
<ul class="in">
<li><a href="https://outlook.live.com/mail/0/">wangrundonghy@gmail.com</a></li>
</ul>
</div>
</li>
<li class="wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.4s">
<div class="list_inner">
<h3><img class="svg custom" src="img/svg/address.png" alt="" /> Address:</h3>
<ul class="in">
<li>
<a href="pdf/amCharts.pixelMap.html">Shijiazhuang, SDFZ, Hebei</a>
</li>
</ul>
</div>
</li>
<li class="wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.6s">
<div class="list_inner">
<h3><img class="svg custom" src="img/svg/internet.png" alt="" /> Official Website</h3>
<ul class="in">
<li><a href="https://2016tiendu.github.io/">ATRC Website</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- /CONTACT -->
<div class="edina_tm_portfolio" id="download">
<div class="container">
<div class="edina_tm_title">
<h3>Download</h3>
<p>Click The Button Below to Get The Game and Novel</p>
</div>
<div class="portfolio_inner wow fadeInLeft" data-wow-duration="1s">
<div class="my_carousel gallery_zoom">
<ul class="owl-carousel">
<li>
<div class="list_inner">
<div class="image">
<img src="img/thumbs/1-1.jpg" alt="" />
<div class="main" data-img-url="img/portfolio/8.png"></div>
</div>
<div class="details">
<h3><a href="pdf/The Taboo Book-Eunice.pdf" download="The Taboo Book-Eunice.pdf">Novel</a></h3>
<span><a href="#">Eunice</a></span>
</div>
</div>
</li>
<li>
<div class="list_inner">
<div class="image">
<img src="img/thumbs/1-1.jpg" alt="" />
<div class="main" data-img-url="img/portfolio/9.png"></div>
</div>
<div class="details">
<h3><a href="pdf/The Taboo Book-Kiyohime.pdf" download="The Taboo Book-Kiyohime.pdf">Novel</a></h3>
<span><a href="#">Kiyohime</a></span>
</div>
</div>
</li>
<li>
<div class="list_inner">
<div class="image">
<img src="img/thumbs/1-1.jpg" alt="" />
<div class="main" data-img-url="img/portfolio/10.png"></div>
</div>
<div class="details">
<h3><a href="https://github.com/HyHydromechanics/The-Taboo-Book/releases/download/Game1.1/TheTabooBook-1.1.zip">Game</a></h3>
<span><a href="https://github.com/HyHydromechanics/The-Taboo-Book/releases/download/Game1.1/TheTabooBook-1.1.zip">The Taboo Book Game</a></span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- PORTFOLIO -->
</div>
<!-- /MAINPART -->
</div>
<!-- / WRAPPER ALL -->
<!-- SCRIPTS -->
<script src="js/jquery.js"></script>
<!--[if lt IE 10]> <script type="text/javascript" src="js/ie8.js"></script> <![endif]-->
<script src="js/plugins.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5bpEs3xlB8vhxNFErwoo3MXR64uavf6Y&callback=initMap"></script>
<script src="js/init.js"></script>
<!-- /SCRIPTS -->
<script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
<script type="text/javascript">
var a_idx = 0;7
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = ["The", "Taboo", "Book", "Kito", 'Kiyohime', "Eunice", "Ryoko"];
var $i = $("<span></span>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 10,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
<script>
(function emojiCursor() {
var possibleEmoji = ["."];
var width = window.innerWidth;
var height = window.innerHeight;
var cursor = {x: width/2, y: width/2};
var particles = [];
function init() {
bindEvents();
loop();
}
// Bind events that are needed
function bindEvents() {
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('touchmove', onTouchMove);
document.addEventListener('touchstart', onTouchMove);
window.addEventListener('resize', onWindowResize);
}
function onWindowResize(e) {
width = window.innerWidth;
height = window.innerHeight;
}
function onTouchMove(e) {
if( e.touches.length > 0 ) {
for( var i = 0; i < e.touches.length; i++ ) {
addParticle( e.touches[i].clientX, e.touches[i].clientY, possibleEmoji[Math.floor(Math.random()*possibleEmoji.length)]);
}
}
}
function onMouseMove(e) {
cursor.x = e.clientX;
cursor.y = e.clientY;
addParticle( cursor.x, cursor.y, possibleEmoji[Math.floor(Math.random()*possibleEmoji.length)]);
}
function addParticle(x, y, character) {
var particle = new Particle();
particle.init(x, y, character);
particles.push(particle);
}
function updateParticles() {
// Updated
for( var i = 0; i < particles.length; i++ ) {
particles[i].update();
}
// Remove dead particles
for( var i = particles.length -1; i >= 0; i-- ) {
if( particles[i].lifeSpan < 0 ) {
particles[i].die();
particles.splice(i, 1);
}
}
}
function loop() {
requestAnimationFrame(loop);
updateParticles();
}
/**
* Particles
*/
function Particle() {
this.lifeSpan = 120; //ms
this.initialStyles ={
"position": "fixed",
"top": "0",
"display": "block",
"pointerEvents": "none",
"z-index": "9999",
"fontSize": "18px",
"will-change": "transform"
};
this.init = function(x, y, character) {
this.velocity = {
x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
y: 1
};
this.position = {x: x - 10, y: y - 20};
this.element = document.createElement('span');
this.element.innerHTML = character;