Text Input and Custom Fonts (Godot Retro Text Adventure Tutorial #2)

[@cheshire3335]

It seems that in godot 4 there is much less work to do regarding the font After importing the regular and semi bold files, you just select the input node > styles overrides > fonts, and drag the font from the ressources tabs into the empty box. Here you can also adjust the font size. Since I wasn't able even to create a dynamic font ressource in godot 4 I had to look up what's changed and to the best of my knowledge it is this simple now, but let me know if I'm wrong, please

[@jmbiv_dev]

Thanks for pointing this out! Yes, working with fonts in Godot 4.x is way easier, and you no longer need a separate font resource for each individual size of font that you want. I'm sure others will find this helpful, so thanks for mentioning this!

[@benbutcher2608]

@@jmbiv_dev I noticed something else with the way Godot handles fonts. When I went to change the size of the font, it was set to 1, which was already the perfect size for the input area. Turns out that changing the size only makes things worse. So, if my assumption is correct, Godot 4 automatically figures out the best size for the input area and then sets it to the default size. So 1 is the best size for a best fit. I could be completely wrong, though.

[@rinmeikan6229]

They renamed Styles Overrides to Theme Overrides in the Inspector tab btw

[@Uhfgood]

Another interesting related tidbit. I'm on Windows 10. I started changing the font size while it was running, and it updated in the game in realtime.

[@croll_uk]

Nice little bite-sized chunks so as not to get overloaded. Awesome :D

[@jmbiv_dev]

Glad that it was the right amount of stuff!

[@cseiter]

Son used this software last year for their year long high school CompSci project they do every year. Taking this tutorial now to help him as I build my own game.

[@darkvioletcloud]

I know this is only the second video I've watched of yours of these tutorials, but man. I gotta say again, thank you so much for making these. These tutorials are so easy to follow and understand and I'm honestly getting excited just making these little things like changing the font and adding the caret! (I've been bombarding my friends with progress on my project and it's so miniscule to them but so accomplishing for me!)

[@yuli3873]

I love your attention to detail regarding styling and design, it's hard to find those in a programming tutorial. Thank you so much for this

[@jmbiv_dev]

I'm so glad to hear! Thanks for the positive feedback. I hope you continue to find the series helpful, and please feel free to join our Discord server if you ever need help with anything!

[@joelchrono]

I have to do this for a final project, I really like how its going!

[@jmbiv_dev]

Glad you're liking this, hope it's helpful for your project!

[@stevendevonport737]

REally love your approach in this series, you have yourself another sub

[@jmbiv_dev]

Thanks for the kind words and the sub! Much appreciated and glad that these can be helpful for you.

[@thomaseubank1503]

Styles is under Theme Overrides here too nowdays

[@YammoYammamoto]

Some issues with finding some options - as Godot has changed... ...but still a great intro.

[@enbermudas4269]

When will the 3rd part be released? This tutorials are great!

[@jmbiv_dev]

Thanks for saying that, glad they’re helpful! Part 3 will be out tomorrow - I’ve got quite a few videos already recorded for this series but they’ll be coming out one per week over the next couple months since things are pretty busy right now and I’m not recording most weeks 🙃 but if that changes I’ll start pushing them out quicker!

[@Azurantine81]

Great tutorial, earned a sub.

[@jmbiv_dev]

Thanks so much for the sub! Glad you're still enjoying the series.

[@chiligoat5542]

Plus points for mentioning the importance of screenreader accessibility, oft forgotten! Is there a way to affect the focus styling property through code so that one could create a user-defined toggle in an options menu or similar?

[@jmbiv_dev]

It's super important! I've historically been bad about thinking about it, but trying to be more mindful 🙂 and yes! within the custom styles for most Control nodes that can be toggled/focused, there should be a "focus" style - you can use this to adjust how it looks like when an item is focused!

[@chiligoat5542]

@@jmbiv_dev Oh, that's even better, then one wouldn't even have to have a toggle switch but it could always be on without being visually present for sighted players. Cheers!

[@kentate94]

Really liking your videos so far

[@jmbiv_dev]

Thanks, so glad they're helpful for you!

[@drbit-la]

There is any way to restrict the input characters, e.g i want to use only alphabetical and numerical characters, how can i do that?

[@jmbiv_dev]

Good question! There might be better ways to do it, but one way that comes to mind is to connect to the "text_changed" signal of the LineEdit, which gets fired whenever the text changes. In the method that you connect to that signal, check the new text that gets passed in, and you can use either a RegEx or find the unicode character values to see if the text contains anything that isn't alphanumeric. Then, if it does, eliminate those invalid characters and then manually set the LineEdit's text value to be your new, cleansed text. Hope that helps!

[@aboodispam]

Thankks these tutorials help a ton

[@jmbiv_dev]

Awesome, great to hear, thanks for watching!

[@VitMineGD]

How to make it that way, that when you tap enter while you're typing it basically saves the font and you are not typing in that Input anymore

[@desoft8b]

Hey thanks good job dude.

[@jmbiv_dev]

Thanks, glad it was helpful!

[@qmerk2661]

im having an issue in the section with the caret and the input be separate. now i have a white outline around the input area. how can i get rid of that? guessing it didnt used to do that in the version of this video. but it does it now. edit- nvm, i paused the vid to ask that, and should of kept watching lol. u mention it. i just couldnt see it in the video

[@qqun]

You released the parallax tutorial around the time i was figuring it out, now this? i have no need for this as of the moment but I was just wondering about this earlier. Thanks

[@jmbiv_dev]

Ha, that's funny, glad the timing worked out 😂

[@amitkrishna4645]

Hey I'm late to the party but I was wondering what purpose the panel container called 'Input Area' serves, wouldn't it be possible to just have a hbox container as a child of vbox container to achieve the same layout?

[@ExploreGameDev]

Thanks!

[@jmbiv_dev]

No problem! Thanks so much for the tip - it's much appreciated! Enjoy the tutorial and please reach out with any questions.

[@ArsidesM]

I'm in godot 4.1.1 and I cant find this "DynamicFont" resource... Instead there are three resources ("FontFile, FontVariation and SystemFont") but none of them have the functionality of "DynamicFont" presented here. Could anyone point me in the right direction?

[@mrbleepycat6629]

I hope you've found the answer by now, but if not (or to anyone else having this issue) he hints at the answer in the video: you no longer need to create a new text resource. You can skip that step entirely. Instead, select the LineEdit node (named "Input" here), scroll down the properties panel to the right, under "Theme Overrides" expand "Font" and simply drag and drop the ttf files you imported into the slot. Directly underneath that is "Font Size" where you can manually change the size. Repeat this process for the Label to make the Caret.

[@mrneutral8423]

This is so helpful. Subscribed!

[@jmbiv_dev]

So glad that this series could be helpful! Thank you for the sub!

[@jacobstine8693]

I am having a problem where when I hit play the preview looks nothing like what I have on screen

[@jmbiv_dev]

If you join our Discord server, you can post a picture of what your game looks like when you run it and we can help you debug more there!

[@tails_the_god]

I'm having trouble with the sizing of fonts... I first matched the size pretty similar to the same font in another engine but it doesn't look the same... how can I fix it?

[@jmbiv_dev]

Hmm, not sure, you might have to post some pictures in the Discord server to get some better advice. The only thing I can say without seeing it is that your game's window size can affect how fonts scale up/down, so if you've got a really small game resolution that might cause weird scaling things to happen. Otherwise, not sure, try and make sure you're changing the size of the font itself and not scaling the label node.

[@CT2507]

Can we not change the font in the text editor? I find it kinda thin too look at.

[@jmbiv_dev]

Do you mean the font of the Godot editor itself? You should be able to change that in the "Editor" settings option from the top menu.

[@CT2507]

@@jmbiv_dev No, just the text editor.

[@qqun]

Completely unrelated but, may I ask, how can you make it so that lerp() takes a certain amount of time? Say, I'd like to interpolate this value to that value in exactly 3 seconds? Or would I have to use a tween for that? I know tweens can do that but I don't unnecessarily want to add another node to my tree if I can do it with lerp.

[@jmbiv_dev]

Good question! lerp() is meant to be more weight-based, rather than time based. You could theoretically calculate the right weight to finish an effect in a certain amount of time, but that's going against what lerp is for. Your best bet is like you said - probably to use a tween or timer node. It does mean adding something to the tree, but it's the best way to do it.

[@qqun]

@@jmbiv_dev Thanks! I asked this on the Godot Engine - Q & A, and I was also recommended to just add a tween. I was given the formula if I still want use lerp(), and if anyone wants to know, here is the page: godotengine.org/qa/95110/how-to-use-lerp-to-interpolate-two-values-in-set-duration-time

[@jmbiv_dev]

Thanks for sharing! Also, lawnjelly's smoothing addon is definitely worth checking out, kind of in the same vein: github.com/lawnjelly/smoothing-addon

[@befasterbefaster2280]

thanks. how write superscript and subscript?

[@jmbiv_dev]

Good question! We'll get there eventually when we start using BBCode in a RichTextLabel, so keep on following the tutorial! Alternatively, take a look at this thread for the BBCode tags you'll need for super/sub script: skdavis.net/viewtopic.php?t=130

[@befasterbefaster2280]

@@jmbiv_dev thanks for your replaying , but it is not working in GODOT.

[@g0ldhat55]

OH MY GAWDDDDD

[@Rin-qj7zt]

I work with a community volunteer team of devs planning on making a game in Godot. Moving away from inform 7. I shall make liberal use of these tutorials x3

[@jmbiv_dev]

That's awesome to hear! I hope you all find this helpful, and feel free to reach out with any questions.

[@stephenwarren6539]

hello how did u open the zip file in godot please ?

[@jmbiv_dev]

Are you talking about downloading the repository from GitHub? You probably want to download it using Git (a source control software). If you aren't familiar with Git and don't want to learn it, just unpack the zip file onto your computer, and then open Godot. There should be an `Import` button on the right side of the project list - select this and navigate to the folder where you unzipped the repo. Hope that helps!

[@stephenwarren6539]

@@jmbiv_dev its ok i was doing it correctly but not pressing to illuminate so it wasnt activating its all working now but thanks for the reply ..you have a good tutorial thank you

[@Red_Eagle]

font doesn't work, the text doesn't show up

[@jmbiv_dev]

If you try different fonts, do those work? Or try hiding and then re-showing the label? If you're still having trouble, hop into the discord server and we can help you out there!