Game development in java - drawing a spaceship to canvas

In all the previous posts of this game development in java series, we haven't drawn anything to the canvas other than a text which shows fps of the game.

Now we'll bring a spaceship polygon to canvas and translate it in all four directions with pressing the up, down, left and right arrow keys.

We'll use the screen coordinate as a world in which we draw spaceship polygon. The X-axis of screen coordinate goes to the right and the y-axis to down.

These are the positive directions of x-axis and y-axis in the screen coordinate system.

Simple java game - SpaceShip

Let’s make a new simple java game app which draws a ship on the canvas and moves it up, down, left and right as the user presses the corresponding arrow keys.

I will make a new class here, named as Ship to model a Spaceship.

This contains a translation vector tx, ty and the points of the ship in an array.

The points of the model ship are given in the below image. This ship has its own different coordinate space (object space). And the origin of this ship is (0, 0).

Whenever we need to draw the ship to canvas we first transform the model from object space to world space by adding a translation vector to all the points of it.

Also, notice that this translation vector stores the position of the spaceship in the world.

=> World space is the screen space.

Code for Ship.java

Whenever the user presses one of up, down, left and right keys, this causes a change in the translation vector.

If the user presses up arrow⬆️ key, ty would decrease. If the down arrow ⬇️ is pressed then ty would increase.

Similarly, For the left arrow⬅️ key, tx will decrease and for the right arrow ➡️ key increase.

Wait! We haven't decided yet at which speed ship will move.

I mean by which value we should increase or decrease the translation vector for a frame update?.

For now, the speed of the ship will be dependent on the number of frames per second.

If the user presses the ⬆️ for one second and the fps is 60 then the ship moves 60 pixels up. So we'll increase or decrease the translation vector with 1 per frame.

Indeed, this idea of implementing the ship movement is not preferable. Because The velocity of the spaceship depends on the frame rate so the high-performance system can generate more frames and moves it very faster.

Therefore on different systems, you'll surely get different results.

Essentially the speed of ship should depend on time so we'll use the delta time to move the ship at a velocity of some unit per second in the next post. 

We'll translate and copy all the points of the model in an array so that it can be used to draw the polygon shape (ship).

Algorithm to draw a polygon shape

1. Get the last point lp from an array containing the translated points.
2. Loop through all the points and for each do the below steps
3. 1. Get the indexed point ip.
   2. Draw the line throughout the points lp and ip.
   3. update last point with current indexed point (lp = ip)

Taking inputs from the keyboard

To read the keyboard inputs I'll add a key listener to canvas component.

See the code snippet.

These listener methods run on event thread Therefore I'll make that boolean flag volatile.

Java game example code

This will be an example, not a complete game.

Let's make a new class, named as MovingShip. Define 4 boolean flags for arrow keys.

Define and implement all the methods as I showed you in my previous posts.

Write some new statements in the createAndShowGUI() method to add a key listener to the canvas.

First, see the output from the above video and try to get it done yourself. your app should do update the object before rendering the frame.

Complete code for MovingShip.

Go Back Go Next