-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathViewFromTheTop.html
More file actions
161 lines (146 loc) · 10.3 KB
/
ViewFromTheTop.html
File metadata and controls
161 lines (146 loc) · 10.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;200;400;600;800&display=swap" rel="stylesheet">
<link rel="icon" type="image/jpg" href="Images/Favicon.png"/>
<script type="text/javascript" src="script.js"></script>
<script src="https://kit.fontawesome.com/f1c27a6a68.js" crossorigin="anonymous"></script>
<title> The View from the Top | Fizza Ahmed </title>
<meta name="description" content="Portfolio website for Fizza Ahmed">
<meta name="keywords" content="portfolio, artist, toronto, web designer, student">
<meta name="author" content="Fizza Ahmed">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="header" style="padding: 0.5em 7vw 0.7em 7vw">
<a href="#main" class="skip"> Skip to Main Content </a>
<span class="name"> <a href="index.html"> fizza ahmed </a></span>
<a href="index.html" class="logo-img"> <img src="Images/logosized.png" alt="Fizza Ahmed Logo - Home" style="max-height:2.5em"> </a>
<nav id="navigation" class="site-navigation" role="navigation">
<ul style="margin: 0px;">
<li class="headLinks">
<div class="dropdown">
<button class="header-category dropdown-button" > Works </button>
<ul class="dropdown-content">
<li><a href="https://fizzara.github.io/art"> Art & Design </a></li>
<li><a href="https://fizzara.github.io/code"> Code </a></li>
<li><a href="https://fizzara.github.io/figma"> Figma Design </a></li>
<li><a href="https://fizzara.github.io/game"> Game Design </a></li>
<li><a href="https://fizzara.github.io/thesis"> Master's Thesis </a><li>
<li><a href="https://fizzara.github.io/photography"> Photography </a></li>
<li><a href="https://fizzara.github.io/video"> Video </a></li>
</ul>
</div>
<span style="border-right: 1px solid white; padding-right: 0.5em;"></span>
<button class="header-category dropdown-button" style="padding-left: 0.5em;" onclick="location.href = 'https://fizzara.github.io/resume';"> Resumé </button>
</li>
</ul>
</nav>
</header>
<main id="main" class="works-content">
<h1 style="margin-left: 10px; margin-top: 20px"> THE VIEW FROM THE TOP </h1>
<h2 style="font-size: 1.5em; margin-left: 15px"> 4th year thesis project at McMaster University in the Multimedia program. <br style="margin-bottom: 10px"> Supervisor: Andrew Mactavish </h2>
<p> <i>The View from the Top</i> is a serious game about the cycle of anxiety. It is a single level platformer
that demonstrates how anxiety is a circle that cannot be broken out of.
</p>
<p>
This game was created over the course of a school year, from idea conception in October, to game creation by March.
Below I have outlined my creation process.
</p>
<h3 style="text-decoration: underline;"> <i>The Pitch</i> </h3>
<div>
<p> My initial pitch for my thesis was a platformer game focused on mental health disorders, exploring various common ones such as anxiety, depression, and ADHD. The game was meant to be an exploration driven game, meant to help the viewer empathize with the character’s struggles, or to help someone experiencing such feelings feel recognized. This would be done through puzzles that make the player slow down and reflect on the experiences they are having and how they affect those with these disorders in real life.
</p>
<p> The influences for my game were Gris, Florence, Journey, and Hue. </p>
<h4> Gris </h4>
<div style="text-align: center;">
<img src="Images/ViewFromTheTop/Gris.jpg" style="max-width: 30%;" alt="Gris main character platforming in a beautiful level with hands reaching out to grasp her.">
<img src="Images/ViewFromTheTop/Gris-2.jpg" style="max-width: 30%;" alt="Gris main character in game looking down at a creature.">
<img src="Images/ViewFromTheTop/gris-3.jpg" style="max-width: 30%;" alt="Gris main character held in the palm of a giant stone lady looking down on her.">
</div>
<p> Gris was my main influence. It is a beautiful game about loss, and is something I took inspiration of many elements from, for my art style and certain gameplay mechanics.</p>
<h4> Florence </h4>
<p> Florence was less of a direct inspiration, and more inspired my content. It does such a good job addressing mental health in such a simple way, and it inspired my topic for this project. </p>
<h4> Journey </h4>
<div style="text-align: center;">
<img src="Images/ViewFromTheTop/Journey.jpg" style="max-width: 30%;" alt="Still from Journey game of two characters walking up a sand dune with a mountain in the background.">
<img src="Images/ViewFromTheTop/Journey2.jpg" style="max-width: 30%;" alt="Journey character sketches in different positions.">
<img src="Images/ViewFromTheTop/Journey3.jpg" style="max-width: 30%;" alt="Journey character standing looking at mountain and sun with scarf being blown behind them.">
</div>
<p> Journey's influence was originally aesthetic, but evolved to be inspirational of the help character in my game. While I would have loved to be able to include multiplayer such as Journey in my game, as a first time game maker it was obviously an impractical idea to say the least. What I did love was the visual of the scarf blowing behind the character, that sense of constant movement and flow. </p>
<h4> Hue </h4>
<p>Hue's influence was very strong for my inital gameplay ideas. I wanted to create puzzles that the player solved by interacting with the environment, through which they slowly understood the intention for the game. Unforunately with my beginner abilities, this never became a reality, but would be an interesting addition if I were to return to it. </p>
<a href="Additional Files/Ahmed_Pitch Notes.pdf">View my original pitch notes here for more detail.</a>
</div>
<h3 style="text-decoration: underline;"> <i>Concept Art</i> </h3>
<div class="vid" id="conceptvid">
<div class="vid-embed tlou2" alt="Embed showing 'Thesis - Concept Art' video">
<iframe width="100%" height="400" src="https://www.youtube.com/embed/dA69I6GMAvg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="vid-text">
<p> The first stage of the concept art for my thesis video game, this video shows the main character of the game, as well as the aesthetic that the environment of the game were originally to follow. Using Adobe Illustrator, I created the character and the background, and then imported them into Adobe Character Animator. In Character Animator, I rigged the character to have basic movements, to blink on command and to have her hair wave in the wind along with the background that moves.</p>
</div>
</div>
<h3 style="text-decoration: underline;"> <i>Character Design</i> </h3>
<div class="char-design">
<div class="char-container">
<div class="char-slide">
<img class="char-img" src="Images/walk.gif" style="width: 100%" alt="Walk Animation">
</div>
<div class="char-slide">
<img class="char-img" src="Images/jump.gif" style="width: 100%" alt="Jump and Fall Animation">
</div>
<div class="char-slide">
<img class="char-img" src="Images/idle.gif" style="width: 100%" alt="Idle Animation">
</div>
<button class="char-prev" onclick="addSlides(-1)">❮</button>
<button class="char-next" onclick="addSlides(1)">❯</button>
<div class="caption-container">
<p style="font-size: 1.3em" id="caption"></p>
</div>
<script>
var charSlideIndex = 1;
displaySlides(charSlideIndex);
</script>
</div>
<div class="char-text">
<p> For my game's character, I wanted someone that reflected me, influenced by the art style of the games. On reflection, my character was trying very hard to be Gris, but when you're starting out I guess you go for what you know. I created various animations for the character to be used in the game. These animations include the walk cycle, the idle animation cycle, and animations for jumping and falling. The skirt and hair flow as the character moves and as the in world wind blows by. </p>
</div>
</div>
<hr>
<h3 style="text-decoration: underline;"> <i>Final Playthrough Video</i> </h3>
<div class="vid" id="conceptvid">
<div class="vid-embed tlou2" alt="Embed showing 'Thesis - Concept Art' video">
<iframe width="100%" height="400" src="https://www.youtube.com/embed/2lL1wPwyqvI?si=axilwm-ux-UhyZ5S" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="vid-text">
<p> Watch the video to view a playthrough of The View From the Top with a voiceover explaining what is happening in the game. </p>
</div>
</div>
<hr>
<h3 style="text-decoration: underline;"> <i>Game Files</i> </h3>
<p><a href="https://github.com/fizzara/ViewFromTheTop">View the game files on GitHub here.</a></p>
<p><a href="https://github.com/fizzara/ViewFromTheTop/releases/tag/v1.0.0">Download the game's exe file here to install and try it yourself!</a></p>
</main>
<footer class="footer">
<div class="footer_name" style="display: flex; gap: 10px; font-size: 2em; align-self: center; align-items: center; font-size: 2em"> <img src="Images/logosized.png" style="max-width: 50px" alt="Fizza Ahmed Logo"> fizza ahmed </div>
<div class="footer_jump">
<p style="margin: 0px;"> Jump To </p>
<ul>
<li><a href="resume.html">My Resume</a></li>
<li><a href="" onclick="footerJump()">A Random Project</a></li>
<li><a href="thesis.html">My Master's Thesis</a></li>
</ul>
</div>
<div class="footer_reach">
<p style="margin: 0px;"> Reach out by </p>
<ul>
<li id="foot_email"><a href="mailto:fizzaahmed2000@hotmail.com"> ✉ Email</a></li>
<li><a href="linkedin.com/in/fizzara"><i class="fa-brands fa-linkedin"></i> LinkedIn</a></li>
<li><a href="https://fizzara.github.io/contact"><i class="fa-regular fa-note-sticky"></i> Contact Form</a></li>
</ul>
</div>
</footer>
</body>
</html>