Advanced Image Usage part 1
Quake2 Demo Editing Tutorial

Written 4/99 by Overman

          

In our last tutorial, we covered the basics of placing images on screen.  We learned how to place an image of specific size in the center of the screen.  In this tutorial, we learn how to place any image of any legal size, anywhere on the screen, and at any time.

Image Size

For on-screen .pcx images, Quake2 will support any image up to 417x314 in size.  So we are not just limited to images that are 256x192 as in the last tutorial.  320x240, 400x300, 250x100... all of these sizes will work.  In fact, as long as the width is not greater than 417 and the height is not greater than 314, your image will work.  If the image is larger on either of these axes, Quake2 will crash in GL mode while trying to load your demo. 

Screen Placement

In the previous tutorial, we looked at the Statusbar string for 256x192 images, which was:

"yv 8 xv 32 pic 0 "

To understand what this means and how to make a string for any image, we first can look at the following table of Statusbar notation.

yv  placed in relation to center of the Y (vertical) axis *
yt placed in relation to top edge of the screen on the Y axis *
yb placed in relation to bottom edge of the screen on the Y axis *
xv placed in relation to center of the X (horizontal) axis *
xl placed in relation to left edge of the screen on the X axis *
xr placed in relation to right edge of the screen on the X axis *
   
  * All of these are regardless of screen resolution.

Have you ever noticed that when playing Quake2, the statusbar is always aligned properly no matter which screen resolution you choose?   (i.e. 640x480, 800x600, etc.)  This is because every image displayed on the statusbar is given an X and Y placement variable from the table above, and these are computed based-on the screen resolution of the user.  So, if an image is on the top edge (YT) of the screen in 640x480 GL mode, then it will also be at the top in 320x240 software, or 1024x768 GL. 

Keeping this in mind, we see that our Statusbar line breaks down as follows:

"Y_PLACEMENT value X_PLACEMENT value pic 0 "

NOTE:  'pic' simply tells the interpreter to look for a .pcx image, and the value '0' gives the location, which is in the Playerinfo parameter Stats-0.  (remember from last time?)  Stats-0 contains the index number from the Image List that tells which .pcx file to display at any given time.

The yt and yb variables can be used instead of yv if you like, and the same goes with xl and xr for xv.  In both instances, you should set the values to zero for proper alignment.  ("yt 0 xl 0 pic 0 " should place your image in the top left corner of the screen.)  It is worthwhile to try experimenting with different combinations, and trying some numbers other than 0 for the values can sometimes yield interesting results.  For the purposes of this tutorial, we are going to focus on centered images, the most popular application.


The Formula (Centered Images)

The following formula can be applied to find the center image coordinates for any image of allowable size in Quake2:

yv = (240 - H) / 2          --- Where H is the height of your image

xv = (320 - W) / 2        --- Where W is the width of your image

Notice that, apparently, 320x240 is the "standard" image size, meaning that a 320x240 image will need a statusbar string of:

yv = (240-240) / 2  = 0 / 2 = 0

xv = (320 - 320) / 2 = 0 / 2 = 0

So:  "yv 0 xv 0 pic 0 " will center a 320x240 image.   The statusbar for any image of your custom dimensions can be computed the same way, simply plug the height and width into the formula.  If your height or width is not evenly divisible by 2 (ex. 399), then round it up (400) for the formula.

Here are some other examples:

300x50 : "yv 95 xv 10 pic 0 "
32x32 : "yv 104 xv 144 pic 0 "
400x300 : "yv -30 xv -40 pic 0 "
256x192 : "yv 8 xv 32 pic 0 "
416x314 : "yv -37 xv -48 pic 0 "

Notice that both positive and negative numbers are acceptable.   In fact, if you want to offset an image (off center), you can alter the numbers until you have the results you desire.  There are probably some limits on number size, but I am not aware of what they are, and have had great success trying many different combinations.

Any Time Now

Once you have determined the appropriate Statusbar value, all that remains is inserting that value into the Statusbar configstring in Demo Information.   As you know, once you set it here, that placement will stay in effect throughout the entire demo........ or will it?

The truth is, you can CHANGE the Statusbar string at any point in the course of a demo.  This would allow you to use different images of different sizes at different places at different times.  As of this writing, I have only successfully done this procedure with one image on the screen at a time, but very soon we will be able to manipulate multiple images on the screen at once.  (look for Advanced Image Usage part 2)

Try the following.  Open up a scrap demo and follow the regular procedure to insert an image of your choice throughout the demo.  Use the statusbar string:  "yv 8 xv 32 pic 0 ".  Don't worry if that doesn't fit your image size, just try it for the purposes of our little demonstration. 

Now, open the Demo Information one more time, and click on the Statusbar configstring.  Notice the value in the Index box just above your placement string, you should see a 5.  The Statusbar is always configstring # 5.  Click OK.

Now, skip ahead and select a block further along in the demo, block 100 for example.  Now choose Insert - New Message.   Message Type:  configstring.   The index number is -- you guessed it -- 5.  The value?  Try "yv -30 xv -40 pic 0 "

Now watch your demo.  Notice that at the block where you inserted the new Statusbar, the image changed position!!  The possibilities here are endless.  You can create images that move along a path on the screen, simply by using new Statusbar messages.  Or, you can go for smoother transitions by changing the Statusbar string while your "blank" image is on screen, and THEN inserting your new image.   Let your imagination run wild!

** Currently in beta testing is a simple Statusbar calculator for windows, which will automatically generate Statusbar strings for your use when you give it your image dimensions.  Look for it soon on the tutorials page!  =)