Code Of Elm

Hello! I'm a real-time artist and indie developer. This is where I ramble daily as I teach myself new things. See my projects here.

[codeofelm]

DAY 28 - Adding modal custom UI.

Hello!

Isn't this little modal UI pretty? Yes! Which is why I grabbed the prefab and put it into Project Dragon. I wanted Hints/Tips to pop up as a separate thing from the 'confirm' command. They didn't really need confirmation, it was more of a bigger notif for the player,

Easy enough, except when I started the game, the model UI didn't only appear when I called it. It appeared the whole time, even on the main menu. Whack!

The solution to this was fairly simple. On my new UI, I needed to make sure Visible on Awake was not ticked!

Now that tthat was out of the way, I needed to edit the prefab. The original had default text assets, but honestly they looked a little blurry. I wanted to use TextMeshPro, it's sexy, clean, and Naninovel's new default as of version 1.19.

I created TMP font assets, in the font that I wanted. Which I think was Georgia... for now. It will change once I finish the look and feel for the overall project. I followed a quick refresher for adding a new font to TextMeshPro (not hard to do at all), and got cracking.

I dragged in the Custom Variable Trigger script, and set the custom variable to "tip", as will be set in my story.

Then, to get my new modal UI to work with the command, I needed to add a dynamic string textmeshproUGUI text, onto the text object.

If you don't know how to do this, check out the calender tutorial for naninovel.

Now, I needed to test and make sure my UI and text string variable worked. I wrote a very short scenario, that would make the Hint UI popup. When it did this, the text would be blank, as nothing has been set up to the tip variable.

Then, I set the tip and showed the UI to make sure it came up. (Important to set the tip first so it already appears).

Now, everything works!

[codeofelm]

DAY 27 - QoL - British English

Small Update. Still working on things in the background, but I was getting annoyed with all the spellchecking marks that came from me using British English in my writing and my variables.

Turns out, Code Spell Checker has a British English extension,and it is picked up automatically. Huzzah!

[codeofelm]

DAY 26 - QoL - How to see Custom Commands in your IDE, with Naninovel and VSCode.

Previously, I had issues getting the custom command @confirm to appear as known in my IDE.

Everytime I wrote anything, I had these sad red squiggly lines, saying command unknown. When I loaded the project in-engine, I got an even sadder error, immediately.

I thought, maybe there was something wrong with the metadata, or with the script for the custom command itself. I suspected something had to be up, because my metadata file was EMPTY, and everytime I selected purge cache in vsCode or update metadata, I could have sworn nothing was happening.

Spoiler: Nothing was happening.

But let's find out why!

Looking at the documentation, I sheepishly thought the setup directions were based on whether you were using Naninovels in-editor unity editor, or VS Code. I was very wrong. All this time I was missing Newtonsoft Json!

You'd think that means, sunny skies ahead. No.

It clearly says to install via Unity's package manager. I thought OK, cool. But this isn't available on the asset store, and nothing came up when I searched the package manager in-editor.

Because, I didn't understand how the unity repo worked.

I clicked the documentation, the guide, frankly I was lost. And I knew I was lost when I got as far as to wondering if i needed to install this via the NuGet package manager and make an account over on that platform. It couldn't be that much of a faff. It wasn't until I found the one video, that came into existence only 3 months ago did I understand anything, at all.

I needed to take this one link: com.unity.nuget.newtonsoft-json

And add it via "add package by name" in the package manager.

Apparently, that's enough, because once I copied the link into the name field, it loaded for a little moment and brought up the wonderful Newtonsoft Json from Unity Registry.

And then after that, everything went wonderfully! I closed and reopened both Unity and VSCode and--- nothing.

But, the panic was short lived. I saw the note to make sure bridging was enabled on both sides, and that the server ports matched. I had seen the server port number in the vscode settings quite a few times on my journey, so once I enabled it on the unity side of things and saw the number was the same. I knew the end was in sight.

No more sad red squiggly lines under my command! No more "command unknown".

My scripts look like all is well again.

[codeofelm]

DAY 25 - Designing for inclusivity

One feature, which I am quite keen to see implemented, are pronouns and romantic preferences for the player. However, this could get a little complicated, so I'm seeking references from various sources to see how they handle gender and pronouns.

Appearances

Although I have not yet included sprites, the player's appearance will determine which sprite is used for them. This should be a global variable.

I've set this with a global variable of mc_sprite, as its independent from pronouns. It's set to femme, masc, or nb, but it could just as easily be 1, 2, or 3, for the respective appearances.

Display Names

THIS WAS A FAFF. Turns out in the end was my ManagedText resources were under Assets > Resources > Text, and not Assets > Resources > Naninovel.

