Submitted by kmeisthax on Mon, 04/04/2016 - 23:48 in SixLoves
So this is a video I've been trying to make for a while but have had trouble with due to screen recorder issues. I've finally found a solution that works, albeit at lower quality, so please excuse any artifacts you might see here.
So I've been working on an RPG Maker game for a few months now and I've probably spent more time extending the game engine than actually building content for it. It's based on web technologies, which is good, but it lacks support for a few features I really wanted from this. So I added them.
The key feature that I think makes all of this effort worth it is the ability to make use of high-resolution and vector graphics resources. As you can see, some of the character portraits and sprites are far higher resolution than the stock RPG Maker MV assets.
You aren't restricted to using SVGs; though. I don't demo it in this video, but you can also configure the plugin to load high-res bitmapped assets instead of rendering an SVG, which may be more performant. Additionally, text will render at the resolution of your screen without any new assets needing to be added.
I've also added the ability to allow the graphics viewport to match whatever the size of the window is. This means that you aren't locked to a fixed aspect ratio, and you can resize the viewport on the fly. For example, if the user rotates their phone, it will fit the new aspect ratio and adjust the contents of the screen to match.
This is a little buggy. It relies on the Scene and all of it's child windows and sprites knowing how to relayout themselves. For RPG Maker MV core objects, I've patched as much code as I've seen that needs updating, but there's still some bugs. Also, third-party plugins like the popular Yanfly plugins may not include these methods.
I can demonstrate the advantages of vector graphics by altering the parameters of the viewport scaling. Along with a user-configurable sizing parameter called ArtScale, there's also minimum and maximum viewport sizes. At the edge of these viewport sizes, the actual size of the game isn't determined by ArtScale but instead by how larger the window is from that limit.
So at this set of parameters we can see that the game fits everything into frame correctly, and our vector assets are rendered larger; although with an increase in loading times due to SVG rendering cost. Unfortunately we can't offload SVG rendering onto a WebWorker due to not having the ability to transfer canvas contexts or even create new ones across the heap barrier.
The final feature I wanna demonstrate to you is framerate independence. Now, RPG Maker MV 1.1 added proper checks for low framerates to avoid the game running slowly in that case. However, my code goes one step further by updating everything in the game to run at faster framerates than 60. This means we can have a full, 120fps, TotalBiscuit-compliant RPG Maker game!
Of course, I can't demo this to you. I can't even test it in real conditions, since I have a 4K monitor that only goes up to 60fps, and that's with some severe glitching. So instead I added a feature which forces the game to run at a particular framerate regardless of what the browser asks for.
I'm going to play this at the 30fps of my monitor, then speed it up for 60fps YouTube. Then, hopefully, if you double the speed again you'll see what it looks like at normal speed but at 120fps... assuming you have a 120hz monitor.