📄 ch5.htm
字号:
<HTML>
<HEAD>
<TITLE>Chapter 5 -- Java Graphics Techniques</TITLE>
<META>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#0000EE" VLINK="#551A8B" ALINK="#CE2910">
<H1><FONT COLOR=#FF0000>Chapter 5</FONT></H1>
<H1><B><FONT SIZE=5 COLOR=#FF0000>Java Graphics Techniques</FONT></B>
</H1>
<P>
<HR WIDTH="100%"></P>
<P>
<H3 ALIGN=CENTER><FONT COLOR="#000000"><FONT SIZE=+2>CONTENTS<A NAME="CONTENTS"></A>
</FONT></FONT></H3>
<UL>
<LI><A HREF="#TheGraphicsCoordinateSystem" >The Graphics Coordinate System</A>
<LI><A HREF="#TheBasicsofColor" >The Basics of Color</A>
<LI><A HREF="#TheGraphicsClass" >The Graphics Class</A>
<UL>
<LI><A HREF="#DrawingGraphicsPrimitives" >Drawing Graphics Primitives</A>
<LI><A HREF="#DrawingText" >Drawing Text</A>
<LI><A HREF="#DrawingImages" >Drawing Images</A>
</UL>
<LI><A HREF="#TrackingImages" >Tracking Images</A>
<UL>
<LI><A HREF="#TheMediaTrackerClass" >The MediaTracker Class</A>
<LI><A HREF="#UsingtheMediaTracker" >Using the Media Tracker</A>
</UL>
<LI><A HREF="#Summary" >Summary</A>
<LI><A HREF="#QA" >Q&A</A>
<LI><A HREF="#Workshop" >Workshop</A>
<UL>
<LI><A HREF="#Quiz" >Quiz</A>
<LI><A HREF="#Exercises" >Exercises</A>
</UL>
</UL>
<HR>
<P>
Graphics are at the heart of most games. Knowing this, you need
to understand a certain degree of Java graphics fundamentals before
you get into full-blown game graphics. Today's lesson focuses
on some of the basic Java graphics techniques that will be important
as you move on to programming game graphics. You aren't going
to get into too many gritty details today, because this lesson
is meant to only lay the groundwork of using Java graphics. Don't
worry, you'll build some serious Java graphics skills throughout
the rest of the book.
<P>
You begin today's lesson by learning about the Java graphics coordinate
system and the class used as the basis for most of the Java graphics
operations. You then move on to images and how they are used in
the context of a Java applet. The lesson finishes with an in-depth
discussion of how to track the loading of images over a Web connection,
which is a very important topic in regard to game graphics.
<P>
The following topics are covered in today's lesson:
<UL>
<LI>The graphics coordinate system
<LI>The basics of color
<LI>The graphics class
<LI>Tracking images
</UL>
<H2><A NAME="TheGraphicsCoordinateSystem"><B><FONT SIZE=5 COLOR=#FF0000>The
Graphics Coordinate System</FONT></B></A></H2>
<P>
All graphical computing systems use some sort of coordinate system
to specify the nature of points in the system. Coordinate systems
typically spell out the origin (0,0) of a graphical system, as
well as the axes and directions of increasing value for each of
the axes. The traditional mathematical coordinate system familiar
to most of us is shown in Figure 5.1.
<P>
<A HREF="f5-1.gif" ><B>Figure 5.1 : </B><I>The traditional coordinate system.</I></A>
<P>
The graphical system in Java uses a coordinate system of its own
to specify how and where drawing operations take place. Because
all drawing in Java takes place within the confines of an applet
window, the Java coordinate system is realized by the applet window.
The coordinate system in Java has an origin that is located in
the upper-left corner of the window; positive X values increase
to the right and positive Y values increase down. All values in
the Java coordinate system are positive integers. Figure 5.2 shows
how this coordinate system looks.
<P>
<A HREF="f5-2.gif" ><B>Figure 5.2 : </B><I>The Java graphics coordinate system.</I></A>
<H2><A NAME="TheBasicsofColor"><B><FONT SIZE=5 COLOR=#FF0000>The
Basics of Color</FONT></B></A></H2>
<P>
A topic that impacts almost every area of Java graphics is color.
Therefore, it's important to understand the underlying nature
of color and how it is modeled in Java and in computer systems
in general. Most computer systems take a similar approach to representing
color. The main function of color in a computer system is to accurately
reflect the physical nature of color within the confines of a
graphical system. This physical nature isn't hard to figure out;
anyone who has experienced the joy of Play-Doh can tell you that
colors react in different ways when they are combined with each
other. Like Play-Doh, a computer color system needs to be able
to mix colors with accurate, predictable results.
<P>
Color computer monitors provide possibly the most useful insight
into how software systems implement color. A color monitor has
three electron guns: red, green, and blue. The output from these
three guns converges on each pixel of the screen, exciting phosphors
to produce the appropriate color (see Figure 5.3). The combined
intensities of each gun determine the resulting pixel color. This
convergence of different colors from the monitor guns is very
similar to the convergence of different colored Play-Doh.
<P>
<A HREF="f5-3.gif" ><B>Figure 5.3 : </B><I>Electron guns in a color monitor converging to create a unique color.</I></A>
<P>
<CENTER><TABLE BORDERCOLOR=#000000 BORDER=1 WIDTH=80%>
<TR><TD><B>Note</B></TD></TR>
<TR><TD>
<BLOCKQUOTE>
Technically speaking, the result of combining colors on a monitor is different than that of combining similarly colored Play Doh. The reason for this is that color combinations on a monitor are additive, meaning that mixed colors are emitted by the
monitor; Play oh color combinations are subtractive, meaning that mixed colors are absorbed. The additive or subtractive nature of a color combination is dependent on the physical properties of the particular medium involved.</BLOCKQUOTE>
</TD></TR>
</TABLE></CENTER>
<P>
<P>
The Java color system is very similar to the physical system used
by color monitors; it forms unique colors by using varying intensities
of the colors red, green, and blue. Therefore, Java colors are
represented by the combination of the numeric intensities of the
primary colors (red, green, and blue). This color system is known
as RGB (Red Green Blue) and is standard across most graphical
computer systems.
<P>
<CENTER><TABLE BORDERCOLOR=#000000 BORDER=1 WIDTH=80%>
<TR><TD><B>Note</B></TD></TR>
<TR><TD>
<BLOCKQUOTE>
Although RGB is the most popular computer color system in use, there are others. Another popular color system is HSB, which stands for Hue Saturation Brightness. In this system, colors are defined by varying degrees of hue, saturation, and brightness. The
HSB color system is also supported by Java.</BLOCKQUOTE>
</TD></TR>
</TABLE></CENTER>
<P>
<P>
Table 5.1 shows the numeric values for the red, green, and blue
components of some basic colors. Notice that the intensities of
each color component range from 0 to 255 in value.
<BLOCKQUOTE>
<B><CENTER>Table 5.1. RGB component values for some basic colors.<BR>
</B></CENTER>
</BLOCKQUOTE>
<P>
<CENTER><TABLE BORDERCOLOR=#000000 BORDER=1 WIDTH=80%>
<TR><TD><I>Color</I></TD><TD WIDTH=46><I><CENTER>Red</CENTER></I></TD>
<TD WIDTH=58><I><CENTER>Green</CENTER></I></TD><TD WIDTH=48><I><CENTER>Blue</CENTER></I></TD></TR>
<TR><TD WIDTH=87>White</TD><TD WIDTH=46><CENTER>255</CENTER></TD><TD WIDTH=58><CENTER>255</CENTER>
</TD><TD WIDTH=48><CENTER>255</CENTER></TD></TR>
<TR><TD WIDTH=87>Black</TD><TD WIDTH=46><CENTER>0</CENTER></TD><TD WIDTH=58><CENTER>0</CENTER></TD>
<TD WIDTH=48><CENTER>0</CENTER></TD></TR>
<TR><TD WIDTH=87>Light Gray</TD><TD WIDTH=46><CENTER>192</CENTER></TD><TD WIDTH=58><CENTER>192</CENTER>
</TD><TD WIDTH=48><CENTER>192</CENTER></TD></TR>
<TR><TD WIDTH=87>Dark Gray</TD><TD WIDTH=46><CENTER>128</CENTER></TD><TD WIDTH=58><CENTER>128</CENTER>
</TD><TD WIDTH=48><CENTER>128</CENTER></TD></TR>
<TR><TD WIDTH=87>Red</TD><TD WIDTH=46><CENTER>255</CENTER></TD><TD WIDTH=58><CENTER>0</CENTER></TD>
<TD WIDTH=48><CENTER>0</CENTER></TD></TR>
<TR><TD WIDTH=87>Green</TD><TD WIDTH=46><CENTER>0</CENTER></TD><TD WIDTH=58><CENTER>255</CENTER>
</TD><TD WIDTH=48><CENTER>0</CENTER></TD></TR>
<TR><TD WIDTH=87>Blue</TD><TD WIDTH=46><CENTER>0</CENTER></TD><TD WIDTH=58><CENTER>0</CENTER></TD>
<TD WIDTH=48><CENTER>255</CENTER></TD></TR>
<TR><TD WIDTH=87>Yellow</TD><TD WIDTH=46><CENTER>255</CENTER></TD><TD WIDTH=58><CENTER>255</CENTER>
</TD><TD WIDTH=48><CENTER>0</CENTER></TD></TR>
<TR><TD WIDTH=87>Purple</TD><TD WIDTH=46><CENTER>255</CENTER></TD><TD WIDTH=58><CENTER>0</CENTER>
</TD><TD WIDTH=48><CENTER>255</CENTER></TD></TR>
</TABLE></CENTER>
<P>
<P>
Java provides a class, <TT><FONT FACE="Courier">Color</FONT></TT>,
for modeling colors. The <TT><FONT FACE="Courier">Color</FONT></TT>
class represents an RGB color and provides methods for extracting
and manipulating the primary color components. <TT><FONT FACE="Courier">Color</FONT></TT>
also includes constant members representing many popular colors.
You typically use the <TT><FONT FACE="Courier">Color</FONT></TT>
class to specify the color when you are using many of Java's graphical
functions, about which you learn next.
<H2><A NAME="TheGraphicsClass"><B><FONT SIZE=5 COLOR=#FF0000>The
</FONT></B><TT><B><FONT SIZE=5 COLOR=#FF0000 FACE="Courier">Graphics</FONT></B></TT><B><FONT SIZE=5 COLOR=#FF0000>
Class</FONT></B></A></H2>
<P>
Most of Java's graphics functions are accessible through a single
class, <TT><FONT FACE="Courier">Graphics</FONT></TT>, found in
the Java awt (Advanced Windowing Toolkit) package. The <TT><FONT FACE="Courier">Graphics</FONT></TT>
class models a graphics context.
<P>
A <I>graphics context</I> is an abstract representation of a graphical
surface that can be drawn upon.
<P>
An abstract drawing surface (graphics context) is basically a
way to allow you to draw in a generic manner, without worrying
about where the drawing is physically taking place. Graphics contexts
are necessary so that the same graphics routines can be used regardless
of whether you are drawing to the screen, to memory, or to a printer.
The <TT><FONT FACE="Courier">Graphics</FONT></TT> class provides
you with a graphics context to which you perform all graphics
funtions. As you learn about the functionality provided by the
<TT><FONT FACE="Courier">Graphics</FONT></TT> class, keep in mind
that its output is largely independent of the ultimate destination
thanks to graphics contexts.
<P>
Graphical output code in a Java applet is usually implemented
in the applet's <TT><FONT FACE="Courier">paint</FONT></TT> method.
A <TT><FONT FACE="Courier">Graphics</FONT></TT> object is passed
into the <TT><FONT FACE="Courier">paint</FONT></TT> method, which
is then used to perform graphical output to the applet window
(output surface). Because the <TT><FONT FACE="Courier">Graphics</FONT></TT>
object is provided by <TT><FONT FACE="Courier">paint</FONT></TT>,
you never explicitly create a <TT><FONT FACE="Courier">Graphics</FONT></TT>
object.
<P>
<CENTER><TABLE BORDERCOLOR=#000000 BORDER=1 WIDTH=80%>
<TR><TD><B>Note</B></TD></TR>
<TR><TD>
<BLOCKQUOTE>
Actually, you couldn't explicitly create a <TT><FONT FACE="Courier">Graphics</FONT></TT> object even if you wanted to because it is an abstract class. If you recall from <A HREF="ch3.htm" >Day 3</A>, an abstract class is a class containing unimplemented
methods, meaning that objects can't be directly created from the class.
</BLOCKQUOTE>
</TD></TR>
</TABLE></CENTER>
<P>
<P>
Even though graphics operations often take place within the context
of an applet window, the output of the <TT><FONT FACE="Courier">Graphics</FONT></TT>
object is really tied to a component.
<P>
A <I>component</I> is a generic graphical window that forms the
basis for all other graphical elements in the Java system. Java
components are modeled at the highest level by the <TT><FONT FACE="Courier">Component</FONT></TT>
class, which is defined in the awt package.
<P>
An applet window is just a specific type of component. Thinking
of graphics in terms of the <TT><FONT FACE="Courier">Component</FONT></TT>
class rather than an applet window shows you that graphics can
be output to any object that is derived from <TT><FONT FACE="Courier">Component</FONT></TT>.
As a matter of fact, every <TT><FONT FACE="Courier">Component</FONT></TT>
object contains a corresponding <TT><FONT FACE="Courier">Graphics</FONT></TT>
object that is used to render graphics on its surface.
<P>
Java graphics contexts (<TT><FONT FACE="Courier">Graphics</FONT></TT>
objects) have a few attributes that determine how different graphical
operations are carried out. The most important of these attributes
is the color attribute, which determines the color used in graphics
operations such as drawing lines. You set this attribute using
the <TT><FONT FACE="Courier">setColor</FONT></TT> method defined
in the <TT><FONT FACE="Courier">Graphics</FONT></TT> class. <TT><FONT FACE="Courier">setColor</FONT></TT>
takes a <TT><FONT FACE="Courier">Color</FONT></TT> object as its
only parameter. Similar to <TT><FONT FACE="Courier">setColor</FONT></TT>
is <TT><FONT FACE="Courier">setBackground</FONT></TT>, which is
a method in the <TT><FONT FACE="Courier">Component</FONT></TT>
class that determines the color of the component's background.
<TT><FONT FACE="Courier">Graphics</FONT></TT> objects also have
a font attribute that determines the size and appearance of text.
This attribute is set using the <TT><FONT FACE="Courier">setFont</FONT></TT>
method, which takes a <TT><FONT FACE="Courier">Font</FONT></TT>
object as its only parameter. You learn more about drawing text
and using the <TT><FONT FACE="Courier">Font</FONT></TT> object,
which is covered a little later today in the "Drawing Text"
section.
<P>
Most of the graphics operations provided by the <TT><FONT FACE="Courier">Graphics</FONT></TT>
class fall into one of the following categories:
<UL>
<LI>Drawing graphics primitives
<LI>Drawing text
<LI>Drawing images
</UL>
<H3><A NAME="DrawingGraphicsPrimitives"><B>Drawing Graphics Primitives</B></A>
</H3>
<P>
<I>Graphics primitives</I> consist of lines, rectangles, circles,
polygons, ovals, and arcs. You can create pretty impressive graphics
by using these primitives in conjunction with each other; the
<TT><FONT FACE="Courier">Graphics</FONT></TT> class provides methods
for drawing these primitives. Certain methods also act on primitives
that form closed regions. You can use these methods to erase the
area defined by a primitive or fill it with a particular color.
<P>
<I>Closed regions</I> are graphical elements with a clearly distinctive
inside and outside. For example, circles and rectangles are closed
regions, whereas lines and points are not.
<P>
I'm not going to go through an exhaustive explanation of how to
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -