New Essential Features ✨


Yo, back again with another update. Quick shout out to everyone who has shared feedback in the Discord so far, the latest demo should address all the bugs you've identified and moving forward I'm really excited to work on new designs and improvements inspired by your feedback! Scroll to the bottom for a full change log if you're curious.


Since I just added a bunch of essential quality of life features, I figured I would use this post to talk about some of the tech that powers those features. A big part of why indie games can take so long to make is that as players we've all gotten used to a lot of quality of life features and options that seem like they should come "for free" with a game engine or something. I think it's still the case that many players don't realize how much work adding the boring stuff can be!

Scrolling For A Better Tomorrow

So I just added an options menu with a bunch of settings like combat speed, text speed, high-res fonts, high-res cursor, and all the typical display adjustments you'd expect (controller support and key rebinds coming later).

While implementing some of these options was kinda tricky, I'm not gonna go over any of those details...I'm actually gonna talk about how the options themselves are rendered!

One of the most boring but essential pieces of tech I had to build for this game is a scroll view. You know, the ubiquitous UI element you see on pretty much every window that allows you to seamlessly scroll through pages of content using a scroll bar (you're probably using one right now as you read this).

Every time I talk to one of my non technical-friends, they're always surprised that I have to program things like this. "Doesn't it just do that for you?" In the case of Unity, sort of, but it's not really usable.

To understand why, take a look at this demo of the stock Unity scroll view on the left, and my implementation on the right:



Looks the same, right? Except that the Unity scroll view (left) works by loading all of your content at once and then passing it through a masked viewport. My scroll view (right) has a pool of content renderers instead and as objects leave the viewport they get recycled to display the next row of content. If we turn off the mask, you can see how it works:

From this toy example, you can see that you really only need 3 items to render a viewport of this size. Therefore, the custom scroll view (right) saves us from rendering 2 items compared with the Unity one (left). Not a big deal really, but what if you have 500 items? In that case, the stock Unity scroll view would require you to instantiate and move 500 objects, while the custom scroll view on the right still only needs 3!


Scroll Views For All

This optimized scroll view becomes even more important for performance as the objects you're scrolling get more complicated, e.g. a card library where each card is composed of multiple sprites, icons, and text elements. This was the original use case I had for writing a custom scroll view:



In addition, having a nice scroll view like this that renders out any arbitrary array of data dynamically also lets you easily transform the data on the backend and have the scroll view take care of the rest! This makes it super easy and performant to add features like a filter or search bar.

I've even added settings that let you create grids of any size which scroll in any direction, plus you can animate the transitions. This custom scroll view has become so flexible that I've used it pretty much everywhere in the game, from my debug console to the card shop. 

It should come as no surprise then that this is also how I decided to build my options menu!

Each submenu is rendered via a single scroll view:  whenever you click a button on the left, I ask the scroll view on the right to render a different list of options. Each individual option in the scroll view is an "option renderer" that can switch between different modes of input (pickers, checkboxes, sliders). This means that adding to or updating the options UI is completely automatic: all I have to do is tack on another element to the Unity inspector. Here's a demo:


I think you get the idea. But wait, in this update I also added save management UI! I think you can guess where this is going...

...scroll view!



Should You Do This?

Alright, alright, so writing a custom scroll view is definitely not the sort of thing you want to be spending time on in a game jam. BUT! In the long run, I'm a big fan of finding excuses to get away from as many of these stock engine systems as I can. For any system you want to replace, the cost/benefit analysis has to make sense of course, but you may be surprised how big the upside can be:

  • You never have to deal with your game breaking when you update the engine because the engine developers decided to redo the API on all the stock components.
  • The stock components are often pretty bad and lots of times it's not hard to make massive improvements that all of your future games will benefit from with a few days of work.
  • You own this tech! You can make your components behave exactly the way you want and straight-forwardly adapt them to any situation. You get to specify the interface, and it only changes when you feel like changing it.
  • You can take your custom implementations forward with you into every new project. You can keep improving them little by little as needed, e.g. I've been using and improving the same custom UI button for years!
  • If you ever need to switch engines, you can port your custom stuff instead of having to re-create an oft-used feature from the old engine that's missing in the new engine.


Anyways, I'll leave it there for now. Let me know if this post has given you a new appreciation for scroll views!
-Luno


---


Demo Change Log

  • Added an options menu with tons of settings including controls for combat and text speed! You can also configure all the typical display stuff, change the cursor, adjust texture quality for performance, et al.
  • Added an option for high-res fonts. Note that I have not chosen and styled the high-res fonts yet so this setting will look better in the future. I made all the pixel fonts myself but I'll forgive you if you turn them off!
  • Added save management UI!  Your old save will likely appear as "autosave" at the bottom of the list (along with some debug chapter select saves that you can delete). You can modify the preferences file if you want to add more save slots, or rename your save folders if you want to "move" or rename any of the slots (e.g. rename "save_autosave" to "save_1" to put it in slot 1, or "save_YourNameHere").
  • Completely reworked the way the game is displayed and scaled. The result is that the game should look much nicer at any resolution you throw at it, especially the fonts. There's also an option to lock the game to a pixel-perfect multiple of the base resolution. 
  • Added a keyboard shortcut for accessing the game menu (backspace). This is in addition to the back button (escape) with will also eventually open the menu.
  • Made the game menu button accessible from all screens and during dialog.
  • Fixed an issue where repeating dungeons allowed you to re-recruit adventurers.
  • Fixed an issue with dungeon unlocks not saving/loading properly.

Files

CandlewoodWin.zip 57 MB
2 days ago
CandlewoodMac.zip 58 MB
2 days ago
CandlewoodLinux.zip 61 MB
2 days ago
CandlewoodWeb.zip Play in browser
2 days ago

Get Dark Cards of Candlewood

Download NowName your own price

Comments

Log in with itch.io to leave a comment.

This was a super interesting read! I had no idea default scrollview just preloaded everything like that in Unity. I'd guess that it probably works the same in other game engines like Godot too, because it's simpler to set up? I might need to steal your idea and implement such an optimized scroll view for my projects in the future.

What really intrigued me is how you approach settings menus. I hadn't thought of such a modular approach, but it makes so much more sense than hard-coding every option and slider by hand. Can you go into more detail on how it works?

I'd love to adopt this approach for my current project. It's basically done, but I've been procrastinating doing the menus and settings for a month, because UI is so scary and boring to me at the same time. (And also the sound lol).

Also thanks for fixing the bugs I reported on discord! ❤️