thejusunny.github.io/Dialogue.html at master · thejusunny/thejusunny.github.io · GitHub

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
<!DOCTYPE HTML>
<!--
	Hyperspace by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
	<head>
		<title>Thejus Sunny</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="assets/css/main.css" />
		<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
	</head>
	<body class="is-preload">

		<!-- Header -->
			<header id="header">
				<a  class="title">Personal project</a>
				<nav>
					<ul>
						<li><a href="#" onclick="history.go(-1)"><b>Home</b></a></li>

					</ul>
				</nav>
			</header>

		<!-- Wrapper -->
			<div id="wrapper">

				<!-- Main -->
					<section id="main" class="wrapper">
						<div class="inner">
							<h2 class="major">Dialogue system </h2>
							<span class="image fit"><iframe width="900" height="480" src="https://www.youtube.com/embed/6PuZfk_Vxuc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></span>
							<p>This Dialogue system is used to facilitate conversations in  the game between player and NPCs .The system is completely based on scriptable object architecture, coupled with delegate pattern(Events and sets). This system also lets the player make choices and has branching features. The system comes with the feature to setup subtitles to match the offset of the clips.</p>

							<p><b>Brief</b></p>
							<p>The building block of the system is a Node, a node could be :-</p>
							<p>- Dialogue<br>
								- Choice</p>
							<p>The system is classified based on sequential dialogues and relational dialogues.</p>
							<p><b>Sequential system</b></p>
							<p>Sequential system uses a dialogue sequencer class to traverse through a list of the predefined dialogue sequences or choices.
								The head of the sequencer moves as you invoke play(similar to a list traversal). </p>
							<img src="images/sequence.png"></img>
							<p><b>Relational system</b></p>
							<p>This model uses direct relation between the dialogue caster and receiver instead of  linear sequences which means there could be infinite no of branches or routes during the conversation.
								Here, each character has its own database which holds the collection of possible dialogues or choices he/she could make.
								Each node has a header packet, which contains who is it casting the dialogue to and awaits for  a response.
								Each conversation is uniquely identified by Conversation header/ start node.</p>

							<p>Below is a character database for specific level</p>
							<img src="images/relation.png"></img>


							<br><br>
							<h2 class="major">Text effects shader </h2>
							<iframe width="900" height="480" src="https://www.youtube.com/embed/TVD5TxZXYLY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
							<h3>Apporach</h3>
							<p>This required me to understand how unity processed text elements within(each character as quads). So with a custom UI shader and C# script with IVertexmodifier implemented,
								 I was able to pass cutoff data into the shader program via 2nd and 3rd texture coordinate  channels and achieve several character effects</p>
						</div>
					</section>

			</div>

		<!-- Footer -->
			<footer id="footer" class="wrapper alt">
				<div class="inner">
					<ul class="menu">
						<li>&copy; Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
					</ul>
				</div>
			</footer>

		<!-- Scripts -->
			<script src="assets/js/jquery.min.js"></script>
			<script src="assets/js/jquery.scrollex.min.js"></script>
			<script src="assets/js/jquery.scrolly.min.js"></script>
			<script src="assets/js/browser.min.js"></script>
			<script src="assets/js/breakpoints.min.js"></script>
			<script src="assets/js/util.js"></script>
			<script src="assets/js/main.js"></script>

	</body>
</html>