About Graphics

Swingame allows you to create arcade style games. To get started here are a few things you need to know about Graphics.


Level

Beginner

Details

The Game Window

Default Swingame Window

Traditionally a game uses a graphic interface to display information about game data to the player. To do this shapes and other devices are drawn and placed in the Game Window.

By default a Swingame window opens to a size of 800(wide) x 600(high) pixels. Each device placed inside is positioned relative to the top left corner of the game window, the dimensions known as (0,0).

In Swingame the X and Y screen coordinates are often referred to as Point2D

A game window can be manipulated by it's properties. A full reference can be found by browsing the API.

  • Clear Screen
  • background color
  • height
  • width
  • Toggle Window border
  • Toggle Full Screen

Swingame supports drawing with the following default colors.




Shapes and Positions

When  you draw a shape to the screen you must give it a position. The pseudo code below shows how to draw a simple shape to the game window, the output is can be seen in the associated image.

A game window must be refreshed each time something is added. It is important to note that clearing the screen and refreshing the screen are two different procedures. Clearing the screen will remove all the devices placed in the game window, where refresh screen will update the screen adding any new devices.

If the game window has a background, each time you clear the screen, you must redraw all the devices that were drawn to the screen in order to ensure they are visible.

The example below with the red rectangle shows the Draw Rectangle procedure and a rectangles relationship to the the game windows 0,0 point (or coordinate). To draw a rectangle to the screen follow this procedure.

//Pseudo code to draw a rectangle on the game window. Add = Layered Model, Draw = Painters Model 
1. call Draw Rectangle ( Color Red, 130, 170, 200, 100 ) 
2. call Refresh Screen() 


Don't forget to call refresh screen when you're done to ensure your shape is drawn

Behind the scenes

Why do we need to Refresh Screen()  ?

SwinGame uses a technique  called Double Buffering to ensure you have control over how things appear on the screen.  In this technique you draw to a background canvas and then call Refresh Screen() to make that canvas appear to the user.

This means you control when something appears on the screen which is important when coordinating a number of shapes, sprites, images or text.

The four images below execute the following pseudo code.

call Fill  Triangle() 
call Fill  Rectangle() 
call Fill  Circle() 
call Refresh Screen() 


Painter

Painters Canvas

Drawing shapes, sprites or other devices into the game window is similar to an artist painting on a canvas. Once a brush stroke has been applied, you cannot insert anything underneath it. To insert a shape, sprite, image or text you will need to clear the screen and redraw the items in to the order you need them to render. As discussed in the Behind The Scenes Section above, it is important to note that SwinGame executes the commands top -> down. However they are displayed bottom up. Take a look at the images below and the pseudo code. They will give you a better understanding of the Painter Model.