What up Newgrounds. Today I went though some dumbass bullshit with coding, and I figured I'd share the behind the scenes process of some dumbshit that can happen when you program. Maybe you'll learn a thing or two. Or maybe I'll be a terrible explainer. Who knows. Maybe I wrote this to process and vent and get it all out of my system. Hopefully I explain it all nice and it's an interesting read. Tell me if you find any typos.
A bit of context, I'm using HaxeFlixel, which is based upon OpenFL, which is based upon how flash does things. So maybe if you're familiar with any of these you can understand a bit better, or learn something about these.
The problem was that when posting the game as HTML5, the game does NOT scale to the viewport/stage/whatever.
Let's say your game was 300x250 in size. That's about the size of an average retro pixel art game I think. If you were to upload it to Newgrounds as a HTML5 file, you would have to set the viewport to 300x250 exactly, and it would be a tiny window on screen. Even if you tried to set it to a higher res, it would just be a tiny window within a window. It goes the other way too. Let's say you had a 1920x1080 res game, and you wanted to upload it to NG. Well, if you don't have proper scaling setup, the viewport only shows a small portion of the full image.
(Let's say the browser window is the Newgrounds viewport. Works basically the same way anyways. The browser window in this case is about 680x460. The game here is about 200px. As you can see it doesn't fit the full window nicely)
(And in this instance, the game is like 1000px, way too big!)
There are likely a few solutions to this. Luckily, OpenFL has a super simple one. It's essentially a switch you can flip. OpenFL has a little file you can edit, called Project.xml. It has all sorts of parameters, and modifacations you can make to make the program work differently. XML is similar to HTML in style, so I'll just post a code snippet and explain.
<window if="html5" resizable="false" />
the "window" part says that it wants to modify the window attributes. The "if" says this line will only work if the html5 code define is set (it gets set automatically depending on which target you are building for). Now you'll see what we're after. The "resizeable". This sets it so the program display scales nicely to whatever window size we want. All we have to do is change "false" to "true". And voila!
(How it SHOULD have worked)
Seems like a simple fix right? It usually is. That's how I got my other projects like Monster Mashing, or the Christmas ADVENTure collab to work on mobile. On Newgrounds, when you're playing a mobile game, the viewport size is automatically set to your phone's browser window. So whether you have a 192x108 phone size, or a 1920x1080 phone size, the games WILL be somewhat of a consistent size. The aspect ratio fixing is a bit of a different post itself, so I won't get into that. But what I'm saying is I HAVE done this before, and it worked just fine. But for some reason...it just didn't this time?
(How it actually worked the first time I tried it)
I pretty much triple checked that 'resizable' was true. I made sure that the Project.xml file was nearly the exact same as the other projects that I KNEW worked. So what's the issue? I'm using an additional framework called DjFlixel. It's like a bunch of helper classes and whatnot for HaxeFlixel. It does a bunch of neat things, like cool UI shit, better control handling, and making it so that you can hot-reload assets during runtime, so that you don't have to recompile after every little change. I recommend checking it out. I wondered if that was the issue? I did a bunch of shit to it. Nothing seemed to be working though. I even started a fresh project, to see if the default setup somehow broke for me. But the fresh one worked just fine. I added all my code to it to see if it worked. Nope. I straight up refactored a bunch of code to not use ANY parts of DJFlixel. Stuff was still broke.
Haxe has a little package manager style system, similar to npm, which is the package manager for Node.js (npm is short for node package manager duh). Say I wanted to make a game with HaxeFlixel. Instead of putting a HaxeFlixel folder within my actual source code (I believe you had to do something similar for oldschool AS3 flixel games), I can install HaxeFlixel to the 'haxelib' which is short for haxe library I guess lol. So it's like a code library in a way. Like an extension of your source code. You can use those pieces of code in your own source code, without having to directly include it, if that all makes sense. I'm preeeetty sure it's just for organizational purposes. BUT BASICALLY it's as if all that code was in your source code folder and you can use it like normal.
I need to explain that because there's another difference between this project, and Monster Mashing, an example where it could resize properly. Monster Mashing uses DjFlixel too. Although, sliiightly differently. Monster Mashing uses DJFlixel by actually including the code within it's own code, rather than through haxelib. So if you were to look at the Monster Mashing source code, you'll notice that djflixel is a folder within source/ . I did that just so that I didn't have to deal with installing it on haxelib on the different PCs I work on lol. I was also fine with that because I only used it for ONE feature that DJFlixel has, which is a fader that fades the screen in steps, rather than smoothly.
(Credits scene for Monster Mashing. The fade effect is similar to retro games, so that's why I used it rather than the smooth default that HaxeFlixel uses.)
So I went about and added DJFlixel through the regular old adding it to my folder shit, and this time.... it was still broken. Except it was actually a black screen rather than the game just not properly resizing. The game gave me no helpful error logs. I decided to explicitly compare the Monster Mashing files, and these current files. First was the Project.xml. That was pretty much identical. Next was Main.hx, which is as expected, the main file. The files were also pretty much identical. Except I was missing a single line. I didn't call the function that actually sets up the game. How did I slip up here you may ask? Well, when I was refactoring a smidge of code, migrating between DJFlixel and 'vanilla' lets say, DJFlixel automatically called the game setup function. So I deleted the line that explicitly called it. This shit got me face palming hard. Think of it like you're trying to start animating. You turn on your PC, you get your tablet plugged in. And you're wondering why Flash isn't opening. Why is that? Well, it's because you didn't even click Flash to open it yet you dumbass. Imagine constantly rebooting your PC, unplugging and replugging in your tablet. But Flash "just won't open". But for the past 30 minutes you straight up just haven't even clicked on Flash to open in the first place. That's pretty much how dumb I felt.
So I called the setup game function all properly, and then the screen was no longer black! AND the screen resizing worked! I even re-enabled my old code that used DJFlixel stuff, and that worked too! So everything was somewhat back to normal. I figured it was some dumb combination of things, that I somehow fixed along the way, since I was essentially back to where I started, as if "resizable" was set to true all along. So I deleted the DJFlixel folder, and went back to using it from haxelib. And what happened next? The screen scaling stopped working. I was basically at square one at this point. As if the past hour or two was meaningless. What's the solution? I could just leave the shit in the folder, but all this told me was there was something in the DJFlixel haxelib folder that isn't in my folder. And I was right.
In haxelib, or really any sort of library of code you have in haxe, you can use an 'include.xml' file. These work pretty much exactly the same as Project.xml files. You can set different variables, like window res, which libraries you need for your own library, shit like that. If you install DJFlixel, that NEEDS HaxeFlixel to work, so maybe in there you'd see
<haxelib name="flixel" />
Note, flixel in this case refers to haxeflixel.
And then you'd need haxeflixel in your haxelib. I'd never messed around with include.xml files, mostly because I never needed to. I haven't written my own library yet, and everything has always just worked more or less fine enough for me when using stuff from Haxelib. However, in the DJFlixel include.xml file, there was a certain line that I saw immediately that sorta shocked me..
<window if="html5" resizable="false" />
DJFlixel was overriding the "resizable" variable and setting it to false no matter what. I turned that to true. And everything worked now. Scaling worked perfectly as well. It also had a few other defines set, that overrode a few things I needed to set. So I was able to get mobile controls working as well, just like Monster Mashing.
So that's basically mission success. What I assumed would be a literal 2 second solution, where I change "false" to "true" in that Project.xml, well it turned out to take me about 1-2 hours. What's the moral of the story? I'd say make sure you know what you'er using when you use all these fancy libraries that you didn't write yourself. And also if you're the one writing these libraries, make sure you got good documentation to tell the people what exactly you're doing, changing, and overriding. And uhh also coding is like 95% bullshit, and sometimes you get to actually write code if you're lucky. Also 4th moral of the story is that if you give up you'll never achieve your dreams. 5th moral is that magic is real and anything is possible, especially when it comes to programming.
If I feel like it I'll probably write some more little posts like these as I stumble my way through programming.
If you made it through this post uhh tell me if it all makes sense. I try to write it so it doesn't just make sense to other programmers, but the average person as well. And while you're listening and obeying all my orders, follow me on Twitter, and check out my Github if you wanna actually see how truly bad I am at programming. Everything I make is open source.
