-
Notifications
You must be signed in to change notification settings - Fork 0
/
spaceBeatCheckerindex.html
183 lines (149 loc) · 6.55 KB
/
spaceBeatCheckerindex.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
<!DOCTYPE HTML>
<!--
Phantom by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>BeatSpace Checker</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>
<link rel="icon" href="images/logo.svg" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-QL94LWVWCN"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-QL94LWVWCN');
</script>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<div class="inner">
<!-- Logo -->
<a href="index.html" class="logo">
<span class="symbol"><img src="images/logo.svg" alt="" /></span><span class="title">Fernanda Robles</span>
</a>
</div>
</header>
<!-- Main -->
<div id="main">
<div class="inner">
<h1>BeatSpace Checker</h1>
<center>
<iframe width="560" height="315" src="https://www.youtube.com/embed/UMu_MWFd4xM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</center>
<center>
<a href="https://ditacool1234.itch.io/beatspace-checker">Click here to visit Itch.io and download!</a>
</center>
<h2>Motivation</h2>
<p>
BeatSpace Checker is the result of a 3-month production for the "Develop at Ubisoft 2023" program.
The prompt for this challenge was to create a 1-button game with the theme of "crowded spaces" entirely in C++.
</p>
<p>
Drawing inspiration from combos in fighting games, BeatSpace Checker requires players to master precise timing needed to chain these moves seamlessly.
By incorporating rhythm, the game introduces a natural awareness of timing that allows players to unlock a multitude of actions using a single button,
adding a layer of depth and strategy to the gameplay.
</p>
<h2>Node Class Architecture</h2>
<p>
I immediately drew inspiration from Godot's Node structure,
which I find intuitive for controlling the information of linked objects.
In BeatSpace Checker, I implemented nodes to manage shared spatial information
like position and scale, similar to the structure seen in Fig.1.
</p>
<ul>
Nodes:
<li>Will always have a transform component.</li>
<li>Will always be renderable.</li>
<li>Will always transfer its transform component to its children.</li>
<li>Will always transfer its update calls.</li>
<li>Will always transfer its render calls.</li>
<li>Will always do memory management of their children upon destruction.</li>
Limitations:
<li>Only one child per type is allowed.</li>
<li>Systems processing can't transfer beyond the most immediate generation of children. (As seen in Fig.2)</li>
</ul>
<center>
<figure>
<img src="images/imagesSpaceBeatChecker/picFunctionPropagation.png" alt="" style="width:40%">
<figcaption>Fig.2 - Function propagation.</figcaption>
</figure>
</center>
<h2>Song Node class</h2>
<p>
To address a timer coherence problem, we analyzed the drift between a computer's timer and a human tracking the song's timer
(pressing to the apparent beat of the song), as depicted in Fig.4.
</p>
<center>
<figure>
<img src="images/imagesSpaceBeatChecker/picDrift.png" alt="" style="width:80%">
<figcaption>Fig.4 - Drift between computer's beat count and the song's beat count.</figcaption>
</figure>
</center>
<p>
As we calculated the time drift as (Song's count - Computer's count), and the difference is dominantly positive, we can conclude the song's count is delaying in comparaison to the computer's count.
</p>
<p>
But hope is not lost! We can also identify, at the beggining of the song the drift is almost negligable within the range of 0 s and 40 s! If we simulate a loop within this range (0 s to 16s),
we find the results from Fig.5.
</p>
<center>
<figure>
<img src="images/imagesSpaceBeatChecker/picCorrectedDrift.png" alt="" style="width:80%">
<figcaption>Fig.5 - Corrected Drift.</figcaption>
</figure>
</center>
<p>
Based on this information, we made the following design decision: we will keep the song tracks within a range of 0 s to 16 s and loop over them. This approach allows us to reinitialize counters and take advantage of the fact that at the beginning, the drift is very small.
This means that each sound source will need its own counter so we can maximize coherence between them.
</p>
<p>
The Song Node is not an Entity Node, because it behaves differently. They can't be processed with the same systems, althought they share some behaviors given their Node nature.
</p>
</div>
</div>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<section>
<h2>Follow me!</h2>
<ul class="icons">
<ul class="icons">
<li><a href="https://www.linkedin.com/in/fernandarobles1234/" class="icon brands style2 fa-linkedin"><span class="label">LinkedIn</span></a></li>
<li><a href="https://github.com/FernandaRobles1234" class="icon brands style2 fa-github"><span class="label">GitHub</span></a></li>
</ul>
</ul>
</section>
<ul class="copyright">
<li>© Fernanda Robles. All rights reserved</li>
<li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.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>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightElement(block);
});
});
</script>
</body>
</html>