Small Update: Fixing All Issues (Learn From My Mistakes)


Since I told you all the unconventional methods I used and all that went wrong with my point-and-click horror demo, eventually comes the day to fix (most of) my mistakes. Sooo, jump on the ride!

1. *deep breath* Navigation

In my previous post, I showed you all my cute, minimalistic, and unfortunately very useless navigation. So how did I fix it?

I didn't want to lose the minimal feel completely so I kept the arrows thin while adding a semi-transparent button background, extending it from top to bottom of the screen. It's still elegant and on-brand while making it more noticeable. Since the new design has been implemented for some time now, I think I actually like the look of it better.

2. Message choices

I know this looks like one of those "find 10 differences" but I promise they are different. Just look at the Last message. (You might need to zoom in, opps...)

The last message is a choice that the player is suppose to make. However, which one of those makes you understand the task at hand? Hopefully, the last one.

That was a common issue. People were opening the game laptop, reading all the chats and... got stuck. Firstly, I was thinking about recycling my semi-transparent background strategy, since it worked well on the navigation. However, it didn't actually solve the issue because, you know, it still didn't make the messages any more choice-looking. Yes, they were easier to spot if you hover them but why would you hover them in the first place? Also, let's be real, I wasn't a fan - why, tell me why, RenPy doesn't have border-radius so the background could follow the message bubble outlines. My little WebDev heart's not happy.

So, here came the amazing TechnoWitchGames to the rescue, suggesting the ">"  symbol. So simple, so elegant. Perfection. Yes, hover is still not that obvious but with the *spoiler alert* later addition of the mouse pointer, it should be fine. I hope.

3. Custom mouse

I didn't want overly stylized cursors but the plain Windows one was sticking like a sore thumb in front of my pastel game world. And more than that, the default arrow was not cutting it for a point-and-click. Ya' know, "point" is literally in the name! So I kept close to the "regular" icons but I gave them a little glow-up and an on-brand colour. Thick black(-ish) outline for visibility and it's ready to go.

If you need to change the coursers in your RenPy project, here is the code:
define config.mouse = { }
define config.mouse['default'] = [ ( "gui/cursor/default.png", 0, 0) ]
define config.mouse['button'] = [ ( "gui/cursor/button.png", 0, 0) ]
For something that simple, I definitely did a lot of procrastinating.

In case you've read my mistakes Devlog, I will address the elephant in the room - there is still no not-allowed cursor for when the navigation buttons are disabled. I really want to make it in a dynamic way, instead of changing each button. And I tried, I promise! I tried a couple of ways, none of which worked (my little WebDev heart also misses mutation observer). I haven't given up but I also don't want to spend all my time on it currently, so it gets into my "Future Me Problems" to-do list.

4. Door Sound Effect

Not much of a mistake but I wanted to add a sound effect when the player attempts to open the door. That's it. A bit underwhelming  but I thought some of you would be interested in an easy way to play a sound on a button click:

button xysize(250,620) align (0.35,0.33):
    vbox align(0.5, 0.5) at Transform(rotate=2):
        for line in button_chek_door_text.splitlines():
            text line size 40 align(0.5, 0.5)
    hovered [SetVariable("button_chek_door_text", "Check\ndoor")] 
  unhovered [SetVariable("button_chek_door_text", "")]
 
  action [SetVariable("button_chek_door_text", ""), SetVariable("display_text_room2", "Locked. As it should be."), Function(renpy.play, store.audio_path, 'audio')]

5. Tackle file size

Well, I'm not saying my demo and its 396 MB are big. He is not a chonky boi. However, it's a tiny demo. It's not even a full demo, there is another function I want to implement to count it as full (psst, follow me to get notified when I add it, it's a good one).  But if I keep my shit going and make it a habit of mine to sprinkle Megabytes like it's parmesan on my pasta, we will have an unpleasantly thick full version for the amount of gameplay it would offer.

So there are two reasons for the issue:

1. My media is just too big. I'm using .png and .avi, and on top of that the resolution of the game is unnecessary (2560x1440) but that's an issue for another time. For now, let's focus on the files - all images should become .webp and all videos - .webm. To convert them, I'm using Format Factory - it's a neat little free program with a huge array of conversion formats and useful file manipulation options.
Renpy is a bit iffy with .webp sometimes. If there's a problem, one thing you can try is open Command Prompt and use pip install pillow or if it says you already have it - pip install --upgrade Pillow. That's a Python Imaging Library that supports .webp. Also, try to... ya' know, turn it off and on again. Really! Both have helped me.
While I'm at it, I would also take the time to organize the files. That has nothing to do with the game size but will help me keep track of what I have and what I need. This brings me to the second point...

