Hi everybody. Been playing around with this engine as it has peaked my curiosity with it being as aged as it is yet so many people mess with it, and I have been having a lot of fun (well, haha I'm not sure of a different word to use). Today I'm going to share some things that I have found rather frustrating as well as particularly interesting about the way Halo CE handles a few things. Specifically, I'd like to focus this thread on the topic of how the HUD works in CE.
If this is not the right section for this, I greatly apologize. The technical / map design forum seemed more Q/A oriented, but sorry if this should be there instead!
This thread won't go into any "HUD theory" so to speak, i.e. what makes a good HUD, good placement, that sort of thing. Instead, I'm going to get into the nitty-gritty technical stuff and how to pull off some really cool results. Bear with me. There will be a LOT in this thread, and I will update it as I go. For now, the tools I will be using here are Tool, Mozzarilla, and Photoshop.
To begin, some fundamentals: Scaling and Placement.Scaling
Many of you I would assume who have messed with HUD elements are well aware of what I am about to tell you. Scaling is off. WAAAY off. Except it really isnít. Halo CE is just trying its very best to pretend that higher resolutions outside of 640x480 donít exist.
Take this new Assault Rifle reticle. Same design, higher resolution:https://i.imgur.com/Ni6HUO5.jpg
Compiling and simply swapping out the old crosshair annnnnnnnnnd: (1920x1080) https://i.imgur.com/bJeRZE5.jpg
Well just what in the world is going on? The answer is that Halo CE is rendering our crosshair relative to 480p. In fact, you can see that our bitmap is 225% its actual size when running at 1080p, and the attractively named ďdonít scale sizeĒ flag does nothing.
Itís all in the ratio of our screen height! 1080 / 480 = 9 / 4 = 2.25
To bring it down to size, we should take the reciprocal of this: 480 / 1080 = 4 / 9 = 0.444444... (Halo CE hates this decimal, which I will talk about later, but for now if you want you may round to 0.44, which will be a little smaller, or 0.45, which will enlarge it a little bit, depending on the dimensions of your bitmap.)
Scaling width and height using 0.44: (1920x1080)https://i.imgur.com/IGVGqKP.jpg
All better! However, one small thing. You may notice a bit of truncation along a certain axis for your bitmap. It didnít happen here (at least my eyes havenít caught it, but small, round bitmaps will make it easy to spot as they will become a little oblique). Sometimes 0.44 fixes this vs 0.45 and vice-versa, but something I have found more reliable (and later on will be VERY useful), is to use 0.5.
Really? 0.5? Thatís not 0.44 or 0.45! Wonít my bitmap be too big? Yes, it will, which is why I suggest you reduce the size of your bitmap jusssssst a little bit. To go from 0.444444... to 0.5 is to take 112.5% of the original values (0.5 / 0.444444... = 9 / 8 = 1.125). So, let us take 88.89% (0.444444... / 0.5 = 8 / 9 = 0.888888...) of our bitmapís original size and shrink it.
Shrinking our bitmap (still on 128x128 sheet):https://i.imgur.com/CrguHOG.jpg
And now, using 0.5 as our height/width scale: (1920x1080) https://i.imgur.com/msbncCe.jpg
And thatís it! Any loss in quality is extremely negligible, and the 0.5 scale allows us to segue properly into the next section. In fact, static elements and meters (not crosshairs) using the "use high res scale" flag will use 0.5 by default! Basically, Halo CE treats high resolution as 1280x960 (which 0.5 will bring back to 640x480), and any higher resolution like 1920x1080 can make up for it with just a small amount of scaling up.Placement
If you are only concerned with making crosshairs, I would probably tell you this section doesnít matter since everything is centered in the screen. It is, however, useful to know how to place and arrange bitmaps exactly as you would in Photoshop and have the result be the same.
To begin, WHAT you are trying to place matters. If it is a crosshair, the origin is right at the center, and the center of the bitmap is the registration point (the point in the bitmap to base the coordinates off of, changing these values in sprite block in the bitmap tag does not affect this). If it is any kind of static element or meter, etc., the origin is the corner of the screen with respect to the given anchor (top left, top right, bottom left, bottom right) and the registration point of the bitmap is the same corner.
Here is a simple static element I have used:https://i.imgur.com/3nLVkhb.jpg
For each corner anchor, the bitmap will be placed differently. For top left and top right, the bitmap is 18 px (at 1080p, which is 8 screen units, i.e. 8 px at 480p) from the screen corner. For bottom left and bottom right, the bitmap rests at the bottom of the screen, but again 8 units from the left or right respectively.
Quick reference for later, 18 px at 1080p is 16 px at 960p and 8 px at 480p (yay math!).
Observe the anchor bitmap at (0, 0) with each respective anchor using the 0.5 scale, or the "use high res scale" flag (each 1920x1080):https://i.imgur.com/oGqREfH.jpghttps://i.imgur.com/cbg4vwe.jpghttps://i.imgur.com/PRHpBXo.jpghttps://i.imgur.com/xirmkAm.jpg
So, for moving bitmaps around, increasing the x and y position values will push the bitmap toward the center axes of your screen. A single unit is a single pixel in 480p, or two pixels in 960p, or 2.25 pixels in 1080p. Of course, Halo will round to the nearest pixel in the event of decimals (whether it is rounding up or down, I'm not quite sure).
A real convenient trick for perfect placement is to take a 1280x960 canvas in Photoshop and place your bitmaps in the canvas (i.e., pretend your aspect ratio is 4:3 and let OS or something handle the HUD scaling/shifting). Note the coordinates of the necessary registration point, and make sure the distance away from the origin is an EVEN number. Then simply take half of the displacement values and make them your x and y offsets in Guerilla / Mozzarilla.
Letís take a look at this method in an example. I am using a child HUD with the center anchor. I will be using the following bitmaps, a shield meter (left and right) and a health meter (left and right). Each can be placed with either 0.5 scale or the "use high res scale" flag (again, these are the same thing). Obviously these bitmaps, for what they are, should be in the cyborg HUD, but pretend these bitmaps aren't actually part of a child weapon HUD interface tag and that they actually function and arenít just static!
(Splitting them into left and right is unnecessary, but I want to show the seamless stitching-together of the bitmaps that occurs if done correctly)
Here I place them in a 1280x960 canvas (reticle is dead center). Green outline is health bitmaps, red outline is shield bitmaps:https://i.imgur.com/6vOiEEg.jpg
Since I am using the center anchor, I use the center of the bitmaps to define the coordinates.
Health left coordinates: x is 512, y is 106; take half of distance from center: (512 - 640) / 2 = -64, (106 - 480) / 2 = -187
Health right coordinates: x is 768, y is 106; take half of distance from center: (768 - 640) / 2 = 64, (106 - 480) / 2 = -187
Shield left coordinates: x is 512, y is 90; take half of distance from center: (512 - 640) / 2 = -64, (90 - 480) / 2 = -195
Shield right coordinates: x is 768, y is 90; take half of distance from center: (768 - 640) / 2 = 64, (90 - 480) / 2 = -195
Putting the x, y coordinates in Mozzarilla / Guerilla for health left, health right, shield left, shield right respectively: (-64, -187), (64, 187), (-64, -195), (64, -195)
And itís perfect! Shrink and crop the image to 1280x960 and youíll see that the canvas and the in-game screenshot are a match.
If you use the 0.44 or 0.45 scale, you MAY get stitching in some resolutions but not others, i.e. it may appear fine at 1080p but horrendously ugly at 720p. Using 0.5 or the high res flag will keep them looking clean at ALL resolutions (I have yet to run into a case where this is not true!), PLEASE let me know if you find a counter example as I do not want to spread misinformation.
I apologize for all the links, I would link the bitmaps as images here if I was able to (gotta wait a few days), but this post has all the info I wanted to say for now so I hope the aesthetic will suffice haha. Hopefully it is informative to some!
Later, I will dive in to techniques used to render bitmaps of NON 2^n dimensions, combining bitmap sequences / bitmap data into a single tag via hex editing, and (my favorite) rendering out scope masks the way everybody intended!
A glimpse: this bitmap (488x488, non power of 2 size) https://i.imgur.com/vaiTd9b.jpg
... will transform into this: (1920x1080) https://i.imgur.com/lDO2RXP.jpg
**hi-res crosshair and 2x are my own
Thanks for reading!Edited by Mann on Apr 20, 2018 at 04:11 PM