The patterns, they awaken me

December 31st, 2018
Posted by typhoon

I made a Starcraft II Hotkey Editor since the in-game one is sort of a disaster for co-op mode. The advantages of using this editor instead of the in-game one are:

It's based on my Warcraft III Hotkey Editor. I actually originally intended to create this one first but thought it might be easier to start with Warcraft III (since I was more familiar with how its hotkey system worked), apparently forgetting that there are eleventy billion units in Warcraft III.

Starcraft II is actually simpler in some ways. I was able to remove about six hundred lines of code right away that handled editing tooltips and dragging-and-dropping to reposition buttons. Warcraft III can also have multiple hotkeys for the same command, in two dimensions: "horizontally" in the case of multi-tiered upgrades, such as weapons and armor upgrades or spellcaster training research, and "vertically" in the case of hero abilities having separate "use" and "learn" hotkeys or many abilities having two states (such as Gather/Return Resources). In Starcraft II, these sorts of cases are handled by using separate commands.

I ended up having to rework some parts, including how it lays out the command card so it can display multiple cards per unit and how it handles inputting a hotkey to support non-character keys (such as escape and the space bar). The color overlay for the monochromatic buttons (e.g., move and attack) is a neat CSS/SVG trick.

Most of the time I spent on both editors was inputting data (and pulling information and assets from the map editors) rather than working on the editors themselves. The Warcraft III editor ended up with 608 units and 1036 commands. The Starcraft II editor has 690 units and 1194 commands.

Who was it fell by the way?

November 4th, 2018
Posted by typhoon

I made a Warcraft III Hotkey Editor. I know that there are probably already utilities for this and that the timing is a bit funny considering Warcraft III Reforged will almost certainly include this functionality built-in, but everyone needs a hobby. It has all of the standard multiplayer units and structures, including creeps/mercs, plus campaign units.

It generates a hotkey file that you can copy and paste into the proper directory. I've only tested it in Firefox, Safari, and Chrome. It can "spirit link" hotkeys so you can set a group of related ones all at once and can automatically generate appropriate tooltips. In addition to editing hotkeys, you can also edit tooltips by clicking on them and reposition buttons by dragging and dropping. Hotkey and button position conflicts are highlighted in red. The load function hasn't been tested extensively, but it can read the WTVR QWEASZ set and the default "CustomKeysSample.txt" and should definitely work fine with any file generated by this editor.

