ch5.htm

对于程序员来说可以利用JAVA来开发网络游戏！

draw each type of primitive, because they don't usually impact
game graphics that much. Most games rely more on images, which
you learn about later today in the "Drawing Images"
section. Nevertheless, look at a few of the primitives just so
you can see how they work.
<H4><B>Lines</B></H4>
<P>
Lines are the simplest of the graphics primitives and are therefore
the easiest to draw. The <TT><FONT FACE="Courier">drawLine</FONT></TT>
method handles drawing lines, and is defined as follows:
<BLOCKQUOTE>
<TT><FONT FACE="Courier">void drawLine(int x1, int y1, int x2,
int y2)</FONT></TT>
</BLOCKQUOTE>
<P>
The first two parameters, <TT><FONT FACE="Courier">x1</FONT></TT>
and <TT><FONT FACE="Courier">y1</FONT></TT>, specify the starting
point for the line, and the <TT><FONT FACE="Courier">x2</FONT></TT>
and <TT><FONT FACE="Courier">y2</FONT></TT> parameters specify
the ending point. To draw a line in an applet, call <TT><FONT FACE="Courier">drawLine</FONT></TT>
in the applet's <TT><FONT FACE="Courier">paint</FONT></TT> method,
as in the following:
<BLOCKQUOTE>
<TT><FONT FACE="Courier">public void paint(Graphics g) {<BR>
&nbsp;&nbsp;g.drawLine(5, 10, 15, 55);<BR>
}</FONT></TT>
</BLOCKQUOTE>
<P>
The results of this code are shown in Figure 5.4.
<P>
<A HREF="f5-4.gif" ><B>Figure 5.4 : </B><I>A line drawn using the drawLine method.</I></A>
<P>
<CENTER><TABLE BORDERCOLOR=#000000 BORDER=1 WIDTH=80%>
<TR><TD><B>Note</B></TD></TR>
<TR><TD>
<BLOCKQUOTE>
Most graphical programming environments provide a means to draw lines (and other graphics primitives) in various widths. Java doesn't currently provide a facility to vary the width of lines, which is a pretty big limitation. A future release of Java will 
probably alleviate this problem.</BLOCKQUOTE>

</TD></TR>
</TABLE></CENTER>
<P>
<H4><B>Rectangles</B></H4>
<P>
Rectangles are also very easy to draw. The <TT><FONT FACE="Courier">drawRect</FONT></TT>
method enables you to draw rectangles by specifying the upper-left
corner and the width and height of the rectangle. The <TT><FONT FACE="Courier">drawRect</FONT></TT>
method is defined in <TT><FONT FACE="Courier">Graphics</FONT></TT>
as follows:
<BLOCKQUOTE>
<TT><FONT FACE="Courier">void drawRect(int x, int y, int width,
int height)</FONT></TT>
</BLOCKQUOTE>
<P>
The <TT><FONT FACE="Courier">x</FONT></TT> and <TT><FONT FACE="Courier">y</FONT></TT>
parameters specify the location of the upper-left corner of the
rectangle, whereas the <TT><FONT FACE="Courier">width</FONT></TT>
and <TT><FONT FACE="Courier">height</FONT></TT> parameters specify
their namesakes. To draw a rectangle using <TT><FONT FACE="Courier">drawRect</FONT></TT>,
just call it from the <TT><FONT FACE="Courier">paint</FONT></TT>
method like this:
<BLOCKQUOTE>
<TT><FONT FACE="Courier">public void paint(Graphics g) {<BR>
&nbsp;&nbsp;g.drawRect(5, 10, 15, 55);<BR>
}</FONT></TT>
</BLOCKQUOTE>
<P>
The results of this code are shown in Figure 5.5.
<P>
<A HREF="f5-5.gif" ><B>Figure 5.5 : </B><I>A rectangle drawn using the drawRect method.</I></A>
<P>
You can also use a <TT><FONT FACE="Courier">drawRoundRect</FONT></TT>
method, which allows you to draw rectangles with rounded corners.
<H4><B>Other Primitives</B></H4>
<P>
The other graphics primitives (circles, polygons, ovals, and arcs)
are drawn in a very similar fashion to lines and rectangles. Because
you won't actually be using graphics primitives much throughout
this book, there's no need to go into any more detail with them.
If you're curious, feel free to check out the documentation that
comes with the Java Developer's Kit. I'm not trying to lessen
the importance of graphics primitives, because they are very useful
in many situations. It's just that the game graphics throughout
this book are more dependent on images, with a little text sprinkled
in.
<H3><A NAME="DrawingText"><B>Drawing Text</B></A></H3>
<P>
Because Java applets are entirely graphical in nature, you must
use the <TT><FONT FACE="Courier">Graphics</FONT></TT> object even
when you want to draw text. Fortunately, drawing text is very
easy and yields very nice results. You will typically create a
font for the text and select it as the font to be used by the
graphics context before actually drawing any text. As you learned
earlier, the <TT><FONT FACE="Courier">setFont</FONT></TT> method
selects a font into the current graphics context. This method
is defined as follows:
<BLOCKQUOTE>
<TT><FONT FACE="Courier">void setFont(Font font)</FONT></TT>
</BLOCKQUOTE>
<P>
The <TT><FONT FACE="Courier">Font</FONT></TT> object models a
textual font, and includes the name, point size, and style of
the font. The <TT><FONT FACE="Courier">Font</FONT></TT> object
supports three different font styles, which are implemented as
the following constant members: <TT><FONT FACE="Courier">BOLD</FONT></TT>,
<TT><FONT FACE="Courier">ITALIC</FONT></TT>, and <TT><FONT FACE="Courier">PLAIN</FONT></TT>.
These styles are really just constant numbers, and can be added
together to yield a combined effect. The constructor for the <TT><FONT FACE="Courier">Font</FONT></TT>
object is defined as follows:
<BLOCKQUOTE>
<TT><FONT FACE="Courier">public Font(String name, int style, int
size)</FONT></TT>
</BLOCKQUOTE>
<P>
As you can see, the constructor takes as parameters the name,
style, and point size of the font. You might be wondering exactly
how the font names work; you simply provide the string name of
the font you want to use. The names of the most common fonts supported
by Java are Times Roman, Courier, and Helvetica. Therefore, to
create a bold, italic, Helvetica, 22-point font, you would use
the following code:
<BLOCKQUOTE>
<TT><FONT FACE="Courier">Font f = new Font(&quot;Helvetica&quot;,
Font.BOLD + Font.ITALIC, 22);<BR>
</FONT></TT>
</BLOCKQUOTE>
<P>
<CENTER><TABLE BORDERCOLOR=#000000 BORDER=1 WIDTH=80%>
<TR><TD><B>Note</B></TD></TR>
<TR><TD>
<BLOCKQUOTE>
Some systems support other fonts beyond the three common fonts mentioned here (Times Roman, Courier, and Helvetica). Even though you are free to use other fonts, keep in mind that these three common fonts are the only ones guaranteed to be supported across 
all systems. In other words, it's much safer to stick with these fonts.</BLOCKQUOTE>

