Sharing progress on a game I decided to work on. The game will be based off of this cover:

By: わいこ

I kind of figured there might not be much of a game here actually. I kind of just want you to relax on a moving train in the sunset. Some ideas would be to change the lighting as time goes on (maybe weather?), maybe have passengers come in and out but I really don't know what I'd do past that. I brought a composer friend (Cowberry) on board to do some music and she immediately suggested we do lo-fi tunes, so think of this as a slightly interactive 'anime beats to study' to thing you see on youtube a lot. Inspirations include pretty much any Shinkai film and 1041uuu.

I will also be attempting to make something in Godot for the first time and use Sprytile  (also for the first time) which is an addon for Blender (also a program I'm learning for the first time). I'm probably going to keep things simple as a result, likely confine it to one train car (or at the most multiple train cars that are just duplicates), not sure how far the exploration/interactions would go yet.

I contacted the cover artist to let them know what I'm doing and they're looking forward to it.


I started with the bare essentials a walking sprite and a mocked up area made in Sprytile. I eyedropped the exact colors from the cover. I want the angle to be pretty close to a side-scroller but in perspective so you can see both the outside and where you're walking.


Eventually I decided to add lightning but uh, not too impressed with the native options.


I looked into cel shaders for Godot and luckily there's a free one already made. Also luckily it has an base/dark image to plug in. 3D Sprites in Godot have a material override tool that lets you apply shaders to 2D elements, this is something I did not expect! There are some challenges to get it working right though, automatic billboarding no longer works and you have to pay attention to Render Priority (just like y sorting in gamemaker).

To explain further there's a dark and a light sprite, the light simply blends between the two. This makes it so the artist can better control the contrast and in general do very minute details to things like eyes glowing or the white outline I wanted to preserve. This can also apply to the environment which I add to the next gif. Really my goal is to gain the advantages of 2D "intention not result" lighting along with the dynamic parts of 3D. Though there's a bunch of game ideas I have with this style in mind, so it's also a learning process.




But what really gives something its depth are cast shadows.

Remember when I said I had to use a material override? Well in order to do shadows I had to duplicated the same 3D sprite disable material override and use cut-out transparency, it's then set to invisible with the shadows only option. I also set the animation frame the same as the base sprite. Each time I think I've hit a brick wall I always manage to find some sort of work around. I'm impressed with what Godot has built in such as sprite sheet support.

To go further and beyond though would be to add normal mapping to the sprite itself so the shadow "bends" around the forms so it's not lit like a flat card. But I think that's a battle best left for another project. 

I could spend forever on this but it's time to move on and do the backdrop next maybe even start actually modeling some stuff. Stay tuned.

Made a functional door, this is player activated though you'll probably never manually use it. I decided to have a cutscene where the character enters to make it more simpler.




So of course with this cutscene the train itself isn't moving, just objects outside of it being animated. Took me a bit to figure out how to execute both the animation via code and parenting. The door automates its own animations separately however. But then stops working after the player ends the cutscene.


Spent a good amount of time deciding how the train should be laid out. I looked at a bunch of different japanese trains, specifically the commuter or metro types. They all have different designs depending on the region/time they were built so it's a bit hard to nail both the cover art and make it functional. One thing that's obvious is that the end of the seat is really close to the door. Most japanese trains I find tend to have the doors slide within the walls of the train leaving some space before you reach the window.



Also common is that the top and bottom of the windows are close to the door windows. But I want the windows to be big and huge, mainly so I can fill the train car with light and silhouettes. So I'm fudging reality a bit, doors will simply open on the outside, and will be shorter than the windows. Since making the doors any bigger to fit with the windows will make it a bit over-sized. Also worth noting, 4 doors, 3 main windows, and 2 end small windows seems to be on most trains. It was actually hard to track down exact schematics or xray type illustrations. But looking up exact model numbers and paging through model trains and paper folds proved useful.



Blender has some growing pains honestly, but I'm getting used to it. Later I'm probably going to chop this train car into chunks to better copy each part of the train properly. Though since the entire game takes place in a train car it might not be that important. Another thing to note is that importing to Blender and Godot is a bit... finnicky. The main trick that works for me is to exit the scene I'm on in godot that doesn't contain the model i want to update, then export to OBJ overwriting the existing mesh. That seems to work, so that I don't have to reapply the material each time I want to see what the converted file looks like. I tried other file format options but they don't seem to be as direct as OBJs. Of course that'll probably become an issue if I need to animate outside of Godot. Main thing is, don't be in the same scene as the model you're about to replace directly and it should be fine.



With a basic WIP seat modeled and some colors/lighting tweaked this is where I'm at. But there's something strange about something isn't there? And no it's not that the handles are floating but something else... stay tuned.

So with some adjustment I've arrived to this result:


This is a pretty good vertical slice as far as the game's intro and visuals go. The main thing I want now is for the train to move and have the backdrop generate/move stuff in the background on the fly. Another thing is to have the lighting/weather change as time goes on, which I'm putting on priority since, I like having a birds eye view on visuals really.



Oh yeah, a word about those pesky handles I'll animate later. I mentioned there's something off about them, well... they aren't able to cast shadows even that low to the top of the window. In real life they're actually quite high, and even with my liberties of lowering them I still couldn't get them to cast shadows. I think they make for interesting shapes so I decided to make a fake shadow casting 'sprite card' that's invisible way lower than it actually is. Is it realistic? Well no, but neither is the position of the sun in relation to the direction of the light/shadows being cast. In real life if the sun were that low the light would be casted to the other side of the car. Interestingly enough, after doing all this I discovered I was not alone in this endeavor:


In Ghibli's Spirited Away not only do they keep the handles low but the light shaft and the positioning of the shadows actually doesn't make sense realistically! But hey, it just adds to the scene to have moving circle shadows along the floor. I actually can't find many examples of anime shots where the artists made that adjustment though, goes to show how the studio at Ghibli were always inventive. Again, I'll get to animating the handles later, but first I wanted to mockup some lighting scenarios.





So the idea is to have every object in the scene lerp towards a target texture or color to simulate a shift in time of day / weather. This is pretty easy to do, but given my lack of knowledge in shaders it took a bit to understand how to get it going:

So the idea is to jump between each lighting scenario is to gradually add to the Blend variable then swap the textures while setting Blend back to 0 to repeat the process. Pretty simple. Now I actually gotta do that. Stay tuned.

So getting different shader types to blend was a bit of a chore but Godot has a built in thing where changing a shader changes all of the nodes tied to that shader. The big part is just organizing and I just wanted a single node to be in charge of all the lighting changes to do it on a whim. I had trouble since one of colors is actually an "environment" custom color tied to the camera node, so the camera needed its own script separate from that node to make things easier. Not the most clean but I got it working.


Sped up, going from sunset to night looks like this. I of course there probably won't even be any lighting but I'll probably add some lamp posts whizzing by to create a dynamic effect. The next part is to add multiple times of day to blend to (2 more to go) but I think for now I'll worry about other things.


Then I finally got around to doing 8 directions, kinda feel like the character design I had in my head is starting to change when I actually think about how thick the hood is going to be and what the hairstyle is actually shaped. It's probably why I hold off on this stuff. 


Also a sound update, Cowberry the composer came back to me with a small WIP of the song that will play at night. Was thinking of doing an animal crossing bit where where there's a different version of the same song depending on the weather/lighting. 

20 Sec WIP here (Google Drive)

That's basically the direction we're heading into sound wise. Jazzy kind of lof-fi feel. I'm still thinking of a potential gameplay idea but it's hard to come up with something that won't break the calmness/chilling. Anyway stay tuned.

So time to generate some scenery. Basically I want the scene to be in a looping traveling state as a opposed to fixed objects in the scene. one would think to just use a viewport and maybe have 2D cutouts vs having a bunch of 3D objects spawn really far and have the camera draw all of that, but that is much too smart and I prefer to do it the RAW way. Spawn objects and delete them once they've traveled a certain distance (so slowing or speeding the train doesn't delete them).


