-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathproject-capstone.html
276 lines (271 loc) · 11.6 KB
/
project-capstone.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
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>University Capstone Project</title>
<meta name="description" content="University Capstone Project" />
<link rel="stylesheet" href="css/style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700;900&display=swap"
rel="stylesheet"
/>
</head>
<body>
<header class="header">
<div class="header__content">
<div class="header__logo-container">
<div class="header__logo-img-cont">
<img
src="./assets/png/myPic.png"
alt="a picture of my face!"
class="header__logo-img"
/>
</div>
<span class="header__logo-sub">John Busse</span>
</div>
<div class="header__main">
<ul class="header__links">
<li class="header__link-wrapper">
<a href="./index.html" class="header__link"> Home </a>
</li>
<li class="header__link-wrapper">
<a href="./index.html#about" class="header__link">About </a>
</li>
<li class="header__link-wrapper">
<a href="./index.html#projects" class="header__link">
Projects
</a>
</li>
<li class="header__link-wrapper">
<a href="./JBusseResume.pdf" class="header__link"> My resume (.pdf)
</a>
</li>
<!--<li class="header__link-wrapper">
<a href="./index.html#contact" class="header__link"> Contact </a>
</li>-->
</ul>
<div class="header__main-ham-menu-cont">
<img
src="./assets/svg/ham-menu.svg"
alt="hamburger menu"
class="header__main-ham-menu"
/>
<img
src="./assets/svg/ham-menu-close.svg"
alt="hamburger menu close"
class="header__main-ham-menu-close d-none"
/>
</div>
</div>
</div>
<div class="header__sm-menu">
<div class="header__sm-menu-content">
<ul class="header__sm-menu-links">
<li class="header__sm-menu-link">
<a href="./index.html"> Home </a>
</li>
<li class="header__sm-menu-link">
<a href="./index.html#about"> About </a>
</li>
<li class="header__sm-menu-link">
<a href="./index.html#projects"> Projects </a>
</li>
<li class="header__sm-menu-link">
<a href="./JBusseResume.pdf"> My resume (.pdf)
</a>
</li>
<!--<li class="header__sm-menu-link">
<a href="./index.html#contact"> Contact </a>
</li>-->
</ul>
</div>
</div>
</header>
<section class="project-cs-hero">
<div class="project-cs-hero__content">
<h1 class="heading-primary">Rossliad: Kingdom of Shadows</h1>
<div class="project-cs-hero__info">
<p class="text-primary">
My University capstone project, a role-playing game built in
Unreal Engine 5 focused on implementing the combat of the Dungeons
& Dragons 5th Edition ruleset
</p>
</div>
<!--Live Link button-->
<!--<div class="project-cs-hero__cta">
<a href="#" class="btn btn--bg" target="_blank">Live Link</a>
</div>-->
</div>
</section>
<section class="project-details">
<div class="main-container">
<div class="project-details__content">
<div class="project-details__content-main">
<div class="project-details__desc">
<h3 class="project-details__content-title">Project Overview</h3>
<p class="project-details__desc-para">
My role in the project is focused on implementing the UI, as well as
handling integration of character sheet components (including statistics,
inventory, and equipment). I also handled the design of the first level, and assisted
in developing a grid-based pathfinding system, and enemy AI behavior tree logic.
</p>
<p class="project-details__desc-para">
This project was completed at the conclusion of the Spring 2023 semester at UNR.
It was demonstrated on May 5th, 2023 as part of UNR's Innovation Day showcase of
capstone projects for the College of Engineering.
</p>
</div>
<div class="project-details__showcase-img-cont">
<img
src="./assets/RossProject/RossMenu.png"
alt="The main menu, with options to start a new game, load game, options, credits, and quit."
class="project-details__showcase-img"/>
<p class="project-details__desc-para">
An image of the main menu, with options to start a new game, load a previous game, modify game options
show the credits, and quit the game.
</p>
</div>
<div class="project-details__showcase-img-cont">
<img
src="./assets/RossProject/Capstone-LevelInteraction.gif"
alt="A demonstration of level interaction. The player interacts with a battleaxe on the table to pick it up, then
interacts with a glowing barrel to take items from it."
class="project-details__showcase-img"/>
<p class="project-details__desc-para">
A demonstration of the level interaction system. Interacting with an inventory item will collect it,
adding it to the player's inventory. Interacting with a container will let the player view the items within and take them.
</p>
</div>
<div class="project-details__showcase-img-cont">
<img
src="./assets/RossProject/Capstone-Inventory2.gif"
alt="The Character Sheet interface. Demonstrates character statistics, equipment, and inventory."
class="project-details__showcase-img"/>
<p class="project-details__desc-para">
A demonstration of the character sheet inventory, showing character statistics, equipment, and inventory.
This system is utilizing a drag-and-drop interface to let the user reorganize their inventory, and equip items.
</p>
</div>
<div class="project-details__showcase-img-cont">
<img
src="./assets/RossProject/RossCombat.png"
alt="The Combat user interface. Demonstrates a turn tracker, and options for actions, movement, inventory, and ending a turn."
class="project-details__showcase-img"
/>
<p class="project-details__desc-para">
This is the primary combat interface. This interface includes a character tracker (top right), Dice roll tracker (top left)
and buttons allowing the player to take an action, access inventory, or end the turn.
</p>
</div>
<div class="project-details__showcase-img-cont">
<img
src="./assets/RossProject/RossCombat1.png"
alt="The Combat action submenu. Demonstrates a character tracker, dice log, and character actions including movement, attacking, dashing, and the bonus actions
Second Wind and Action Surge."
class="project-details__showcase-img"
/>
<p class="project-details__desc-para">
This is the combat interface action submenu. This interface includes a description box and action buttons,
allowing the player to move, attack, dash, or take bonus actions like second wind and action surge.
</p>
</div>
<!--<div class="project-details__links">
<h3 class="project-details__content-title">See Live</h3>
<a
href="#"
class="btn btn--med btn--theme project-details__links-btn"
target="_blank"
>Live Link</a
>
<a
href="#"
class="btn btn--med btn--theme-inv project-details__links-btn"
target="_blank"
>Code Link</a
>
</div>-->
</div>
</div>
</div>
</section>
<footer class="main-footer">
<div class="main-container">
<div class="main-footer__upper">
<div class="main-footer__row main-footer__row-1">
<h2 class="heading heading-sm main-footer__heading-sm">
<span>Social</span>
</h2>
<div class="main-footer__social-cont">
<!--linkedin-->
<a target="_blank" rel="noreferrer" href="https://www.linkedin.com/in/j-a-busse/">
<img
class="main-footer__icon"
src="./assets/png/linkedin-ico.png"
alt="icon"
/>
</a>
<!--github-->
<!--<a target="_blank" rel="noreferrer" href="#">
<img
class="main-footer__icon"
src="./assets/png/github-ico.png"
alt="icon"
/>
</a>-->
<!--twitter-->
<!--<a target="_blank" rel="noreferrer" href="#">
<img
class="main-footer__icon"
src="./assets/png/twitter-ico.png"
alt="icon"
/>
</a>-->
<!--YouTube-->
<!--<a target="_blank" rel="noreferrer" href="#">
<img
class="main-footer__icon"
src="./assets/png/yt-ico.png"
alt="icon"
/>
</a>-->
<!--Instagram-->
<!--<a target="_blank" rel="noreferrer" href="#">
<img
class="main-footer__icon main-footer__icon--mr-none"
src="./assets/png/insta-ico.png"
alt="icon"
/>
</a>-->
<!--itch.io-->
<a target="_blank" rel="noreferrer" href="https://john-busse.itch.io/">
<img
class="main-footer__icon main-footer__icon--mr-none"
src="./assets/png/itch-ico.png"
alt="icon"
/>
</a>
</div>
</div>
<div class="main-footer__row main-footer__row-2">
<h4 class="heading heading-sm text-lt">John Busse</h4>
<p class="main-footer__short-desc">
I can be emailed at [email protected]
</p>
</div>
</div>
<!-- If you give me some credit or shoutout here by linking to my website, then it will be a big thing for me and will help me a lot :) -->
<div class="main-footer__lower">
© Copyright 2021. Made by
<a rel="noreferrer" target="_blank" href="https://rammaheshwari.com"
>Ram Maheshwari</a
>
</div>
</div>
</footer>
<script src="./index.js"></script>
</body>
</html>