{"id":17,"date":"2018-05-22T17:23:39","date_gmt":"2018-05-22T17:23:39","guid":{"rendered":"https:\/\/blogs.scummvm.org\/douglas\/?p=17"},"modified":"2022-05-24T17:33:58","modified_gmt":"2022-05-24T17:33:58","slug":"residualvm-week-1","status":"publish","type":"post","link":"https:\/\/blogs.scummvm.org\/douglas\/2018\/05\/22\/residualvm-week-1\/","title":{"rendered":"ResidualVM: Week 1"},"content":{"rendered":"<div class=\"post-outer\">\n<div class=\"post\">\n<div id=\"post-body-6810578602878489105\" class=\"post-body entry-content float-container\">\n<div>Well, I guess the first week is the week that you learn the most.<\/div>\n<div><\/div>\n<div>For the first week, I decided to tackle the main menu of\u00a0<i>The Longest Journey<\/i>,<i>\u00a0<\/i>for the reason that the main menu can largely improve the experience\u00a0of playing the game and many components of the main menu can actually be linked to the future diary menu within the game. Due to its complexity, I never intended to implement the whole main menu out within a week. I planned to build a basic structure of it, got something on the screen and then I can move on to other parts based on the built foundation. So far, the outcome is, surprisingly, better than I have expected.<\/div>\n<div><\/div>\n<div>That does not mean I didn&#8217;t encounter difficulties. Right at the beginning, I found myself messed up in the different versions of\u00a0<i>The Longest Journey<\/i>\u00a0game data provided on the market. I got my game from Steam, and it turned out that I need to install two extra libraries to let ResidualVM fully support its different sound format. Have to say, using Windows is really not the best choice for installing loads of libraries. I used to have few feelings towards Linux system but now I understand why the opensource community loves it.<\/div>\n<div><\/div>\n<div>So, the game could run on ResidualVM now, and the first step was to get all the resources related to the main menu loaded and rendered on the screen. Thankfully the code base has provided a class called\u00a0StaticLocationScreen\u00a0that handles related works. A new class called\u00a0MainMenuScreen\u00a0derived from\u00a0StaticLocationScreen\u00a0was then created. The next thing I need to get to make the resources, or to be more specific, the widgets of the menu rendered on the screen, is to get their name from the loaded data. By using the debug mode, I was able to dump the list of resources of the location referring to the main menu here, where names of items (widgets here) were shown.<\/div>\n<div><\/div>\n<p>\u200b<\/p>\n<table class=\"tr-caption-container\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td><img decoding=\"async\" src=\"https:\/\/blogs.scummvm.org\/douglas\/wp-content\/uploads\/sites\/63\/2022\/05\/DebugMode.jpg\" \/><\/td>\n<\/tr>\n<tr>\n<td class=\"tr-caption\">The Debug mode of ResidualVM<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div><\/div>\n<p>\u200b<\/p>\n<table class=\"tr-caption-container\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td><img decoding=\"async\" src=\"https:\/\/blogs.scummvm.org\/douglas\/wp-content\/uploads\/sites\/63\/2022\/05\/MainMenuDump.jpg\" \/><\/td>\n<\/tr>\n<tr>\n<td class=\"tr-caption\">Part of the dumped list<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div><\/div>\n<div>Once I got the list of names that I needed, I could load them as widgets accordingly, as what a\u00a0StaticLocationScreen\u00a0would have expected. Furthermore, each widget may have two handlers for clicking and mouse moving.<\/div>\n<p>\u200b<\/p>\n<table class=\"tr-caption-container\" cellspacing=\"0\" cellpadding=\"0\" align=\"center\">\n<tbody>\n<tr>\n<td><img decoding=\"async\" src=\"https:\/\/blogs.scummvm.org\/douglas\/wp-content\/uploads\/sites\/63\/2022\/05\/WidgetLoad.png\" \/><\/td>\n<\/tr>\n<tr>\n<td class=\"tr-caption\">Load the widgets<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div><\/div>\n<div>That is the overall design of a menu, but things not always go easy with you. In the main menu, each button\u00a0widget is related to a separate text that will show when you put your mouse on it. Well, the problem was that the clicking area of the button is determined by an empty text with an extra large rectangle size. However, ResidualVM would recalculate the size based on the content of the text, causing the clicking area to be extremely small. So the way of calculating the size needs to be changed.<\/div>\n<div><\/div>\n<p>\u200b<\/p>\n<table class=\"tr-caption-container\" cellspacing=\"0\" cellpadding=\"0\" align=\"center\">\n<tbody>\n<tr>\n<td><img decoding=\"async\" src=\"https:\/\/blogs.scummvm.org\/douglas\/wp-content\/uploads\/sites\/63\/2022\/05\/HelpText.jpg\" \/><\/td>\n<\/tr>\n<tr>\n<td class=\"tr-caption\">See the help text on the right-hand side?<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u200b<\/p>\n<table class=\"tr-caption-container\" cellspacing=\"0\" cellpadding=\"0\" align=\"center\">\n<tbody>\n<tr>\n<td><img decoding=\"async\" src=\"https:\/\/blogs.scummvm.org\/douglas\/wp-content\/uploads\/sites\/63\/2022\/05\/TextSize.png\" \/><\/td>\n<\/tr>\n<tr>\n<td class=\"tr-caption\">The special code for the blank text area<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div><\/div>\n<div>After tackling this problem, other things become clear. Just write different handlers for different widgets. The NewGame button needs to open a new game (based on the version, demo or not), and the Credits button will play the credits video. Oh yes, talking about videos, the game also needs to play the video of FunCom game company before the main menu, which was done through cooperating with the class\u00a0UserInterface.<br \/>\n\u200b<\/p>\n<table class=\"tr-caption-container\" cellspacing=\"0\" cellpadding=\"0\" align=\"center\">\n<tbody>\n<tr>\n<td><img decoding=\"async\" src=\"https:\/\/blogs.scummvm.org\/douglas\/wp-content\/uploads\/sites\/63\/2022\/05\/UserInterface.png\" \/><\/td>\n<\/tr>\n<tr>\n<td class=\"tr-caption\">How things are loaded in the beginning<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Up to now, everything seemed to be fine, until something unexpected showed up. In the original game, when the user clicks the button, the clicking sound is ensured to be played completely. The game behaves to be frozen until the sound is finished and carries on doing what it should do. Right now It seemed that changing the screen in\u00a0<span class=\"\">UserInterface<\/span>\u00a0will cause the playing sound to stop.<\/p>\n<p>I originally tackle this with an empty\u00a0while\u00a0loop, busy-waiting for the sound to stop. But obviously, busy-waiting is not a good thing to show up in a game design. Therefore, I started the biggest commit of this week, covering 9 files with more than 100 lines of code modified, to queue the request of changing the screen. As you can imagine that was really a mess, and it just doesn&#8217;t feel right to change so many things just for a simple and short clicking sound. In the end, after discussing with the mentor, we decided to just add a delay in the while loop to free the CPU for a while. That seems to be the most appropriate solution for now,\u00a0<span style=\"text-decoration: line-through;\">apart from the fact that my biggest commit got discarded.<\/span><br \/>\n\u200b<\/p>\n<table class=\"tr-caption-container\" cellspacing=\"0\" cellpadding=\"0\" align=\"center\">\n<tbody>\n<tr>\n<td><img decoding=\"async\" src=\"https:\/\/blogs.scummvm.org\/douglas\/wp-content\/uploads\/sites\/63\/2022\/05\/OnClick.png\" \/><\/td>\n<\/tr>\n<tr>\n<td class=\"tr-caption\">Bothersome clicking sound<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Well, that basically covers up the most essential part of this week. Now the main menu has some basic functionalities to support the game. Although there are difficulties encountered, overall speaking, seeing that the main menu is coming to a shape has given me much joy. I&#8217;ll keep on working and I am looking forward to next week&#8217;s tasks.<\/p><\/div>\n<div class=\"separator\"><\/div>\n<div>\n<\/div>\n<div>\n<div>For the detailed development of the codes, please refers to\u00a0<a href=\"https:\/\/github.com\/residualvm\/residualvm\/pull\/1415\" target=\"_blank\" rel=\"noopener\">the pull request on GitHub<\/a>.<\/div>\n<\/div>\n<div>\n<div>All code images are generated through\u00a0<a href=\"https:\/\/carbon.now.sh\/\" target=\"_blank\" rel=\"noopener\">Carbon<\/a>.<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Well, I guess the first week is the week that you learn the most. For the first week, I decided to tackle the main menu of\u00a0The Longest Journey,\u00a0for the reason that the main menu can largely improve the experience\u00a0of playing the game and many components of the main menu can actually be linked to the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-17","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/blogs.scummvm.org\/douglas\/wp-json\/wp\/v2\/posts\/17","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.scummvm.org\/douglas\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.scummvm.org\/douglas\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.scummvm.org\/douglas\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.scummvm.org\/douglas\/wp-json\/wp\/v2\/comments?post=17"}],"version-history":[{"count":1,"href":"https:\/\/blogs.scummvm.org\/douglas\/wp-json\/wp\/v2\/posts\/17\/revisions"}],"predecessor-version":[{"id":25,"href":"https:\/\/blogs.scummvm.org\/douglas\/wp-json\/wp\/v2\/posts\/17\/revisions\/25"}],"wp:attachment":[{"href":"https:\/\/blogs.scummvm.org\/douglas\/wp-json\/wp\/v2\/media?parent=17"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.scummvm.org\/douglas\/wp-json\/wp\/v2\/categories?post=17"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.scummvm.org\/douglas\/wp-json\/wp\/v2\/tags?post=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}