-
-
In-game screenshot
Inspiration
Last summer at Freshman Orientation, most of us were overwhelmed, confused, and out of place. Many buildings on campus looked similar, with only non-intuitive acronyms to differentiate them. As perplexed freshmen, we wanted a way to familiarize ourselves with our campus as soon as possible.
What it does
Our web application takes the user on a tour of Speedway. By using your arrow keys, you can guide Bevo Longhorn through the various buildings located at UT and even learn facts and tips as you visit each building.
How we built it
We first implemented a scrolling background and character movements that worked in tandem (by moving in opposite directions) to create a scrolling video game effect. Then, we created each of the buildings by hand, pixel by pixel. We then utilized event listeners and styling techniques to place all of our objects and allow interactivity, such as including pop-ups with UT facts when the buildings are clicked on.
Challenges we ran into
We struggled a lot trying to implement the top-down scrolling and making sure that our background and buildings were all properly aligned. Furthermore, we had difficulty implementing our building fact pop-ups: they would flicker for a moment or never show at all, they weren’t in the right place, and they were incorrectly layered on the buildings.
Accomplishments that we're proud of
We were able to successfully implement all of the elements that we wanted to include in the first edition of Tour Texas. For instance, we added the most significant buildings on UT campus, implemented the pop-up fact feature when users interact with buildings, allowed users to interact with the map with arrow keys, designed all of the visual artwork by hand, and animated the tour guide Bevo Longhorn.
What we learned
Our team was primarily experienced in backend development with familiarity with languages such as C, Java, and Python. Therefore, transitioning into front-end development was a bit of a struggle at first. None of us knew how to run web apps, integrate JavaScript, HTML, and CSS, or develop basic visual features. Throughout this experience, through watching tutorials and reading articles, we became more acquainted with developing features of a web application.
What's next for Tour Texas
We believe that Tour Texas still has a lot of potential. We weren’t able to include every single building at UT, so we plan on implementing all buildings and creating as accurate of a map as possible. In addition, we plan to implement media sharing into our project so new students and faculty can have a peek into their next four years. This way, current students and faculty can add photos/videos at different locations to show their favorite study spots, memories, and more. Lastly, we plan to implement Tour Texas as a mobile app, as it would maximize the practicality of our interactive map.
Log in or sign up for Devpost to join the conversation.