-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfuture_scape.html
More file actions
234 lines (214 loc) · 9.9 KB
/
future_scape.html
File metadata and controls
234 lines (214 loc) · 9.9 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
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
<!DOCTYPE HTML>
<!--
Hyperspace by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Ryan Carpenter's Portfolio - Future Scape</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" /> <!-- css stylesheet -->
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Header -->
<header id="header">
<a href="index.html" class="title">Ryan's Portfolio</a>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="labyrinth_demo.html">Labyrinth Algorithm</a>
<li><a href="rogue_nebula.html">Rogue Nebula</a></li>
<li><a href="future_scape.html" class="active">Future Scape</a></li>
<li><a href="unstable_star.html">Unstable Star</a></li>
<li><a href="the_devils_diner.html">The Devil's Diner</a></li>
<li><a href="bloodlust.html">Bloodlust</a></li>
<!-- <li><a href="star_raid.html">Star Raid</a></li> (archived) -->
<!-- <li><a href="fishy_business.html">Fishy Business</a></li> (archived) -->
<!-- <li><a href="soc.html">Spirit of Calamity</a></li> (archived) -->
<li><a href="other_pj.html">Smaller Projects</a></li>
</ul>
</nav>
</header>
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
<section id="main" class="wrapper">
<div class="inner">
<!-- Project Title -->
<h1 class="major">Future Scape</h1>
<!-- Game Embed -->
<iframe class="embed" frameborder="0" src="https://itch.io/embed-upload/11313138?color=333333" allowfullscreen="" width="1000" height="700">
<a href="https://nextlab.itch.io/futurescape">Play EOSS FutureScape on itch.io</a></iframe>
<!-- Game Widget -->
<iframe class="widget" frameborder="0" src="https://itch.io/embed/2834675?border_width=0&bg_color=0098db&fg_color=ffffff&link_color=0ce6f2&border_color=252446" width="550" height="165">
<a href="https://nextlab.itch.io/futurescape">EOSS FutureScape by ASU Next Lab</a></iframe>
<!-- Small Game Widget -->
<iframe class="smallWidget" frameborder="0" src="https://itch.io/embed/2834675?bg_color=0098db&link_color=0ce6f2&border_color=ffffff" width="208" height="167">
<a href="https://nextlab.itch.io/futurescape">EOSS FutureScape by ASU Next Lab</a></iframe>
<!-- Project Summary -->
<h2>Summary</h2>
<p>
Developed for <a href="https://tech.asu.edu/">Enterprise Technologies</a>, <em>Future Scape</em> is a virtual career exploration tool designed for K-12 students.
The project features interactive minigames, each showcasing different careers such as pharmacology, manufacturing, forensic science, etc.
I specifically designed and developed the pharmacy, manufacturing, and urban planning minigames.
In the pharmacy minigame, players act as pharmacists, dispensing medications to patients within a time limit. The manufacturing minigame challenges
players to build assembly lines and create products while managing a budget. The urban planning minigame involves designing a city and
managing resources and budgeting effectively.
</p>
<!-- Gameplay Description -->
<h2>Gameplay</h2>
<p>
The gameplay varies across minigames, all accessible via portals from a main hub. Each game introduces unique challenges, from solving forensic puzzles
to managing complex economic systems and building cities. The games that I created employ a sandbox-like environment where players can
place and remove objects on a grid system without overlap, facilitated by an economy and resource system for object selection and placement.
</p>
<!-- Slideshow -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="images/future_scape_images/manufacturing_demo3.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="images/future_scape_images/pharm_demo.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="/images/future_scape_images/urban_plan_demo.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="/images/future_scape_images/biol_demo.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="/images/future_scape_images/main_hub_demo.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="/images/future_scape_images/urban_plan_demo2.png" style="width:100%">
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- Slideshow Movement Script -->
<script>
let slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
<!-- Feature List -->
<h2>Implemented Features</h2>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>XR Development Kit</td>
<td>
Leverages Unity’s XR Development Kit to create immersive VR experiences, featuring locomotion, grabbing,
raycasting, and other interactive elements suitable for a VR headset.
</td>
<td></td>
</tr>
<tr>
<td>Sandbox Building</td>
<td>
Utilized in both manufacturing and urban planning, this feature includes grid snapping and spatial memory for object placement.
The player may place and remove objects in a way that does not conflict with the placement of others. The player may rotate and
select a variety of objects with the help of a transparent green silhouette in the shape of the selected mesh.
</td>
<td></td>
</tr>
<tr>
<td>Component Linking</td>
<td>
In manufacturing, components are machines that can be linked via conveyor belts to create assembly lines.
A complex system handles items that interact with these components, input item(s) are detected and accepted if a
possible output item can be created.
</td>
</tr>
<tr>
<td>Economy Systems</td>
<td>
Both in urban planning and manufacturing, the player must manage a budget in order to purchase and place objects in the
world. Income can also be provided through passive means to help the player build quickly and prevent soft locking.
</td>
</tr>
<tr>
<td>Resource Management Systems</td>
<td>
In urban planning, managing resources is critical to making sure your city is stable and functional.
Each building has required and provided resources. Required resources must be met before a building can be taxed.
Players strategize to balance required and available resources to optimize city operations.
</td>
</tr>
<tr>
<td>Particle Systems and Shaders</td>
<td>
Particles include ambient dust in manufacturing, and fireflies in astronomy. Shaders include the portals
in the main hub room and the relay pad in urban planning. All shaders were made using Unity's shader graph.
</td>
</tr>
</tbody>
</table>
<br>
<!-- Links -->
<ul class="icons">
<li>Link to Game - <a href="https://nextlab.itch.io/futurescape">https://nextlab.itch.io/futurescape</span></a></li>
<li>Link to Proprietor's Website - <a href="https://nextlab.asu.edu/futurescape">https://nextlab.asu.edu/futurescape</span></a></li>
</ul>
</div>
</section>
</div>
<!-- Footer -->
<footer id="footer" class="wrapper alt">
<div class="inner">
<ul class="menu">
<!-- <li>Website Template By: <a href="http://html5up.net">HTML5 UP</a></li> -->
</ul>
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>