Bookmark Topic Watch Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Report post to moderator


You must turn on Java for applets to work.

IMPORTANT: This is the second in a series of four applet examples for animation. After this, see HelloAnimThreadB, and HelloAnimThreadC. Make sure you understand this example and the fist one -- HelloAnimThreadFirst -- before moving on.

ALSO IMPORTANT: This is still not the ideal way to animate. It flickers and is not entirely smooth. In HelloAnimThreadB and C, you will see an improved technique which builds on the example below but adds a few new features.

Explanation of HelloAnimThreadA applet

Number of classes: 1 (HelloAnimThreadA.class)

What it does: Animates a small rectangle across the screen, bouncing when it hits the edges of the applet space.

How to do animation in Java:

You have two choices for animation:

1) Display a series of different images (as you often do with gif animations)

OR

2) Display just a single image, but keep updating that image's location on the screen

Of course, you can combine the two methods, as we did with the moving cows in the Roundup game... there are four different "looks" (different .gif files) for each cow, but the cows also move across the screen.

In this animation series of applets, we draw a rectangle on the screen using a method of the Graphics class, rather than drawing a .gif image.

Animation Overview for this applet:

In a permanent loop, update / change the x and y coordinates of a rectangle and then repaint it in the new location. To the user, this will appear as a moving rectangle.

Step-by-Step:


  • Define instance variables for the rectangles size and x,y screen coordinates (which represent the top left corner of the rectangle), and the right and bottom of the applet (max width and max height). Also define instance variables for the rectangles x and y velocity. This determines how many pixels (and in which direction) the rectangle will move with each loop.
  • Implement a run() method (did we mention that this applet implements the runnable interface? You'll see why in a minute...). This run method contains the infinite loop (while (true)) that drives the animation.
  • In the run method, update the x and y instance variables so the rectangle will be drawn at a new location The x and y will also be checked for the rectangle hitting the edges of the applet. If the rectangle hits an edge, the velocity will be reversed for that dimension (i.e. if the rectangle hits the top, then the y velocity will be reversed so the rectangle will start traveling down again -- y will be incremented positively instead of negatively)
  • At the end of the run method, call repaint() (a method the applet can respond to). Repaint will ultimately lead to the applet's paint() method being called. Don't call paint directly! In HelloThreadAnimB and C, you will be calling paint, but it can only be called under special circumstances you'll look at in those other examples.
  • Override the paint() method, and give it something to do: Draw the rectangle in a new position, using the instance variables for x, y and the size (height and width) of the rectangle.
  • Be sure to create and start a Thread object at the end of the init method.





  •  
    Don't get me started about those stupid light bulbs.
      Bookmark Topic Watch Topic
    • New Topic