{"id":166,"date":"2014-07-15T18:50:11","date_gmt":"2014-07-15T18:50:11","guid":{"rendered":"https:\/\/blogs.scummvm.org\/josejx\/?p=166"},"modified":"2022-05-21T18:53:40","modified_gmt":"2022-05-21T18:53:40","slug":"positioning-textobjects","status":"publish","type":"post","link":"https:\/\/blogs.scummvm.org\/josejx\/2014\/07\/15\/positioning-textobjects\/","title":{"rendered":"Positioning textObjects"},"content":{"rendered":"

There are a lot of differences with the positioning of textObjects<\/i> between the retail version of EMI and ResdiualVM’s implementation. Let’s take the scene wed<\/i> and compare the text positions. First, here’s the scene in the retail version:<\/p>\n

\"\"<\/a>
Retail screen shot from the set wed<\/figcaption><\/figure>\n

And here’s the same scene in ResidualVM:<\/p>\n

\"\"<\/a>
ResidualVM screen shot from the set wed<\/figcaption><\/figure>\n

And finally, here’s the difference between the two:<\/p>\n

\"\"<\/a>
Difference between the two images<\/figcaption><\/figure>\n

We can ignore the ship in the background, since it’s moving, and I didn’t capture it in exactly the same place. We also can ignore the shadows, Akz has already addressed<\/a> that problem. That leaves us with the text errors, exactly what we’re trying to work out!<\/p>\n

While it’s obvious to the eye that the text “There’s an enemy pirate over there.”<\/i> is in the wrong place and has a different wrapping point, there’s also a mismatch between where the text is placed for “Look at enemy pirate”<\/i>.<\/p>\n

Additionally, in some cut scenes, with subtitles on, the text is placed in the wrong location. A good example of this problem is the scene during travel to Jambalaya Island, where the exclamations of the crew are drawn right on top of each other! Another common issue is that the text is placed in the wrong place, obscuring the game play. A good example of this is when reading the directions to get to Pegnose Pete’s house.<\/p>\n

In ResidualVM, text elements are drawn using a textObject<\/i>. In the Lua scripts, textObjects<\/i> are created by calling the Lua\/C function MakeTextObject<\/i>. The parameters for the textObject<\/i> are the string that’s going to be displayed and a parameters table, with various options for configuring the text. We can remove this textObject<\/i> from the screen by calling KillTextObject<\/i> and passing the handle that was returned by MakeTextObject<\/i>.\u00a0 Let’s try drawing some text with the retail version of EMI and observe the behavior. Let’s start by just writing some text to the 0, 0 coordinate position:<\/p>\n

textObj = MakeTextObject(\"Hello Blog Readers!\", { x = 0.0, y = 0.0, font = verb_font, fgcolor = White })<\/pre>\n
Here’s the output of running that command:<\/p>\n
\"\"<\/a>
There’s the text!<\/figcaption><\/figure>\n
An interesting aspect to the positioning of the text is that it appears to be using a coordinate system with a basis in the center of the screen. Next, lets try exploring the extents of the text placement. Do negative values work? (Yes!) What is the highest and lowest X and Y value for placing text that still appears on the screen? (It appears that -1, -1 is the lower left corner and 1,1 is the upper right corner). Is this mechanism the only way text is added to the screen? (Nope, there’s also SayLine<\/i>, PrintLine<\/i> and other methods, so when debugging, the method used will be important).<\/p>\n
With this information in hand, I started by rebasing Botje’s changes<\/a> (to allow the X and Y values to be passed as floats) against the current master. These changes, made the text appear more correct for scenes where the X and Y values are passed from the Lua, such as the directions to Pegnose Pete’s House, but this change didn’t effect most of the erroneous text placement.<\/p>\n
I then inspected the SayLine<\/i> Lua\/C function and found that it sets a variable when X and Y aren’t passed in from the Lua script, which has the actor set the position relative to the actor’s bounding box. Simply using the other side of the bounding box for the Y position moves the actor’s speech to a much more correct location:<\/p>\n
\"\"<\/a>
After the bounding box side switch<\/figcaption><\/figure>\n
The next task I tackled was the incorrect word wrapping, as seen in the speech bubble, “There’s an enemy pirate fighting over there.”<\/i>. Although the ResidualVM version actually looks a little bit better than the retail version here, there are other scenes where the word wrapping is worse, so let’s try to fix it!<\/p>\n
The word wrapping is done in the function setupText<\/i>, which is found in the textobject.cpp<\/i> file. Inside this function, the line width is computed by adding each character width in the line together. Strangely, this uses the maximum value between the character width<\/i> and something called the dataWidth<\/i>. Without a comment, it’s hard to tell what dataWidth<\/i> actually means, so, I first started by identifying when this code was added to ResidualVM. This was a harder task than anticipated because the file was moved twice over the course of development. To trace its history, I first reset git to the first commit that moved the file and then, pushed the HEAD<\/i> of the repository back one more commit. This restored the original version of the moved file and let me explore its history further. After one more file move, I found that this was the commit<\/a> that added the dataWidth<\/i> field. Unfortunately, there wasn’t much information in the commit message either, so I decided to try to test some strings in the retail version and measure what the width of the displayed text in pixels.<\/p>\n
So, it appears that the dataWidth<\/i> is the actual width of the character, but the width<\/i> includes adjustments to the spacing (or kerning<\/a>) between the letters to make them look nice. As an example, let’s look at a simple string, “Wa”<\/i>:<\/p>\n
MakeTextObject(\"Wa\", { x = 0.0, y = 0.0, fgcolor = White))<\/pre>\n
Which results in:<\/p>\n
\"\"<\/a>
Demonstrating the font kerning<\/figcaption><\/figure>\n
As can be seen, the letter “a”<\/i> actually overlaps with the letter W by two pixels. It appears that ResidualVM gets this right and does use the correct values for drawing the characters as this matches perfectly with the retail version. So, our issue is with determining when to word wrap, which depends on the width of the rendered text. Let’s examine the width variables to figure out what combination results in the correct width being calculated.<\/p>\n
For each font character, there’s the dataWidth<\/i> and width<\/i> sizes, which of these is the actual character width and which is the kerned width? Here’s the dataWidth<\/i> and width<\/i> values for “W”<\/i> and “a”<\/i>:<\/p>\n\n\n\n\n\n\n\n\n
Value<\/th>\n\u00a0\u00a0\u00a0\u00a0\u00a0 W<\/th>\n<\/tr>\n
width<\/td>\n18<\/td>\n<\/tr>\n
dataWidth<\/td>\n21<\/td>\n<\/tr>\n
Value<\/th>\na<\/th>\n<\/tr>\n
width<\/td>\n7<\/td>\n<\/tr>\n
dataWidth<\/td>\n9<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
So, it appears that the “width” value is the kerned value, while dataWidth is the actual size of the font bitmap image. Checking this against the image above shows that the dataWidth<\/i> values match the pixel size of the letters exactly. So, if we add the dataWidth<\/i> values together, our characters will be wider than what’s actually displayed to the screen. We can fix this by always using the width value instead of the maximum of the two as is done now.<\/p>\n
So, let’s take a look at the result difference after this change, when Guybrush is speaking the line “There’s an enemy pirate fighting over there.”:<\/p>\n
\"\"<\/a>
Getting closer!<\/figcaption><\/figure>\n
We can see now that the lines are the same length now, and appear to be in the correct location on the X axis, but shifted in the Y axis. So, first, is there a common shift between all of these lines? Or in other words, are the lines shifted by a constant value? Unfortunately, it appears that this isn’t the case. The top line of Guybrush’s speech is 1 pixel too far to the right and 7 pixels too far towards the bottom of the screen, while the bottom line is offset by 1 pixel to the right and 13 pixels too far towards the bottom of the screen. The text “Look at enemy pirate”<\/i> is also offset by 14 pixels too high towards the top of the screen.<\/p>\n
Let’s look into the difference in line spacing between the two lines for Guybrush’s speech. It turns out that in ResidualVM, the height of the font is modified when loaded if the character is taller than the specified font height. As before, this is intentional because of kerning. We do want some of the characters to sink lower or rise higher than the rest because it’s pleasing to the eye. Simply commenting the section of code that modifies the height results in the correct behavior, so I looked up why that work around was inserted in the first place, which led to this commit<\/a>. So, it appears that there was a crash bug associated with the height. I suspect that the problem would be fixed if the renderer uses the dataHeight<\/i> instead of the height<\/i> to draw the text.<\/p>\n
As this blog post is getting long and I need to check with the other developers about this code, we’ll wrap it up here for now. I’ll continue in the next blog post with fixing the remaining font issues. All of the changes in this post can be found in PR #964<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
There are a lot of differences with the positioning of textObjects between the retail version of EMI and ResdiualVM’s implementation. Let’s take the scene wed and compare the text positions. First, here’s the scene in the retail version: And here’s the same scene in ResidualVM: And finally, here’s the difference between the two: We can […]<\/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-166","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/blogs.scummvm.org\/josejx\/wp-json\/wp\/v2\/posts\/166","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.scummvm.org\/josejx\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.scummvm.org\/josejx\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.scummvm.org\/josejx\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.scummvm.org\/josejx\/wp-json\/wp\/v2\/comments?post=166"}],"version-history":[{"count":2,"href":"https:\/\/blogs.scummvm.org\/josejx\/wp-json\/wp\/v2\/posts\/166\/revisions"}],"predecessor-version":[{"id":175,"href":"https:\/\/blogs.scummvm.org\/josejx\/wp-json\/wp\/v2\/posts\/166\/revisions\/175"}],"wp:attachment":[{"href":"https:\/\/blogs.scummvm.org\/josejx\/wp-json\/wp\/v2\/media?parent=166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.scummvm.org\/josejx\/wp-json\/wp\/v2\/categories?post=166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.scummvm.org\/josejx\/wp-json\/wp\/v2\/tags?post=166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}