Obviously the poles are good being 3D because they actually cast shadows, I can see a large potential with more complex stuff like bridges with lots of angular geometry all over the place creating nice shapes along the floor.



Even for far stuff though the perspective changes ever so slightly noticeable. Some buildings are spawned in-front of each other, you can notice their sides recede as they go towards the middle. The mountains though are harder to notice as they're pyramids, maybe I should rotate them a little in place. I do like the symmetry of them though, makes it feel stylized.

With the camera's fov at 20 it's hard to get a clear idea of how far these things actually are though. Which is good for my purposes. Also the sun is just a child node under the camera, cause I'm lazy. 

Now for the most important thing of all: sitting


Started by making a simple state machine in which the player goes into an animation after triggering a seat-able area. One problem is that the handle rings aren't in the way of the player. For complicated reasons the player is actually hovering in the air (the animation causes her boots to dip in the ground slightly + it's a physical 3D card tilted at the camera).

 

The trick? Just make the sprite move backwards and grow larger, you hardly notice anything weird going on. Notice though that the animation is separate from the actual player collision box, that became important for various reasons.



After sitting down and pressing forward you can zoom the camera a bit to see more of the view. Starting to look really close to the cover sans a few things. Not that it was the goal but I guess it ends up that way.


I think I might actually have a gameplay idea for the game now that *checks watch* the deadline was extended. I plan to be wrapping the project pretty soon but we'll see how that goes. Stay tuned.

