-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathwormgame.html
More file actions
158 lines (150 loc) · 6.76 KB
/
wormgame.html
File metadata and controls
158 lines (150 loc) · 6.76 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--CSS Styles -->
<link rel="stylesheet" href="css/styles.css" />
<!-- Favicons -->
<!--<link
rel="apple-touch-icon"
sizes="180x180"
href="assets/icons/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="assets/icons/favicon-32x32.png"
/>->>
<!-- Animate CSS CDN -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<title>Funny Worm Game</title>
</head>
<body class="gamepage">
<nav>
<ul class="navigation">
<li><a href="index.html">Home</a></li>
<div class="dropdown">
<button class="dropbtn nav-link"><a href="index.html#projects">Stuff I've Made</a>
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="hookfoot.html" class="nav-link">Captain Hookfoot</a>
<a href="visvi.html" class="nav-link">Visvi</a>
<a href="wormgame.html" class="nav-link">Funny Worm Game</a>
<a href="bearswithguns.html" class="nav-link">Bears with Guns</a>
<a href="eden.html" class="nav-link">EDEN</a>
<a href="thrillertheater.html" class="nav-link">Thriller Theater</a>
<a href="shadow.html" class="nav-link">Shadow Mesh Generator</a>
<a href="graphics.html" class="nav-link">Graphics Programming</a>
<a href="wilderness.html" class="nav-link">Wilderness Supervision</a>
<a href="bestbefore.html" class="nav-link">Best Before 90 Seconds</a>
<a href="lucifur.html" class="nav-link">Lucifur</a>
</div>
</div>
<!--<li><a href="index#contact">Contact</a></li>-->
<li><a href="Demetrius Nekos Resume.pdf">Resume</a></li>
</ul>
<button class="burger-menu" id="burger-menu">
<ion-icon class="bars" name="menu-outline"></ion-icon>
</button>
</nav>
<main>
<div class="wrapper">
<div class="left">
<div class="info">
<h1>Funny Worm Game</h1>
<p>Funny Worm Game is a 2D physics platformer in which the player controls a worm to maneuver around the level, grabbing, eating, and jumping as they go. It was made for my Game Studio 1 class in the spring of 2021 with a team of seven people over a three week period. The game is inspired by physics platformers like <i>I am Bread</i> and <i>QWOP</i> and tries to capture the feel of fighting againt the character in a fun, goofy, and enjoyable way. As such, the primary player controller was the game's biggest priority</p>
</div>
<div class="info">
<h2>Features/Things I built:</h2>
<ul class="work-done">
<li>Player controller creation</li>
<li>Animation rigging</li>
<li>Physics and controls</li>
<li>Level progression</li>
<li>UI/UX implementation</li>
</ul>
</div>
</div>
<div class="right">
<p class="itch">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Ol77avBbxzc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</p>
<iframe frameborder="0" src="https://itch.io/embed/924780" width="552" height="167"><a href="https://dnekos.itch.io/funny-worm">Funny Worm Game by Dnekos</a></iframe>
<div class="github-card" data-github="Dnekos/Funny-Worm-Game" data-width="400" data-height="" data-theme="default"></div>
<script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script>
</div>
</div>
<div class="wrapper">
<div class="left">
<div class="info">
<h2>Player Controller and Movement</h1>
<p>The player controller was an interesting and fun challenge as the movement and feel required for a physics worm is a lot different from a normal physics character. I went through many iterations, usually focusing on different ways to connect segmented physics bodies. During the first week of development I created seven different prototypes before selecting the most promising and continuing from there. One version used spring joints between each segment, which didn't work well at all.</p>
</div>
</div>
<div class="right">
<img src="img/firstmove_worm.gif">
<center>The very first model of the worm's movement</center>
</div>
</div>
<div class="wrapper">
<div class="left">
<div class="info">
<p>The final version of the worm only has one joint, a distance joint between the head and the tail. The other body segments are held together actually by animation bones, with inverse kinematic joints holding them in place and automaticaly animating the worm to bend and stretch. Thus the player only moves the head directly, with the tail being pulled behind and the spine arranging itself to best fit between the two.</p>
</div>
</div>
<div class="right">
<img src="img/finishedmove_worm.gif">
<center>One of the first prototypes of the finalized model</center>
</div>
</div>
<div class="wrapper">
<div class="left">
<div class="info">
<p>Jumping however does have a baked in animation as the worm scrunches up, then when the key is released it ends the animation and applies force to the head, giving lift in the desired direction. Later on a visual cue would help indicate how strong the jump would be when charging, and the worm was allowed to move in the air with a 70% speed penalty, making it still a risk to jump high but giving the player enough control to platform.</p>
</div>
</div>
<div class="right">
<img src="img/finishedjump_worm.gif">
<center>The worm charging a jump.</center>
</div>
</div>
</main>
<!-- Scroll to top -->
<i class="scroll-up" id="scroll-up">
<img
src="https://img.icons8.com/color/480/000000/circled-up--v3.png"
class="socicon up-arrow"
alt="scroll-up"
/></i>
<!-- Footer section -->
<footer>
<p class="copy">© Copyright 2021</p>
<p>You can find me at:</p>
<ul class="social-links">
<li><a href="https://github.com/Dnekos">Github</a></li>
<li><a href="https://dnekos.itch.io/">Itch.io</a></li>
<li><a href="https://www.linkedin.com/in/demetrius-nekos/">LinkedIn</a></li>
</ul>
<p>Or, you can <a href="mailto:demetrius.nekos@mymail.champlain.edu">send me an email</a>.</p>
</p>
</footer>
<!-- Website scripts -->
<script src="js/app.js"></script>
<!-- Ion icons scripts -->
<script
type="module"
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
></script>
</body>
</html>