--- /dev/null
+<div class="pod">
+<!-- INDEX START -->
+<h3 id="TOP">Index</h3>
+
+<ul><li><a href="#NAME">NAME</a></li>
+<li><a href="#SYNOPSIS">SYNOPSIS</a></li>
+<li><a href="#ANIMATING_IMAGES">ANIMATING IMAGES</a>
+<ul><li><a href="#Loading_Images">Loading Images</a></li>
+<li><a href="#Displaying_Images">Displaying Images</a></li>
+<li><a href="#Multi_Image_Animation">Multi-Image Animation</a></li>
+</ul>
+</li>
+<li><a href="#SEE_ALSO">SEE ALSO</a></li>
+<li><a href="#AUTHOR">AUTHOR</a></li>
+<li><a href="#BUGS">BUGS</a></li>
+<li><a href="#COPYRIGHT">COPYRIGHT</a>
+</li>
+</ul><hr />
+<!-- INDEX END -->
+
+<h1 id="NAME">NAME</h1><p><a href="#TOP" class="toplink">Top</a></p>
+<div id="NAME_CONTENT">
+<p>SDL::Tutorial::Images</p>
+
+</div>
+<h1 id="SYNOPSIS">SYNOPSIS</h1><p><a href="#TOP" class="toplink">Top</a></p>
+<div id="SYNOPSIS_CONTENT">
+<pre> # to read this tutorial
+ $ perldoc SDL::Tutorial::Images
+
+ # to create a demo animation program based on this tutorial
+ $ perl -MSDL::Tutorial::Images=sdl_images.pl -e 1
+
+</pre>
+
+</div>
+<h1 id="ANIMATING_IMAGES">ANIMATING IMAGES</h1><p><a href="#TOP" class="toplink">Top</a></p>
+<div id="ANIMATING_IMAGES_CONTENT">
+<p>Since you're already familiar with the concepts behind animation, it's time to
+learn how to work with images. As usual, the important point is that computer animation is just <i>simulating</i> motion by painting several slightly different frames to the screen every second.</p>
+<p>There are two ways to vary an image on screen. One is to change its
+coordinates so it's at a slightly different position. This is very easy to do;
+it's just like animating a rectangle. The other way is to change the image
+itself so it's slightly different. This is a little more difficult, as you'll
+need to draw the alternate image beforehand somehow.</p>
+
+</div>
+<h2 id="Loading_Images">Loading Images</h2>
+<div id="Loading_Images_CONTENT">
+<p>As usual, start with an <cite>SDL::App</cite> object representing the image window. Then
+preload the image file. This is easy; just pass the <code>name</code> parameter to the
+<cite>SDL::Surface</cite> constructor:</p>
+<p> </p>
+<pre> use SDL::Surface;
+
+ my $frame = SDL::Surface->new( -name => 'frame1.png' );
+
+</pre>
+<p> </p>
+<p><strong>Note:</strong> you'll need to have compiled SDL Perl (and probably SDL) to support
+JPEG and PNG files for this to work.</p>
+<p>That's it; now you have an SDL::Surface object containing the image. You can
+use the <code>height()</code>, <code>width()</code>, and <code>bpp()</code> methods to retrieve its height,
+width, and bits per pixel, if you need them.</p>
+
+</div>
+<h2 id="Displaying_Images">Displaying Images</h2>
+<div id="Displaying_Images_CONTENT">
+<p>Drawing an image onto the screen requires blitting it from one surface to
+another. (Remember, "blitting" means copying bits in memory.) The <code>blit()</code>
+method of SDL::Surface objects comes in handy. Its arguments are a little odd,
+though. Assuming <code>$app</code> is the SDL::App object, as usual:</p>
+<p> </p>
+<pre> use SDL::Rect;
+
+ my $frame_rect = SDL::Rect->new(
+ -height => $frame->height(),
+ -width => $frame->width(),
+ -x => 0,
+ -y => 0,
+ );
+
+ my $dest_rect = SDL::Rect->new(
+ -height => $frame->height(),
+ -width => $frame->width(),
+ -x => 0,
+ -y => 0,
+ );
+
+ $frame->blit( $frame_rect, $app, $dest_rect );
+ $app->update( $dest_rect );
+
+</pre>
+<p> </p>
+<p>Here we have two <cite>SDL::Rect</cite> objects which represent rectangular regions of a
+Surface. <code>$frame_rect</code> represents the entire area of <code>$frame</code>, while
+<code>$dest_rect</code> represents the area of the main window in which to blit the
+frame. This may be clearer with more descriptive variable names:</p>
+<p> </p>
+<pre> $source_surface->blit(
+ $area_of_source_to_blit,
+ $destination_surface,
+ $destination_area
+ );
+
+</pre>
+<p> </p>
+<p>As usual, call <code>update()</code> on <code>$app</code> to see the change.</p>
+<p>Requiring the source and destination Rect objects may seem tedious in this
+simple example, but it's highly useful for copying only part of surface to part
+of another. For example, animating this image is a matter of changing the <code>x</code>
+and <code>y</code> coordinates of <code>$dest_rect</code>:</p>
+<p> </p>
+<pre> for my $x ( 1 .. 100 )
+ {
+ $dest_rect->x( $x );
+ $frame->blit( $frame_rect, $app, $dest_rect );
+ $app->update( $dest_rect );
+ }
+
+</pre>
+<p> </p>
+<p>Of course, you'll have to redraw all or part of the screen to avoid artifacts,
+as discussed in the previous tutorial.</p>
+
+</div>
+<h2 id="Multi_Image_Animation">Multi-Image Animation</h2>
+<div id="Multi_Image_Animation_CONTENT">
+<p>That covers moving a single image around the screen. What if you want
+something more? For example, what if you want to animate a stick figure
+walking?</p>
+<p>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 <code>Walker</code> class:</p>
+<p> </p>
+<pre> package Walker;
+
+ use SDL::Surface;
+
+ sub new
+ {
+ my ($class, @images) = @_;
+ my $self = [ map { SDL::Surface->new( -name => $_ ) } @images ];
+
+ bless $self, $class;
+ }
+
+ sub next_frame
+ {
+ my $self = shift;
+ my $frame = shift @$self;
+
+ push @$self, $frame;
+ return $frame;
+ }
+
+</pre>
+<p> </p>
+<p>To use this class, instantiate an object:</p>
+<p> </p>
+<pre> my $walker = Walker->new( 'frame1.png', 'frame2.png', 'frame3.png' );
+
+</pre>
+<p> </p>
+<p>Then call <code>next_frame()</code> within the loop:</p>
+<p> </p>
+<pre> for my $x ( 1 .. 100 )
+ {
+ my $frame = $walker->next_frame();
+
+ $dest_rect->x( $x );
+ $frame->blit( $frame_rect, $app, $dest_rect );
+ $app->update( $dest_rect );
+ }
+
+</pre>
+<p> </p>
+<p>Again, the rest of the frame drawing is missing from this example so as not to
+distract from this technique. You'll probably want to abstract the undrawing
+and redrawing into a separate subroutine so you don't have to worry about it
+every time.</p>
+<p>It'd be easy to make <code>next_frame()</code> much smarter, selecting an image
+appropriate to the direction of travel, using a bored animation when the
+character is no longer moving, or adding other characteristics to the
+character. As you can see, the hard part of this technique is generating the
+images beforehand. That can add up to a tremendous amount of art and that's
+one reason for the popularity of 3D models... but that's another tutorial much
+further down the road.</p>
+<p>More importantly, it's time to discuss how to make these animations run more
+smoothly. More on that next time.</p>
+
+</div>
+<h1 id="SEE_ALSO">SEE ALSO</h1><p><a href="#TOP" class="toplink">Top</a></p>
+<div id="SEE_ALSO_CONTENT">
+<dl>
+ <dt><cite>SDL::Tutorial</cite></dt>
+ <dd>
+ <p>basic SDL tutorial</p>
+ </dd>
+ <dt><cite>SDL::Tutorial::Animation</cite></dt>
+ <dd>
+ <p>non-image animation</p>
+ </dd>
+</dl>
+
+</div>
+<h1 id="AUTHOR">AUTHOR</h1><p><a href="#TOP" class="toplink">Top</a></p>
+<div id="AUTHOR_CONTENT">
+<p>chromatic, <chromatic@wgz.org></p>
+<p>Written for and maintained by the Perl SDL project, <a href="http://sdl.perl.org/">http://sdl.perl.org/</a>.</p>
+
+</div>
+<h1 id="BUGS">BUGS</h1><p><a href="#TOP" class="toplink">Top</a></p>
+<div id="BUGS_CONTENT">
+<p>No known bugs.</p>
+
+</div>
+<h1 id="COPYRIGHT">COPYRIGHT</h1><p><a href="#TOP" class="toplink">Top</a></p>
+<div id="COPYRIGHT_CONTENT">
+<p>Copyright (c) 2004, chromatic. All rights reserved. This module is
+distributed under the same terms as Perl itself, in the hope that it is useful
+but certainly under no guarantee.
+</p>
+
+</div>
+</div>
\ No newline at end of file
projects / sdlgit/SDL-Site.git / blobdiff