Project Categories

Project Setting Professional
Team Size 4 (Web), ~15 (Overall Team)
Role(s) Web Developer
Languages HTML CSS PHP JavaScript GLSL
Software/Tools Used Brackets (Editor), git (Version Control), WinSCP/Filezilla (SFTP), terminal (ssh), Vue.js (library), Parallax.js (library), Matter.js (library), jQuery (library), Tippy.js (library), Cropper.js (library)
Status Active
Time Period September 2020 - December 2020

About

Changeling is a VR mystery, first-person 3D platformer game built upon the idea of magical realism and a sense of unease and wonder. You play as Aurelia, a dream-walker whose gift is the ability to see through the eyes of anyone she touches. You are tasked with helping this family figure out what is wrong with their child, and as you contact each member, you see through the lens of their hopes and fears of what the child is.

Description from the presskit as of

Changeling was my first experience in a professional setting. I worked with a team of four to build a website from the ground up which represents the vision for the VR game Changeling, created by Xana Adhoc. This was an internship through RIT for the fall of 2020.

Changeling was also my first experience with Vue.js. After taking about a day to learn the ins and outs of Vue (while working on other things such as wireframes), I had helped organize the home page into components; I later used the component-based structure for the characters page, and have since adopted Vue for setting up the filtering system on my own site and began working with single-file components in an Electron experiment.

This was a remote internship due to the COVID-19 pandemic; we used Discord for communication, primarily using its voice chat functionality. Remotely, we worked as a team in our team voice channel throughout the day, did daily standups with the producer, and did weekly meetings with the entire team.

My Work

Overall

  • Ensure pages validate with semantic markup and have as few accessibility issues as possible
  • Aide in making pages responsive and mobile friendly
  • Setup SEO head tags such as Open Graph and meta tags, as well as robots.txt and sitemap.xml
  • Setup .htaccess (to setup cache periods and .html redirects) and .htpasswd (to password lock the team member form)
  • As-needed commenting with JSDoc-style documentation for methods and classes

Home Page

  • Aide in setting up landing video container, including responsiveness and autoplaying
  • Setup class structure and simple canvas injection for home page experiences
  • Implement GLSL distortion shader sample into mother character experience
  • Implement state system with transitions for mother experience
  • Implement blend of Matter.js and PixiJS for father experience
  • Attach forces to mouse actions to furniture pieces
  • Utilize team member's state system to manipulate filters as the father's experience progresses

Characters

  • Outline markup and utilize Parallax.js in creating a simple single-page characters page
  • Create multiple methods of navigation, from a button indicating direction to a node-like list displaying current character
  • Make characters page responsive and mobile friendly, complete with swipe navigation
  • Setup overall style for page

Team

  • Assist team member in utilizing array math to make team page carousel dynamic
  • Assist in making the team page styling more consistent with the rest of site
  • Create a PHP script (runs via cron) which backs up team member data

Form

  • Create HTML form for team members to submit their info for the team page, providing examples in placeholder text and using proper markup for form elements
  • Utilize Tippy.js to provide additional context for fields
  • Utilize Cropper.js to provide a simple cropping tool to allow members to upload their photo to the server
  • Utilize jQuery AJAX to handle form input server-side, using PHP to save form data and compress member photo and using an XHR override to display submission progress
  • Automatically load existing data to allow members to easily edit any data without re-filling out the entire form again

Press

  • Create markup and styling accounting for typical video game presskit pages as well as mobile viewers
  • Create a sticky sidebar navigation element for in-page navigation
    • Make navigation element have a bit of scroll-based parallax so that it stays below the header when the header is in view and goes to the top of the page when the user has scrolled
    • Add a hide button for smaller screens to hide navigation from view in case of cluttering

Samples

These are some samples from the project.

Videos

Code

Places

Home Page changelingvr.com