This lab introduces the Processing library that will be used for the graphical interface of the course project.
Retrieve the files provided for this lab by issuing a git pull
in the cpe102labs
directory.
In order to use the Processing library on the CSL machines, you will need
to add the .jar file to your CLASSPATH
. Running the following
script (just once; reopen the terminal afterward) should work. For those
working on their own machines, you can add the .jar file from
processing.org or from
my copy.
/home/akeen/public/processing_setup
Open the provided Java file and read through the code. This code is written in a very simple style to conform to the requirements of and to illustrate some features of the Processing library. You will adapt this code to the project in an assignment.
Use of the Processing library begins with the definition of a class
that extends PApplet
and that includes a main
method like the following to create an applet using the specified
class.
public static void main(String[] args) { PApplet.main("ProcessingIntro"); }
This class overrides two important methods: setup
and
draw
. The setup
method is run once when
the, in Processing terminology, "sketch" is created. The
draw
method is called repeatedly (by Processing) and
will contain the control logic of the "sketch".
Define a two-dimensional array to represent the "world". This grid
should be 20x15. For this lab, you will use this grid to store
background tiles, obstacle tiles, and a goal tile. You may use
integer values to represent these different types of tiles (or
you might explore the use of enum
s). For instance,
you might store 1 at a grid location for an obstacle.
Initialize the grid with some obstacles and one goal. You can start by initializing each entry to a background and then place the obstacles (consider loops for contiguous obstacles) and the goal.
Define a point class (or copy one that you have already written) and declare a variable to store the location of the wyvern.
Modify the program to draw sprites for the background, obstacles, and goal. You can search the web for suitable (and class appropriate) sprites or draw your own. This lab assumes sprites that are 32x32 pixels in size. You will need to modify the given code to load these images and then to draw the images as dictated by the values in the grid defined earlier.
An example might look as follows.
Now modify the code so that the wyvern is controlled by the WASD keys. The wyvern should move one complete cell to the left, right, up, or down, but should not travel off the grid or over an obstacle.
You will handle keyboard input by overriding the keyPressed
method. The following sample code should get you started.
public void keyPressed() { switch (key) { case 'a': // do something break; case 'w': ... } }
Finally, modify the code so that when the wyvern reaches the goal a simple glyph animation is triggered (e.g., an ellipse that grows in size). Also, include logic to prevent movement after the goal is reached.
Once you have completed the above steps, demonstrate completion of this lab to your instructor.