So I've been sick as of recent (not covid) and took a break. I don't have anything to show but I can share the anime train gifs I used as reference.

https://imgur.com/a/NbWoam9 just like this thread it's very gif/webm heavy

 Though really it's not so much reference as just to see what animators typically focused on when presenting very common means of travel. For most animation it's merely a backdrop, but in higher budgeted affairs you can tell the use of light and how certain angles are presented make it seem like they're trying to say something. Something about a moving landscape super imposed over a character is a great way to convey a mood. Though my favorite is the light silhouettes of the train windows cascading against the street something about it I can imagine it in a moment of time. How the pedestrians and cars stop and have to wait for the train to go by and this very specific lighting scenario happens. It definitely speaks to observing life and its specific moments.

9 days left, and I starting to feel much better. So it's actually time to wrap this up.

I wasn't sure how I was going to do the general timeline or the cycle, but I realized just gradually changing it day to night creates some problems...


Merely tilting the direction light creates these weird edges along the shadows, and with every texture built to be pixel-art like means everything is just very jagged. I am at the whim's of Godot's lighting engine though and don't have time to messing with this too much. The goal is to just make sure this isn't super obvious.


So I decided to just transition quickly to 5 possible blends in 0.25 increments:


I don't really like some settings as it's arbitrarily decided by the computer of what the colors will look like, but I don't have time to personally edit them individually. All of the elements in this scene are just tied to a single variable going from 0 to 1. Not really hard to do but it's a matter of organization once again. The current timeline of the whole train sort of works like this:

-Leave Station
-Ride for a bit
-Arrive at new station 
     -Gradually add 0.25 to the day to night blend

Repeat. All of the train stations are the same atm, but I'll probably swap them out for different layouts. The idea is to use the buildings to hide/distract from the transition.



The player might not notice as you pull into a station, but that's the idea. It's not a realistic simulation at all, but abstractly I'm not personally tracking the daylight in real life either. 

Next up is adding some kind of inventory system for the activities I want the player to do. It's not gonna be much but it's something. Stay tuned.

Added a simple item pick up system. First time using Godot's award winning coveted GUI system and it's pretty simple just feels a little a different to what I'm used to in gamemaker.

Honestly the longest part was making 8 direction (5 unique graphics technically) for picking up which I regret making 8 directions. Took a motivation push to get through.

Next up I want NPC passengers that occasionally come on and ask for items to give, like a newspaper. There's no dialogue in the game so I'm going to make it pretty simple.

Biggest problem is actually figuring out where the passengers end up when the train stops, I have no idea the actual distance from where the train is when it starts to stop vs where it stops dead zero. The only reason I have it working in the beginning is because the train is animated and not programmed to move. But I thought about it for 2 seconds and realized it's pretty easy:

-Place the object where I want it to end up when the train stops.
-Have the object move at the train speed in REVERSE,
-By the time the train stops just print out the distance traveled.
-Un-reverse the train speed and have the object start with the distance on frame 0 added in the actual game.



Also learned how pathing works in Godot, I like it a little more than GameMaker coding wise since I just add to a follow variable. Adding points in perspective is hell and the controls are a little wonky and not self explanatory.

Doors are having a change, they're all going to open when the train stops but you can't move outside of it. Kind of a meh concession but things sorta changed when I thought about letting NPCs on but wanting you to stay. Anyway some more problems to solve and what will the NPCs look like? Stay tuned.

Not quite done in time for the deadline but I should be about done today or tomorrow. There's nothing much to blog about since most of the work now is programming/sound related and wrapping things up quickly. Most presentable thing to show as an update is this intro/title screen:

So the game has... an ending. You get to the end of the train ride and bam, a really abrupt thanks for playing thing.



It's very hastily put together but sometimes getting the point where the game prints "the end" is enough to feel like the game is rounded out. Problem is now is that there's a bit of a gap between the morning/day part of the sequence content wise. Sunset and night sections are done though. There isn't really much to the content aside from very limited NPC interactions, but again the point is to give the player something to do occasionally. Also want to add more reasons to look out the window so there's something to look forward to.

This is probably my last major blog post before release as I'm going to spend the rest of today just adding what I can, then release it. Might make a post mortem at some point to talk about what I learned and what the process was like in hindsight.

https://shweep.itch.io/traintrip release!

Thank you for sharing this. This is quite informative. Really appreciate.