</TD></TR>
</TABLE></CENTER>
<P>
<P>
After you've created a font, you will often want to create a <TT><FONT FACE="Courier">FontMetric</FONT></TT>
object to find out the details of the font's size. The <TT><FONT FACE="Courier">FontMetric</FONT></TT>
class models very specific placement information about a font,
such as the ascent, descent, leading, and total height of the
font. Figure 5.6 shows what each of these font metric attributes
represent.
<P>
<A HREF="f5-6.gif" ><B>Figure 5.6 : </B><I>The different font metric attributes.</I></A>
<P>
You can use the font metrics to precisely control the location
of text you are drawing. After you have the metrics under control,
you just need to select the original <TT><FONT FACE="Courier">Font</FONT></TT>
object into the <TT><FONT FACE="Courier">Graphics</FONT></TT>
object using the <TT><FONT FACE="Courier">setFont</FONT></TT>
method, as in the following:
<BLOCKQUOTE>
<TT><FONT FACE="Courier">g.setFont(f);</FONT></TT>
</BLOCKQUOTE>
<P>
Now you're ready to draw some text using the font you've created,
sized up, and selected. The <TT><FONT FACE="Courier">drawString</FONT></TT>
method, defined in the <TT><FONT FACE="Courier">Graphics</FONT></TT>
class, is exactly what you need. <TT><FONT FACE="Courier">drawString</FONT></TT>
is defined as follows:
<BLOCKQUOTE>
<TT><FONT FACE="Courier">void drawString(String str, int x, int
y)</FONT></TT>
</BLOCKQUOTE>
<P>
<TT><FONT FACE="Courier">drawString</FONT></TT> takes a <TT><FONT FACE="Courier">String</FONT></TT>
object as its first parameter, which determines the text that
is drawn. The last two parameters specify the location in which
the string is drawn; <TT><FONT FACE="Courier">x</FONT></TT> specifies
the left edge of the text and <TT><FONT FACE="Courier">y</FONT></TT>
specifies the baseline of the text. The baseline of the text is
the bottom of the text, not including the descent. Refer to Figure
5.6 if you are having trouble visualizing this.
<P>
The Drawtext sample applet demonstrates drawing a string centered
in the applet window. Figure 5.7 shows the Drawtext applet in
action.
<P>
<A HREF="f5-7.gif" ><B>Figure 5.7 : </B><I>The Draw Text sample applet.</I></A>
<P>
The source code for the Drawtext sample applet is shown in Listing
5.1.
<HR>
<BLOCKQUOTE>
<B>Listing 5.1. The Drawtext sample applet.</B>
</BLOCKQUOTE>
<BLOCKQUOTE>
<TT><FONT FACE="Courier">//&nbsp;Drawtext Class<BR>
//&nbsp;Drawtext.java<BR>
<BR>
//&nbsp;Imports<BR>
import java.applet.*;<BR>
import java.awt.*;<BR>
<BR>
public class Drawtext extends Applet {<BR>
&nbsp;&nbsp;public void paint(Graphics g) {<BR>
&nbsp;&nbsp;&nbsp;&nbsp;Font&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font
= new Font(&quot;Helvetica&quot;, Font.BOLD +<BR>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Font.ITALIC, 22);<BR>
&nbsp;&nbsp;&nbsp;&nbsp;FontMetrics fm = g.getFontMetrics(font);
<BR>
&nbsp;&nbsp;&nbsp;&nbsp;String&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;str
= new<BR>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;String(&quot;It's just a mere
shadow of itself.&quot;);<BR>
<BR>
&nbsp;&nbsp;&nbsp;&nbsp;g.setFont(font);<BR>
&nbsp;&nbsp;&nbsp;&nbsp;g.drawString(str, (size().width - fm.stringWidth(str))
/ 2,<BR>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;((size().height - fm.getHeight())
/ 2) + fm.getAscent());<BR>
&nbsp;&nbsp;}<BR>
}</FONT></TT>
</BLOCKQUOTE>
<HR>
<P>
Drawtext uses the font-related methods you just learned to draw
a string centered in the applet window. You might be wondering
about the calls to the <TT><FONT FACE="Courier">size</FONT></TT>
method when the location to draw the string is being calculated.
The <TT><FONT FACE="Courier">size</FONT></TT> method is a member
of <TT><FONT FACE="Courier">Component</FONT></TT> and returns
a <TT><FONT FACE="Courier">Dimension</FONT></TT> object specifying
the width and height of the applet window.
<P>
That sums up the basics of drawing text using the <TT><FONT FACE="Courier">Graphics</FONT></TT>
object. Now it's time to move on to the most important aspect
of Java graphics in regard to games: images.
<H3><A NAME="DrawingImages"><B>Drawing Images</B></A></H3>
<P>
<I>Images</I> are rectangular graphical objects composed of colored
pixels.
<P>
Each pixel in an image describes the color at that particular
location of the image. Pixels can have unique colors that are
usually described using the RGB color system. Java provides support
for working with 32-bit images, which means that each pixel in
an image is described using 32 bits. The red, green, and blue
components of a pixel's color are stored in these 32 bits, along
with an alpha component.
<P>
The <I>alpha component</I> of a pixel refers to the transparency
or opaqueness of the pixel.
<P>
Before getting into the details of how to draw an image, you first
need to learn how to load images. The <TT><FONT FACE="Courier">getImage</FONT></TT>
method, defined in the <TT><FONT FACE="Courier">Applet</FONT></TT>
class, is used to load an image from a URL. <TT><FONT FACE="Courier">getImage</FONT></TT>
comes in two versions, which are defined as follows:
<BLOCKQUOTE>
<TT><FONT FACE="Courier">Image getImage(URL url)<BR>
Image getImage(URL url, String name)</FONT></TT>
</BLOCKQUOTE>
<P>
These two versions essentially perform the same function; the
only difference is that the first version expects a fully qualified
URL, including the name of the image, and the second version enables
you to specify a separate URL and image name.
<P>
You probably noticed that both versions of <TT><FONT FACE="Courier">getImage</FONT></TT>
return an object of type <TT><FONT FACE="Courier">Image</FONT></TT>.
The <TT><FONT FACE="Courier">Image</FONT></TT> class represents
a graphical image, such as a GIF or JPEG file image, and provides
a few methods for finding out the width and height of the image.
<TT><FONT FACE="Courier">Image</FONT></TT> also includes a method
for retrieving a graphics context for the image, which enables
you to draw directly onto an image.
<P>
The <TT><FONT FACE="Courier">Graphics</FONT></TT> class provides
a handful of methods for drawing images, which follow:
<BLOCKQUOTE>
<TT><FONT FACE="Courier">boolean drawImage(Image img, int x, int
y, ImageObserver observer)<BR>
boolean drawImage(Image img, int x, int y, int width, int height,
<BR>
&nbsp;&nbsp;ImageObserver observer)<BR>
boolean drawImage(Image img, int x, int y, Color bgcolor, ImageObserver
<BR>
&nbsp;&nbsp;observer)<BR>
boolean drawImage(Image img, int x, int y, int width, int height,
Color<BR>
&nbsp;&nbsp;bgcolor, ImageObserver observer)</FONT></TT>
</BLOCKQUOTE>
<P>
All these methods are variants on the same theme: they all draw
an image at a certain location as defined by the parameters <TT><FONT FACE="Courier">x</FONT></TT>
and <TT><FONT FACE="Courier">y</FONT></TT>. The last parameter
in each method is an object of type <TT><FONT FACE="Courier">ImageObserver</FONT></TT>,