mirror of
https://github.com/open-goal/jak-project
synced 2026-08-30 09:21:48 -04:00
Jordan
427c952558
This PR fixes the alignment of text and other elements in several menus of Jak 3 (as well as some of Jak 2) when using Automatic or Custom aspect ratios. It also cleans up some of the relevant functions which are used to draw these menus (although I'm still learning how to clean goal code). I mostly used french text for testing (since the french text seems to push the font boundaries to their limits a bit more). I used Automatic 16:9 and Custom 4:1 aspect ratios for testing to see if my changes scale to other aspect ratios properly, comparing with PS2 4:3 for reference. ### Jak 3 ### Image Color Scale Before: - The black/white color scale would get stretched (beyond the limits of the menu in 4x1) <img width="1280" height="758" alt="color-scale-16x9-broken" src="https://github.com/user-attachments/assets/4b3b897e-1417-42da-86a1-dd78926ccb73" /> <img width="1283" height="747" alt="color-scale-4x1-broken" src="https://github.com/user-attachments/assets/44d192ba-5afe-43ae-9419-021123478a31" /> Reference (PS2 4:3 in OpenGoal): <img width="1278" height="773" alt="color-scale-reference" src="https://github.com/user-attachments/assets/d9bd8f4e-8f69-49a9-8a99-3fcd3d7a4097" /> After fixes: <img width="1283" height="765" alt="color-scale-16x9-fixed" src="https://github.com/user-attachments/assets/99422d7f-d688-4d91-8ce0-6ad0b7cb10df" /> <img width="1282" height="762" alt="color-scale-4x1-fixed" src="https://github.com/user-attachments/assets/6011f30a-0c31-4ea9-afe1-735ec36f3d32" /> ### Secrets menu Before: - The secret titles touch their costs (#4233). - The alignment of the top line showing orbs available/cost and total orbs collected is broken (more noticeable in 4:1) - The alignment of the titles for groups of secrets is broken (more noticeable in 4:1) - The indentation for secret titles relative to the group of secrets is also broken (again, more noticeable in 4:1) <img width="1286" height="758" alt="secrets-broken-16x9" src="https://github.com/user-attachments/assets/bd6c7dab-ce95-4349-bf1d-2a09f82fcbfe" /> <img width="1287" height="751" alt="secrets-broken-4x1" src="https://github.com/user-attachments/assets/3e1ce842-19ba-49b3-92f9-52034ae1982f" /> Reference (PS2 4:3 in OpenGoal): <img width="1280" height="761" alt="Screenshot from 2026-08-16 22-58-22" src="https://github.com/user-attachments/assets/7326a1c7-b479-4fb7-9450-377a05ab7963" /> After fixes: <img width="1280" height="722" alt="secrets-fixed-16x9" src="https://github.com/user-attachments/assets/0a66d45f-3aa3-4cc8-ac88-c6aef20f1319" /> <img width="1286" height="713" alt="secrets-fixed-4x1" src="https://github.com/user-attachments/assets/e8740739-42ac-4a12-aad1-e6620dfc73ed" /> ### Secrets purchase menu Before: - The text for the secret you're purchasing can get cut off if too big. - As before, the top line showing orb cost/orbs collected is misaligned. <img width="1288" height="754" alt="secrets-purchase-broken-16x9" src="https://github.com/user-attachments/assets/49b709e3-c015-42ba-b0aa-034769286d77" /> <img width="1281" height="756" alt="secrets-purchase-broken-4x1" src="https://github.com/user-attachments/assets/0c3c5e02-048a-4188-ada7-2413c384224b" /> Reference (PS2 4:3 in OpenGoal): <img width="1286" height="753" alt="secrets-purchase-reference" src="https://github.com/user-attachments/assets/bb0b1d1a-87f6-4343-8a82-2e1f968943cd" /> After fixes: <img width="1286" height="759" alt="secrets-purchase-fixed-16x9" src="https://github.com/user-attachments/assets/1d73593f-1d58-407e-9ce6-2da5bf0fd84b" /> <img width="1283" height="750" alt="secrets-purchase-fixed-4x1" src="https://github.com/user-attachments/assets/85c7e14d-c6b2-4b21-83e5-173af5cba185" /> ### Save/Load/Create Hero Mode Save menu Here I show the load game screen only but the bugs were the same among all 3 as the code is shared. The fixes apply to all 3 as well 😃 Before: - The header text is cut off in french. - There is a faint red rectangle to the right of the menu (look closely! It's a bit clearer and goes beyond the menu in 4x1). - The left yellow boxes around the save-games that are not selected do not scale properly (more noticeable in 4x1). <img width="1284" height="749" alt="load-broken-Automatic" src="https://github.com/user-attachments/assets/2ae3bd8b-42ec-49bc-9851-cbaace4ce64b" /> <img width="1285" height="751" alt="load-broken-4x1" src="https://github.com/user-attachments/assets/655de844-748c-43f9-a2e8-d779fe3a8e19" /> Reference (PS2 4:3 in OpenGoal): <img width="1281" height="762" alt="load-screen-4x3" src="https://github.com/user-attachments/assets/e4e320c9-999a-44a7-8b3e-34cfdbeef5a1" /> After Fixes: - Now headers that exceed the width of the menu screen will be shrunken down to fit. This will hopefully work for any other menus that need it as well 😃 - No more red rectangle on the right, and the yellow box to the left around the save games scales properly. <img width="1286" height="754" alt="load-fixed-automatic" src="https://github.com/user-attachments/assets/1a48d811-5684-4f7e-a12a-19e896e30b48" /> <img width="1288" height="749" alt="load-fixed-4x1" src="https://github.com/user-attachments/assets/f5a68cb1-576a-4927-977b-b3419aaf7c23" /> ### Missions menu Before: - Mission text is sometimes cut off on the right - Mission text is shifted to the right (more noticeable in 4x1) <img width="1286" height="753" alt="missions-alignment-broken-16x9" src="https://github.com/user-attachments/assets/37175eb7-e191-4c09-bb72-b40819acd99b" /> <img width="1281" height="750" alt="missions-alignment-broken-16x9-2" src="https://github.com/user-attachments/assets/482f351a-7386-4211-8434-cf60c0691fdb" /> <img width="1286" height="756" alt="missions-broken-4x1" src="https://github.com/user-attachments/assets/4cbfa4d0-999b-4265-bed0-957958663037" /> <img width="1290" height="750" alt="missions-broken-4x1-2" src="https://github.com/user-attachments/assets/4889b498-d6aa-4e6c-87fc-4dfadeac5827" /> Reference (PS2 4:3 in OpenGoal): <img width="1284" height="768" alt="missions-reference-1" src="https://github.com/user-attachments/assets/91a526c8-08c2-4a62-8219-09e967fab9c2" /> <img width="1276" height="755" alt="missions-reference-2" src="https://github.com/user-attachments/assets/65c4e944-5b1f-479a-bf7c-eca19c81f5d6" /> After: <img width="1281" height="760" alt="missions-fixed-16x9" src="https://github.com/user-attachments/assets/a972daf0-1872-46f0-a829-cd8d292df1d6" /> <img width="1282" height="750" alt="missions-fixed-16x9-2" src="https://github.com/user-attachments/assets/973611d6-a72c-43f8-b2f3-034e83f6c416" /> <img width="1289" height="760" alt="missions-alignment-fixed-4x1" src="https://github.com/user-attachments/assets/699c5dbc-8c39-468d-9e14-94007a789e48" /> <img width="1281" height="755" alt="missions-alignment-fixed-4x1-2" src="https://github.com/user-attachments/assets/89216187-d453-4d3e-8e8b-5ae365e7227d" /> ### Jak 2 ### Secrets menu orb icon Position was wrong in Automatic and some (but strangely, not all) Custom Aspect ratios. A correction for the aspect ratio was also being applied in the setter. Before: <img width="1284" height="755" alt="image" src="https://github.com/user-attachments/assets/0a15e238-1d98-4ba7-86ce-b295e8d78d7a" /> After: <img width="1283" height="755" alt="image" src="https://github.com/user-attachments/assets/bd97de44-ef41-426c-a76f-d4fe99a35285" /> ### Missions menu - Indentation was not working, even in 4:3, due to a typo. - Width was broken in Automatic and Custom Before: <img width="1281" height="753" alt="Screenshot from 2026-08-19 01-05-54" src="https://github.com/user-attachments/assets/6f5e3cc4-3522-45a5-a45b-34a46a7db544" /> After: <img width="1287" height="761" alt="image" src="https://github.com/user-attachments/assets/cae5498b-6ca4-40ab-a31c-feb8899bc1e7" />