LineWars VR Blog Posts

June 30th, 2019 - Still More Main Menu Work

Feedback from the Station Bridge Video

I got some feedback from the YouTube video I published along the previous blog post. One suggestion that I immediately thought was a good idea, was to change the order of the display panels. It would make more sense that the forward displays would show the play instructions on the left and the mission select on the right, so that immediately when a new player launches the game, they see the instructions. Originally the left panel contained the configuration, which I then moved to the far left. This way both the left panels contain configuration stuff, the leftmost panel has the main configuration and the rightmost the controller configuration.

I got some other feedback and suggestions as well, which I am in the process of implementing. For example, the "Self-Destruct" button should probably be red and/or have a protective cover or something to make it harder to hit it accidentally.

Fake News Show In-Game

When I was thinking about how to furnish the rear area of the space station bridge, I got an idea of having a quartet of TV screens in the middle of the back wall. This brought an idea of having a table and some benches in front of those TVs, sort of like a lounge area. I didn't want to spend time making a plush sofa or something like that (as the station bridge is supposed to be a working area), so I just made some simple benches. This table is meant for quickly eating some snacks before getting back to work.

Okay, so what sort of content could I put into those TV screens? One of them could very well show the camera inside the hangar, which would show the ships that are getting launched. I had already recorded a couple of video clips for this, so those clips would be ready to use. But what else? The first idea I got was that perhaps one of the televisions could show a news show? I could even use those animated mission videos as inserts on the news show, so I just needed a news presenter and some studio background.

I found a video clip that I thought was very suitable for my needs from Shutterstock. However, that cost $50 even in SD quality (I would not need any higher quality), and I thought that was too expensive for such a minor detail in my station bridge. I wondered if Videezy would have anything usable?

I did not find anything that would look like a news show, so my plan B was to just find some clip that would look like a news presenter talking, and some other clip that I could use as the background, and then just experiment with some layering and green-screening to combine those to a suitable short video clip.

For the news presenter I used a clip called Business woman facing the camera in a meeting via video conference. Videezy seemed to have a good collection of various background clips, so I took one called Beautiful Slide 4K Motion Background Loop. I actually did not need the full 4K versions of these clips, so I just downloaded the preview videos (the URL for those I found from the page source), which had a 630x354 pixels resolution.

I then launched up my trusty old VirtualDub/AviSynth combination, and began working on a script to combine all the required parts into a final composition. The steps I needed to do were the following:

  1. First, I needed to create an alpha mask for the news presenter video. I found out that Avisynth has a nifty command ColorKeyMask for this. I just needed to get some color values from the background, and was then able to mask most of the background away. This command masked some pixels also from the hands and face of the presenter, though. This was not a big issue, as I only needed 32 frames for my video. I just saved each mask frame into a separate BMP file, and then painted over the extra pixels by hand. Luckily the presenter had black hair and jacket, so those got very easily separated from the background. The AviSynth script snippet I used for creating the alpha mask is as follows:
    a = a.ResetMask()
    a = a.ColorKeyMask($989479, 12)
    a = a.ColorKeyMask($A09B84, 12)
    a = a.ColorKeyMask($8D896F, 12)
    a = a.ColorKeyMask($818068, 12)
    a = a.ColorKeyMask($9DA08F, 12)
    a = a.ShowAlpha()
    return a
  2. Next, I worked on the background clip. I added some black borders around the clip (the preview clip was 630x354 pixels, so I just made it 640x360 using the black borders). I then used the StackHorizontal and StackVertical commands to make a 3x3 grid of the clip, so that it would look like some animation running on a background wall TVs in a news studio. I also made it somewhat brighter. The original clip was already looping seamlessly, but I needed to do some FPS conversion to make the loop exactly 32 frames long.
    b = FFMpegSource2("Beautiful_Slide_4K_Motion_Background_Loop.mp4").ConvertToRGB32()
    b = b.AddBorders(5,3,5,3)
    b = StackHorizontal(b, b, b)
    b = StackVertical(b, b, b)
    b = b.Lanczos4Resize(960, 540)
    b = b.Crop(100, 120, 640, 360)
    b = b.ConvertFPS(26)
    b = b.SelectEvery(2,0)
    b = b.AssumeFPS(8)
    b = b.Trim(0,31)
    b = b.Levels(0, 1.5, 255, 50, 255)
  3. After that it was time to make the "NEWS" logo and the bottom banner area. I just made a BMP file containing these, and a corresponding mask file. I could then make a 32-frame clip from these images with these commands:
    n = ImageSource("NewsBottom.bmp", 0, 31, 8).ConvertToRGB32()
    n = n.Mask(ImageSource("NewsBottomMask.bmp", 0, 31, 8).ConvertToRGB32())
  4. For the video insert I just used the same animation I had captured from my Mission 1 and used as the short clip on the Mission Select display panel. I am thinking of swapping this insert video randomly during game, to make this news show look somewhat more interesting.
    i = FFMpegSource2("g:\OwnVideos\2019-01-30_09-04-14.mkv").Crop(436, 112, 1048, 590) # Mission 1 footage
    i = i.Trim(3945, 3945+8*32).SelectEvery(8,0).ConvertToRGB32()
  5. The final step was then just to layer all of these together, and add a scrolling text to the bottom. I used the Layer and Subtitle commands for these, with the subtitles animated over the 32 frames.
    a = Layer(b, a.Lanczos4Resize(546, 306), "add", x=-58, y=8)
    a = Layer(a, n, "add")
    a = Layer(a, i.Lanczos4Resize(280, 180), "add", x=340, y=8)
    s = "Rookie pilot saves a starbase from rogue asteroids!  Rookie pilot saves a starbase from rogue asteroids!  Rookie pilot"
    a = a.Animate(0, 31, "Subtitle",
    \	s, 8, 320, 0, 31, "Arial", 24, color_white,
    \	s, -500, 320, 0, 31, "Arial", 24, color_white)
    return a
