The Coder's Handbook

Shapes, Color, and Text

SHAPES

For more detailed information, look at the Graphics and Color classes in the Slick 2D Javadoc

Drawing Basic Shapes

  • You draw shapes in the render method using the graphics object.

  • If you write a class that draws anything, it will need to be passed a reference to the Graphics object.


// Draws the outline of a rectangle or oval. Uses x, y, w, h.

g.drawRect(50, 50, 50, 50);

g.drawOval(100, 200, 50, 50);

// Draws a line between two points

g.drawLine(400, 25, 500, 75);

// Draws a filled rectangle. Uses x, y, w, h.

g.fillRect(200, 200, 500, 500);


// You can use variables to create animations for these images

g.fillOval(xPos, 100, 200, 200);

COLOR

Changing Colors

  • Slick uses RGB Color. When you set a color, all drawings and text will be in that color.

    • Think of it as picking up a marker: you're now writing in this color until you change it.

  • If your code doesn't recognize Color, it will need to import it.

    • Be sure you import the correct file: org.newdawn.slick.Color


// Sets color using a preset color.

g.setColor(Color.cyan);


// Sets color using a custom RGB value.

g.setColor(new Color(125, 50, 70));


// You can add a fourth parameter as "alpha value" or transparency (0-255)

g.setColor(new Color(255, 0, 0, 50));


// You can store these colors as variables and use color methods...

Color mediumRed = new Color(235, 45, 50);

Color darkRed = mediumRed.darker();

int blueAmount = mediumRed.getBlue();

Floats Work Differently

    • Color actually has a lot of different constructors, and not all of them use integers

      • Make sure you do not pass color a float by accident.

      • This may result in your color being all white or an unexpected color

TEXT

Drawing Strings

  • You can use the drawString() method to draw text.

  • You can only change size by modifying the Font.

    • To use custom Fonts, check out Coder's Handbook - Fonts <add link when written>


// Draws text at x, y

g.drawString("Hello World!", 50, 70);

// Note that this only takes a String as a parameter

g.drawString(""+getCurHealth(), xPos, yPos));

A visual approximation of the
draw string method.

RESOURCES

The New Boston - Shapes, Text, and Titles