I also made a Starcraft II Co-op Randomizer a while back (since the game client doesn't let you exclude particular commanders or maps from consideration).

Her blade found its mark in the dark

August 1st, 2018
Posted by typhoon

[Affinity Designer editing an SVG]

A few years ago, I had to get a laptop, which I hadn't had a need for since the days of my beloved 2005 PowerBook G4. I got a 2015 MacBook Pro, and it immediately became clear to me that web sites that are optimized for such a display look fantastic and web sites that aren't look like trash. Then I got a 5K iMac when it became further clear to me that everything looks like trash on a low-res display after using a high-res one long enough. I also realized that some of my own web sites were looking awful and that I should probably update the ones that are still alive(-ish) and online, including this one.

The naive approach to "upscaling" a web site is to go back to the original PSDs (or whatever) and double their dimensions. Then the vectorized parts of them (text and shapes) are redrawn at the higher resolution. Raster components may have to be redone (or left alone ). Many images used for web sites are downscaled from larger images to begin with, so this alone can get you reasonably far. It's a bit clunky in that you generally have to keep both 1x and 2x versions of each image (to reduce download sizes for clients whose monitors can't display the extra resolution and also to avoid unpredictable aliasing inherent in doing the downscaling on the user's end). Furthermore, it doesn't scale for clients with 3x displays (as many phones have, including the bigger iPhones) or users who zoom in. But it works perfectly in the majority of cases and looks a lot better than nothing in all the others.

Fortunately, CSS and web dev in general has advanced such that a number of common things that previously required using images, such as gradients and embedded fonts, can be done prescriptively instead (and thus rendered by the user agent at the highest possible resolution). The final piece of the puzzle is to recreate as many images as practical as vector images, so that they too can be rendered by the user agent at whatever resolution it thinks is best. In this case, SVGs are the web's standard vector image format; they previously had poor support and required using object tags instead of img tags, couldn't be used as backgrounds, required third-party plug-ins to work at all in most browsers, etc. But now they're pretty great and can be used the same as any other image format.

So this is all a long-winded way of saying that, over the past few years, in addition to all of the pointless stuff previously mentioned, I also updated this site to not look like garbage on high-res displays. And joke's on me, because I made thirteen different themes for this site. While I initially only vectorized the default theme, "New Moon," eventually the annoyance of having all the others looking blurry and pathetic got to me and, over time, I got to most of them too. So the progress report is:

All of the file icons in the /files/ directory are also SVGs (about a hundred of them!), though they're based on an existing set. I originally converted them for a different, unrelated project, but I also made custom icons for Starcraft and Warcraft III maps and replays specifically for this site.

No more water but fire next time

July 31st, 2018
Posted by typhoon

Years ago, Seawolf asked me to make a web site for WASTE. I made one in mid-2001 that I never finished—I think I tried to get too fancy with some parts and it wasn't really working—and forgot about it for a good while until I gave it another shot in early 2004. This version was basically completed, but we never did anything with it for whatever reason.

A couple of years ago, I finished a few odds and ends on it (mainly by copying stuff off the wiki) and uploaded it here:

[WASTE site, 2004 design]

The 2001 version is available as an alternate style sheet (or an adaptation of it is anyway, since I had to redo it to work with the 2004 HTML):

[WASTE site, 2001 design]

I'm pretty sure that Firefox is the only browser that can switch between alternate style sheets without an extension (it's the "Page Style" submenu under "View"), to my perpetual annoyance since I do alternate styles for sites all the time. The Love and War site has a "dusk" theme, for instance, that probably no one has ever noticed (and the April Fools' Microsoft theme).

I'm still fond of the 2004 design, which is why I wanted to finish it (even though we're many years out from it mattering). The original version had a cute animated heading for the "Headquarters" page that I ditched because I didn't want to remake the effect for all the other sections (I used to make animated GIFs in ImageReady; I wouldn't know what to use these days). The 2001 design feels amateurish and incomplete, but I like it as an alternate theme because it's so different from the main theme.

Similarly, I mocked up a redesign for Campaign Creations some years ago, in 2006:

[Campaign Creations redesign]

I'm pretty sure I made it for a design contest they held, but it's possible I just did it because I thought their site was hideously ugly and wanted to see if I could do better (I've got a few similarly motivated designs laying around). At any rate, I never showed it to anybody or did anything with it. I guess there isn't anything about it that particularly evokes custom RTS campaigns (it looks like the default theme to a CMS, actually), but I thought it was clean and always liked it.

Around that time, I adapted it for use for another project (a music journal called Slug that I wrote for a while but never actually put online). In 2014, I dug it up again and made it into an alternate theme for this site (themes are switchable in Preferences), also called "Slug," for the sake of finally getting it out somewhere:

[Antioch Forever, Slug design]

I liked that it was (at the time) the only theme for the site that used plain text for the menu instead of icons. I'm also partial to designs with weird color schemes.

Finally, a couple of weeks ago, I was going through some old stuff (as I apparently do every couple of years) and found an unfinished design for Antioch Forever. I started this one in April 2007, then decided I wasn't feeling it and made the "New Moon" design instead a couple of months later (which has been the default theme since then). I think I felt it was too similar to the "Red Moon" theme (the default theme at the time) and wanted something lighter instead. I finished it and called it "Century," since it uses Century Gothic prominently:

[Antioch Forever, Century design]

Century Gothic is a knock-off of Futura (similar to the relationship between Arial and Helvetica), which is the font used by "New Moon" and Antioch Remastered/Thoughts in Chaos.

Overall, I'm satisfied with the way it came out. Like "Slug," it uses plain text for the menu bar. It's a more pleasing dark design than "Red Moon" on the whole, though I still like "New Moon" more overall.

Anyway, none of this stuff is brilliant, and I fully understand that there's no real point in doing any of this work that nobody is ever going to see. But they're fun to make, and I get a sense of satisfaction out of finishing old things.