-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcubeclimber.html
190 lines (154 loc) · 11.2 KB
/
cubeclimber.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<title style="font-size: 60%;">Cube Climber</title>
</head>
<body style="background-color: #28282b;">
<div class="mobilemenubutton">
<div id="rcorners1" class="child" onclick="setVisible('mobile_menu')" style="width: fit-content; height: fit-content;">
<i class="material-symbols-rounded" id="" style="padding: 3px; font-size: 32px; color: aliceblue;"> menu </i>
</div>
</div>
<div id="mobile_menu" style="height: fit-content;">
<div id="rcorners1" style="width: 100%; height: fit-content; padding-bottom: 20px; background-color: #252527;">
<div>
<div class="center" id="" onclick="setInvisible('mobile_menu')" style=" width: fit-content; position: absolute; top: 10px; margin-left: 0px; user-select: none;">
<i class="material-symbols-rounded" id="navbarformat" style="color: aliceblue;"> chevron_left </i>
</div>
<div style="width: 100%; height: 100%; display: flexbox; flex-direction: column; margin-top: 55px; padding-top: 20px; text-align: center;">
<div class="m_menubutton">
<a href="index.html" class="m_menubutton" style="color: aliceblue; text-decoration: none;">
<i class="material-symbols-rounded" id="navbarformat"> Home </i>
<p style="margin: 0;"> Home </p>
</a>
</div>
<div class="m_menubutton">
<a href="about.html" style="color: aliceblue; text-decoration: none;">
<i class="material-symbols-rounded" id="navbarformat"> recent_patient </i>
<p style="margin: 0;"> Skills </p>
</a>
</div>
<div class="m_menubutton">
<a href="contact.html" class="m_menubutton" style="color: aliceblue; text-decoration: none;">
<i class="material-symbols-rounded" id="navbarformat"> contact_page </i>
<p style="margin: 0;"> Contact </p>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="socialbar" style="height: fit-content;">
<div>
<div id="abs_center" style="display: inline; flex-wrap: nowrap; flex-direction: row;">
<a href="https://github.com/NiicoNiicoDev" style="margin-right: 10px;">
<img src="images/social/githubicon.png" class="portfolioimage" alt="github" style="max-width: 32px; max-height: 32px; min-height: 32px; min-width: 32px;">
</a>
<a href="https://www.linkedin.com/in/georgewcottrell/">
<img src="images/social/linkedinIcon.png" class="portfolioimage" alt="linkedin" style=" max-width: 32px; max-height: 32px; min-height: 32px; min-width: 32px;">
</a>
</div>
</div>
</div>
<div class="rightbody" id="rightbody" style="width: 80%;">
<div class="center" style="padding-top: 40px; width:40vw; padding-left: 20px; padding-right: 20px;">
<div id="rcorners1" style="margin-bottom: 20px;">
<p id="abs_center" style="font-size:xx-large; font-weight: bolder; padding: 20px; margin: 0; text-align: center;">
Cube Climbers
</p>
</div>
</div>
<hr id="abs_center" style="width: 90%;">
<div class="center" style="width:40vw; padding-left: 20px; padding-right: 20px; margin-bottom: 40px;">
<p id="abs_center" style="font-size:large; font-weight: bold; padding: 20px; margin: 0; text-align: center;">
Cube Climbers is a hyper-casual mobile game developed for the android platform with Unity. This project was completed
as part of my final year Games Design and Implementation module at the University of Chester
</p>
<div id="abs_center">
<img src="images/portfolio/CubeClimbers/Cube Climber Feature Image.png" style="display: block; border-radius: 20px; margin-bottom: 20px; width:auto; height: auto; margin-right: 20px;" alt="Coming Soon">
</div>
</div>
<hr id="abs_center" style="width: 90%;">
<div class="center" style="padding-top: 10px; width:40vw; padding-left: 20px; padding-right: 20px;">
<div id="rcorners1" style="margin-bottom: 10px;">
<p id="abs_center" style="font-size:x-large; font-weight: bolder; padding: 5px; margin: 0; text-align: center;">
Key Features
</p>
</div>
<div>
<div id="rcorners1" style="margin-bottom: 20px;">
<p id="abs_center" style="font-size:large; font-weight: bold; padding: 5px; margin: 0; text-align: center;">
Line Rendering and Calculation
</p>
</div>
<div id="abs_center" style="display: flex; flex-direction: row;" >
<img src="images/portfolio/CubeClimbers/Screenshot 1.png" style="display: block; border-radius: 20px; margin-bottom: 20px; width:auto; height: auto; margin-right: 20px;" alt="Coming Soon">
<div style="width: 80%; min-width: 400px; max-width: 600px">
<p id="abs_center" style="font-size:large; font-weight: normal; padding: 10px; margin: 0; text-align: center; align-content: center;">
One of the big areas of development where a large amount of time was spent during this project was on the line renderer used to show the player where they would be jumping.
This was first intended as just a small feature to enable the player to have a slightly easier time when playing Cube Climbers. However, for this project we were given relatively old hardware
and had strict performance targets to meet for the final submission. This meant that drawing a varied mathetmatical line each and every frame was going to be resource intensive. This meant that I
would have to think of a more complex but efficient solution.
</p>
<p style="font-size:large; font-weight: normal; padding: 10px; padding-top: 20px; margin: 0; text-align: center;">
My solution to this ended up being my first venture into shader programming using HLSL. This meant that instead of using the in-built line renderer that is a part of the unity engine i would instead
have to calculate a number of vertices for the line and then use the GPU Cores of the hardwares mobile processor to draw this line to the screen. Once completed and tested this method resulted in a average framerate
increase of 9 frames per second across the entire game allowing me to once again meet the performance requirements outlined for this project.
</p>
</div>
</div>
</div>
<hr id="abs_center" style="width: 100%; margin-bottom: 20px;">
<div>
<div id="rcorners1" style="margin-bottom: 20px;">
<p id="abs_center" style="font-size:large; font-weight: bold; padding: 5px; margin: 0; text-align: center;">
Platform Physics
</p>
</div>
<div id="abs_center" style="display: flex; flex-direction:unset;" >
<img src="images/portfolio/CubeClimbers/Screenshot 3.png" style="display: block; border-radius: 20px; margin-bottom: 20px; width:auto; height: auto; margin-right: 20px;" alt="Coming Soon">
<div style="width: 80%; min-width: 400px; max-width: 600px">
<p id="abs_center" style="font-size:large; font-weight: normal; padding: 10px; margin: 0; text-align: center; align-content: center;">
The next large area of the development was both from a design and programatic perspective. Making the game feel challenging whilst also being somewhat unique was an important part of this project.
As again laid out in the brief for this assignment, we had to create a game with as unique of a selling point as we could. From this I came to the conclusion to create a hyper-casual but also extremely difficult
tower climbing game similar to titles such as Jump-King or Getting Over It with Bennet Foddy. The one key difference between these two titles and my game would be that mine would be much more physics based and
have a more aggresive learning curve.
</p>
<p style="font-size:large; font-weight: normal; padding: 10px; padding-top: 20px; margin: 0; text-align: center;">
From this I then planned the idea to have a total of 6 different types of platform: Standard, Bouncy, Moving, Rotating, Icy and Oily. Each of these platforms would behave a notably different way or
have significantly different physical propertites to the others. Two examples of this are the Icy platform gave the player a very small amount of grip and thus players had to carefully calculate their
landing velocity when landing on an ice platform or they would slip off. The Oily platform was similar but instead offered the player 0 grip meaning that the player would always slide off these platforms.
</p>
</div>
</div>
</div>
<!--
<hr id="abs_center" style="width: 90%;">
<div class="center" style="padding-top: 10px; width:40vw; padding-left: 20px; padding-right: 20px;">
<div id="rcorners1" style="margin-bottom: 40px;">
<p id="abs_center" style="font-size:x-large; font-weight: bolder; padding: 5px; margin: 0; text-align: center;">
Learning Points
</p>
</div>
</div>
-->
</div>
</div>
</body>
</html>
<script>
function setVisible(id) {
document.getElementById(id).style.visibility = 'visible';
document.getElementById(id).style.width = '100px'
document.getElementById('rightbody').style.opacity = '0.1'
}
function setInvisible(id) {
document.getElementById(id).style.width = '0px'
document.getElementById(id).style.visibility = 'hidden';
document.getElementById('rightbody').style.opacity = '1'
}
</script>