rivero7462.github.io/droplette.html at main · Rivero7462/rivero7462.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
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
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Alex Smith's Portfolio</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link rel="stylesheet" href="https://use.typekit.net/sge4hna.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <script src="./script.js"></script>
    </head>
<body class="home">
    <!-- Modal for displaying expanded image -->
    <div id="imageModal" class="modal" onclick="closeModal()">
        <span class="close">&times;</span>
        <img class="modal-content" id="expandedImg">
    </div>

    <!-- Header -->
    <div class="header">
        <div id="myLinks">
            <a href="/index.html" class="headerlinks">Home</a>
            <a href="/media.html" class="headerlinks">Media</a>
            <a href="/about.html" class="headerlinks">About</a>
        </div>

        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
            <i class="fa fa-bars"></i>
        </a>

        <a href="/files/AlexSmith_Resume.pdf" target="_blank" download="/files/AlexSmith_Resume.pdf" class="resume">RESUME</a>
    </div>

    <br><br><br><br>
    <!-- Title -->
    <div class="centertext">
        <img class="game-title" src="/images/gametitles/DropletteTitle.png" alt="DropletteTitle">
    </div>

    <br>

    <!-- Game Showcase -->
    <div class="centertext">
        <iframe style="width:48vw;height:27vw;border-radius:20px;" src="https://www.youtube.com/embed/gtZtfXEQ8Dw?si=dg9IIT1ySuJdOuxp" title="YouTube video player" frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
        </iframe>
    </div>

    <div class="gametextmargin">
        Droplette: A cozy puzzle platformer where players use elemental abilities to manipulate the environment and rescue their captured friend.

        <br><br>

        <a class="gamesubtitle">Overview:</a><br>
        <a style="color:rgb(86, 172, 52);">•</a> Created player's movement and projectile features for four abilities.<br>
        <a style="color:rgb(86, 172, 52);">•</a> Environmental puzzles such as weighable systems and anti-gravity ramps.<br>
        <a style="color:rgb(86, 172, 52);">•</a> Collaborating with designers to implement gameplay, models, animations, and music.<br>
        <a style="color:rgb(86, 172, 52);">•</a> Bug fixing player, gameplay, and boss AI.<br>
        <a style="color:rgb(86, 172, 52);">•</a> Saving and loading integration with save files.<br>
        <a style="color:rgb(86, 172, 52);">•</a> Windows, Linux, and Mac builds shipped to Steam including achievements.<br>

        <br>
        <br>

        <a class="gameheading">Player Abilities:</a><br>
        Implemented the core movement and projectile mechanics for 4 distinct abilities. Each ability interacts uniquely with the environment,
        encouraging players to experiment on the surroundings. <a class="gamesubtitle">Water</a> offers versatile mobility
        through dashes and double jumps, while <a class="gamesubtitle">mud</a> emphasizes physics-based gameplay with a ball form. <a class="gamesubtitle">Ice</a>
        slows down time to create precision-based puzzles and platforming. <a class="gamesubtitle">Cloud</a> introduces late-game traversal
        by transforming the player into a projectile, with intangibility to navigate through relevant obstacles.

        <br>
        <br>

        <div class="game-image-grid">
            <div class="centertext">
                <img class="game-media" src="/images/gamedetails/Droplette_Water.gif" alt="WaterGif" onclick="expandImage(this)">
            </div>

            <div class="centertext">
                <img class="game-media" src="/images/gamedetails/Droplette_Mud.gif" alt="MudGif" onclick="expandImage(this)">
            </div>

            <div class="centertext">
                <img class="game-media" src="/images/gamedetails/Droplette_Ice.gif" alt="IceGif" onclick="expandImage(this)">
            </div>

            <div class="centertext">
                <img class="game-media" src="/images/gamedetails/Droplette_Cloud.gif" alt="CloudGif" onclick="expandImage(this)">
            </div>
        </div>

        <br>
        <br>

        <a class="gameheading">Environmental Puzzles</a><br>

        Environmental puzzles were designed to leverage the player's elemental abilities. A <a class="gamesubtitle">weighable system</a> used in pulleys and
        unstable setpieces react to mud projectiles, calculating the mud quantity and adjusting for various positions. <a class="gamesubtitle">Anti-gravity ramps</a>
        use splines for flexibility. They utilize floating pawn movement to attach the player to a ramp's surface, reverting to physics when detached.
        <a class="gamesubtitle">Pipes</a> also use splines for flexibility, featuring adjustable variables that control suction, and its intensity. During suction,
        it takes in projectiles or the player's mud ball form and shoots them out of the other end, creating momentum and time-based puzzles; additionally, they
        serve as an engaging and dynamic means of movement.

        <br>
        <br>

        <div class="game-image-grid">
            <div class="centertext">
                <img class="game-media" src="/images/gamedetails/Droplette_Pulley.gif" alt="Pulley" onclick="expandImage(this)">
            </div>

            <div class="centertext">
                <img class="game-media" src="/images/gamedetails/Droplette_MudRamp.gif" alt="MudRamp" onclick="expandImage(this)">
            </div>

            <div class="centertext">
                <img class="game-media" src="/images/gamedetails/Droplette_Pipes.gif" alt="Pipes" onclick="expandImage(this)">
            </div>
        </div>

        <br><br>

        <a class="gameheading">Boss Mechanics</a><br>
        The Mud Boss serves as a final test for players, featuring attacks that strategically challenge the use of the mud ability. These attacks are
        designed to offer counterattack opportunities ensuring players can use various methods to defeat it for replayability. The fight incorporates
        the fundamentals from previous puzzles to show the players wisdom and growth.

        <br><br>

        His <a class="gamesubtitle">hammer attack</a>, when dodged, spawns a mud ramp spline allowing access on top of the boss to attack.

        <div class="centertext">
            <img class="game-media" src="/images/gamedetails/Droplette_Hammer.gif" alt="MudHammer" onclick="expandImage(this)">
        </div>

        <br><br>

        <a class="gamesubtitle">Mud suction</a> works like a giant suction pipe which sucks the player in to deal a drop of damage. Shooting mud projectiles
        before getting sucked in damages the boss.

        <div class="centertext">
            <img class="game-media" src="/images/gamedetails/Droplette_Suction.gif" alt="MudSuction" onclick="expandImage(this)">
        </div>

        <br><br>

        The boss shoots <a class="gamesubtitle">mud projectiles</a> and <a class="gamesubtitle">mud walls</a> which damage the player on contact. The player
        can dodge or shoot them with water.

        <div class="game-image-grid">
            <div class="centertext">
                <img class="game-media" src="/images/gamedetails/Droplette_MudWalls.gif" alt="MudWalls" onclick="expandImage(this)">
            </div>

            <div class="centertext">
                <img class="game-media" src="/images/gamedetails/Droplette_BossProjectile.gif" alt="MudProjectile" onclick="expandImage(this)">
            </div>
        </div>

        <br><br>

        <a class="gamesubtitle">Additional Features:</a><br>
        To enhance replayability, post-game content was developed. This includes time trials, hidden collectibles, and unlockable cheats like
        infinite jumping which can be brought into a new save for NewGame+. These features cater to completionist players, providing additional
        layers of challenge and exploration.

        <br><br>

        <div>
            <iframe style="width:51vw; height:10vw;" src="https://store.steampowered.com/widget/2745370/" frameborder="0"></iframe>
        </div>

        Recruiters contact <a href="/about.html">me</a> for copy of game or access to GitHub repository to see skillset.
    </div>

    <br><br>

    <!-- Footer -->
    <footer>
        <footer-text class="float-left">
            © 2024 By Alex Smith
        </footer-text>

        <footer-text class="float-right">
            <a href="/media.html" class="footerlinks">
                Back to Top
            </a>
        </footer-text>
    </footer>

<!-- End page content -->
</body>

</html>