rivero7462.github.io/gorilla_bay.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
<!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/GorillaBayTitle.png" alt="GorillaBayTitle">
    </div>

    <br>

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

    <div class="gametextmargin">
        Gorilla Bay is a game-based learning platform for refugee learners, assisting in STEM topics with a focus on teaching vocabulary. The project's current
        language option is Swahili but can support all languages.

        <br><br>

        <a class="gamesubtitle">Overview:</a><br>
        <a style="color:rgb(86, 172, 52);">•</a> Modular quest and dialog systems.<br>
        <a style="color:rgb(86, 172, 52);">•</a> Player photo-taking features.<br>
        <a style="color:rgb(86, 172, 52);">•</a> Gameplay that covers STEM topics such as the solar system, physics, ecosystem, and the human body. <br>
        <a style="color:rgb(86, 172, 52);">•</a> Concepting and prototyping gameplay after brainstorming with professors from diverse academic backgrounds.<br>

        <br><br>

        <a class="gameheading">Photo-taking Mechanics</a><br>
        Enhanced the existing photo-taking mechanic by <a class="gamesubtitle">reverse-engineering</a> the camera system, enabling it to take photos of various
        objects and characters in the environment, not just quest actors. It also implements a <a class="gamesubtitle">targeting system</a> that tracks all
        photographed actors and identifies the closest one using line traces. A modular component is added to actors that can be photographed which stores
        information like dialog.

        <br><br>

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

        <br><br>

        <a class="gameheading">Quest System Development</a><br>
        A quest system was created for meaningful gameplay, guiding players through objectives tied to educational content. An <a class="gamesubtitle">actor array</a>
        is used for tracking goals, enabling quest progress to be saved and resumed, and allowing pictures to be taken multiple times for further review.
        <a class="gamesubtitle">Quest markers</a> were added to assist players in navigation, which toggle visibility when entering photo-mode.
        <a class="gamesubtitle">Interactables</a> are quest items that are not collected by taking photos, adding variety. They utilize the same base quest actor
        framework so markers and dialog work the same.

        <br><br>

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

            <div class="centertext">
                <img class="game-media" src="/images/gamedetails/GorillaBay_Markers.jpg" alt="Markers" onclick="expandImage(this)">
            </div>

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

        <br><br>

        <a class="gameheading">Character Customization</a><br>
        Programmed the <a class="gamesubtitle">character customization</a> pod allowing players to personalize their avatars. All features are categorized such as
        hair, facial features, and clothing. By employing consistent pivots for future model integration, there is limitless customization potential.

        <br><br>

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

        <br><br>
    </div>

    <div class="downloadbutton centertext btn">
        <a style="text-decoration:none;" href="https://download1580.mediafire.com/0cp5dqev5vkgiPac7mel901O5WrvPAhC9emgrf5bPNaMD1mKRrMJtMBT623GJ_aTqdRN_IhiLLMGR50N-Z0DALpNtna2BC2ucsf7uxKHgFywDMxhmeOT6h48Aiv92jqnxlQ8WMswb_WViPYeEZ_A5dIyChXRi1loUjhqSQLSQT_i/sb3zfgctf789i2k/Gorilla_Bay_Demo.zip">
            Download
        </a>
    </div>

    <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>