-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path3d-worms-like.html
245 lines (245 loc) · 12.7 KB
/
3d-worms-like.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<title>3D Worms-like · Joe Binns</title>
<link rel="stylesheet" href="styles.css">
<link id="shortcuticon" rel="shortcut icon" href="../images/jb.svg">
</head>
<body>
<div class="model-preview">
<canvas class="webgl">
</canvas>
</div>
<div class="padding logo-wrapper">
<logo>
<a href="/" class="gradient-multiline-invert">
<h1>
<span>
Joe
<br>
Binns
</span>
</h1>
</a>
</logo>
</div>
<div class="interface">
<menu class="padding">
<optHide>
<div style="width: 100px;">
</div>
<itemAlt>
<div class="tr" style="height: 24px;">
<div class="td">
<a class="hyperimage" href="mailto:hello@joebinns.com" target="_blank"><img id="mail" src="images/mail_box_optimised.svg" alt="email" width="20" height="20"></a>
<a class="hyperimage" href="https://www.linkedin.com/in/joe-binns/" target="_blank"><img id="linkedin" src="images/linkedin_box_optimised.svg" alt="LinkedIn" width="20" height="20"></a>
</div>
</div>
<div class="tr" style="height: 24px;">
<div class="td">
<a class="hyperimage" href="https://github.com/joebinns" target="_blank"><img id="github" src="../images/github_box_optimised.svg" alt="GitHub" width="20" height="20"></a>
<a class="hyperimage" href="https://joebinns.itch.io/" target="_blank"><img id="itchdotio" src="../images/itchdotio_box_optimised.svg" alt="itch.io" width="20" height="20"></a>
<a class="hyperimage" href="https://www.youtube.com/@joebinns95/" target="_blank"><img id="youtube" src="../images/youtube_box_optimised.svg" alt="YouTube" width="20" height="20"></a>
</div>
</div>
</itemAlt>
<item>
<div class="tr" style="height: 24px; position:relative; top: 6px">
<div class="td">
<a class="hyperlink lowercase" href="./about">about</a>
</div>
</div>
<div class="tr" style="height: 24px; position:relative; top: 6px">
<div class="td">
<a class="hyperlink lowercase" href="../documents/cv/cv-joe-binns.pdf">curriculum vitae</a>
</div>
</div>
</item>
</optHide>
</menu>
<div class="top right" style="z-index: 20; padding: 30px;">
<a class="hyperimage" href="/" ><img id="back" src="../images/back.svg" alt="back" width="40" height="40"></a>
</div>
</div>
<div class="content">
<project>
<h1 class="section">
3D Worms-like
</h1>
<div class="table project-metadata">
<div class="tr">
<item class="td">
<h3>
Links
</h3>
<info>
<p>
<a class="hyperimage" href="" target="_blank" style="display: none;"><img id="websiteProj" src="../images/globe_box_optimised.svg" alt="website" width="20" height="20"></a>
<a class="hyperimage" href="https://github.com/joebinns/worms" target="_blank"><img id="githubProj" src="../images/github_box_optimised.svg" alt="GitHub" width="20" height="20"></a>
<a class="hyperimage" href="" target="_blank" style="display: none;"><img id="steamProj" src="../images/steam_box.svg" alt="Steam" width="20" height="20"></a>
<a class="hyperimage" href="" target="_blank" style="display: none;"><img id="switchProj" src="../images/switch_box.svg" alt="Nintendo Switch" width="20" height="20"></a>
<a class="hyperimage" href="https://joebinns.itch.io/3d-worms-like" target="_blank"><img id="itchdotioProj" src="../images/itchdotio_box_optimised.svg" alt="itch.io" width="20" height="20"></a>
<a class="hyperimage" href="https://youtube.com/playlist?list=PLfhw9nZBPNEVK3fsC4BPVcO-bX6TIf6AC" target="_blank"><img id="youtubeProj" src="../images/youtube_box_optimised.svg" alt="YouTube" width="20" height="20"></a>
<a class="hyperimage" href="" target="_blank" style="display: none;"><img id="documentProj" src="../images/document_box.svg" alt="document" width="20" height="20"></a>
</p>
</info>
</item>
<item class="td">
<h3>
Dates
</h3>
<info>
<p>
September 2022 — October 2022
</p>
</info>
</item>
</div>
<div class="tr">
<item class="td">
<h3>
Team
</h3>
<info>
<p>
<a class="hyperlink" href="/">Myself</a>, Programmer
<br>
<a class="hyperlink" href="mailto:clarasummerton@gmail.com" target="_blank">Clara Summerton</a>, Audio
</p>
</info>
</item>
<item class="td">
<h3>
Languages
</h3>
<info>
<p>
Unity
<br>
C#
<br>
Git
</p>
</info>
</item>
</div>
</div>
<div class="document">
<div>
<h3>
About
</h3>
<p>
An assignment based on Worms 3D, made for Futuregames' course "Game Programming with C#".
</p>
<div class="video-block">
<div class="video-wrapper">
<iframe frameborder="0" width="100%" height="100%" src="https://www.youtube.com/embed/LG2dpw9yy_M?autoplay=1&controls=0&mute=1&loop=1&playlist=LG2dpw9yy_M" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
</iframe>
</div>
<iframe width="100%" height="167" frameborder="0" src="https://itch.io/embed/1738386?dark=true" style="margin-bottom:10px;">
<a href="https://joebinns.itch.io/3d-worms-like">
3D Worms-like by joebinns
</a>
</iframe>
</div>
</div>
<details>
<summary>
Controller & Managers
</summary>
<p>
No longer pre-occupied with part-time work and University Research; this initial project at Futuregames presented itself as an opportunity for me, with the guidance of some experienced students around me, to push the envelope in terms of how I would approach games programming.
Namely, this project introduced a plethora of fancy new tools into my arsenal: Events, Scriptable Objects and Singletons.
</p>
<p>
I started off by creating the players, which just meant implementing my own <a href="./stylised-character-controller.html" class="hyperlink">Stylised Character Controller</a> with some minor adjustments.
I then set out to create a singleton turn manager. This kept track of whose turn it is, as required by the input manager.
</p>
<div class="video-block">
<div class="video-wrapper">
<iframe frameborder="0" width="100%" height="100%" src="https://www.youtube.com/embed/cWKQxPpcWVM?loop=1&playlist=cWKQxPpcWVM" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
</iframe>
</div>
</div>
</details>
<details>
<summary>
Customisation & Menus
</summary>
<p>
No party game is fit for purpose without silly names... and hats!
I used scriptable objects to store the customisable properties of each character between scenes.
Also, a pause screen!
</p>
<div class="video-block">
<div class="video-wrapper">
<iframe frameborder="0" width="100%" height="100%" src="https://www.youtube.com/embed/goXkOxxxBmk?loop=1&playlist=goXkOxxxBmk" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
</iframe>
</div>
</div>
</details>
<details>
<summary>
Weapons, a Level & Finishing Touches
</summary>
<p>
Apart from shoving your wormy foes with sheer will, I had yet to implement any weapons!
I used scriptable objects and abstraction to support weapons with varying behaviour.
As both the hats and weapons would require selecting, I had them both inherit from the Item class and implemented selecting <a href="#item-rack" class="hyperlink">there</a>.
Finally, I put together a simple level before adding some finishing touches — such as a turn timer and end game screen.
</p>
<div class="video-block">
<div class="video-wrapper">
<iframe frameborder="0" width="100%" height="100%" src="https://www.youtube.com/embed/LG2dpw9yy_M?loop=1&playlist=LG2dpw9yy_M" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
</iframe>
</div>
</div>
<details>
<summary>Items</summary>
<div id="item-rack">
<script src="https://emgithub.com/embed-v2.js?target=https%3A%2F%2Fgithub.com%2Fjoebinns%2Fworms%2Fblob%2Fmain%2FWorms%2FAssets%2FScripts%2FItems%2FItemRack.cs%23L9-L63&style=github-dark&type=code&showBorder=on&showLineNumbers=on&showCopy=on&fetchFromJsDelivr=on">
</script>
</div>
</details>
</details>
</div>
</project>
<ul class="portfolio-pieces">
<li>
<a id="scc" href="./stylised-character-controller" class="gradient-multiline">
<h2>
<portfolio-prefix>
<date>next project</date><br>
<badge>🏅🏡</badge>
</portfolio-prefix>
<portfolio-title>Stylised Character Controller</portfolio-title>
</h2>
</a>
</li>
</ul>
</div>
<p class="copyright-notice">
Copyright © 2021-2025 Joseph Alexander Binns. All rights reserved.
</p>
<div class="tint-overlay max"></div>
<div class="tint-overlay min"></div>
<script type="importmap"> {
"imports": {
"three": "https://unpkg.com/three/build/three.module.js",
"gltf-loader": "https://unpkg.com/three/examples/jsm/loaders/GLTFLoader.js",
"pass": "https://unpkg.com/three/examples/jsm/postprocessing/Pass.js",
"effect-composer": "https://unpkg.com/three/examples/jsm/postprocessing/EffectComposer.js",
"shader-pass": "https://unpkg.com/three/examples/jsm/postprocessing/ShaderPass.js",
"bloom-pass": "https://unpkg.com/three/examples/jsm/postprocessing/BloomPass.js"
}
}
</script>
<script type="module" src="src/DocumentDarkMode.js"></script>
<script type="module" src="src/DocumentDarkModePage.js"></script>
<script type="module" src="src/DocumentDarkModeMeta.js"></script>
<script type="module" src="src/Worms.js"></script>
</body>
</html>