Project dev here if anyone has any questions- on a technical side, the app is built with Unity WebGL wrapped in a vue.js wrapper. The JS side handles pulling the live data from the server and determines the best Unity scene to show given the parameters- time of day, weather at his last known coordinates, and the location itself.
I wrote a separate vue.js progressive web app that is installed on his phone so he can write updates while he's outside of cell coverage, and they sync when he has internet access again.
The backend is a Node server on an AWS EC2 instance that dumps all of his updates and hourly weather data into a postgres database. Everything is timestamped, so we will be able to replay the trip or add an interactive timeline when he's done.
1. Everything non-apple has managed to handle the project without any problems, but getting it working on iPhones was a small nightmare- silent loading fails, web assembly not loading, endless hangs initializing the scenes, textures being replaced by distorted noise that one user described as "a portal into another dimension"- in the end I had to disable compiler optimization in the source code of one of the libraries, completely turn off gz/br encoding, and remove compression on all of the textures to get it to load and run. Luckily all of the assets are actually really small, so compression wasn't giving me much benefit, but on a non-pixel-art project, it would probably be a deal breaker. If it wasn't for BrowserStack letting me test on real devices all of the available iPhones and Safari versions, I don't think I would have been able to track down the issues.
2. I have a ton of experience working with responsive web design using Vue/Angular/React, and I kept running into issues designing my UI in Unity that could have been solved with a single line of CSS. It was also nice to have a non-Unity controller for the project so I would be able to easily swap out the Unity animations with a fallback if I couldn't fix the Safari issues. Playing music in the WebGL player was a huge performance hit, especially once I started layering sounds, by having Vue handle that I could take advantage of browser optimizations with on caching music and detach the download of the audio files from the download of the rest of the assets (they were by far the largest part of the project data-wise), so a slow connection isn't waiting on the music to get into the app itself.
The trade-off was losing the ability to build the project as an exe and the loss of non-audio performance. We knew getting people to run a random exe from the internet was a hard sell, and the performance loss isn't really felt when the UI is run in the Vue side of the app. If I was making a game that needed high performance, I'm not sure the performance loss would be such viable compromise.
I started with canvas, but a big part of the project was making sure my artist brother would be able to easily position elements, create animations, adjust the layers, and build the scenes. The Unity editor is great for stuff like that. It was also really easy to extend the Unity editor with buttons to automate annoying tasks.
I was also having some annoying issues with scaling everything based on device screen size, and choppy performance, problems I would have fixed eventually, but nice that Unity behaved correctly right off the bat.
If I had another year, I probably would have built a unity scene file parser (or maybe an editor extension) to convert the object positions and script parameters so I could take advantage of the Unity editor while still cutting out a lot of the overhead, definitely a step I would have taken if I couldn't get the WebGL player to behave as well as I did.
If you plan on keeping this around (you should) you ought to extend it to any number of hikers on the AT. A simple drop-down to let someone choose which hiker to watch/follow....
Holy shit, I’m hiking with this guy right now on the AT!! This was a two-year COVID passion project that Andy made with his brothers (one coded it, the other made the music, he designed all the pixel art).
It’s SO cool to see this on here. I’ve been tracking him using it when we get separated. Andy, if you see this, hello from Deadweight :).
He's currently at Palmerton, PA/Lehigh Gap. The hike up out of town is steep and completely unshaded. You absolutely bake on a sunny day. Once you hit the top of the ridge, the trail looks out over the old zinc smelting plant for the next five or so miles. It's absolutely one of the most striking parts of the trail.
The ridge is basically bare of trees, AIUI because of the plume of pollution from the zinc plant. A Walk In The Woods (the book, not the execrable movie) goes into some detail.
12 years ago when I hiked through, the ridge was covered in low berry bushes, possibly as some sort of bioremediation effort. I did not partake of the berries.
Wikipedia has a little info on the pollution from the zinc factory [0]. There's a PDF describing the government's remediation work [1], which finished in 1995.
The pollution killed all microbial life, so the trees and dead vegetation could not decay and just lay on the ground for decades. There's a creepy photo in the PDF.
EPA developed a soil treatment and tested two ratios of ingredients. One ratio was good for grass and the other worked for trees. Finally, they used the average of the two ratios. They hoped that it would allow grasses to grow quickly and prevent rain from washing away the treatment and still allow trees to grow later. I'm curious if trees were finally able to grow. I think the answer is no, since there were few trees after fifteen years, when you visited in 2010.
Perhaps the ratio was good, but some areas (like the ridge) lost too much of the treatment material by erosion before grasses could grow and stabilize the soil? EPA could follow up and order a re-application of the treatment in the affected areas.
This is very cool. If you are as confused as I was at first... it is not a game. It is a blog displayed in a pixelated art/game style. Click into the Notebook and then the About tab.
Yeah, it's a live record + blog of his hike. Weather and time autoupdate, and scenery changes across states. He updates physical/mental state, stats ("advil taken"), and blog posts. Looks like the status was last updated ~20h ago.
In the bottom right, hit "Live" (which is the current status; UI is hard) to switch to "Demo" mode, where you can alter all the settings.
Also, one brother wrote the music and another brother of his coded the whole thing. Super cool. Apparently the inspiration was The Oregon Trail but powered by live data
Yes, this is really incredible, and not just in a showy way. This website has a warmth and function that make you feel connected to his journey. Lovely idea, perfect execution.
Wow, if anyone can put me in contact with the hiker, I'm a dev from Philly who is also thru hiking, we're just ahead of him. It would be cool to get connected and maybe meet up. Also extremely impressed, this project is amazing, I've just got a lame YouTube channel XD https://youtube.com/channel/UCNdZgXJBLh2E7Z-62MLOMKA
This site is so fun, and I spent the better part of my Sunday morning reading the journal entries while enjoying the relaxing background music. Thank you for sharing.
One nitpick is that I don't like clicking left to access the older Journal entries (traditionally, right arrow shows older entries, like in pagination tables).
Welcome to my second least favorite programming headache (after time zones) that I run into annoyingly often: paginating through time with 'now' being the starting page. You're navigating left because it's a previous entry, but it's also right because it's the next entry you want to read.
Maybe I should add 'First Entry' and 'Most Recent' buttons in addition to 'Previous Entry' and 'Next Entry' to make it feel a bit better.
How do you know a team was involved? I was looking for a credits page but couldn’t find any.
Update, found in the About section:
> My brothers and I built this unique blog to give everyone the experience of reaching Katahdin (the trail’s northern terminus), no matter where or when you are in life.
Yep- of the three of us, one is a professional developer (me), one is a professional experiential designer/artist, and one is a professional writer with a great music talent- the perfect combination for a project like this!
I wrote a separate vue.js progressive web app that is installed on his phone so he can write updates while he's outside of cell coverage, and they sync when he has internet access again.
The backend is a Node server on an AWS EC2 instance that dumps all of his updates and hourly weather data into a postgres database. Everything is timestamped, so we will be able to replay the trip or add an interactive timeline when he's done.