[RELEASED!] Yoshioka ~Startling Blue~ [NaNo2023][Idol, Slice-of-Life]

NaNoRenO is an event where creators make a game from scratch during the month of March.
Message
Author
TakafumiSakagami
Regular
Posts: 101
Joined: Thu Aug 30, 2018 5:22 am
Completed: By Your Side, Yoshioka
Projects: Aious ~Proof of Concept~, Aidos
Organization: Kyacchi22
Deviantart: takafumisakagami
Contact:

Re: Yoshioka ~Startling Blue~ [NaNo2023][Idol, Slice-of-Life]

#16 Post by TakafumiSakagami »

Continuing on from where we left off before the break, let's check in on the current state of Aoi's sprite.

I've talked about the pose switching before, but what I haven't talked about is... the basic stuff. I've categorized that informally titled "basic stuff" into three groups: idles, actions, and expressions.
Idles are loopable animations that Aoi ultimately returns to at the end of each action, and an action is something more specific that Aoi performs, like... looking to the side, or something involving a lot of animation.
Finally, expressions are isolated changes to the face that can be applied to the idles and actions regardless of what's being animated.

In this video, I show off some of the currently-completed bits of basic stuff. I've been going through key scenes of the script and creating what actions and expressions I need, rather than doing it in conventional order, so we're still missing some very important things like... a straightforward smile or more than just one idle animation. We're getting there though.

TakafumiSakagami
Regular
Posts: 101
Joined: Thu Aug 30, 2018 5:22 am
Completed: By Your Side, Yoshioka
Projects: Aious ~Proof of Concept~, Aidos
Organization: Kyacchi22
Deviantart: takafumisakagami
Contact:

Re: Yoshioka ~Startling Blue~ [NaNo2023][Idol, Slice-of-Life]

#17 Post by TakafumiSakagami »

Oh my god it works!

That was the spontaneous comment and video I posted to a friend earlier today. The transition actually works... I got it first try, no documentation, no referencing other peoples' efforts, squeezed solely from my own brain juice.
To be fully transparent here, I didn't think it'd work. These past few days I've been thinking... we're kinda running out of time, my process could be completely wrong, I might have to settle for the first result no matter how janky it looks, but... it's perfect.

Well, it's not perfect in that video; the scaling of the torso is off for one frame, and the right arm and hair have gone completely untouched since importing the parts, so they're not correctly aligned on each frame, but... the bits I've actually gotten around to keyframing look good!

I know I'm a selfish writer who frequently toots his own horn in blog posts, but man... I'm good at this, aren't I? Can't be luck; my Mahjong results are dire and my Yugioh pulls depressing. I need to just shut my brain off and work, apparently.
I must've taken that for granted... I do normally figure out serviceable solutions, even when I've got no idea what I'm doing (like with this). Dunno why I was doubting myself now, I feel silly. Pressure of a time limit maybe? I'm not exactly used to that...

Anyway! Enough of me admiring my own efforts! Here's the sitch:
This animation can be promptly deleted since it's a test timeline that isn't entirely practical to implement. Now that we've learned how to create this animation however, we can use that knowledge to make an actual pose transition, which for practicality's sake we'll store in a shiny new 'Switching' folder.
Image

I've only had time to shove in a switch to pose 2 and a switch from a surprised variation of pose 1, so our transitions from one layout to the next are still incomplete for the day, but we have made more than enough progress for me to feel comfortable showing off the whole product.
So bearing that in mind, here's a little demo of our sprite.



