1 package SDL::Tutorial::Images;
11 47 49 46 38 37 61 10 00 10 00 E7 00 00 00 00 00 01 01 01 02 02 02 03 03
12 03 04 04 04 05 05 05 06 06 06 07 07 07 08 08 08 09 09 09 0A 0A 0A 0B 0B
13 0B 0C 0C 0C 0D 0D 0D 0E 0E 0E 0F 0F 0F 10 10 10 11 11 11 12 12 12 13 13
14 13 14 14 14 15 15 15 16 16 16 17 17 17 18 18 18 19 19 19 1A 1A 1A 1B 1B
15 1B 1C 1C 1C 1D 1D 1D 1E 1E 1E 1F 1F 1F 20 20 20 21 21 21 22 22 22 23 23
16 23 24 24 24 25 25 25 26 26 26 27 27 27 28 28 28 29 29 29 2A 2A 2A 2B 2B
17 2B 2C 2C 2C 2D 2D 2D 2E 2E 2E 2F 2F 2F 30 30 30 31 31 31 32 32 32 33 33
18 33 34 34 34 35 35 35 36 36 36 37 37 37 38 38 38 39 39 39 3A 3A 3A 3B 3B
19 3B 3C 3C 3C 3D 3D 3D 3E 3E 3E 3F 3F 3F 40 40 40 41 41 41 42 42 42 43 43
20 43 44 44 44 45 45 45 46 46 46 47 47 47 48 48 48 49 49 49 4A 4A 4A 4B 4B
21 4B 4C 4C 4C 4D 4D 4D 4E 4E 4E 4F 4F 4F 50 50 50 51 51 51 52 52 52 53 53
22 53 54 54 54 55 55 55 56 56 56 57 57 57 58 58 58 59 59 59 5A 5A 5A 5B 5B
23 5B 5C 5C 5C 5D 5D 5D 5E 5E 5E 5F 5F 5F 60 60 60 61 61 61 62 62 62 63 63
24 63 64 64 64 65 65 65 66 66 66 67 67 67 68 68 68 69 69 69 6A 6A 6A 6B 6B
25 6B 6C 6C 6C 6D 6D 6D 6E 6E 6E 6F 6F 6F 70 70 70 71 71 71 72 72 72 73 73
26 73 74 74 74 75 75 75 76 76 76 77 77 77 78 78 78 79 79 79 7A 7A 7A 7B 7B
27 7B 7C 7C 7C 7D 7D 7D 7E 7E 7E 7F 7F 7F 80 80 80 81 81 81 82 82 82 83 83
28 83 84 84 84 85 85 85 86 86 86 87 87 87 88 88 88 89 89 89 8A 8A 8A 8B 8B
29 8B 8C 8C 8C 8D 8D 8D 8E 8E 8E 8F 8F 8F 90 90 90 91 91 91 92 92 92 93 93
30 93 94 94 94 95 95 95 96 96 96 97 97 97 98 98 98 99 99 99 9A 9A 9A 9B 9B
31 9B 9C 9C 9C 9D 9D 9D 9E 9E 9E 9F 9F 9F A0 A0 A0 A1 A1 A1 A2 A2 A2 A3 A3
32 A3 A4 A4 A4 A5 A5 A5 A6 A6 A6 A7 A7 A7 A8 A8 A8 A9 A9 A9 AA AA AA AB AB
33 AB AC AC AC AD AD AD AE AE AE AF AF AF B0 B0 B0 B1 B1 B1 B2 B2 B2 B3 B3
34 B3 B4 B4 B4 B5 B5 B5 B6 B6 B6 B7 B7 B7 B8 B8 B8 B9 B9 B9 BA BA BA BB BB
35 BB BC BC BC BD BD BD BE BE BE BF BF BF C0 C0 C0 C1 C1 C1 C2 C2 C2 C3 C3
36 C3 C4 C4 C4 C5 C5 C5 C6 C6 C6 C7 C7 C7 C8 C8 C8 C9 C9 C9 CA CA CA CB CB
37 CB CC CC CC CD CD CD CE CE CE CF CF CF D0 D0 D0 D1 D1 D1 D2 D2 D2 D3 D3
38 D3 D4 D4 D4 D5 D5 D5 D6 D6 D6 D7 D7 D7 D8 D8 D8 D9 D9 D9 DA DA DA DB DB
39 DB DC DC DC DD DD DD DE DE DE DF DF DF E0 E0 E0 E1 E1 E1 E2 E2 E2 E3 E3
40 E3 E4 E4 E4 E5 E5 E5 E6 E6 E6 E7 E7 E7 E8 E8 E8 E9 E9 E9 EA EA EA EB EB
41 EB EC EC EC ED ED ED EE EE EE EF EF EF F0 F0 F0 F1 F1 F1 F2 F2 F2 F3 F3
42 F3 F4 F4 F4 F5 F5 F5 F6 F6 F6 F7 F7 F7 F8 F8 F8 F9 F9 F9 FA FA FA FB FB
43 FB FC FC FC FD FD FD FE FE FE FF FF FF 2C 00 00 00 00 10 00 10 00 00 08
44 36 00 FF 09 1C 48 B0 A0 C1 83 08 13 22 04 C0 10 80 C2 7F 0C 05 46 4C E8
45 70 60 C5 85 15 27 52 6C A8 30 E3 45 8C 0D 39 76 FC 38 F2 A1 44 91 1B 4F
46 82 24 88 D2 64 C1 80 00 3B
49 47 49 46 38 37 61 10 00 10 00 E7 00 00 00 00 00 01 01 01 02 02 02 03 03
50 03 04 04 04 05 05 05 06 06 06 07 07 07 08 08 08 09 09 09 0A 0A 0A 0B 0B
51 0B 0C 0C 0C 0D 0D 0D 0E 0E 0E 0F 0F 0F 10 10 10 11 11 11 12 12 12 13 13
52 13 14 14 14 15 15 15 16 16 16 17 17 17 18 18 18 19 19 19 1A 1A 1A 1B 1B
53 1B 1C 1C 1C 1D 1D 1D 1E 1E 1E 1F 1F 1F 20 20 20 21 21 21 22 22 22 23 23
54 23 24 24 24 25 25 25 26 26 26 27 27 27 28 28 28 29 29 29 2A 2A 2A 2B 2B
55 2B 2C 2C 2C 2D 2D 2D 2E 2E 2E 2F 2F 2F 30 30 30 31 31 31 32 32 32 33 33
56 33 34 34 34 35 35 35 36 36 36 37 37 37 38 38 38 39 39 39 3A 3A 3A 3B 3B
57 3B 3C 3C 3C 3D 3D 3D 3E 3E 3E 3F 3F 3F 40 40 40 41 41 41 42 42 42 43 43
58 43 44 44 44 45 45 45 46 46 46 47 47 47 48 48 48 49 49 49 4A 4A 4A 4B 4B
59 4B 4C 4C 4C 4D 4D 4D 4E 4E 4E 4F 4F 4F 50 50 50 51 51 51 52 52 52 53 53
60 53 54 54 54 55 55 55 56 56 56 57 57 57 58 58 58 59 59 59 5A 5A 5A 5B 5B
61 5B 5C 5C 5C 5D 5D 5D 5E 5E 5E 5F 5F 5F 60 60 60 61 61 61 62 62 62 63 63
62 63 64 64 64 65 65 65 66 66 66 67 67 67 68 68 68 69 69 69 6A 6A 6A 6B 6B
63 6B 6C 6C 6C 6D 6D 6D 6E 6E 6E 6F 6F 6F 70 70 70 71 71 71 72 72 72 73 73
64 73 74 74 74 75 75 75 76 76 76 77 77 77 78 78 78 79 79 79 7A 7A 7A 7B 7B
65 7B 7C 7C 7C 7D 7D 7D 7E 7E 7E 7F 7F 7F 80 80 80 81 81 81 82 82 82 83 83
66 83 84 84 84 85 85 85 86 86 86 87 87 87 88 88 88 89 89 89 8A 8A 8A 8B 8B
67 8B 8C 8C 8C 8D 8D 8D 8E 8E 8E 8F 8F 8F 90 90 90 91 91 91 92 92 92 93 93
68 93 94 94 94 95 95 95 96 96 96 97 97 97 98 98 98 99 99 99 9A 9A 9A 9B 9B
69 9B 9C 9C 9C 9D 9D 9D 9E 9E 9E 9F 9F 9F A0 A0 A0 A1 A1 A1 A2 A2 A2 A3 A3
70 A3 A4 A4 A4 A5 A5 A5 A6 A6 A6 A7 A7 A7 A8 A8 A8 A9 A9 A9 AA AA AA AB AB
71 AB AC AC AC AD AD AD AE AE AE AF AF AF B0 B0 B0 B1 B1 B1 B2 B2 B2 B3 B3
72 B3 B4 B4 B4 B5 B5 B5 B6 B6 B6 B7 B7 B7 B8 B8 B8 B9 B9 B9 BA BA BA BB BB
73 BB BC BC BC BD BD BD BE BE BE BF BF BF C0 C0 C0 C1 C1 C1 C2 C2 C2 C3 C3
74 C3 C4 C4 C4 C5 C5 C5 C6 C6 C6 C7 C7 C7 C8 C8 C8 C9 C9 C9 CA CA CA CB CB
75 CB CC CC CC CD CD CD CE CE CE CF CF CF D0 D0 D0 D1 D1 D1 D2 D2 D2 D3 D3
76 D3 D4 D4 D4 D5 D5 D5 D6 D6 D6 D7 D7 D7 D8 D8 D8 D9 D9 D9 DA DA DA DB DB
77 DB DC DC DC DD DD DD DE DE DE DF DF DF E0 E0 E0 E1 E1 E1 E2 E2 E2 E3 E3
78 E3 E4 E4 E4 E5 E5 E5 E6 E6 E6 E7 E7 E7 E8 E8 E8 E9 E9 E9 EA EA EA EB EB
79 EB EC EC EC ED ED ED EE EE EE EF EF EF F0 F0 F0 F1 F1 F1 F2 F2 F2 F3 F3
80 F3 F4 F4 F4 F5 F5 F5 F6 F6 F6 F7 F7 F7 F8 F8 F8 F9 F9 F9 FA FA FA FB FB
81 FB FC FC FC FD FD FD FE FE FE FF FF FF 2C 00 00 00 00 10 00 10 00 00 08
82 36 00 FF 09 1C 48 B0 A0 C1 83 08 13 26 04 C0 10 80 C2 7F 0C 05 46 5C 48
83 D0 E1 42 8B 13 2F 66 54 B8 F1 60 C3 8F 16 2F 3E 1C D8 11 E1 C7 87 13 4B
84 4A DC D8 70 E4 C1 80 00 3B
87 47 49 46 38 37 61 10 00 10 00 E7 00 00 00 00 00 01 01 01 02 02 02 03 03
88 03 04 04 04 05 05 05 06 06 06 07 07 07 08 08 08 09 09 09 0A 0A 0A 0B 0B
89 0B 0C 0C 0C 0D 0D 0D 0E 0E 0E 0F 0F 0F 10 10 10 11 11 11 12 12 12 13 13
90 13 14 14 14 15 15 15 16 16 16 17 17 17 18 18 18 19 19 19 1A 1A 1A 1B 1B
91 1B 1C 1C 1C 1D 1D 1D 1E 1E 1E 1F 1F 1F 20 20 20 21 21 21 22 22 22 23 23
92 23 24 24 24 25 25 25 26 26 26 27 27 27 28 28 28 29 29 29 2A 2A 2A 2B 2B
93 2B 2C 2C 2C 2D 2D 2D 2E 2E 2E 2F 2F 2F 30 30 30 31 31 31 32 32 32 33 33
94 33 34 34 34 35 35 35 36 36 36 37 37 37 38 38 38 39 39 39 3A 3A 3A 3B 3B
95 3B 3C 3C 3C 3D 3D 3D 3E 3E 3E 3F 3F 3F 40 40 40 41 41 41 42 42 42 43 43
96 43 44 44 44 45 45 45 46 46 46 47 47 47 48 48 48 49 49 49 4A 4A 4A 4B 4B
97 4B 4C 4C 4C 4D 4D 4D 4E 4E 4E 4F 4F 4F 50 50 50 51 51 51 52 52 52 53 53
98 53 54 54 54 55 55 55 56 56 56 57 57 57 58 58 58 59 59 59 5A 5A 5A 5B 5B
99 5B 5C 5C 5C 5D 5D 5D 5E 5E 5E 5F 5F 5F 60 60 60 61 61 61 62 62 62 63 63
100 63 64 64 64 65 65 65 66 66 66 67 67 67 68 68 68 69 69 69 6A 6A 6A 6B 6B
101 6B 6C 6C 6C 6D 6D 6D 6E 6E 6E 6F 6F 6F 70 70 70 71 71 71 72 72 72 73 73
102 73 74 74 74 75 75 75 76 76 76 77 77 77 78 78 78 79 79 79 7A 7A 7A 7B 7B
103 7B 7C 7C 7C 7D 7D 7D 7E 7E 7E 7F 7F 7F 80 80 80 81 81 81 82 82 82 83 83
104 83 84 84 84 85 85 85 86 86 86 87 87 87 88 88 88 89 89 89 8A 8A 8A 8B 8B
105 8B 8C 8C 8C 8D 8D 8D 8E 8E 8E 8F 8F 8F 90 90 90 91 91 91 92 92 92 93 93
106 93 94 94 94 95 95 95 96 96 96 97 97 97 98 98 98 99 99 99 9A 9A 9A 9B 9B
107 9B 9C 9C 9C 9D 9D 9D 9E 9E 9E 9F 9F 9F A0 A0 A0 A1 A1 A1 A2 A2 A2 A3 A3
108 A3 A4 A4 A4 A5 A5 A5 A6 A6 A6 A7 A7 A7 A8 A8 A8 A9 A9 A9 AA AA AA AB AB
109 AB AC AC AC AD AD AD AE AE AE AF AF AF B0 B0 B0 B1 B1 B1 B2 B2 B2 B3 B3
110 B3 B4 B4 B4 B5 B5 B5 B6 B6 B6 B7 B7 B7 B8 B8 B8 B9 B9 B9 BA BA BA BB BB
111 BB BC BC BC BD BD BD BE BE BE BF BF BF C0 C0 C0 C1 C1 C1 C2 C2 C2 C3 C3
112 C3 C4 C4 C4 C5 C5 C5 C6 C6 C6 C7 C7 C7 C8 C8 C8 C9 C9 C9 CA CA CA CB CB
113 CB CC CC CC CD CD CD CE CE CE CF CF CF D0 D0 D0 D1 D1 D1 D2 D2 D2 D3 D3
114 D3 D4 D4 D4 D5 D5 D5 D6 D6 D6 D7 D7 D7 D8 D8 D8 D9 D9 D9 DA DA DA DB DB
115 DB DC DC DC DD DD DD DE DE DE DF DF DF E0 E0 E0 E1 E1 E1 E2 E2 E2 E3 E3
116 E3 E4 E4 E4 E5 E5 E5 E6 E6 E6 E7 E7 E7 E8 E8 E8 E9 E9 E9 EA EA EA EB EB
117 EB EC EC EC ED ED ED EE EE EE EF EF EF F0 F0 F0 F1 F1 F1 F2 F2 F2 F3 F3
118 F3 F4 F4 F4 F5 F5 F5 F6 F6 F6 F7 F7 F7 F8 F8 F8 F9 F9 F9 FA FA FA FB FB
119 FB FC FC FC FD FD FD FE FE FE FF FF FF 2C 00 00 00 00 10 00 10 00 00 08
120 3A 00 FF 09 1C 48 B0 A0 C1 83 08 13 2A 04 C0 10 80 C2 7F 0C 05 46 4C E8
121 70 60 45 84 13 27 52 6C F8 50 62 C5 8B 05 1B 8A 04 79 50 E3 43 93 1B 51
122 1A CC 48 D2 A2 49 8E 1D 0B 06 04 00 3B
129 (undef, my $filename) = @_;
130 (my $imagebase = $filename) =~ s/\.\w+$//;
131 my @img_files = map { $imagebase . "_$_.gif" }
132 qw( left center right );
133 my $demo_source = <<'END_HERE';
138 my ($class, @images) = @_;
139 my @frames = map { SDL::Surface->new( -name => $_ ) } @images;
140 my $frame_rect = SDL::Rect->new(
141 -height => $frames[0]->height(),
142 -width => $frames[0]->width(),
149 frame_rect => $frame_rect,
157 $self->{frames} = shift if @_;
164 $self->{frame_rect} = shift if @_;
171 my $frames = $self->frames();
172 my $frame = shift @$frames;
174 push @$frames, $frame;
175 $self->frames( $frames );
189 # change these values as necessary
190 my $title = 'My SDL Animation';
191 my ($width, $height, $depth) = ( 640, 480, 16 );
192 my ($bg_r, $bg_g, $bg_b) = ( 0xff, 0xff, 0xff );
193 my ($start_x, $end_x) = ( 20, 600 );
194 my $sleep_msec = 0.05;
196 my $app = SDL::App->new(
202 my $bg_color = SDL::Color->new(
208 my $background = SDL::Rect->new(
213 my $pos = SDL::Rect->new(
220 my $walker = Walker->new(qw(
223 $demo_source .= join( ' ', @img_files ) . "));" . <<'END_HERE';
225 for my $x ( $start_x .. $end_x )
227 draw_background( $app, $background, $bg_color );
229 draw_walker( $walker, $app, $pos );
230 $app->update( $background );
231 select( undef, undef, undef, $sleep_msec );
234 # you'll want to remove this
239 my ($app, $background, $bg_color) = @_;
240 $app->fill( $background, $bg_color );
245 my ($walker, $app, $pos) = @_;
246 my $frame = $walker->next_frame();
247 my $frame_rect = $walker->frame_rect();
248 $frame->blit( $frame_rect, $app, $pos );
252 Pod::ToDemo::write_demo( $filename, "#$^X\n$demo_source" );
253 write_files( $imagebase );
258 my $imagebase = shift;
260 for my $image (qw( left center right ))
262 my $file = join('', map { chr( hex( $_ ) ) } @{ $images{ $image } });
263 write_file( $imagebase . "_$image" . '.gif', $file );
269 my ($file, $contents) = @_;
271 die "Cowardly refusing to overwrite '$file'\n" if -e $file;
272 open my $out, '>', $file or die "Cannot write '$file': $!\n";
274 print $out $contents;
281 SDL::Tutorial::Images
285 # to read this tutorial
286 $ perldoc SDL::Tutorial::Images
288 # to create a demo animation program based on this tutorial
289 $ perl -MSDL::Tutorial::Images=sdl_images.pl -e 1
291 =head1 ANIMATING IMAGES
293 Since you're already familiar with the concepts behind animation, it's time to
294 learn how to work with images. As usual, the important point is that computer animation is just I<simulating> motion by painting several slightly different frames to the screen every second.
296 There are two ways to vary an image on screen. One is to change its
297 coordinates so it's at a slightly different position. This is very easy to do;
298 it's just like animating a rectangle. The other way is to change the image
299 itself so it's slightly different. This is a little more difficult, as you'll
300 need to draw the alternate image beforehand somehow.
302 =head2 Loading Images
304 As usual, start with an L<SDL::App> object representing the image window. Then
305 preload the image file. This is easy; just pass the C<name> parameter to the
306 L<SDL::Surface> constructor:
310 my $frame = SDL::Surface->new( -name => 'frame1.png' );
312 B<Note:> you'll need to have compiled SDL Perl (and probably SDL) to support
313 JPEG and PNG files for this to work.
315 That's it; now you have an SDL::Surface object containing the image. You can
316 use the C<height()>, C<width()>, and C<bpp()> methods to retrieve its height,
317 width, and bits per pixel, if you need them.
319 =head2 Displaying Images
321 Drawing an image onto the screen requires blitting it from one surface to
322 another. (Remember, "blitting" means copying bits in memory.) The C<blit()>
323 method of SDL::Surface objects comes in handy. Its arguments are a little odd,
324 though. Assuming C<$app> is the SDL::App object, as usual:
328 my $frame_rect = SDL::Rect->new(
329 -height => $frame->height(),
330 -width => $frame->width(),
335 my $dest_rect = SDL::Rect->new(
336 -height => $frame->height(),
337 -width => $frame->width(),
342 $frame->blit( $frame_rect, $app, $dest_rect );
343 $app->update( $dest_rect );
345 Here we have two L<SDL::Rect> objects which represent rectangular regions of a
346 Surface. C<$frame_rect> represents the entire area of C<$frame>, while
347 C<$dest_rect> represents the area of the main window in which to blit the
348 frame. This may be clearer with more descriptive variable names:
350 $source_surface->blit(
351 $area_of_source_to_blit,
352 $destination_surface,
356 As usual, call C<update()> on C<$app> to see the change.
358 Requiring the source and destination Rect objects may seem tedious in this
359 simple example, but it's highly useful for copying only part of surface to part
360 of another. For example, animating this image is a matter of changing the C<x>
361 and C<y> coordinates of C<$dest_rect>:
363 for my $x ( 1 .. 100 )
366 $frame->blit( $frame_rect, $app, $dest_rect );
367 $app->update( $dest_rect );
370 Of course, you'll have to redraw all or part of the screen to avoid artifacts,
371 as discussed in the previous tutorial.
373 =head2 Multi-Image Animation
375 That covers moving a single image around the screen. What if you want
376 something more? For example, what if you want to animate a stick figure
379 You'll need several frames, just as in a flip-book. Each frame should be slightly different than the one before it. It's probably handy to encapsulate all of this in a C<Walker> class:
387 my ($class, @images) = @_;
388 my $self = [ map { SDL::Surface->new( -name => $_ ) } @images ];
396 my $frame = shift @$self;
402 To use this class, instantiate an object:
404 my $walker = Walker->new( 'frame1.png', 'frame2.png', 'frame3.png' );
406 Then call C<next_frame()> within the loop:
408 for my $x ( 1 .. 100 )
410 my $frame = $walker->next_frame();
413 $frame->blit( $frame_rect, $app, $dest_rect );
414 $app->update( $dest_rect );
417 Again, the rest of the frame drawing is missing from this example so as not to
418 distract from this technique. You'll probably want to abstract the undrawing
419 and redrawing into a separate subroutine so you don't have to worry about it
422 It'd be easy to make C<next_frame()> much smarter, selecting an image
423 appropriate to the direction of travel, using a bored animation when the
424 character is no longer moving, or adding other characteristics to the
425 character. As you can see, the hard part of this technique is generating the
426 images beforehand. That can add up to a tremendous amount of art and that's
427 one reason for the popularity of 3D models... but that's another tutorial much
428 further down the road.
430 More importantly, it's time to discuss how to make these animations run more
431 smoothly. More on that next time.
437 =item L<SDL::Tutorial>
441 =item L<SDL::Tutorial::Animation>
449 chromatic, E<lt>chromatic@wgz.orgE<gt>
451 Written for and maintained by the Perl SDL project, L<http://sdl.perl.org/>.
459 Copyright (c) 2004, chromatic. All rights reserved. This module is
460 distributed under the same terms as Perl itself, in the hope that it is useful
461 but certainly under no guarantee.