So, Chrono Trigger just got re-released today on Steam. Aaaaand....
Square. Buddy. Pal.
We've talked about this:
Doing an HD Remake the Right Way
We've talked about this twice:
Doing an HD Remake the Right Way: FFVI Edition
For those of you just joining us, hi, my name's Lars, I'm some random indie game developer you've never heard of who made a random game you've never heard of, (out now on Steam and consoles!) and I have a lot of opinions about how to do HD Remakes the Right WayTM.
This is not to say that I think my own games' art styles are unimpeachable or that I'm so great, (far from it), just that no matter how small your budget or simple your approach, there are some well established best practices for presenting classic games in the best possible light, regardless of the player's subjective personal taste.
These techniques are cheap, straightforward, and easy to implement, and I'm giving them away for free!
But somehow, Square Enix, despite their comparatively unlimited resources and rich collection of history's most beloved RPG's, isn't getting the message.
Before we begin, this doesn't seem to be the fault of a "crappy mobile port" either. The original mobile version was released December 8, 2011, and has had a series of updates. According to the iTunes version history, Version 2.0.0 launched today, Feb 27, 2018, with this changelog:
Now available as a version upgrade!
- Updated graphics and sound.
- Improved controls and screen layout.
- Compatible with Apple TV.
- Compatible with gamepads.
- New autosave function.
- Compatible with cloud saves.
- New achievement function.
*Upgrade available free to customers who purchased the previous version
Which seems to be the same set of graphical "upgrades" that match the day-one Steam version.
Okay so, this is quick and dirty, and with the proviso that the original mobile version didn’t look fantastic itself. But here are a few comparisons of the iPhone CT and the new multi-platform CT.— Shaun Musgrave (@ShaunMusgrave) February 28, 2018
In other words, at least as far as graphical presentation is concerned, the team that made the original mobile port may very well have had nothing to do with this. It's entirely the fault of whoever directed these most recent changes, which follow a clear pattern set by the FFV and FFVI HD remakes also released on Steam.
Shall we begin?
If you're reading this on a phone, images might not be at the proper scale for you, making some of the points the article makes harder to grasp. Each image can be clicked for a full resolution version.
1. Thou Shalt Not Apply Filters Inconsistently
Those of you into the emulation scene might know about upscaling filters. I talked about them in the previous articles.
So on the original SNES, Chrono Trigger looked like this in terms of pixels sent to your TV:
Of course, that's not exactly how you would have remembered seeing it. It's a matter of subjective taste whether you prefer 1:1 upscaled blocky pixels or whether you prefer the "classic look" with simulated scanlines, CRT color bleed, and even screen curvature. But we can leave that aside because instead of opting for either of these techniques (or even better: letting the user choose), they've again opted for the worst of both worlds.
Here's that detail shot again, from the Steam version's opening cinematic. And even though this is a cropped detail shot, this is not shrunk or scaled, these are the exact pixels on your screen:
Some elements are fully pixelated (the boat, the seagulls), some have an upscale filter applied (the houses in the village), and some are pixelated with a bilinear filter slapped on top (the clouds, which are transparent to boot). To top it off, scaling is inconsistently applied at a non 1:1 ratio - at 1080p resolution, the boat features pixels variably scaled at 7x5, 6x5, and 5x5.
Absolutely none of this is consistent, and does nothing to make the art look better than the original, regardless of one's taste.
Here's the boat from the SNES version, sized up to match. It's not a 1:1 comparison because the color model is slightly different, the birds and clouds are in a slightly different place, but you get the idea.
Option one is to just leave everything as-is. Granted, blown up on a huge monitor this doesn't look exactly fantastic -- pixels really weren't designed to be viewed at this scale. Here's a wider shot at 2:1 pixel scale, which depending on your device is probably a bit closer to how it appeared on an old 13" TV from 10 feet away:
So. Let's try some filters!
Mmmm, okay. Admittedly not great. But at least they're consistent.
These filters top out at 4X scale, so to get to 1080p you'd have to scale again, or you could just leave the screen with black borders. (Options are always good)
The trouble with filters is that there's only so much they can do. If you're upscaling anything beyond 2X, you really start to tear at the fabric of the original pixels. Still, I personally think that picking one filter, and applying it to the entire screen, looks better than haphazardly applying different styles to different elements within the same scene:
Ideally, the game would provide a solid options menu full of choices for pixel filtering style, scaling, scanlines, etc, but instead this is all we've got:
But the real tragedy here is that until someone makes some mod tools to undo some of this stuff, users cannot fix this themselves. I can't even run the game's raw pixel output through a 3rd-party visual tool to do custom post processing, because the output is corrupted with these artifacts.
(Help us Jed Lang, you're our only hope:)
Update March 2, 2018: Ask and ye shall receive! Jed releases a tool that fixes some of the issues.
But this is about a lot more than just filters. Once again, it looks like Square has been applying upscalers to the tile sheets themselves rather than the final output.
2. Thou Shalt Not Exacerbate Tile Boundaries with Upscaled Assets!
I talked about this in the original article, concerning artifacts like this in Final Fantasy V:
This problem is caused by two things -- 1) upscaling tilesheets before you compose them, and 2) the insecapable nature of pixel art itself.
Compose your tilesheets before you scale them
What do I mean by this?
Here's a tilesheet dump from Chrono Trigger. Probably not exactly like the one Square used in this remake, but surely they had something similar:
Now let's run it through some random upscaler. It looks like Square used something like the HQ 2x filter, which will be close enough for this example.
Okay, maybe not perfect (I'd have preferred HQ4x or XBR myself), but pretty good, right?
Well, not exactly. You see, upscalers look at neighboring pixels to decide how to draw things at a higher size. And when a tilesheet is all compacted like this, tiles inevitably get placed next to ones that they would never border in the actual game, yet those "false neighbors" will influence how the upscaled tile gets drawn. I've highlighted a few such locations below:
So in the game you have grass that looks like this:
And the seams stick out pretty clearly:
These seams don't have to be there, even with upscaling. The key is you need to take your tiles and put them in a natural mockup image with their true neighbor tiles, scale that as a finished image, extract tiles from that finished image, and piece them back into the compacted format so that the edges line up properly. This may sound like a lot of tedious Photoshop work, but any competent programmer can automate it with a script that an artist can operate with one button.
Some seams are a bit trickier, however. Algorithms can't do everything.
The nature of pixel art
Let's look back at our detail image. Here we've got a pretty egregious tile boundary break:
A keen observer will point out that the original game had this issue as well:
FFV and FFVI had this problem too. The thing is, these tiles were originally designed for lower resolution, so these sort of little discontinuities were easier to fudge. Particularly because every single visual element was confined to the same pixel grid, the entire image was effectively a mosaic and it was much easier to "hide the grid."
When you scale tiles up without adapting to them to the larger viewing size, and especially when you apply scaling filters, these kinds of problems just get worse. Before, you could count on the pixel grid to obscure the boundary grid between tiles, but the smoother (and smudgier) things get, the harder it is to hide those sharp lines.
As long as you're just automatically upscaling source art 1:1 without adapting it for a larger resolution you're always going to be vulnerable to issues like this, but you can at least mitigate the issues by composing your tilesets before upscaling.
3. Thou Shalt Not Pollute The Screen With Mixels!
Ideally, pick a single pixel scale and stick to it everywhere.
Of course, sometimes art choices or limitations might call for e.g. showing some things at double scale, and others at single scale. There's good and bad ways to do this.
The original freeware PC version of Cave Story is a good example of properly handling so-called mixels:
Every pixel in the entire game is the exact same size, except for the pixels used to render text. This is acceptable because the text appears by itself and therefore clashes less with the larger pixel grid, and there's a practical need for it -- it's easier to read high resolution text than pixelated text.
Celeste is similar:
Here, both the text and the portrait use the smaller pixel scale. In general, if you have to use mixed pixel scales, overlays and UI elements are the best candidates for it, and the more you can visually separate them into their own hierarchy, the better.
Absent that, at least make sure to align all elements to the same underlying grid, and pixelated images should ideally be scaled at whole-number ratios.
This is a good example of how not to do things (click through for fullscreen to get the full effect):
The backgrounds for the buttons are needlessly noisy and pixelated here -- even if they're styled after the original game's UI elements this would have been better just being drawn at the same resolution as the text. It's especially confusing contrasted with the high resolution icons, background image, and gamepad button overlays.
In game it's worse. Going back to that boat scene again:
Because they upscaled some of the tile assets, but not all of them, now we've got mixels all over the place.
4. Thou Shalt Respect The Work Thou Art "Improving"
Now, I know what a lot of you are thinking. Square Enix should have just made a proper, high-budget remake, something like this, maybe:
That's just not in the cards, from the looks of it.
I imagine what most people were hoping for was a treatment like Wonder Boy: The Dragon's Trap:
This is the Gold Standard -- delicious high-res visuals, properly executed, and the ability to swap back to the old audio/music at any time. And nearly a perfect reproduction of the original underlying gameplay, but with modern tweaks such as 16:9 resolution support.
Let's not pretend this is easy. You need top tier talent, a good budget, and most importantly, a cohesive, committed vision. Wonder Boy is what happens when you hit all the high notes.
The thing is, even when Square commits to a bigger budget remake, it doesn't always turn out how we'd like:
Now let's be fair. I own the remake (thanks for the gift, Kjell!), it can't be denied that a lot of effort went into it, and some people really, genuinely, like it. Sure, it had some questionable decisions, and even more clearly it didn't get the proper resources and support from Square, but dangit, remaking a classic beloved game and living up to people's standards is tough, hard, nigh-impossible work, even when you're actually trying.
So sometimes, the best answer is not to try too hard.
The original game already exists. People love it. People would like to pay money to play it. The emulation scene has already come up with fifty thousand different ways to stretch, scale, and shade the visuals in any possible configuration you could dream up. ROMHackers by the plenty have dumped the game, documented its every nook and cranny, fixed bugs, and even created their own editing tools.
This is your game, Square! You can take all these efforts (provided you properly comply with all the open source licenses), repackage them and sell it all back to the community, and the fans will thank you for it! And you know, you could always just hire these emulation scene people directly.
(In a perfect world we'd have a more lenient copyright system where games wouldn't be locked up forever and handed down between random horse-traders until they're finally discarded and melted down for glue, but that's another story...)
So please hire someone like Frank Cifaldi or at least consult with him or any of the fabulous ladies, gentlemen, and assorted magnificent humans at places like Digital Eclipse, The Video Game History Foundation, and the Internet Archive:
I mean, that's what the MegaMan Legacy collections did, and they're fabulous!
Make HD remakes if you like. But give us a legitimate way to experience the original version of games, too. This is why when I did my own HD remake of Defender's Quest on Steam, I included a copy of the original low-res Flash prototype for free. It still exists, jank and all, and people who want that can still experience it.