The end result was pretty good in my opinion. Here is an animated GIF file containing the whole animation. In-game the screen is so small and far away you can't make sense of the scrolling text, so it does not matter that it loops the same text over and over. The important thing is that it seems to be scrolling at constant speed.

Space Suit Lockers Using Impostors

Okay, now the center part of the rear wall was done, but as the rear wall is 20 meters wide in total, the four TV screens only cover a small part of the wall. What else could I have there? Well, obviously the wall should have doorways leading to the inside of the space station. After adding those doors, I had managed to cover 7 meters of the total 20 meters, so I still had 13 meters worth of wall surface to decorate. I was thinking of some emergency stuff, and got the idea of having some emergency space suits in lockers along the rear wall. Simple locker doors would not be all that interesting, but how about if the lockers would have transparent windows showing the space suits hanging inside? That might look pretty neat.

I first looked for some royalty-free space suit images, but those turned out to be difficult to find, and their lighting was never suitable for what I wanted. So, plan B was to find (or model myself) a simple space suit, and then render that to a texture. I did not want to include actual space suit meshes into my space station bridge, as the suits are pretty far (around 11 meters behind) from the player, so you would not see them properly as 3D anyways. They do never even get any sunlight either, so the lighting will stay constant. I should be able to get by with some flat imposter meshes for the space suits.

After some hunting I found a free space suit mesh from CGTrader (by hlostoops). It was not exactly like I wanted, so I did some editing and material changing to it, and got it looking pretty much what I wanted. I chose orange color for the suit, as it is meant to be an emergency survival suit after some catastrophic event has occurred in the space station (complete loss of pressure and/or major structural damage).

Above is an image of the suits inside the locker with just the default light and no locker doors, and below them the final image how it looks like in-game, with the locker doors in place and some lights inside the lockers shining on the suits.

I still have around 3 meters on each side that I need to decorate with something. On one side there should probably be some WC doors, on the other side there could be some sort of a small kitchen area, with a sink and a microwave oven at least. I haven't quite decided on this one yet.

I found from some footage from a basketball game, so I used that as the contents of another TV screen. The top TV screens show a camera feed from the hangar deck, and a scrolling log display panel feed. Here below is an image of what the central area of the back wall now looks like when viewed from the player seat. Some global illumination and ambient lighting setup is still missing or unfinished.

All Music Received!

Just a couple of days ago I received the last remaining music tracks from Stelios Klonaridis (Agroglyph). He did very good work composing new separate music tracks for each of my 9 missions. I used his pre-existing "Epic Adventure Dubstep Trailer" track for my main menu, but all the other music is now specifically composed for LineWars VR! It is great to have at least one aspect of my game now fully done! Practically everything else still needs at least some work, though.

That's about it for this blog post, thanks again for your interest in my blog and LineWars VR!

Previous blog posts

See here for blog posts from the first half of 2019 and before.