Process for creating a demo image - daniel-tran/snake-boxer-collection GitHub Wiki

Demo images are mainly used to showcase some brief gameplay from a given Snake Boxer game and give people an idea of what they can expect when playing.

Prerequisites

ShareX is the recommended tool, although it only works on Windows.

Once ShareX is installed, disable the "Show Cursor" setting by going to Capture > Show Screenshot > Show cursor, which is enabled by default.

Process

  1. After starting the sketch in Java mode, start a screen recording of the sketch.
  2. Play the game for about 20 - 30 seconds. This time does not include waiting on the main title screen.
  3. Stop the screen recording in ShareX and wait for the recording to finish up.
  4. Locate the recording on your computer. The default path is C:\Users\<Username>\Documents\ShareX\Screenshots\<Year>-<Month>.
  5. Load the recording in a video editor (not to be confused with the default "Video Editor" program on Windows, but that works as well).
  6. In your video editor, take a 10 - 15 second section of the video to be used for the demo.
  7. Export the video sample to a location of your choice.

While GitHub supports video content in Markdown files, the preferred format is GIF, since the demo image can be maintained under source control within the repo. Fortunately, ShareX has an in-built function to convert videos into GIF images:

  1. In ShareX, go to Tools > Video Converter. Change the video codec to GIF.
  2. Provide the full file path to video file, and the output folder and file name of the GIF image (the .gif extension is automatically added).
  3. Press "Start encoding".

When this is complete, the output folder should contain the GIF image of the demo.

Why not just record the demo directly as a GIF in ShareX?

Video recording support better quality and frame rate than direct GIF recordings, and the tooling for editing videos is usually better (plus, we could easily add some special effects if we ever wanted to).

Why disable the "Show Cursor" setting in ShareX?

Viewers should be focussing on what's happening in the demo and not so much paying attention to where the mouse cursor is moving onscreen.

⚠️ **GitHub.com Fallback** ⚠️