All that folder organization we did last time finally comes into play here. We can now apply expressions and actions to our different idles (so long as we've created them correctly...) in order to get more permutations of the sprite without having to manually create them.
Doing this means that every animation you create has to be made with this in mind. If you forget to keyframe a single object, it'll cause you some issues, but if you remain diligent in plotting out your frames, you can shove a grumpy expression onto any pose or animation and it'll stick.

I've also had enough time to get the hair looking correct in every frame, the right arm has been corrected too, the whole model has been organized into cleaner Z-levels than we got from the initial Photoshop layers import.
Whereas previously, our arm variations may have been on... Z 10, Z 20, Z22, Z25, etc... now they're all packed into Z 10.1, Z 10.2, and so on... It's a lot easier on the eyes when scrolling through menus fixing different parts of the model.
I think the only thing left to tweak is the half-closed eyelids, which have gone completely untouched so far. I'm not a fan of the current blink, so that's definitely getting changed. 

I really can't understate how many small forgettable touches I've gone over in just the past 12 hours, nevermind the previous days. From reimporting the buttons on the jacket for better scaling, to adjusting the height of the different bits of hair in relation to the head's movements, to triggering each change on each needed frame in the timeline of an animation.
This ain't Adobe Animate or whatever people use post-Flash; you can't even rotate your parts! Not traditionally! You've gotta manually stretch things into place to create a rotation, so it's easier to just... import in pre-rotated variations of objects.

But once you get the hang of it, and once you've organized your project properly... it's pretty intuitive. I'm not even a native speaker and I have no problem navigating the software, and that's especially strong praise when you consider how many menus within menus this program has. It'd be easy to get lost in such nesting even in English, but somehow E-mote avoids that and makes it real quick to get around.

So yeah, that's our time in E-mote basically done. Is it the perfect software? Not by any means. Did I get a good result with minimal documentation checking, overly ambitious ideas, a tight time limit, and no practice? Yup. If I spent more time in this thing, I'm sure I'd come to love it.

TakafumiSakagami
Regular
Posts: 101
Joined: Thu Aug 30, 2018 5:22 am
Completed: By Your Side, Yoshioka
Projects: Aious ~Proof of Concept~, Aidos
Organization: Kyacchi22
Deviantart: takafumisakagami
Contact:

Re: Yoshioka ~Startling Blue~ [NaNo2023][Idol, Slice-of-Life]

#18 Post by TakafumiSakagami »

So uh… we’re gonna have to change engine.

After finishing up yesterday’s work this morning, I exported the finalized Aoi sprite. She can smile, she can switch poses, and her blink is looking great. Though reversing the pose switching was a lot more finicky than I imagined it would be.
Image
Cross-referencing frame timings isn’t fun.

But despite the claims plastered on KiriKiriZ’s main page, it isn’t compatible with E-mote’s KiriKiri SDK! Can you believe it? …I kinda assumed that was the case when—in preparation of NaNoRenO—I tried out the free version Emofree and learned that it wasn’t KiriKiri compatible either, despite the main page saying it was.
So we’re switching over to KiriKiri2… It’s an old engine, I know. It’s well-supported though.

So we’re seventeen days in and now we’ve gotta port our progress over to a different engine. Disaster, right? Well no, ain’t no Square Enix operation.
Despite what every emboldened redditor in the comment section of Bokutachi no Remake’s eleventh episode may claim, it’s very reasonable to assume a Visual Novel can be ported over to a new engine simply by copying files… well, so long as you also assume both engines are based on KiriKiri Adventure Game. Conveniently, most are.
So to prove those commentators from… 2021 (in reference to an anime I didn’t even like) wrong, here’s a 30-minute engine switch!

In our case, we’re downloading KiriKiri2 and creating a new project—still using KAG3—by… just copying the provided template folder.
Image
Next, we get to converting all our old scripts into Shift-JIS formatting by dragging our old project folder into a bulk-converter program named KanjiTranslator, and then we copy the resulting files over to the new project folders.
That’s it. It runs out of the box.
Image
It's not perfect. The unused file-handling system that was used in my placeholder title screen to create the "continue" button no longer works... not that I was ever going to use that.
Aside from that, the game runs perfectly from start to end, just as it did prior to the engine switch.

So now we've successfully swapped engines and we're ready to implement our Aoi sprite! Now that's where it gets complicated...

The first step is to get our sprite to display in-game, and that's not difficult at all.
Using the [emotestart] macro, we specify this sprite's character ID (Aoi is going to be character 0), the xposition, the yposition, rotation, zoom level, you can even tint the graphic a certain color. We're just gonna put her in a vaguely correct place for now...
Image
Done! Next up, we use the [emoteplaytimeline] macro, once again specifying the character ID 0 so it knows which image we’re targeting, and tell it to play our idle animation inventively named “Idle”.
And… Oh, it’s crashed. I’m missing a plugin apparently… Huh.

Let me just google the error, and… nothing. No one’s seen this before apparently.
Okay, well let’s search keywords from the error log in Github and see what files come up… no, I’ve definitely got all these plugins.
Well maybe I forgot to initialize something! Let’s check the boot-up files for the official demo project and compare them with my own… They’re identical.
Okay well let’s check EVERY FILE in the demo project and compare them with my own! …nothing.
Maybe we can just… make a blank project, copy over everything from the previous project (which we only just made earlier today!), and see if that somehow fixes things despite nothing changing…

Oh.

So there goes my day. Took me around 2 and a half hours to fix that. I don’t know what the error was, I don’t know how I fixed it, and nothing is different between my old project and my new one aside from one working and one not working… but it works now!

It’s around the time when I’d normally post the blog posts, I’m very tired, I’ve just eaten dinner and had a bath, totally ready for sleep mode, but… being set back so much by a bugfix that basically fixed itself on a whim doesn’t satisfy me, so I’m gonna keep at it for a bit longer.
_____

God is no longer in his heaven. This is the sight I was granted upon testing out the most complex animation sequence I could think of with my admittedly exhausted mind.

Actually, that’s a recreation I made… I didn’t think to record the original, but it looked even worse. Body parts would glitch back and forth several times a second, it was awful!

Fortunately, our trusty bit of documentation… isn’t equipped to deal with this at all, since I’m dumb and decided to implement unintended features without spending time learning the toolset beforehand. So grit your teeth, hold your ground; we’re gonna force this thing to work.

Point number 1: CPU rendering makes the whole thing laggy. Let’s tell it to use the GPU instead! …Why is CPU the default anyway? Is it a phone thing? I don’t know anything about smartphones…

Point number 2: The mesh division ratio (which… divides the mesh into smaller bits) is set to .5, which speeds up rendering, but gives up visual accuracy and leads to a bit of glitching. We’re using GPU, so we can afford to set it to 1 without worrying about performance… probably.

Point number 3: The e-mote plugin doesn’t like it when parts of the model fade in or out of visibility in sequence. This is a bit of a problem because that’s exactly how we designed our pose-switching to work, so now the torso’s visibility is being randomized and our arms are going wild. To fix this…

Uh… I don’t actually know how to fix it. But I do know how to avoid it.
Image
Here’s our macros for pose switching. The trick is, instead of playing everything normally as an uninterrupted sequence, we simply make it look like an uninterrupted sequence to the human eye.
First, we force game to wait for the animation to play out up to a certain point. Normally you’d think the special emote macro for this, [emotewait] would work, but the only difference I see it making is the ability to prevent click-skipping through the animation. Not what we’re looking for.
Instead, we add a hard [wait], give it different times for different animations, and then when the wait is complete, we stop the current animation and start a new one so fast, it’s impossible to notice.
It stops the game from getting confused about parts fading in and out, because the only parts it ever has to deal with are the ones it initializes. It’s quite literally “turn it off and on again”, done rapid-fire.

The convenient side effect of this is if you want an animation to take longer, you just… adjust the wait time. It’s so easy, and looking through the SDK, it’s baffling to me that the stop command only gets used like… three times, and explained once as “it stops the animation lol”. That’s not a direct quote, but I’m projecting a sentiment.

Well, complaining aside… The Aoi sprite is well and truly complete. It took us 17 days, but we did it.
From here on out, all I’ve gotta do is program and add voice lines, and maybe go digging for more sound effects. Not sure what I’ll talk about in posts from now on, but at least I’ll have screenshots… Images speak some amount of words, apparently. Not as many as I do, but it might suffice.

TakafumiSakagami
Regular
Posts: 101
Joined: Thu Aug 30, 2018 5:22 am
Completed: By Your Side, Yoshioka
Projects: Aious ~Proof of Concept~, Aidos
Organization: Kyacchi22
Deviantart: takafumisakagami
Contact:

Re: Yoshioka ~Startling Blue~ [NaNo2023][Idol, Slice-of-Life]

#19 Post by TakafumiSakagami »

Man, I did not sleep well last night. I spent so long sitting at the computer working on the sprite, my legs ached and my closed eyes were showing me polka dots.
I spent 12 hours in bed and only 8 of them asleep... and unlike most people, I don't have a smartphone to be distracted by. Four hours of laying down, wanting to be asleep, and not. That's not four uninterrupted hours, mind you. I woke up a lot...

So, I've done a few little things. Since I was using the dev-menu built into the previous engine to get around, we no longer have that, which makes quickly altering things like volumes or text speeds pretty inconvenient. So I implemented a config menu. No visual assets for it yet, just a bunch of text on a screen, but it's pretty handy to have.

While I was at it, I made the game window resizeable because it's a bit annoying to switch back and forth between recording software and the game when the game is at full screen, but the native resolution of the game matches my monitor's, which means it outsizes my screen when you factor in the top bar with the big red X button, and that just messes up recordings even more.

I realize a lot of quality-of-life touches are being added for my own sake...

So the reason I may want to adjust the volume of my game, and the reason I may want to fit the window into a nice recordable size, is obviously because I want to share some footage. But what it is I want to share?
Image
This handy dandy tool comes with the E-mote software, and it allows you to analyse the volume of audio files (or an entire folder in bulk) and export the data into a text file.

Meanwhile, the KiriKiri SDK for E-mote includes an option to read text files while playing an animation... Huh, why would you want a sprite animator to read text files? Weird... Anyway, moving on!


This is very unpolished footage.

Yeah okay, the answer was obvious. We can tie the variable that controls how open the mouth is to the data held in the text files in order to lip sync. It's a bit fake, because there's no direct interaction between the sprite and the audio, but it works.

Oh oh, actually I forgot...
Image
Over here in our old familiar opening scene, which is slowly growing more and more complex as we go, we can use our eagle eyes to spot a new macro: [startAoi].
Image
This is basically just an implementation of our old basic fade macro but... hooked up to E-mote. We start the sprite by showing it on the back layer (which isn't visible to the player) then fade over the contents of the back layer onto the fore layer, where it becomes visible.
It accepts a lot of inputs: zoom level, positioning, rotation, animation/expression, we could even change the time factor to speed it up or slow it down, and as a result I haven't hooked it up directly into our other Fade macros.
I might have to later down the line, depending on how I feel about the character sprite being slightly out of time with every other element, but you can only attach so many commands to a macro before it grows annoyingly complex, so I'm holding off on it for now.

In larger news, which weirdly feels like smaller news... the entire game's script has been written and formatted! Every line of dialogue is in, every namebox put in place, every line break, every sound effect cue, every direction note... It's all 100% ready to be programmed around, all ready to be voiced.
It's gonna be tedious doing the same two tasks every day from now until the end of the month... though I'll probably get stuck doing UI work at some point now that menus are a thing in the game.
Either way, the fun stuff is over, so uh... good luck to future me with finding fun topics to talk about!

TakafumiSakagami
Regular
Posts: 101
Joined: Thu Aug 30, 2018 5:22 am
Completed: By Your Side, Yoshioka
Projects: Aious ~Proof of Concept~, Aidos
Organization: Kyacchi22
Deviantart: takafumisakagami
Contact:

Re: Yoshioka ~Startling Blue~ [NaNo2023][Idol, Slice-of-Life]

#20 Post by TakafumiSakagami »

We're well and truly into the realms of making a working product, so no more concise topics. Scattershot of updates, go!

We've got more voices! And with them done, the first scene of the game, affectionately named "scene 1" is now completely programmed! If you'll think back to our earliest posts for this year's NaNoRenO, there are only 8 scenes planned, so consider the game 1/8th playable!
...actually, I programmed a lot of the second scene while making the textboxes because it's basically a barrage of alternating textboxes, so... 1/4th playable!
...also actually, that "affectionately named 'scene 1'" thing was just a joke. The scenes do actually have names! ...kinda.
Image

One issue that arose today comes from our current layer system, which I haven't messed with much up until now. The E-mote sprite renders onto its own quirky layer that I don't know much about, and unfortunately this layer displays below the panning backgrounds we had planned.
I'm not sure how to fix it, and I could look into a solution, but at this point we're... technically 20 days in due to my weird sleeping pattern right now, and I really want a playable product ready to go, so we'll ignore this limitation for now and just storyboard around it.

Actually, the sprite has been the easiest part to deal with despite being the most complex, probably because it's the aspect I spent the most time on and am as a result the most familiar with.
Very intuitive, figured out some good timings for when animations should start and stop, and I'm slowly realizing which expressions and behaviours the sprite currently lacks. My export settings were saved, so adding new stuff is as simple as making it in a timeline and hitting the big export button. Plug'n'play at this point really.

Image

Another issue that came up pretty early into programming is that... I never tested if panels aligned to the right side of the screen actually worked before... so uh, I had to do that. The border for the panels we planned to overlay on top of them kinda bugs out when repositioned, a result of us only testing it on left-aligned objects, so I'm just gonna hard-bake those in. This also frees up a layer slot for extra displayables, which is a nice side-effect.

I spent most of the day trying and failing to implement BGM lowering when voice files play, so we're sticking with the old-school solution of manually adjusting it for now. Lipsync's flawless at least.
Instead, I've gone through all our voice files and balanced their audio a bit so that they play nicely with a max-volume BGM and our volume-dipping mechanic. Gotta do the SFX eventually too, but not yet.
Not sure how the game'll sound to other people, but I guess I'll find out on release! Nah, I'll probably have to release some demo footage and ask people if it sounds good to them. A sound testing room for the debug menu, hmm? I'm not sure I'll have time for that at this rate...

TakafumiSakagami
Regular
Posts: 101
Joined: Thu Aug 30, 2018 5:22 am
Completed: By Your Side, Yoshioka
Projects: Aious ~Proof of Concept~, Aidos
Organization: Kyacchi22
Deviantart: takafumisakagami
Contact:

Re: Yoshioka ~Startling Blue~ [NaNo2023][Idol, Slice-of-Life]

#21 Post by TakafumiSakagami »

My internet was dead until now, so uh... sorry for the late post.

With scene 1 and 2 complete, naturally the next stop is scene 3. It's a bit more complex than the previous two scenes due to me slowly adding more and more to it every time I've gone back over it, so... we'll probably end up having to do a bunch of small tasks along the way.

First, here are our storyboards for this scene. It's split into two because the scene is too large for a single sheet.
Image

Image

There are a few points of interest I'd like to highlight here.
First, we use all three pose transitions for Aoi's sprite: The default pose, the secondary pose, and the surprised pose. There's a lot of Aoi code to plug in here.
Second, we're making use of both panels and pannables across three different directions, sometimes with overlays, sometimes without, so that's another thing to program in.
As a third, the mentioned "BG floor pannable" is our wooden floor background that we made a while ago, so we'll have to grab a finalized export for that.
To keep it going, there's a yet-unmade element that gets some use in this scene: a phone screen. I haven't even planned this asset out yet, so we'll have to make it from scratch.
And finally, we'll need to go back to our voice synthesis setup in order to make Aoi hum a couple notes for the start of the scene's second half.

Also, since we're sorely lacking visual material to use in these posts, I've put together the framework of a main menu. I'm still not decided on the specifics yet, but this should work as a backdrop.
Image

There's a lot of business to attend to, so let's get started.

First, since we've already got Photoshop open, let's make the phone screen.
Well, calling it a "phone screen" is really glorifying what I plan to make here. In reality, it's just a static image.
Image
This is what our template looks like for the texting layout. There's also a social media layout and a video-sharing site layout, both using essentially the same shared assets.
However, in-game, I plan to blur over it, resulting in an image like this:
Image

You may wonder why I'm blurring over it, and that's fair. My logic is that... this is the only area of the game in which text could be presented differently. Everything up until now, every single scene and every line of dialogue, is presented in the exact same way.
Changing that consistency only for this one niche mechanic feels somewhat cheesy to me, and in my head, it doesn't mesh right with the rest of the game. It'd be drawing attention to something that's intended to be a background detail. It belongs as a background.
There's a time and a place for a fully-developed phone system, but this game isn't it. There's no importance to the phone itself; what's important is the information within.
So instead, the images we'll be using are merely rough representations of a phone, while the textbox communicates the action as it always does.

Next up, the video-sharing layout. A reoccurring technique we use to present information to the reader is our 'Eye Oh My!' segments, a podcast Aoi guests in a week before this story takes place.
We use this to get a wider lens on the world's events while the deuteragonists taxi around or browse their phones. It's a cut little cutaway that exposits info in a diegetic manner.
Image

And finally, the social media layout... isn't something we need right now, so we can save that for later.
What we can't forget is the textbox and namebox we'll need for our new speaker, Nori.
Image

Visuals done, next up is the little musical moment with Aoi. I thought it'd be cute to have her sing the first two notes of the BGM track that plays during that scene, so...
Image
Another small touch here is that she sings with "ha" instead of the typical "la" or "a", which is a super minor detail, but I like the implication of the breathier "ha" compared to the more confident alternatives, and... she is a self-taught loner after all.

Next comes the tedious yet addictive part: scripting it all. We play through the scene, write down everything that needs fixing or changing, make the changes, and repeat. Play > Note > Change > Play > Note > Change, over and over again.
You know how, when people play a Civilization game, they constantly play for longer than planned? They'll get hungry, or need the toilet, or want to sleep, but think... "I can play one more turn." Next thing they know, an hour has passed.
Well, that's me with scripting. I very quickly lose track of time, and I'm very specific when it comes to how long a pause should be or how fast a graphic should move, so...

Four hours later, the scene is complete!
Image
These were my first playthrough's notes.

I ended up making a bunch of new cleanup macros to reset graphic positions because there was so much motion happening in this scene, I couldn't keep track of it all.
Image

The wooden floor background has been finally exported for use, and the only real change I had to make was the size of it. I added an extra screen's worth (1920x1080) of white to the right side of the image.
Actually, it's a good time to address the gradient to white that occurs at the furthest right of the image.
Image
That's because we're panning it into this image, which has white on the left.
Image
Makes for a cute little transition.

I'm not sure how this change will even show up on other devices, but... for the semi-custom font we're using, "" speech marks are set up to look a certain way, a way that makes them mismatched when used in-line. I had to swap them all our for “” instead.
Same for '' and ‘’. Minor fixes, but worth mentioning.
Image

Aside from that, it was mostly a bunch of repositioning backgrounds and overlays, moving Aoi around, and checking for typos in code.

Oh also, I'm thinking about using that handy tint functionality E-mote has to add time-based lighting to the sprite. Not sure if I'll get around to actually doing that, but if I do... here's the comparison to look back on later.
Image

And on a closing note, sound effects haven't been implemented, and neither have voices, though I've plugged in the translations for every line up through to the mid-point of scene3, and the flow has been adjusted to roughly the correct tone, so that area of the game won't be lagging behind for long.

TakafumiSakagami
Regular
Posts: 101
Joined: Thu Aug 30, 2018 5:22 am
Completed: By Your Side, Yoshioka
Projects: Aious ~Proof of Concept~, Aidos
Organization: Kyacchi22
Deviantart: takafumisakagami
Contact:

Re: Yoshioka ~Startling Blue~ [NaNo2023][Idol, Slice-of-Life]

#22 Post by TakafumiSakagami »

Okay so last night—because my sleep schedule is a mess apparently and my days are starting to overlap—I did some quality control for scene 1's voice lines and exported them.
I then did a big check over some code and figured... eh, we can storyboard out scene 4 as well! So we'll be working away at implementing that today.

But when I woke up this morning, before I could open my eyes, I had a half-awake dream about programming a scene transition so that I may wake myself up. It was weird and kinda depressing, having to code my own ability to wake up... Also the music I was listening to while programming scene 3 continued playing in my head seamlessly once I woke up, so I felt like I was still working! Is sleep not a break!?
That music by the way is not the kind of stuff you'd appreciate hearing first thing in the morning. Way too heavy...

Anyway, here are the storyboards for scene 4. A bit shorter than scene 3, but longer than 1 and 2.
Image
Image
Once again, let's highlight the things that'll take the most work.

So first of all, this scene is actually a CG candidate. We almost certainly won't have time to do that, but that doesn't make out storyboards any less demanding. This is the scene that calls for the most stuff that stock assets can't handle.

Secondly, I've gotta point out the accidental poeticism I noticed while reading over the first page.
"She can sing, he can live. That's all."
These are just the first words from three completely unrelated sentences that mark where in the written script we are, but... they fit together quite nicely. It's uh... basically Aoi's story in a nutshell. Might have to remember that one.

But let's just focus on the matter at hand. We have three missing background images. That's right, three of 'em! One of a clock, one of a window, and one of a pavement.
The clock and the pavement are simple enough, so let's get them made.
Image

Using Blender, here's the pavement. 3 blocks with textures on them, reusing the lighting from our foyer scene. We've got variations for day, evening and night, but we only need the night variation for this scene, so that'll be all I'll polish for now.
Image

While we're polishing it up in Photoshop, I also put together a couple reflections which we'll use for the glass in the window background.
Image
And we render out some noise, which will come in handy shortly.
Image

For the clock, we're off into Clipstudio Paint. We're gonna be doing our drawing in here, and a bit of 3D too, but first, we'll import that noise.
A quick tap of the "convert brightness to opacity" button gives us all of the dark spots in our canvas of noise and gets rid of the white background, which we can bring on back into Photoshop.

This is a really dumb technique for something very boring that I developed around a year ago while working on Aidos, so uh... bear with me here. You can steal it if you want to, if that keeps you interested.
Though the application is boring, the reason I came up with it is stereotypically so: I was literally watching paint dry. Moved house a while back, bathroom walls needed painting, Taka needed the toilet... that all results in me staring at a drying wall far too closely, wondering how to replicate the texture. This is what I devised.

So, blank canvas of white, put a slight gradient on it so it's not just a flat color, put the transparent noise over it, and then add a bevel and a drop shadow to the noise layer.
Image
Duplicate the bottom layer of white, clip it to the noise layer, and adjust the bevel and drop shadow until it looks right. Then throw all of that into a folder, duplicate the folder, merge one of the folders, add the tiniest amount of blur to get rid of any harsh pixels, and now we have that weird dotty texture of a painted wall.
Image

As is, there are no imperfections, but you can add chips and dents into the texture by using typical feature brushes like shrubbery and clouds, along with analogue patterns and apply the same bevel and drop shadow to them to create that kind of stuff.

The background we're creating here is going to be a zoom-in on this section of a freebie we got online.
Image
So we'll need to make the clock, and maybe even the little note board pinned to the wall. A quick browse through ClipStudio's asset store gives us the same model of clock with a rotatable set of hands, a corkboard we can arrange the notes of, and... a small red drawing pin, because why not?
Credit for credit's sake, here are the IDs.
Image
Anyway, we throw our models into the project in the vaguely correct positions...
Image
Then we brush over it a bunch and figure out exactly where we want the objects to rest in the frame.
Image
The scaling of the clock is actually very important here because we need it to be no taller than 1080 pixels, otherwise, it won't fit in the game's window at full size. Gotta make sure it fits the whole thing on screen!

And of course, different times bring a change to the clock's hands.
Image
So that's the second of our three backgrounds done! Though actually, we made the window glass earlier, and we can repurpose the wall from the clock image.

And disappointingly, that's all we can manage for today. Compared to previous posts, pumping out two background images in one day sounds good, but when you consider the relative complexity between the prior Foyer BG and these simplistic scenery close-ups, it's a bit underwhelming.
I'm definitely starting to feel the effects of focusing hard on gamedev daily without break... or maybe it's just the fact I've had two bad nights of sleep close together?
Either way, I needed an actual "don't do anything to progress the game's development" kind of break. Conveniently, our main source of inspiration (read: I'm ripping them off) Idolmaster Shiny Colors is currently having its 5th-anniversary event.
A new idol for it has been announced, and to celebrate, the entire storyline relating to that idol is temporarily unlocked for all players to read, so I'm off to gather more inspiration and recharge my desire to create. It'll be good to look at something that isn't my own work for once.

The end isn't far from sight, so let's keep it up for just a little longer! The ten-day timer is a' ticking after all.

TakafumiSakagami
Regular
Posts: 101
Joined: Thu Aug 30, 2018 5:22 am
Completed: By Your Side, Yoshioka
Projects: Aious ~Proof of Concept~, Aidos
Organization: Kyacchi22
Deviantart: takafumisakagami
Contact:

Re: Yoshioka ~Startling Blue~ [NaNo2023][Idol, Slice-of-Life]

#23 Post by TakafumiSakagami »

Bit of a weird day for progress because… I didn’t sleep. Stayed up through the night and day in order to fix my out-of-whack sleep pattern, so I ended up favouring tasks that kept me awake over tasks that… need doing.

So although I did make an attempt at the window BG, I kinda hated the results, and since I already had my drawing tablet plugged in and ready to go…
I said I wouldn’t do this, but god knows drawing backgrounds or programming voices wouldn’t keep me out of bed.
Image
Not entirely finished, but a majority of the work has been done. I mean, this has technically been an entire uninterrupted day’s worth of work, so you’d hope it’d be close to being finished…

Okay well, I need sleep. I could probably think of things to say about the CG’s concept or the drawing process or something, but… sleep.

TakafumiSakagami
Regular
Posts: 101
Joined: Thu Aug 30, 2018 5:22 am
Completed: By Your Side, Yoshioka
Projects: Aious ~Proof of Concept~, Aidos
Organization: Kyacchi22
Deviantart: takafumisakagami
Contact:

Re: Yoshioka ~Startling Blue~ [NaNo2023][Idol, Slice-of-Life]

#24 Post by TakafumiSakagami »

As if it weren't traditional already, I end up overworking and immediately pay for it. I mentioned this back in my 2021 End of Year Update for Aidos, but uh... tonsillitis is a thing I get when my immune system is unhappy with me.
I think a combination of that flu from a while ago and the whole "stay up all night" thing was enough to set me off. I didn't even eat anything yesterday so I dunno what bacteria set 'em off, but yeah... throat not doing so good.

But a life is temporary and art is forever, so rather than dwell on it, let's keep working!

Image

The spontaneous CG is complete, though it's not like there was much left for me to do. I really wanted to change up the hoodie's design when I looked at it this morning, but considering this is a luxury and not a requirement, I don't think I can justify changing it.

Secondly, since I wasted more than an entire day on the CG, I don't know if we'll have time for the window background, so I'm shelving it for now. We'll just alter the storyboard a bit.

What I didn't shelve is the new Aoi animation I apparently didn't mention at all last time I brought up the storyboard. I guess past-Me didn't consider it important enough to highlight, but we needed a quick animation of her moving back and forth for the window scene, so I made that and titled it "Hurried".
While in there, I made a 4-second singing animation to match the Startling Blue clip we created all those aeons ago, and named it... "Singing". Kinda obvious really.
Image

Frankly, I'm not super sure if the singing animation will actually get used, but I'm too lazy to open up the sprite editor again so I got it in early, just in case.

With sound on the mind, I went and grabbed up all the remaining sound effects we need and edited/exported them. 39 of 'em! More work to cut them up and save them than you'd think...
The new cleanup code needed to be added to the old scenes, so while doing that I made sure to add some of these new sound effects in.

Oh also, since the CG is complete, we can go back and finish that menu we were working on!
Image

Basic idea is, you have the chapter heading: "Startling Blue", which acts as a drop-down menu.
When it hasn't been clicked, there's a play icon to the right of it that lets you play from the start of the chapter to the end.
When it has been clicked, that icon transforms into the chapter's CG, and a series of subchapter buttons appear, allowing you to watch individual scenes.
All of these have locked states: the chapter heading, the CG icon, and the subchapter buttons.

I'm not ready to commit large amounts of time into making all the individual menus we need, so shoving it all onto one page like this speeds up the process.
Image

Code-wise it's incredibly simple and modular. We make a new variation of our fade macro to handle buttons, make the background image display, and then simply put in the buttons. It's basically just a list of what we need.

Of course, I'm simplifying. There are some subtleties.
First, the chapter header only displays if the relevant script file is in the game's data folder, so in this case, the presence of the '1.ks' file (that the whole Chapter is written in) enables this 'Startling Blue' section.
After that, you can click that button to open up the Chapter 1 Submenu, which is little more than a glorified drop-down menu. The buttons start off locked but unlock as you progress through the chapter, allowing you to revisit what you've already seen without skipping through the entire game.
Also, your position in these menus (which for now is just "is chapter 1's submenu open or not?") is constantly tracked. I'll explain why later.

We've copied over the jump point code from the debug menu and renamed a few things, repurposing it as a replay mode menu. There are checks for if you're in replay mode all throughout the script, so you'll get sent back to the menu once your chosen scene has been watched.

And of course, once you've finished the chapter, the '?' icon in the Chapter 1 Submenu turns into a CG unlocked icon. We could make this into a CG Viewer button I suppose... I didn't think about that until now, but I'll add it to the list of things to do.

Now, why are we tracking the player's menu position? Well, the background image for this menu isn't just an image... it's an imagemap!
Image

Using an indexed image, this <5kb file holds seven crucial bits of info: which 7 colours are where. That information is passed over to the game engine, which then detects if the coloured-in areas are clicked.
If you were to click, for example, the red area of the imagemap, you would get sent over to section *m3 in our new interactive Aoi viewer script!
Image

Send the player back to the exact point in the menu script they were at when they clicked the imagemap and... Tada! They've just given her a pat on the head!

So, if you were wondering up until now why there was so much blank space on the right side of the menu screen... you now have your answer. That's Aoi's area!
You can see the sprite viewer in action, along with everything else I mentioned, plus new transitions, a bit of the splash screen section, and a brief skip through the first scene, all in this little demo video:


As a concluding remark, for the intro splash screens, the specific tone of blue used in my Game Development Circle's logo... just didn't fit the game. I couldn't get it to look good at all.
Image

This thing is ancient, as is the K22 favicon used for the dedicated website these updates are posted to. 2012, over ten years now. Been a long hobby, huh?
But why did I have to go and make that blue so strangely dark and yet so saturated? Obviously, I know why, but I should've known I'd need a lighter variant eventually...

I don't dislike the old stuff, and for other games (such as my main project Aious) I'll probably stick to this old logo... but for this game, I've decided we need something new.

So, taking Aoi's uniform as inspiration, we'll be using this instead.
Image

And with it, the website logo also changes.
Image

Man, I should've done this in 2022. The number's right there!

TakafumiSakagami
Regular
Posts: 101
Joined: Thu Aug 30, 2018 5:22 am
Completed: By Your Side, Yoshioka
Projects: Aious ~Proof of Concept~, Aidos
Organization: Kyacchi22
Deviantart: takafumisakagami
Contact:

Re: Yoshioka ~Startling Blue~ [NaNo2023][Idol, Slice-of-Life]

#25 Post by TakafumiSakagami »

Starting off back on the SFX train, our first destination was somewhere offering the sound of someone dancing with trainers in one of those dance practice rooms you see in every idol story ever. Unfortunately, that stop wasn't part of our train's line, so... I had to make it up. Turns out, there are still some unfulfilled niches when it comes to free sound effects!

I also went through scene 3 and scene 4 and implemented sound effects, plus, all the voices for scene 1 are exported, edited, and implemented. I'm a bit worried that these next 6-7 days might be too little for us to complete voice implementation, but... I'm crossing my fingers.

Also, I cropped some of our background music to remove any trailing silence from the start and end of tracks, so there's no awkward emptiness between loops. Why do so many people encode their music in mp3?

Now, back to finally finishing Scene 4. I actually did a blind program of it a few days ago, don't remember if I mentioned doing that, but I hadn't found time to test it. Today, I finally did that, so... Here are my notes for the first playthrough.
Image

A lot of these are tiny things like linebreaks and punctuation fixes, but we also missed adding a cleanup macro somewhere that ruins all our overlays, so we'll have to track that down.

While going over these small things, I made sure to check that all the animations run correctly whether you start the chapter up from the scene selection menu or whether you enter it naturally by following the story, which involved playing through the story.
Well, the game is almost 50% playable—in a polished state even—so now's as good a time as ever to play through all that's available to double and triple check everything.
I ended up playing through the game over and over for around three and a half hours (probably longer if you include breaks, but I'm judging it by the ~4-hour gap in my internet history) making sure it was all in order. In the replay process, I also made good on my idea of adjusting the Aoi sprite's colours depending on the scenery, though not in the same way I mentioned at the time.

First, here's our previously-posted pre-shading comparison...
Image

And here's the same shot but with the filter applied.
Image

We're using a plain ol' translucent image to tint the entire scene a certain colour. Since an orange filter won't affect an orange background much, nor a blue filter on a blue background, Aoi is the only part of the image that is noticeably affected by it, and it makes her fit the scene nicely.
Image

It's no Shoost level of post-processing, but as a quick solution to a problem most readers won't even care about, it works. Maybe if I have enough time to tinker with the E-mote tinting functionality I can switch over to that, but I'm in a real rush to get all of this programmed so that we'll have enough time to make all the voices we need. I don't even know how to actually build and release games made in this engine, so I want some spare time to figure that out. That, and my upload speed suuuucks!

Wait! We have the menu now! That means...
I can do this!
Image

Everything unlocked is everything that's complete! Only two buttons left to unlock!

TakafumiSakagami
Regular
Posts: 101
Joined: Thu Aug 30, 2018 5:22 am
Completed: By Your Side, Yoshioka
Projects: Aious ~Proof of Concept~, Aidos
Organization: Kyacchi22
Deviantart: takafumisakagami
Contact:

Re: Yoshioka ~Startling Blue~ [NaNo2023][Idol, Slice-of-Life]

#26 Post by TakafumiSakagami »

Onto scene 5!
Like always, we start with the storyboards… I’ve completed all of these by the way! Finished the final scene today.

ImageImage

There’s not really anything in particular to point out here since… we have all the assets now, we’ve programmed all the underlying systems, and we’ve streamlined the animation process while working on the previous two scenes, so… it’s a simple case of following the brief.

With the whole thing quickly programmed, we go for the first playthrough, and here are my notes!
Image

Yup, there’s barely anything wrong!
We implemented a new motion named ‘RightFast’, which brought with it two minor errors, and the rest is linebreak stuff and changing the amount of ―――― in one line.
It helps that this scene had no Aoi sprite, but it was the first use of some new overlays, so I was expecting at least one of those to look wrong…
Image

Well, we know what that means… Onto the next scene!

Okay, so… to be honest, I finished up scene 6 pretty quickly as well, so I decided to keep going. One thing turned into another, and now my day is gone and the entire game is finished… kinda.
Image

We have very little time to do all the voices, and we don’t even have basic functionality such as… saving, or adjusting/muting voices, or checking the message box history, or… there isn’t even auto mode! I really want an auto mode, so hopefully we’ll have enough time for all this stuff…

Also I decided to go ahead and implement that CG Viewer idea. Clicking the CG icon now gives you a full-screen image of the CG. Clicking again erases it. Simple.

So from here on out, I’m mostly going to be doing voice stuff, and I don’t know if I have anything to say about that, so… depending on how quick I get through it all, updates might stay as frequent as usual, or they may become a bit sparser…

For my blog-writing-addicted self, that’s definitely a bad thing… but for the state of the game, it can only mean good. There’s so little left to do!

User avatar
Rusaku
Newbie
Posts: 2
Joined: Tue Jun 22, 2021 12:06 pm
Contact:

Re: Yoshioka ~Startling Blue~ [NaNo2023][Idol, Slice-of-Life]

#27 Post by Rusaku »

I'm really impressed by how much effort and how much progress you made in the game in just one month, I'm excited to check it out once it releases(soon?)! Aoi is really cute!

TakafumiSakagami
Regular
Posts: 101
Joined: Thu Aug 30, 2018 5:22 am
Completed: By Your Side, Yoshioka
Projects: Aious ~Proof of Concept~, Aidos
Organization: Kyacchi22
Deviantart: takafumisakagami
Contact:

Re: Yoshioka ~Startling Blue~ [NaNo2023][Idol, Slice-of-Life]

#28 Post by TakafumiSakagami »

Thank you!
The release will probably be in a week; if I finish early, I'll want to use the time I have left to add more quality-of-life features!

TakafumiSakagami
Regular
Posts: 101
Joined: Thu Aug 30, 2018 5:22 am
Completed: By Your Side, Yoshioka
Projects: Aious ~Proof of Concept~, Aidos
Organization: Kyacchi22
Deviantart: takafumisakagami
Contact:

Re: Yoshioka ~Startling Blue~ [NaNo2023][Idol, Slice-of-Life]

#29 Post by TakafumiSakagami »

I took a break from posting yesterday, partly because there's not much to talk about anymore, and partly because... man, my body needs a break. I'm kinda brushing over how poor my health is right now compared to usual, but yeah, it sucks. Looking forward to finish, that's for sure.

Well, having the game in a ready-to-go state certainly helps, so I'm gonna be a bit more laid back for these last few days of the month.

First update, all voices up through to the end of Scene 3 are complete. Normally when I do a big task, I like to explain the process, but... it's SO boring. Get line in English, say it in Japanese a few times to figure out exactly how the sound your mouth is making works, adjust a bunch of sliders for pitch and timing, and then sometimes look up a dictionary or a pitch accent guide if you get lost.
It's very monotonous and you can't exactly watch something while doing it because... it's an audio-focused task.

So instead, I did a little bit of work on some visual stuff so I can show that off.

Image

Numero uno: there's a cute little triangle at the end of the line to indicate the text has finished displaying.

Nomor dua: we have a quick menu! Shortcuts to the config menu, load menu and save menu, as well as skip and auto-mode toggles.

Und nummer drei: Well, I basically already said it, but yeah, save and load is a thing now.

Image

No, this isn't what I plan for it to look like. It's a bunch of squares, no artistry behind it, but it's good to have ready for me to rush up a design for before the deadline hits... if I have time.

Oh wait, there's one other basic thing.
Image

It's not hooked up to a button currently, but a quick roll of the scroll wheel brings up a very simple history menu. My script should be pre-formatted in such a way that this menu doesn't struggle with missing spaces or linebreaks or whatever, but I haven't tested the entire script, so I'm trusting it to be perfect with blind faith.
...okay, technically it's blind faith and a decent knowledge of the script I've been building from the ground up for 27 days, but... it's still mostly blind faith.

Three to four days left, the bonus features have started to creep in. Happy End here we come!

TakafumiSakagami
Regular
Posts: 101
Joined: Thu Aug 30, 2018 5:22 am
Completed: By Your Side, Yoshioka
Projects: Aious ~Proof of Concept~, Aidos
Organization: Kyacchi22
Deviantart: takafumisakagami
Contact:

Re: Yoshioka ~Startling Blue~ [NaNo2023][Idol, Slice-of-Life]

#30 Post by TakafumiSakagami »

Another day of increments.

We’re still trucking along with voices, and we’re into scene 4 now! I’m starting to get a bit faster, but it’s still not fun work.
Image

When it comes to UI stuff, we’ve added that history button to the quick menu that I was talking about yesterday.
Image

Also we’ve done some small cosmetic changes to the save and load screens. It’s not exactly a full overhaul, but at the very least it looks more in-theme than the previous placeholders.
Image
Image

It’s written in the same language as my target audience’s now too, which probably should’ve been the case from the start…
I did a big test run of the saving and loading functionality—which I hadn’t messed with up until now—and to be honest, I’m marvelled that it works. We’re doing so much unintended stuff with the engine, I don’t know how it doesn’t break immediately…

One more tiny touch is a stealthy little button on the title screen.
Image

This simply gives us access to the config and file management menus from the main menu, so we don’t have to load up a chapter each time we want to load. Once again, an addition I mostly included to speed up my own work. The users can benefit from my laziness at least.

That’s all for today, but hey, at least I had something to say!

Post Reply

Who is online

Users browsing this forum: No registered users