2. I have a ghost problem. I mean, ghost files problem. Sorry, Ghostbusters, maybe next time... I have left files upon files that I've planned to use but never did. Or even files from a previous project. Yes, really. I did a small unfinished project before but since I liked how I organized my options.rpy and wanted to use some functions as references for the current project, I cannibalized the previous one but never bothered to clean the files properly... In my defence, I was in a hurry for a game jam. But it's time to get to it... So basically no tip here, other than - don't be stupid, don't leave phantoms snacking on your memory.

But on that note... let's also talk about size vs CPU usage.

So here is a story time: My laptop fan was on its last breath for a while. And it was scratching while working, making this constant annoying sound. However, ya girl is in the middle of some big personal projects in my daily life so I really wanted to wait for them to be done before tackling the problem. Meanwhile, the "solution" was - just keep headphones on the whole time. So basically, the fan speed wasn't really distinguishable.

Well, things didn't work out how I wanted because my laptop started to do more and more issues. And after a bigger scare a couple of days ago, it was obvious time to open it up, clean it, and see what's up in there. So, long story short, here I am now with a new set of fans and thermal paste. Oh, you peaceful sound of silence! The new fans are really quite in normal usage. But once I got to work again and ran my game to see where I was, the fans went crazy almost instantly. Got Task Manager and Speccy on to figure out what the hell happened, only to see my own tiny little cute (and supposedly already optimized) game eating more than 50% of my CPU. Fifty! 5-0! I'm with Intel Core i7 9750H, not the newest hardware but definitely not my grandma's PC.

So, the troubleshooting began. I ran some other RenPy games but none of them were near close to mine. The difference? They weren't looping videos or if they were, they were much less heavy on those effects than I was. With some Google search, the suspicion is confirmed - Renpy sucks at playing videos...

Now, how to optimize videos?

I'm by no means an expert here but one thing I've learned is RenPy decoding and rendering is much better with VP8 or VP9 video codecs than AV1. The catch is, the main reason for the conversions was to reduce the size in which AV1 is amazing... as for VP9, the original .avi was sometimes even smaller. So if not from conversion itself, I opted to save size from the quality (.avi was eating as much CPU anyways), where it's reasonable without affecting the overall game graphics. So below are two output settings - the left is the one that would give you the best compression for the highest quality and the right is the best performance for satisfying quality and pretty good compression:


Of course, those are not the only two possible configurations and might not even be the most optimal but are what worked for me. I can get away with lower-quality videos as they make just some details in the background and not the whole picture but you might not, depending on your particular case. Also, I have a nagging suspicion that's not the last time I will be playing around with those videos and RenPy animation more broadly but for now, I'm satisfied. From 50% usage, the CPU got down to 15ish (+/-5%). Not ideal but definitely better.

In terms of size, it got down to 182 MB. Less than half its original size. Half! I count this a win!

6. Bleeding buttons

When we use RenPy to do a point-and-click, this means there would be a whole lot of screens over screens, over more screens. And with this sometimes the buttons "bleed" from a previous screen to the current one. So the player can click on a button that's not even on the current screen. I new end fixed this issue here and there before but once I added the pointer cursor I found out in how many more places this is happening.

So, how do you fix it? Well, fortunately, there is a simple solution. Before adding anything else to the screen, just add a button sized to your game resolution with action NullAction(). Simple, sleek and fast. I made it a rule to start each screen in this way.

button xysize(22560, 1440)  mouse "default" action NullAction()

Edit: So, apparently you can also use modal True for screens to achieve the same result. Tbh, I might still use the Null Action button, because I'm an adult who takes no orders from any documentations. But I will leave you with both options. (I assume the model is probably better for performance though).

Thanks for following my journey in developing my point-and-click psychological horror game! It’s been a wild ride filled with lessons learned from my mistakes.

Your feedback means a lot to me as I continue to refine the game. If you haven't checked it out yet and you enjoy atmospheric mysteries and psychological twists, I’d love for you to give Mark of the Past a try and share your thoughts. Your input will help shape the future of this project. The new and better version is now ON. Thank you for your support!

If you enjoyed reading, you may also enjoy some of my other Devlogs for this game!

Also, if you want to make me do a little happy dance, please consider following me: Dangerous Donuts Games

Get Demo: Mark Of The Past

Download NowName your own price

Leave a comment

Log in with itch.io to leave a comment.