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.
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
-
Get the last point lp from an array containing the
translated points. - Loop through all the points and for each do the below steps
-
- Get the indexed point ip.
- Draw the line throughout the points lp and ip.
- 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.
