Suggestion for radar icons

[artfoundry]

I'd like to suggest an option to increase the size of the radar blips/icons - on my phone they're very hard to distinguish or survey quickly (which you often need to do while flying; half the time i can't even see the dot for my helicopter when I'm moving).

[scottschiller]

Thanks for the note, I'll take a look. In portrait orientation, there isn't much space to render the 8192-pixel-wide battlefield at scale. The entire battlefield needs to be shown, and that means units need to be pretty small in order to fit without being a mass of overlapping blobs.

I'm sure there's a better approach, but I don't have anything off the top of my head at the moment. This will need some more thinking.

[artfoundry]

Yeah I know sizing them up would make them not to scale, but I personally would be ok with that (but of course can't speak for others) as a tradeoff. You get overlap anyway just from normal gameplay. Even if you just increase the size of the player chopper that would be good. The main things I look for in the radar are my chopper, the enemy chopper, enemy AA trucks, and enemy tanks. Especially the AA trucks, as once they're visible on screen, you're already in trouble lol. But I realize you want to keep the relative sizes the same to maintain their differences, so at least for the ground troops, it's probably an all or none case. I would think just an extra pixel in width and height for everything would be ok?

[scottschiller]

Good thinking - and yes, the turrets and the missile launchers are the ones I like to keep an eye out for! 😅

I was thinking of scaling, and how to fit everything. e.g., I made the radar 1.25x or 1.5x bigger, would it help? If the radar took up more vertical space, I could make everything taller - but it doesn't necessarily help the restriction on width.

If I simply magnify the current UI, things are more "legible" but with some trade-off as currently displayed. You can't see the entire world, now the enemy base is off-screen - so imagine everything crunched a little tighter together, probably more overlap. I think this is worth exploring, it feels like there's a good balance somewhere in here. With larger scale, maybe I can look at using borders instead of filling in the colour - or, show small versions of the actual sprites. TBD!

Here's a quick mock on desktop - note that the enemy base isn't shown as I applied a "zoom" to everything.

This approach also takes away from the battlefield height a bit, so the game will be scaled down a little in size. I don't think this will be an issue on desktop, as it'd be another 32 to 64 pixels off the window height; it would be more notable on small portrait screens, e.g., an iPhone.

With a larger radar, I could also remove the bottom bit of the UI with the "order queue" and options / exit links on small screens to maximize vertical space. Maybe I find a new home for those.

[artfoundry]

I think not seeing the other base is an ok tradeoff, as I'm usually not paying much attention to that anyway unless I'm flying on that side of the battlefield. You could even allow the user to drag the radar to view the rest (and then it resets as soon as they start moving again).

As for taking up more vertical space, I'd actually be ok with moving the exit and options buttons - i actually often get the options button and the unit ordering/helicopter controls switch/button confused, so moving it would be great! You could even put the exit button inside the Options panel.

Btw, i think you have a spelling error in one of the messages - i think it said "You stated capturing a bunker".

[scottschiller]

An update: I've added a prototype radar scaling feature where the view is "stretched" horizontally, and scrolls as you move across the battlefield. I'm torn because it's a trade-off between visibility of local scope, vs. the whole battlefield. I could add a key, touch or right-click option to temporarily show the full-scale radar etc., but I suspect that might be fiddly.

Somewhat aggressively-compressed demo here of the radar at 2x. aa_radar_scale_demo_1080p.webm

You can try this here for the time being, with different scale values. Edit: I think 1.5 looks good on mobile, e.g., an iPhone in portrait where things are compressed. Landscape is tougher, perhaps because the radar UI is just small vertically. https://play.armor-alley.net/?radarScale=1.5

[scottschiller]

This is now an experimental pref, enabled and scaling active by default for mobile. On desktop, you can use s to toggle scaling in-game. On mobile, tap-and-hold with a second finger while flying will do the same.

1.5x feels like it gives a bit more room, without giving up too much. The smallest portrait screens make this one a challenge. 😅 https://github.com/scottschiller/ArmorAlley/assets/174437/751a1dc4-fbfb-465d-adb5-387ab5ae3ccc

Edit: Hang on a second, back to the drawing board... I'm scaling up the widths of the icons too, which defeats the purpose of scaling. I need more coffee, apparently. 😂

[scottschiller]

I think this is an improvement. Spacing things out further, but maintaining icon dimensions. 1x vs. 2x vs. 3x, portrait and landscape. Portrait looks to benefit most from horizontal scaling, and maybe that's where I apply this to start.

I think to make things work similarly on landscape, I also need to make the icons larger in addition to scaling and scrolling.

iPhone portrait, 1x / 2x / 3x:

iPad portrait, 1x / 2x / 3x:

iPhone landscape, 1x / 3x:

iPad landscape, 1x / 3x:

[scottschiller]

Alright - now with relative icon scaling, when in landscape on mobile / touch devices like iPad and iPhone. Scaling is set at 3x, and then icons are made wider by 66% on iPhone, 50% on iPad.

And now, I need a break from this. 😅 😌

1x (home menu) vs 3x with icon scaling:

iPad, 3x w/icon scaling:

[artfoundry]

I haven't tried on ipad, but looks good on my iphone! My only request would be to either brighten the icon for they player chopper or not have it blink - it's still kinda hard to see at a glance on my phone in landscape (does anyone actually play it in portrait??), even with the zoomed radar. Oh and the new warp effect on the stars is fun. 😊

[scottschiller]

Thanks for the continued feedback; I've made a big round of updates and tweaks to the UI over the last few weeks. I've introduced a radar scrollbar / rangefinder(?) of sorts that sits on the fuel bar UI, so you can roughly gauge your position and range / visibility on the battlefield. This UI gets slightly different treatment for contrast / visibility on smaller landscape screens e.g., iPhone, I may make this an option in prefs.

I've also made the scale and icons larger, helicopter now blinks more "clearly" instead of fading - so it can still get your attention - and radar icons are a bit taller on small landscape screens as well.

I think it's looking pretty good, on the various devices and simulators I've got on hand.

[artfoundry]

Looking pretty good! But it looks like the range indicators in the radar are stuck "on", even if the checkboxes are unchecked.

[scottschiller]

@artfoundry Thanks for the bug report - I wasn't applying the CSS change to the radar element in the DOM, hah. Now fixed.

I've basically refactored the radar to use <canvas> for rendering, as well as the battlefield effects (the starfield, gunfire, shrapnel, and "confetti.") The result should be a significant drop in CPU, reduction of jank and improved smooth framerate / gameplay. I've got more in the works.

I recently posted an overview and walk-through of the latest from December 2023. This doesn't include the most recent radar refactor, but there are lots of other details covered. https://www.youtube.com/watch?v=4FyuEamvTTQ

With the radar canvas updates, there are some new details like chains on balloons, blinking lights on landing pads, angle / rotation on smart missiles and so forth.

I've tweaked the radar scaling and layout to be more responsive, as well. Radar elements can be more or less fixed-height, and scale in terms of being more "spaced out" across the battlefield for the most part vs. being stretched.

A few screenshots follow.

Desktop chrome, full-screen (4K):

iPad landscape, radar @ 1X + 3X:

iPhone, radar @ 3X (portrait) and 2X (landscape)

[artfoundry]

Nice. I also found a small spelling error in the last battle completion letter (finally finished the single player campaign on easy! 😅).

[scottschiller]

Ha! Good catch, thanks. I remember hurriedly typing all those out at once, looking at the handbook and flipping through the pages to find each of the letters. It took some time with all the HTML formatting, too.

[artfoundry]

Oh those were part of the original game instructions? I can't remember whether I had the manual, much less what was in it if I did. I just figured you made those up.

[scottschiller]

Ha! So the "old tanker" backstory was from the printed manual, not my work. I originally got a copy of the game from a friend (as I suspect many did,) in maybe 1991 or 1992, and I learned how to play the game before ever seeing the manual - referred to as the "combat handbook," which turned out to be quite well done.

You can find a pretty nice scan of the manual here. https://archive.org/details/armoralleymanual/ArmorAlley-Manual/ It definitely helped clarify a few things for me in 2013, when I got my first official boxed copy of the game from eBay. It doesn't explain everything, and encourages exploration. I think there are a good number of undocumented features, like the benefit of owning all bunkers in earlier battles etc.

The manual says the game doesn't have any copy protection, but you are expected to register with a serial number that's printed on the label of the disk(s). If you play a network game using copies registered with the same serial number, you're limited to a "demonstration" game (maybe a demo battle / level?), and can't order extra helicopters.

I now have three boxed copies of the game from eBay; two PC versions, and one for the classic Macintosh. One of the PC versions is on two 5.25" floppies, pretty classic stuff. The others are a single 3.5" floppy. I suspect the 5.25" version was an early release, as the combat handbook also used "wiro" or "plastic coil" binding - a nice little detail - whereas the others are stapled.

It's been fun digging through the original boxed software and combat handbook, pulling details and other bits for the remake. There are still a few things I could add and work on ("dumb" missiles and napalm, save / resume battle, badges, the scoring system and high scores), but I feel like I have the vast majority of the original covered - and very few people have noticed any omissions!

[artfoundry]

That's awesome. I'll take a look at the manual later tonight. I thought I remembered there being napalm in later missions! I think I mentioned this either in another issue or in a response on a YouTube video - I did beta testing for the original developer like 15 years ago when he was trying to port the game to iOS. Unfortunately he gave up even though he was so close. Glad you didn't!

[artfoundry]

Ha, I just saw in the manual that Three-Sixty used to be right around the corner from where I live now!

[scottschiller]

I'm a bit jealous you got to try the iOS beta! I discovered some mentions of the iOS port (YouTube) when starting my remake in 2013. Mostly, I wanted to see if there was still commercial viability at the time, or was the game more "abandonware" and so forth. I found the author and reached out, and was very thankful to receive permission to use the name and graphics for my version. I don't recall the exact reply, but at some point I sent a link along and got a "Hey, that's pretty good!" or similar. 🙇‍♂️

It's funny, and a small world. I remembered Bascom Avenue from when I played the game as a kid, and I eventually moved to Sunnyvale and then SF for work in tech. I would go record digging in the South Bay (Streetlight in San Jose, "Big Al's Record Barn", etc.) somewhat regularly and was quite delighted when I saw the Bascom Avenue / Campbell exit off... 280, I think it was. ;)

[artfoundry]

That's awesome he approved, both legally and appreciatively.

Ha, my favorite spot for buying music was Tower Records in Mountain view. I'm still amazed that Rasputin Music is still open on Bascom in Campbell, but I guess vinyl has made a comeback. Are you still in the bay area?

[scottschiller]

Ah yes; I forgot about Rasputin, that was the other place I'd stop at. I had a great time in California, but returned to Canada close to five years ago.

[scottschiller]

Work in progress: Making the radar icons more detailed and identifiable. The tank shape was a fun one.

[scottschiller]

Radar design tweaks, ongoing: Dropping the diagonal stripes in favour of a simple gradient. Bunkers and super bunkers now have doorways. Scan nodes use a drop shadow, same as on the battlefield. Turrets were tightened up a bit, they were almost overlapping when in groups of three on some battles.

I think this is much improved over previous designs, and I can probably do more. Thanks for starting this discussion last November!

[artfoundry]

Looks great!

[scottschiller]

Moving the radar to render on <canvas> was 100% the right move, but I deferred doing this for quite a long time. 😅 Most of the battlefield is also now rendered via canvas, and the performance gains are quite significant. I also render the radar canvas at "retina" resolution, or whatever pixel density is supported by the display. On my desktop LG monitor, it's 2x.

Canvas rendering has options for retaining sharpness, e.g., on scaled images. tl;dr, I've kept the default smoothing and render the battlefield at 1x for now. I tried 2x for the battlefield sprites as well as enabling sharpening, but I found that performance took a hit on my iPhone and in the Mac OS "simulator" app. I think the difference visually is minimal, but I may make it an option for folks to try out in prefs.

Time spent in JS and rendering per-frame has dropped, so the game can now run at 60 FPS quite nicely. The higher framerate was not an initial goal, but I realized it was possible once I started the rendering refactor. Because I also implemented the game speed option recently, that helped make it easier to "re-time" the game in terms of running at 30 or 60 FPS.

[scottschiller]

I forgot to mark this resolved! 😅 I continued with updates through March and got sidetracked, but the game has notably improved radar UX/UI now. Thanks for opening the issue on this and testing / feedback.