A Trail Tale(atrailtale.com)
atrailtale.com
A Trail Tale
https://atrailtale.com/
57 comments
This is fantastic work - just had a couple questions about it:
1. I've heard different accounts of how well unity web GL is supported, did you run into any limitations?
2. What did advantages did wrapping this in Vue provide?
1. I've heard different accounts of how well unity web GL is supported, did you run into any limitations?
2. What did advantages did wrapping this in Vue provide?
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.
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.
Hey, just an FYI, I'm on android using bromite and it blows up with the "something went wrong" message.
Why not just use canvas/HTML5? Seems do-able.
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.
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....
I first found y’all via Reddit I believe. So much respect for this project. Love the aesthetic. Love the dynamic scenes. Great job.
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 :).
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 :).
You are on the site :) Notebook > Log > Thru Hikers
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.
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.
[0] https://en.wikipedia.org/wiki/Lehigh_Gap#Lehigh_Gap_Nature_C...
[1] https://web.archive.org/web/20070929101630/http://www.biosol...
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.
[0] https://en.wikipedia.org/wiki/Lehigh_Gap#Lehigh_Gap_Nature_C...
[1] https://web.archive.org/web/20070929101630/http://www.biosol...
[deleted]
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
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
Maybe the coolest thing I've seen this year.
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.
the amount of effort and dedication is staggering. I am deeply impressed.
Absolutely fantastic.
agreed
Let me recommend a really nice offline complement for this site:
https://www.amazon.com/Grandma-Gatewoods-Walk-Inspiring-Appa...
Here’s an online taste:
https://www.outdoors.org/resources/amc-outdoors/history/gran...
https://www.amazon.com/Grandma-Gatewoods-Walk-Inspiring-Appa...
Here’s an online taste:
https://www.outdoors.org/resources/amc-outdoors/history/gran...
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
It's so confusing to touchpad two-finger smoothly scroll 8-bit style graphics. My brain screams it didn't work like that.
I debated between smooth scrolling and a more accurate pixel style, but the parallax effect without smoothing made everything really jarring :(
This might become the new soundtrack to my working days.
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.
Love everything about this. The 6+ lawyers of parallax background really make it feel alive.
Is the background generative in some way, or is each layer in a loop?
Is the background generative in some way, or is each layer in a loop?
Each layer is a loop, but the offsets and number of layers helps hide the repetitions
As someone who is both an '09 AT thruhiker and living in Philly, I'm tempted to go bring this guy a beer today.
Nice blendshift cycling on the waterfall. Very cool to see that technique used in practice.
So I see a travelogue (hiking), updated regularly, presented as a 2d game in a web app.
Great idea.
Great idea.
Great site!
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).
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.
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.
Maybe top/down instead of left/right would solve the users expectation problem.
What an awesome project, reminds me of Stardew Valley.
Greetings from Finch, flip flop class of ‘21 — I look forward to following along!
Really digging the pixel art :)
Me too. Made the mistake of checking out his instagram which had all those pesky normal full res photos and that kind of took the charm out of it :)
I am digging the music! It's on Spotify: https://open.spotify.com/album/52vY4u0XlQlJCo25CfWaEK
Edit: fixed link
Edit: fixed link
It’s on Apple Music too:
https://music.apple.com/de/album/2200-miles-ep/1578283523?l=...
https://music.apple.com/de/album/2200-miles-ep/1578283523?l=...
Getting really good Monkey Island vibes from the quality artwork, the overall look is so appealing!
The pixelated style is really wonderful. I’m glad they went with a whimsical theme.
Really glad I found this today - incredible feel. Thanks for sharing!
Really amazing! Also, please make a cool adventure game :)
This is very innovative. You should be be proud!
Wow that's really impressive, love the art style.
This is awesome!
Love everything about this. Well done team.
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.
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!
Loading takes too much time for me. I'm not sure what I had to see. But if it's a technology showcase then please see the first sentence
What device and browser were you using?
Really amazing. Great work!
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.