I have just surfaced from a deep, deep hole. I must confess that I have let myself get carried away with investigating shaders, and abandoned anything else for most of the sixth week of the Mr Football beta.
Before I get into the weeds, where I have lurked most of the week, let me link to the CodePen of the results of my labours so you can run them for yourself. The shader code runs to about 4,000 lines at the moment, sourced from Shadertoy.com, GodotShaders.com and chatGL.ai. Shadertoy is the most popular place where artists create and share GLSL shader files, GodotShaders is the same for Godot’s specialised shader language (which I have reverse-engineered to fit into Phaser), and chatGL.ai is a free conduit to send prose-language requests to a specially-trained ChatGPT AI to receive GLSL code that, with a tiny bit of tweaking, is also suitable for use in Phaser.
Of all the libraries and techniques I have come across in my five-year journey into solo game development, shaders are the greatest weapon against impostor syndrome I have seen. Researching, writing and implementing a shader gives me a feeling of command over the craft that is unparalleled. Finally, I feel like a real game dev! This is something that developers who work mostly in pixel art don’t get enough of, I suspect. I am glad that I have gone past the low-pixel options and committed to maximum resolution for my game art, because that enables so many more options for shaders to add juice to every part of my game.
The ostensible reason for jumping bum-first into the ray-traced, artificial reality of shaders is that I want a lot of juice for card opening animations. Mr Football will be (indirectly) competing in the marketplace against a game of the size of FIFA Mobile, which uses full-motion video for its cards and pack-opening ceremonies. I don’t have EA’s resources but, as with the Web and its HTML-based Web sites, the beauty of the Internet is that I can produce content nearly as professional-looking as massive corporations if I can leverage open-source materials.
Some of the shader effects in the above page will make it into Mr Football, with some modifications. volumetricExplosion will be handy for Bomber cards, metropolisHaloes is useful for Saint players and rotatingSunbeams is perfect as a base for Suns cards. There are other easy solutions to represent other mascots: raster beams for hooped jumper designs, halftone effects for monochrome colour schemes, lightning, particle trails, clouds, glowing wireframes, fluid dynamics, godrays, oh my! It is even possible to create 3D objects, or at least cheat to make it look 3D… but at that point I think using something made for that purpose like Three.js would be more prudent.
Special mention must be made here of chatGL.ai, which is a great time saver to me who just dove into the world of shaders a week ago. I am not sure it would be particularly helpful for those who are well-versed in the common methods, but to get yourself up to speed from a dead stop, it has been a boon. It is not perfect by any stretch, and some of its solutions are rather janky, as well as a tendency sometimes to forget the difference between vec2 and vec3. Most of its peccadilloes are easily fixed, however, and it was invaluable in figuring out how to get a shader to cut out transparent pixels in Phaser as in the video above this paragraph, something which I hadn’t even seen done in the Phaser Labs examples.
One other aspect of WebGL technologies that fascinates me is the potential to use it for audio, particularly music. Mobile game developers have to keep one eye on app weight at all times, and encoding original theme music and incidental sound effects as equations rather than MP3 files sounds very promising to me. MP3 encoding can tend to produce excellent compression by turning an analogue sound into a digital wave, so many of the benefits would already be easily achievable using regular methods. Wouldn’t it be more efficient to cut out the middleman and output every possible sound asset in its most compressed form, and reassemble the pitch-shifted tunes in GLSL code? That’s how they did it on the C64 for the most part when things were far more tight, and a bit of that approach could go a long way on mobile. Another rabbit hole to explore at a later date.
I suppose I had better get back to boring old Phaser and Firebase. Enough fun, there’s work to be done and a beta to open up!