And then inside the actor record, I have {nameSet?playername:T_PrologueName}.

I ended up with this arrangement. Why? So that all the characters can change name at any time.

Next, is the beast of pronouns. It'll be a long one so I'm saving that for another post.

Thanks for reading.

[codeofelm]

Day 24 - Content Warnings and custom UI

100% right about those new hurdles. Hello! We're moving onto the next thing.

I decided to go through my edited script one line at a time, no doubt there will be something to learn there, and there was right. My first task was finding the best way to implement a Content Warning. Way before the game starts.

Now, Naninovel has a few things built in, such as a "toast" pop-up notification UI, NVL format dialogue boxes etc etc. However, what I needed was to modify the confirmation UI, which appears when you save, load, or exit the game. I needed to be able to modify this contain a content warning. Fortunately, I figured, I was not the only person who required this!

Xaaneath created a simple confirm script here to display the Naninovel Confirmation UI, and allow you to edit the message displayed.

GitHub - Xaneath/NaninovelConfirm: A simple utility to display a Naninovel Confirmation UI using a script command.

A simple utility to display a Naninovel Confirmation UI using a script command. - GitHub - Xaneath/NaninovelConfirm: A simple utility to dis

To get it to work, I had to define which script label I wanted to jump to on yes, or no. As far as I can tell, I had issues jumping to labels from different scripts with this, so I simply made a label in the same script. I will probably use this script for other initializations too.

Thanks to TMPro, I can format this text just how I like it too. So now we have this!

Simple enough! The only issue I can see is once I start creating my own confirmation UI, and need to move away from this. However, that should be easy enough to redo. My other issue, is not using managed text for text confirmation. This will be needed for localisation.

Currently the script is very simple, however, someone else seems to have added their own confirmation UI on EXIT script.

However, to keep things simple for my brain. I have struggled to get this to work as a managed text for now, for localisation. But I will return to it in the future!

Thanks for reading.

[codeofelm]

Day 23 - Quality of Life for the dev

Making a visual novel, is all about the words. I mean, it's also about the art, the music, the graphics, etc etc, but still, a lot of it is words. So a lot of writing needs to be done.

With that in mind, I have the naninovel IDE extension for VSCode installed!

I'll also be making sure Code Spell Checker is installed! https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker Now, before I get started writing the script. I needed to make sure TMP Essentials was also imported! I then set the prologue script to be my start script in the naninovel configuration.

And that's about it. (I overwrote what I had and forgot, so I'll see you tomorrow).

Thanks for reading.

[codeofelm]

Day 22 - Getting Started

Honestly, I think before I overwhelmed myself by trying to learn too much too fast. I have 22 draft posts and I don't understand a whole chunk of them.

Right off the bat, I went ahead and deleted the main camera int he sample scene. For now, we don't need it! It's crap. We're making a visual novel, we need not these fancy tools. We're scene independent. Now, we need to install naninovel. So, let's head to the asset store meny and install it. Since I have access to the discord support server and the latest stable release 1.19 (a version I'm choosing to use due to its major updates and TMPro support), I import the .unitypackage directly by going to Assets > Import Package > Custom Package and import all items. The version on the asset store is v.18 and I really can't be bothered to deal with the game breaking updates.

And now, Naninovel is installed! Yay!

Next time, we'll look at another QoL change I'll be doing.

Thanks for reading!

[codeofelm]

Day 21 - Unity - Project Initiation

This is so awkward, because every year or two I seem to come back with newfound motivation.

Of course, I'm back, and I'm lowkey starting again, but not really. I have my old projects, but I've decided to continue on with a large solo project, where I will definitely learn tons and make plenty of mistakes. It's probably too big to even achieve, but I suppose if I'm go to go at such a slow pace, I should go with the one project I definitely want to see finished. So here we are, working on Project Rogue. Let's take it from the top!

I've made a new project. Naninovel is on version 1.19, and we're using Unity 2022.3 LTS to see this bad boy through. I think last time I had the basics down, so I'm not scared of doing a simple visual novel in Naninovel from the script implementation point, but I will be taking this one step at a time with something more complex. There are a lot more variables and I hope it pays off. I've made my git.ignore file for GitHub. You can stalk me and the project here: https://github.com/CodeOfElm/Project-Rogue I also came across this up to date resource for git files: https://www.toptal.com/developers/gitignore/ and edited mine appropriately to fit.

I've done more, but it's probably best to break these into shorter posts.

Thanks for reading.

[codeofelm]

Day 20 - Changing Fonts

*** This is an old post and no longer relevant.

OK! I'm back from holiday.

The first thing I, for some reason, wanted to implement was a different font for Drop Dead Daters, and in the future allow a font option.

