Little side project update nr. 1.
Hey everyone, time for a SSSS side project update! I've spent the last few weeks soaking up as many beginner coding tutorials as my brain's been able to handle, and I've reached a point where I have a tiny bit of visible progress to show for my effort. Nothing polished (visually or otherwise), but enough to give you an idea where I'm steering at.
...What? No, that's not what anything will look like in the end, geeeze! it's all quick and dirty placeholder graphics to make my practice sessions less depressing for myself to look at! It was either janky, blue-sketchy, barely-Emil animations or free knock-off mario sprites nr.4.
Anyway, while the stuff in the video do look extremely simple, I'm actually quite pleased with the progress. The language I've chosen to learn is C#, because... well, it's pretty popular and has massive amounts of tutorials available. And for the engine I've chosen Unity, because... well, its main coding language is C#, and again, it's popular and there's an incredible amount of great tutorials specifically for making games with C# in Unity. The interface was completely overwhelming at first, and I did try out some "simpler" 2d-specific engines, but I quickly came to the conclusion that a bounty of tutorials > simple-looking interface in my case. I'm sticking with this one.
So yeah, I've been following a lot of tutorials just to learn the basics of programming and Unity. For example the codes for handling of the animations, collision detection and movement around the map I've 100% gotten from various tutorials. But the panel that pops up with the images and dialogue? Now that I'm proud of, because I coded it myself by using the pieces of knowledge I've gathered so far. And now I'm going to talk about it a little bit.
~~~~
So the piece of code used for the dialogue sequence (which I'm calling a story scene) has one task: take in the name of the story scene from the object you interact with, do its magi, and then spit out the number of the choice made (or a default number if it's a choiceless scene). Then it destroys itself, poof, and a new scene, or the same on, can be played. The script itself is one big loop that goes though each "frame" in the scene, and during each frame it does the following:
-Checks if background is the same as last frame, changes to new one if not.
-Same check for the avatar images (they all reuse the same function for it).
-Checks if the the frame has a choice. If yes, displays choices and starts the selection process and records the choice.
-If no, display dialogue instead.
-If there's no dialogue either, just hide everything relating to dialogue and just show the background.
-Checks which direction the speech bubble arrow should point, and positions both the name label and arrow accordingly.
-Show name of current speaker
-If there's no speaker but there is dialogue, only the box is shown. No arrows, nameboxes or avatars
-At the end of the frame either move on to next frame, or if a choice was made find the frame with the corresponding "fork" number.
-Wait for keyboard/mouse input before moving to next frame, unless the frame is marked to end automatically.
-If the frame is marked as "endScene" end the scene instead of moving to another frame.
As an example here's the piece where the script decides wither to display plain dialogue or to display choice options.
And once you're selecting a choice it goes into a loop like this until you pick something (with the space key in this instance for testing purposes). This part was one of the biggest brain-scratchers for beginner me to get working properly, but after many hours victory was had! And yes, I now realize that I've misspelled "choice" in every single variable. But at least I've misspelled it consistently so there's no error!
Since two of the key things I've learned about programming so far are a: keep things modular, and b: reuse code whenever possible, my ultimate goal with this was to make one contained piece of code that'd be able to handle many types of frames without needing different versions of it for every scenario. In the video example above the exact same script delivers the scene that has choices, avatars and dialogue, as well as the the signpost one with just a background and a little info box. The same scene can mix different types of frames or have as many or few frames as it needs, it doesn't matter.
The frame data itself for each individual story scene is in a separate file (a Json document, not C# code) in a folder alongside the images, and the folder name just has to correspond to the scene name in the code. For example a couple frames for the scene with Emil and Lalli look like this:
While the whole document for the signpost just looks like this, but they got through the script all the same:
So there you have it, the result of about a month's worth of learning. The whole script is a horrible bloated mess, held together by spit and duct tape, and ripe with dumb complicated solutions to probably simple problems, but... I made it without needing a hand-holding tutorial, and learned a whole lot in the process through trial and error. In a few months I'm sure I'll be able to put together something far more elegant. Now back to practising with more tutorials.
If you don't care about the behind the scenes process code-learning babble all I hope you enjoyed the video at the start. Maybe next update I'll focus on some concept art? :3
~