As the sands of time keep falling in the hourglass of life, the issues never cease existing. For this PR, I have taken on the task of fixing some of the user interface in a level editor named ble, which was made as a side component to the game "BombHopper.io". In this game, you are tasked in controlling your character (a square named Hoppi) so that you reach the Exit Door in each level. However, to move, you must use mini explosives to launch yourself in the direction of your choosing. Based on how quickly you complete the level, you will gain a star rating out of 3 (3 being the fastest goal to accomplish).
That's where my task comes in. Previously, this stand-alone level editor had a UI that allowed the creator to type in the number of milliseconds that the player should finish the level within. To get one star, you simply must finish the level while getting two and three stars requires the player to be progressively faster.
Rather than having the creator input milliseconds, it was requested that this unit of measure be swapped to the more intuitive amount of seconds.
This task proved to be difficult, but not really in the coding sense. The initial issues came from actually finding where these values were being saved. I searched for a long time to just find where to start, and, even then, following the program flow took up the majority of my time, seeking out the perfect location where these adjustments could be made. In the end, there were two files where I thought all of my code changes would be occurring.
The first file was
Level.ts. Initially, I felt like altering the values of 'ms' just before line 14 and 22 would be enough as a fix but, later on,
getkey felt like this was only an option if I either renamed the variable from 'ms' to 'sec' (so it was more clear that it represented seconds) or to alter the name of the functions 'set2StarsTime' and 'set3StarsTime' so that it was clear that there was a conversion happening within it. In the end, it was decided that no changes would be made for this file, and that all of what needed to be fixed would be...
In
LevelParamsBox.tsx. Within this file was all of the makeup of the mini-menu window that exists in the upper right hand side of the game screen. This is where the settings for the level can be found (such as the name and star timer values).
The changes that I ended up making were to relabel the text fields where the user would input their "Star Times" (from ms to secs), and also to adjust the value of the number being inputted so that as the user entered the requested number of seconds they felt would be acceptable for each star, it would automatically alter the values so that, when saved and loaded into the original game, the "Star Times" would be compatible to the main system.
While I thought it would be simple enough to just change the value where it was being inputted, this caused one major issue: whenever the user typed in a digit, the system would multiply that digit by the conversion amount (in this case, 1000) and immediately display it to the screen. This was fine, until another digit was entered along with the original one. If enough was typed, the number would continue multiplying endlessly. Obviously, this was not an ideal situation.
To counteract this, a balancing division was needed to be made later on in the file. At line 74 and 79, I added the extra division to allow for the value to be balanced back when displayed in the text field. With this change made, the input field was no longer being overwhelmed by infinitely growing integers, and the JSON file that was being saved as a level blueprint held the proper millisecond value for the game.
Initially, when I looked at this issue, I thought it would take more time than it did to complete. Even though it was difficult to find where to start in the program due to countless files that could have potentially held the answer, once I had my point of reference, the fix went straightforward enough (aside from the "Hydra Head" of numbers that couldn't get chopped down.
This marks the end of Release 0.3 for me. Now on to the final piece of the puzzle!
Comments
Post a Comment