To do this, I had to select a font I liked. I personally liked FS Me for the accessibility option, however, it's an expensive license. So I've opted to use Google's ASAP font.

Asap supports languages using latin characters, which is not ideal for wide support, but it's very unlikely that the game will be available in other languages at the moment.

Since Unity and TMPro support .ttf, that's what I'll use as a variable font type rather than a static.

To implement it into the project, I first need to make it usable in TMPro. I followed this tutorial to make sure I did it right and create a new font asset. https://learn.unity.com/tutorial/textmesh-pro-font-asset-creation.

After I created my font asset, I needed to make sure I can use it in place of Roboto for my text printer. I then created a new TextPrinter to associate with Sevim and set the font as Asap. After realising that I lost the white underlay, I introduced myself to TextMeshPro Presets.

I followed this tutorial for that: https://learn.unity.com/tutorial/textmesh-pro-working-with-material-presets

I also had to set up the Revealable text shader within the new material text preset I made for the revealable text version of Asap. (There's also an underlay version for the names)

In the end, a lot of it looks the same font wise, but I learnt a lot!

[codeofelm]

Day 19 - Upgrading and moving on

So after reinstalling unity stuff and upgrading to the latest version of naninovel, I am back to continue.

Because I took some time away, I forgot what upgrading naninovel entailed -- overwriting some of the default settings, such as changing the typewriter effect. But going back down this rabbit hole reminded me about the nested nature of prefabs in Unity3d. I've decided to continue on with the common route and get a free more of those poses in. Even though my PC is clearly on its last legs. Thankfully, the notion was very thorough.

Since I'm going to be travelling again soon, I want to get as much possible done in the next couple weeks. More placeholders

Of course, this is obviously the day and time where my brush sensitivity decides to bork, but we press on.

Everly poses are drafted, but its become clear to me that she definitely needs to change poses and react to what other characters are saying. This will be true for all other characters so we'll be needing a pass on this too.

[codeofelm]

Day 18 - Implementing more placeholders

Have I been slacking? Yes, and I forgot nearly everything. Been focusing on other projects in the meantime, but I'm back with some updates so let's kick this off.

Professor Poses

Worked on the professor pose placeholders and there are quite a few of them! I'll be doing all the poses for the characters... for some reason, but that's fine since it lets me sort out the coding side of things!

Aaand that's it. Lots to catch up on, right?

[codeofelm]

Day 17 - Final script & Comments, Implementing directions

After a couple live edit sessions, we finally have what might be considered the final script for DDD.

We went through and highlighted all the poses we might want to use, when and where they happen, and other small narrative directions.

This gives me the basis I need to start implementing placeholder assets so we can review the pacing.

Commenting

Since I'm new to Naninovel, this mostly involved us leaving lots of comments so I can tackle those directions one step at a time. Possibly a tedious way to go about it, but it's a learning curve.

Placeholder Art & Expression Coding

After the comments were all in, I went about playing with some transitions for both the placeholders and animations. They're super rough and not refined at all, but the one thing I noticed is that as I put things in I start thinking of other things that would be cool. Like blurring the BG during the call.

For the placeholders, I really just wanted to adjust the eyes, although they will definitely need some refining as I've gotten quite lazy when it comes to art. Need to warm up my engines again.

There are a couple of ways to implement things in Naninovel, and I've been playing around with how I do it in the script. No doubt as time passes, my script will look less of a hot mess and I'll figure out a nice streamlined way to go about implementing everything.

I promise we'll figure this out together.

[codeofelm]

Day 16 - Placeholder Assets, Art Direction Moodboards

Took a brief break to focus on making a placeholder BG for the game. I already had an existing moodboard, that I used when considering the camera angle and lighting of my placeholder.

The only reason this matters at this early stage is because I intend to use them as reference for the final piece.

Other than that, I familiarised myself with the bubble chat and text reveal in Naninovel.

The main thing here was understanding how to place the bubbles/space them out, and changing the text reveal from its gradual fade to a typewriter effect.

Simple stuff!

[codeofelm]

Day 15 - Implementing more script with Naninovel, Using markdown in VSCode.

After sitting down and doing an editing run, the rest of DDD was available to start implementing into Naninovel. Adding Rich Text / Markdown to VSCode

Very quickly I tired of manually adding markdown tags and combing through my script to see what should be italicised.

Fortunately, someone else had this issue and created a shortcut for naniscript in VSCode that lets you treat the file like MS Office. Here's the thread! https://forum.naninovel.com/viewtopic.php?f=8&t=474 The shortcuts, allow you to use the following in VS Code:

CTRL + B = Bold

CTRL + E = Italic

CTRL + U = Underline

CTRL + O = Text Color

CTRL + M = Mark Text

CTRL + R = Align Right

CTRL + E = Align Center

CTRL + L = Align Left

The code looks like this:

You can find the full code in that thread! And, it works a charm in my IDE!

I also managed to get in all of the second route! I made the little discovery that rich text formatting is actually supported within choices too!

[codeofelm]

Day 14 - Script Expressions, Testing,

Script Expressions

I reached a point in my script where I needed to inject expressions into my story. Naninovel allows you to use any math or logical operators, as well all math functions from the unity/system namespaces. Frankly, I'm not yet smart enough for that to be benefitting me, so I'll be learning as I go and referencing the expression functions example page a lot! I kept it relatively simple, although I could be wrong about this already.

I had an issue with my elseIf statements, because I had typed elseif instead of elseIf. The reason was that simple, could have potentially screamed. Testing

Getting Coda, my dev partner, to test the little bit of script I did manage to get into the build was eye-opening.

Some things that came to light immediately were:

Actor records did not always sync if I had them in configuration and as an asset. This resulted in a character having the right name in editor play mode, but the wrong name in the build. Check your builds!

Actor tags are Case Sensitive. A small typo will give the wrong character tag.

@toast will disappear immediately if followed by @title, where it returns to the title screen. To avoid this, I've put @toast before the last dialogue line. However, @Stop may also work here.

[codeofelm]

Day 13 - Naninovel, Textmesh Pro, and Formatting.

Back in Naninovel, things are still pretty straightforward. However, going through the script I noticed minor formatting tags that I wanted to include! I decided to enable TextMesh Pro in this project, as Naninovel does support it, and I will probably want to use the wider features such as emoji's and other formatting styles, later. TextMeshPro

First action was to DL TextMesh Pro from the package manager and import it.

Although I'm not doing any GUI edits at the moment. I've made a mental note to apply "Naninovel/RevealableTMProText" to the shader of the font material, to ensure the text reveal works. At first, I immediately had compile errors, but it seems that this is easily resolved by deleting the plugins folder under the TextMesh Pro folder, as the package manager now also includes a plugins folder and the two conflict with each other. Steps to solve this are here: https://www.youtube.com/watch?v=wbE-ngYDjZ8 But, in short, after importing TMP essential resources, you use the project files GUID remapping tool, and it's just one click! After this, the game built fine with no compile errors. Hot Reload - Naninovel

After making a few formatting changes in Naninovel, I immediately wanted to check them out. This took a while, and frankly, I quickly realised I needed a better solution for this. Fortunately, Naninovel has one. The first is "Hot Reload". This allows you to edit your script in play mode and have the changes saved. The two settings needed to have enabled are found in Edit -> Preferences -> General, and these are "Auto Refresh" and "Sctipr Changes While Playing" set to Recompile and continue playing. The Development console

Naninovel also lets you use a development console. Activated by the back quote key by default. (`)

The commands that benefitted me immediately were:

nav (toggles naninovel script navigator UI)

debug (toggles naninovel script debug window)

var (to see the custom variable editor window) The variable editor, allowed me to see immediately that my string variable was not being recognised, because I forgot to wrap the string around double quote marks.

set: compliment=nails does nothing, but set: compliment="nails" is recognised!

Aaand, that's about enough for today. I spent the rest of the time looking at if/else and math functions,m but I'll talk about that tomorrow!

[codeofelm]

Day 12 - Naninovel Formatting and itch.io butler!

Back into Naninovel! I wanted to get more of the script in today, commenting out anything I didn't know how to, or couldn't address immediately.

I wanted to give myself at least an hour spent on 'gamedev', each evening.

Naninovel

Formatting

Getting in basic formatting was no issue. Naninovel seems to support basic markup tags, such as etc. This is because it uses Unity's default text rendering system. However, it is possible to set up TxtMeshPro right at the beginning of your project and utilise the formatting for that, too.

Itch.io & butler

My second task of the day was to familiarise myself with itch.io's butler.

butler is a command line tool that lets you upload builds to itch.io. I installed butler through the itch.io app, to ensure I receive updates for it. After that, I edited my system PATH so that I could run butler from the command line.

Logging in to our dev account was pretty easy! Phew. I was already logged in. I imagine this may cause issues with me needing to push builds on a dev account, versus my personal work account. But I'll cross that bridge when I get there, or just... log out of butler and relog in. I was able eventually push my build using the following syntax:

butler push "directoryURL" accoutname/projectname:win-alpha --userversion 0.0.0 (in this line, win refers to windows as I uploaded the windows version of this build!) It took no time at all!

Now I know how to push build's to itch.io, I'll probably do them with a literal more regularity to share with my teammates.

Thanks for reading!