Author: Richard A. Fowell
Date: 14:32:29 04/20/02
There are many ways to post chess games on the Web so that almost anyone with a web browser can play through them. Many of these use Javascript or Java applets - a good index of such software is at http://www.enpassant.dk/chess/diaeng.htm Chessbase also has nice Web publishing tools, e.g.: http://www.chessbaseusa.com/T-NOTES/041199.htm So ... perhaps publishing chess games as animated GIFs is is a bit quirky, but since I've done it, I thought I'd describe what I did. (Does anyone know how to make animated GIFs that advance one frame each time you hit a key? And, if so, how to set up a web page so that you can use a button to trigger that? One annoying thing about what I did here is that it is strictly time based.) Here is my page where I use Gif-gIf-giF in combination with A Smaller GIF (both from www.peda.com) to animate a chess game: http://members.aol.com/Macchess/masterani.html Two tricks used here; (1) using 2 frames/move to reduce file size (2) variable move-move timing to attract/keep viewer interest Details (1) using 2 frames/move to reduce file size I could have produced this animation by simply playing the chess game out on my chess software, and using Gif-gIf-giF to manually "take a picture" of the board after each move. However, that would have produced a larger animated GIF file than necessary, since the animated GIF encodes the frame-frame difference as the smallest rectangle enclosing all picture elements which differ between frames. This is inefficient when depicting a chess piece moving as little as one square diagonally, since the difference is recorded as the four board squares that enclose the start/end square when really only two board squares changed as a result of the move. To avoid this inefficiency, I broke moves that would otherwise be encoded as more than 3 changed board squares into two frames. In the first frame, the piece disappears from the starting square (one square frame-frame change) and in the second frame the piece reappears on the ending square (one square frame-frame change). To do this easily, I replayed the game in my chess software's "position setup" mode, which makes removing or adding a piece to the board very easy. Since every frame uses some memory for overhead (time code, frame index, etc), using two frames for a move does not really save memory if capturing the move in one frame would be encoded as a change of three or less squares (as in moving a Rook two squares). I captured such moves as single frames. It would be nice if Gif-gIf-giF was smart enough to do this itself. In theory, when doing the frame-frame comparison, Gif-gIf-giF could first calculate the memory to encode the change as one rectangle, then see if it could ave memory by encoding the change as two successive rectangles. If so, and if the user selects the option allowing this optimization, Gif-gIf-giF could encode this change as two successive frames with the smallest allowable time between frames. As it is, this must be done manually. To preserve the illusion of a single frame move, I adjusted the time codes for each frame of two-frame chess moves using A Smaller GIF, which allows time code editing, so the two frames were separated by nearly zero time in the playback, but the time between moves was of reasonable length so that people could see what was happening. (2) variable move-move timing to attract/keep viewer interest While I was setting time codes in A Smaller GIF, I was faced with a dilemma on setting the time between moves. In order for a viewer to truly follow the game, something like five seconds between moves is needed. However, if the very first moves are that slow, then the user might leave in impatience, thinking the animation would not start. So, I started with a very short time between moves, then lengthened it as the game progressed. Richard A. Fowell
This page took 0 seconds to execute
Last modified: Thu, 15 Apr 21 08:11:13 -0700
Current Computer Chess Club Forums at Talkchess. This site by Sean Mintz.