Title Screen Image Creation
This page describes how to create a title screen, and links to the title screen creation file, which is a bit sizeable for checking in to Git repeatedly.
The image should, of course, be related to the theme of the release. It should also be freely licensable. A couple good options for that are Wikimedia Commons, and Bing Image Search, which allows filtering both by license and by size of the image. Preferably, it should also be high resolution, at least 1920x1080, and the higher the better. It should also be as close to 16:9 as possible, but at least 4:3. We can crop it if necessary, but portrait orientation images are going to be challenging to use on the main screen.
This is a task that can be done by a non-technical person. If there are multiple good candidates and enough time before the release, choose a couple top contenders and put them in a poll at CFC to choose the winning candidate.
The background screen lives at https://github.com/C7-Game/Prototype/blob/Development/C7/Title_Screen.jpg . But we haven't just been creating it from scratch each time.
Instead, we have a Krita template file. Krita is an image editing program that supports layers, runs on Linux/Windows/Mac, is free, and has a friendlier user interface than GIMP. The large-scale template (which includes the Babylon image) can be downloaded here (57 MB), and a smaller-scale template (which includes the Carthage Preview image) is located within the repo, at https://github.com/C7-Game/Prototype/blob/Development/C7/Title_Screen.kra. The Babylon one uses a high-rest (close to 4K image), whereas the Carthage one uses a roughly 720p image. Choose the one that more closely matches the resolution for your release's image to have less scaling work.
If you only need to update the text, e.g. changing Preview 2 to Preview 3, you can simply open the Krita template, double-click on where it says Preview 2, and change the text. Then go to File -> Export to create the JPG; choose JPG from the long list of exportable formats. The default 80% quality has been a decent compromise between file size and quality.
Saving and re-uploading the Krita template is not necessary in this case as it won't save anyone any time in the future, but make sure to commit the new JPG.
Once you've got Krita installed and the template downloaded, you'll see two layers on the right side, middle of the screen:
"Title" contains the text and should always be the topmost layer. The other layer is the background image.
If you open a new background image in another program, such as Microsoft Paint, and copy the whole thing, and paste it in Krita, it will automatically create a new layer for it. It will ask about color mode; select Web. Give it a sensible name, such as "[Milestone] Background".
Next, hide the existing background image. Then click on the "Title" layer, make sure the arrow tool (upper-leftmost on the left side panel) is selected, which it should be by default, drag a very large selection area around all the text, and drag it so it overlaps the upper-left area of the background. It will probably be too big or too small, but that's okay, that can be fixed.
If the new background is smaller than the old one, now select that "[Milestone] Background" layer, and then go to the "Image" menu and select "Trim to Current Layer".
Now, select the text tool ("T", to the right of the arrow tool), and start adjusting the text by double-clicking on each element. You'll likely need to tweak the size. One gotcha is that if you just change the size in the dropdown, it won't apply - you have to select the font first.
Each release should also have a font color, and a different font for the release name. If we plan to have multiple releases for a milestone (which we will), also include an indicator of which release this is, so it's easy for users to report which version they are using in bug reports.
Once it's done, you can select the old background layer and delete it with the trash can in the lower-right of the layer area.
Then do a File -> Save to save the Krita file locally, and then File -> Export to create the JPG; choose JPG from the long list of exportable formats. The default 80% quality has been a decent compromise between file size and quality.
C7 will automatically resize the image. So as long as it's approximately the right aspect ratio, it will be fine.
However, you may need to tweak where the main menu buttons appear. This can be done by opening MainMenu.cs, and tweaking the MENU_OFFSET_FROM_TOP and MENU_OFFSET_FROM_LEFT values, and then restarting C7 to see how it looks.
As of this point (April 2022), there will still be some unavoidable issues due to the menu button position being absolute, and the image text dimensions being relative to the screen size. When in doubt, optimize for the default main menu size. At some point in the future we will likely enhance either the button positioning or the text positioning to adjust more intelligently, and fix that scaling issue.