fizzara.github.io/TrainQuest.html at main · fizzara/fizzara.github.io

History

149 lines (126 loc) · 9.68 KB

Raw

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

<!DOCTYPE html>

<head>

<title> TrainQuest Work | Fizza Ahmed </title>

</head>

<body>

<a href="#main" class="skip"> Skip to Main Content </a>

<span class="name"> <a href="index.html"> fizza ahmed </a></span>

<button class="header-category dropdown-button" > Works </button>

<li><a href="https://fizzara.github.io/art"> Art & Design </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>

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

<h1 style="margin-top: 40px"> TRAINQUEST </h1>

<h2 style="font-size: 1.5em"> Augmented Reality group project at Toronto Metropolitan University for the program Master of Digital Media under Dr. Naimul Khan </h2>

<p style="font-size: 1em"><a href="#prototype"><i> Jump directly to Final Product </i></a></p>

<p>

This game was created over the course of a semester as a group of 6 students. The idea started as a way to keep children interested in physical toys, and in building with their hands. The original concept started as a personal project, where children could use wooden train blocks to build a course, and the application would scan the tracks and display a train the user could customize riding along the tracks. I consulted my professor if this would work for the class, and he suggested that we make it more interactive and for an older audience, as it would be difficult to design for children who wouldn't be able to come in. Thus, the idea for TrainQuest was born.

</p>

<p> TrainQuest became an engaging and turn-based AR card game. The game puts the two players as the driver or the saboteur, with the driver trying to improve the customer experience (happiness) while the saboteur is trying to destroy it. The game's goal is for the driver to get as much happiness value from the customer as possible at the end of the game, while the saboteur aims to reduce the customer's happiness as much as possible. </p>

<p>To play the game, users place cards on a table and scan them with their devices. These cards are either track cards, advantage/disadvantage cards, or wild cards. Track cards show the game where to place the train model, advantage and disadvantage cards add or remove happiness points, and wild cards each have their own effects. We created a rule sheet to quickly outline a quick start to the game, as seen below. </p>

<h3 style="text-decoration: underline;margin-top: 40px;"> <i>Storyboarding</i> </h3>

<p style="flex-basis: 50%; padding-top: 20px"> To begin, and as proof of concept, we outlined a storyboard of how the game would work. This included how it would be set up, how turns would work, and how wins and losses would be displayed. We also outlined a Needs Analysis, why AR is used for the game, and a roadmap for the semester. </p>

</div>

<h3 style="text-decoration: underline;margin-top: 40px;"> <i>Cards</i> </h3>

</p>

</div>

</div>

</div>

</div>

</div>

</div>

<p style="max-width: 60%;"> As this is a card game, obviously cards had to be designed. Each card has an individual but similar design so that they could be recognized by Unity as individual assets. Each card also had a 3D model assigned to it, which would hover over the card to add more fun AR elements to the game. The cards have borders, but no visual numbers. This is to add a further element of AR to the game. Players can scan their own cards to see the value, but never have to worry about their opponent seeing what is in their hand. </p>

</div>

<h3 style="text-decoration: underline;margin-top: 40px;"> <i>Final Demonstration</i> </h3>

<h3 style="text-decoration: underline;margin-top: 40px;"> <i>Final Project Files</i> </h3>

<p> View the final project files on <a href="https://github.com/orekizh/TrainQuest0404_02/tree/main">Github</a>. These include the Unity files, C++ code files, and assets.</p>

<h3 style="text-decoration: underline;margin-top: 40px;"> <i>Final Report</i> </h3>

<p> Read our Final Report, detailing our motivation, technical details, lessons learned, and future direction for the project. </p>

</main>

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

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

<p style="margin: 0px;"> Reach out by </p>

<ul>

<li id="foot_email"><a href="mailto:[email protected]"> ✉ 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>

var slideIndex = [1, 1];

var slideId = ["slides8"]

var dotsId = ["dot8"]

showSlides(1, 0);

</script>

</body>

</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FilesExpand file tree

TrainQuest.html

Latest commit

History

TrainQuest.html

File metadata and controls