Upcoming Events
Unite 2010
11/10 - 11/12 @ Montréal, Canada

GDC China
12/5 - 12/7 @ Shanghai, China

Asia Game Show 2010
12/24 - 12/27  

GDC 2011
2/28 - 3/4 @ San Francisco, CA

More events...
Quick Stats
109 people currently visiting GDNet.
2406 articles in the reference section.

Help us fight cancer!
Join SETI Team GDNet!
Link to us Events 4 Gamers
Intel sponsors gamedev.net search:

Introduction

In this article I want to show you a way to design a high quality screen shot system. Most screen shot systems just take a snap shot of the current rendered scene and save it to an image format. Low-resolution screen shots (Normal screen shots) are good for putting a picture of your game on a web page, send it to someone through e-mail, or making a splash screen for your game. What if you wanted to put the picture in a magazine or book though? What if you wanted to make a video to show off your game? These situations would be very hard if not impossible to accomplish using low-resolution screen shots. What if after you take the screen shot or the video you made and wanted a watermark placed on it? You would need to take them into a separate program and modify them to add the watermark.

In this article I will discuss how to:

  • Create standard low-resolution screen shots
  • Create high-resolution screen shots
  • Create an AVI video of your game in real time
  • Create a screen shot and video file manager
  • Add a watermark to the screen shot or video

When this article is done, you should have a high quality screen shot system that you can adopt to your game engine with little hassle. The system is setup for OpenGL and Direct3D. I had chosen these because they are the most widely used graphic libraries. I am sure they can be adopted to work with Allegro, SDL, and other common graphic libraries. I have never used them, so I can't be sure. The only code that is specific to OpenGL or Direct3D is the multiplication for the projection matrix that is used in the high-resolution screen shots. Also, this was made for Win32 programmers. It uses windows specific code for the actual screen shot process.

About The Different Systems

Low-Resolution Screen Shot System

A low-resolution screen shot system is the most common one used. As described above, it simply takes a snap shot of the current rendered scene and saves it as an image file. Although low-resolution screen shots are the fastest method, they're limited to what you can do with them. They would be good for putting a picture of your game on a web page, e-mail, splash screens, etc. If the window dimensions are 800 x 600, it will produce an 800 x 600 screen shot. Most game developers think that an 800 x 600 screen shot is a good enough resolution, but it is not. If you were going to put the screen shot in a magazine or a color plate for a book, the result would be a pixilated image. Compare the image sizes to those produced by a digital camera. An 800 x 600 image on a digital camera is considered low-resolution. When you start getting into mega-pixels is when the images are considered high-resolution.

High-Resolution Screen Shot System

High-resolution screen shots are good for creating screen shots that are needed for printing. The high-resolution screen shots can be used in magazines, color plates for books, etc. The size of the screen shots produced are (Window Width * 3) x (Window Height * 3). So if your game window dimensions were set at 800 x 600, a screen shot with the size of 2,400 x 1,800 would be produced. If your game window dimensions were set at 1,024 x 768, a screen shot with the size of 3,072 x 2,304 would be produced. The screen shots produced have no image loss, which means it looks like a low-resolution screen shot only bigger. This system is slower than the low-resolution screen shot system, but it's not that big of a deal considering what it's doing. The reason it's slower is because it has to render the scene 9 times to produce the final screen shot. It's a good pay off though if you need high-resolution screen shots.

Video System (Movie Mode)

The video system will create an AVI video while you play your game. This is the slowest system of the 3 types presented. When using a codec, the current screen shot gets taken, the screen shot then gets compressed, and then finally written to the video file. Even when using no codec the FPS will still drop a lot. Granted it's a little faster, but it's a good idea to use a codec so anyone that wants to see your videos don't have to download a 500 MB video. I tested it on a demo of mine that ran at 800 FPS. When the movie mode was turned on, the FPS dropped to 10 FPS. It's a huge impact, but keep in mind that it does not get run at production time. I know that may be a little weird to say, but my friend was upset when he had seen the FPS. The movie dimensions will be the same size as the game window. The number of frames it will produce depends on the videos FPS, not your games FPS.

Screen Shot/Video File Manager

The built in file manager is a simple system that will create a folder called “Screen Shots” to place all the screen shots (and videos) in and it will also prevent the files from being over written. Most systems I have seen fail to add this. If you take a screen shot, then take another one right after that, the first one will be replaced. This system will prevent that from happening. If you save a screen shot called “ScreenShot.bmp,” then try to save another one with the same name, it will change the filename by adding _[###] before the file extension. So if the system sees a file called “ScreenShot.bmp,” it will create a new one called “ScreenShot_001.bmp.” If the system sees a screen shot called “ScreenShot_001.bmp,” it will create a new one called “ScreenShot_002.bmp,” and so on. This will work the same way with the video files too. It’s easy to implement and definitely worth it.

Watermark System

The watermarking system is something I thought I would add to save a lot time. It will, as the name suggests, add a watermark to any screen shot as it is being taken. You can specify which corner of the screen shot the watermark gets placed and the watermarks strength. The strength is like the alpha component in the range of 0 to 1. A value of 0 means the watermark will not be visible while a value of 1 mean fully visible. Any values in between 0 and 1 will blend the watermark with the screen shot depending on the strength. For instance, a value of 0.5 means the output will be half of the watermark color and half screen shot color. If you have a watermark that you want some parts to be invisible and other parts visible, you can specify a transparent color. It will skip any pixels in the watermark with the same color. Think of the transparent color as a color key. This system works with the movie mode to so you can save a lot of time by not having to take the video into an editor and adding it your self.





Designing the System

Contents
  Introduction
  Designing the System

  Source code
  Printable version
  Discuss this article