SlideShare a Scribd company logo
Project Report
Bahçe¸sehirUniversity2014-2015
Chady DIMACHKIE
1508324
Moray BARUH
1508323
Glow Page 2 of 36
Summary
1 Introduction 3
2 Menus 4
2.1 Customizing the user interface . . . . . . . . . . . . . . . . . . . . 4
2.2 MenuHandler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.3 Main Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.4 Help Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.5 High Score Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.6 Options Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.7 Pause Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.8 Save Score Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3 Game 9
3.1 Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.2 Physics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.3 Lighting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.4 Power-ups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
3.5 Level-design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
3.6 Scores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
4 Ressources 29
4.1 Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
4.2 Sounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
5 Distribution 30
6 Web Site 31
7 Conclusion 32
Appendices 33
A Meaning of the colored lines 33
CHADY DIMACHKIE 2 MORAY BARUH
Glow Page 3 of 36
1 Introduction
For our Advanced Programming course in Bahçe¸sehir University, we were
asked to create a brick breaker game in Java. This project is a mean for us to
develop our programming skills as well as our way of thinking out of the box
to be able to resolve any problem asked.
We used our skills ranging from programming, mathematics, all the way to
our communication skills for the promotion of this game.
Our group, composed of Chady DIMACHKIE and Moray BARUH, created
the game we named Glow. Even though a brick breaker game is usually
referred to as "retro" and is one of the first computer games, we decided to
add some twist that new technology provides resulting in a more colorful and
new-looking game. In this report, we will be presenting every aspects of the
game, as well as the technicals details relative to methods we have developed
throughout our time making the game.
<3
CHADY DIMACHKIE 3 MORAY BARUH
Glow Page 4 of 36
2 Menus
The menus are one of the main element in a game since it is the first
visual impression of the game and helps the user navigate through the different
features.
2.1 Customizing the user interface
As our project is a game, we can’t afford using Swing’s default buttons and
text fields as they are. For that purpose, we created customized buttons and
text fields which will fulfil our needs.
2.1.1 Buttons
For a game, buttons must have an image to have an appeal. In order to
do that, our custom buttons has images and sound effects. We achieve this by
inheriting from the JButton class, setting an image and adding a MouseListener
to play sound effects and change the image when the user hoovers or clicks
the button.
FIGURE 1 – Button images
On rest (left) and on mouse hoover (right).
2.1.2 Text Fields
A placeholder in text fields is a string that displays usually in a light-gray
color in the text field and disapears when the user clicks. It is used to give
the user a hint about what should be written in that field. Although, Swing’s
native text fields doesn’t support a placeholder. That’s why we needed to
customize the native text field. We achieved to have a text field supporting a
placeholder by overriding the PainComponent method in our custom text fields
CHADY DIMACHKIE 4 MORAY BARUH
Glow Page 5 of 36
and calling the Graphics2D#drawString(String str, int x, int y) method when
the placeholder text should be drawn.
2.2 MenuHandler
For easing the process of switching between different menus, we have
created the MenuHandler class, which contains the main JFrame object that
displays the game. After some research about different types of layouts, we
have found CardLayout to be the best choice for our case. The CardLayour
can set up multiple JPanel objects, (different menus for our case) and show
them when asked. Our menus, therefore, became subclasses of JPanel objects.
Another role of the MenuHandler class is to setup and run the frame. With all
these implemented, the main function for our project became just one line :
new MenuHandler().run();
One more issue was to setup a full screen window for our game. We just
used the GraphicsDevice#setFullScreenWindow(Window w) function at start,
but after some testing on different platforms, we figured out that only calling
that function doesn’t work on all of them. Therefore, we had to use different
code in order to setup the full screen according to the operating system used.
2.3 Main Menu
The main menu is the first menu the user sees when launching the game. It
consists of five different buttons :
— Play : Starts the game.
— Help : Opens the help menu.
— High Scores : Opens the high scores menu.
— Options : Opens the options menu.
— Exit : Exits the game.
CHADY DIMACHKIE 5 MORAY BARUH
Glow Page 6 of 36
FIGURE 2 – Main Menu
2.4 Help Menu
The help menu is a simple menu created to help the user understand the
game’s rules.
FIGURE 3 – Help Menu
2.5 High Score Menu
The high score menu is where the high scores are displayed. It contains
two JTable objects where the scores are displayed : one for scores saved on
the local drive, one for scores saved on our database (cf. 3.6). By one click,
the user can delete scores on the local disk, or refresh the scores from our
database.
CHADY DIMACHKIE 6 MORAY BARUH
Glow Page 7 of 36
FIGURE 4 – High Score Menu
2.6 Options Menu
The options menu is designed to give the user the possibility to change the
volume of the game. One can change the value of two JSlider to set the music
or sound effect volume for the game. The preferences are saved as the values
are modified by using Java’s native Preferences class which provides utilities
to set/read simple user settings data to to/from the local disk.
FIGURE 5 – Options Menu
CHADY DIMACHKIE 7 MORAY BARUH
Glow Page 8 of 36
2.7 Pause Menu
The pause menu is the menu that appears when the game gets paused by
pressing the escape button. The pause menu has four different buttons :
— Resume : Unpauses the game
— New Game : Finishes the current game and starts a new one.
— Options : Opens the options menu.
— Main Menu : Opens the main menu.
FIGURE 6 – Pause Menu
2.8 Save Score Menu
The save score menu is shown to the user when the game is over. It is a
screen to show the user its score and asks if he wants to save it. It contains a
placeholder text field and two check boxes to give the option to enter his name
and save his score on local and/or on our database.
FIGURE 7 – Save Score Menu
CHADY DIMACHKIE 8 MORAY BARUH
Glow Page 9 of 36
3 Game
3.1 Elements
In a break breaker game, there usually are several components such as
bricks, a ball, a paddle and walls. In attempt to achieve a highly structured
game, we created each game objects as inheriting from a basic "Element" class
containing enough information that it could have an associated basic shape
representing it, thus enabling it to be eventually drawn on screen.
3.1.1 Bricks
The bricks are the elements supposed to be broken by a ball thrown toward
it. As being game "elements", they naturally have the previously told properties
as well as some particularities.
These elements have an associated coordinate position, a color and are
eventually drawn with a gradient effect.
The bricks are initially loaded via our level loader and are placed in a list
of elements that is used to keep track of them when it comes to updating their
state (broken or not), applying our lighting algorithm (which make each brick
cast a shadow) and finally, drawing them on screen.
Bricks can also pop a bonus once in while during the game.
FIGURE 8 – A brick
3.1.2 Ball
The ball is an important element, as it is the one with which the bricks
can be broken. It extends the "Element" class in such a way that it has its own
physics algorithm tweaked to be as comfortable as possible. It also has a radius
and a speed which can change depending on which bonus you get.
CHADY DIMACHKIE 9 MORAY BARUH
Glow Page 10 of 36
As the ball is the center of attention in our game, it is also the only element
that casts light to its surrounding enabling the player to see a part of the
environment he is playing in.
FIGURE 9 – The ball
3.1.3 Paddle
The paddle is also very important as it enables the player to control the ball
and somewhat influence its trajectory. It is an "Element" that can only move on
its X coordinate while being fixed on its Y-axis. It is controlled by the mouse
using a MouseMotionListener provided by the API.
The paddle is the element with which you can take the bonuses. Depending
on some of them, you can change the paddle’s width to a certain extent.
FIGURE 10 – The Paddle
3.1.4 Walls
The walls are the limit of your screen. They allow the ball to bounce on
them and can be used as part of brick breaking strategies. They are also the
limit within which the paddle can freely move.
Although they are not derived from the "Element" class, they interact with
such elements.
3.2 Physics
For a break breaker game to be successful and enjoyable by the end-user,
there need to be a physics that is particularly taken care of. Such a physic
CHADY DIMACHKIE 10 MORAY BARUH
Glow Page 11 of 36
handling includes the way the ball behave while in mid-air, as well as when
there is a collision either with bricks, walls or the paddle.
Following such an intent, we worked on delivering the best experience
possible for the game to feel enjoyable.
3.2.1 Ball physics
The ball has two axis on which it has a certain freedom of move. The way
it is going to take a particular direction is driven by the velocity. The velocity
determines by how much the ball moves on each axis, each unit of time.
It is defined as such : Velocity = (vx, xy)
Depending on the sign of the vx and vy values, the ball can go in every
possible direction until it hits an element and thus a collision is triggered, thus
changing the ball’s velocity.
This means that the position of the ball is updated as such :
Position = (x+vx ∗speedMultipliyer, y+vy ∗speedMultipliyer)
Where speedMultiplier ∈ R∗
+ is a value used to change the speed
velocity according to the bonuses taken. It is initialized to 1 at the beginning
of the game.
3.2.2 Collision
Collisions occur when the ball hits another game element. It results in a
change of the ball’s velocity for it to bounce off of the element with which it
collided.
Of course, to be able to deliver the best experience possible, the collisions
behave differently depending on the collided element.
3.2.2.a Detect a collision
Before having the ball behave according to a collision, we need to detect it
along with its point of happening.
There are 4 sides to an element that we denote in the following way :
We just have to check if the ball’s coordinates are within a certain range of
the collied element’s coordinates.
CHADY DIMACHKIE 11 MORAY BARUH
Glow Page 12 of 36
FIGURE 11 – A brick’s collision sides
So, for the south side, we check this :
if (ballCenter.x >= collided.x &&
ballCenter.x <= collided.getMaxX() &&
ball.getMinY() <= collided.getMaxY() &&
ballCenter.y >= collided.getMaxY())
For the north side :
if (ballCenter.x >= collided.x &&
ballCenter.x <= collided.getMaxX() &&
ball.getMaxY() >= collided.getMinY() &&
ballCenter.y <= collided.getMinY())
For the east side :
if (ballCenter.x <= collided.x &&
ballCenter.y <= collided.getMaxY() &&
ball.getMaxX() >= collided.x &&
ballCenter.y >= collided.getMinY())
For the west side :
if (ball.x <= collided.MaxX() &&
ballCenter.y <= collided.getMaxY() &&
ball.getMaxX() <= collided.x &&
ballCenter.y >= collided.getMinY())
CHADY DIMACHKIE 12 MORAY BARUH
Glow Page 13 of 36
Thus, we know the side of collision. We do a similar operation for walls as
they are the just the sides of the screen, it is easier.
3.2.2.b Bricks collision
When the ball hits a brick, we iterate through our bricks list to get which
one is colliding with the ball. Once this is done, we save the collision point
(which we use when popping bonuses), we remove the brick from the list and
change the ball’s velocity according to the side of the collision.
We want the ball to deflect with the same angle it came with, but in the
another direction it came from.
So, we do as follow : If the collision is at the north side or the south side :
Velocity = (x, −y)
Or, if the collision is at the east side or the west side :
Velocity = (−x, y)
And, if it is in diagonal :
Velocity = (−x, −y)
Of course, with this method, the ball can bounce indefinitely if either of
the component of the velocity is null. If this is the case, we just add a small
random offset to the null component so that the player is not stuck and is not
in the obligation to lose a life point on purpose.
3.2.2.c Paddle collision
If we collide with the paddle, we want to give the user a minimum of a
sense of control when it comes to deflecting back the ball. So if we had used
the same collisions as with the bricks, the user would have had to go all the
way to the left if he wanted the ball to go back right, for instance.
To do so, we compute a "factor" based on the distance of collision on the
paddle from its center :
Factor = collisionWithPaddle.x − paddleCenter.x
In our game, the factor’s maximum possible value divided by 2, is −90,
and, if vx velocity component is superior to 0, the velocity on the north and
south side become :
CHADY DIMACHKIE 13 MORAY BARUH
Glow Page 14 of 36
Velocity = (−x, −y)
if vx <= 0 : Velocity = (x, −y), and we add the factor to the vx com-
ponent so that the angle of deflection changes depending on the position of the
ball on the paddle.
And, to add some difficulty, the collision on the sides change vx to −vx, so
that, if you hit the ball with the side of the paddle, the ball falls and you lose a
life point.
And we also handle the infinite bounce case like explained for the bricks
collisions.
3.2.2.d Walls collisions
The walls being the limit of the ball’s freedom of movement, we need to
react to their collision.
To do so, we check the position of the ball according to the screen’s height
and width in pixels and we use the same behavior for all sides, except for the
bottom side which happens to be where the ball falls and decreases the player’s
life point.
3.3 Lighting
Being people who like very polished and fancy-looking graphics, we
decided to work on a method that would enable this. We decided to bring
dynamic lighting effects in our game for the greatest pleasure of our player’s
sight.
Having to work with an API designed to use the CPU in almost every layer
is a major drawback to make a very good-looking game. Even though, we
overcame this while preserving a decent level of performance through many
optimizations.
3.3.1 Computation
Having quite a few experiences with lighting computation and rendering
techniques on GPU, we worked on getting a somewhat similar effect on the
CPU, which absolutely isn’t made for such computations.
CHADY DIMACHKIE 14 MORAY BARUH
Glow Page 15 of 36
Our effect works on the bricks and the paddle, with the ball being the light
casting element.
To simplify the rendering as much as possible, we decided to approximate
each primitive shapes (like squares, rectangles) with a square’s containing
sphere. Which means that we need to cut rectangles into several squares (with
a 10% error margin on the sides’ lengths) for the effect to work.
To do so, we compute the circle’s radius based on the square’s width :
Radius = Square.width/2
Then, we compute the circle’s center based on the square’s vertices’s
coordinates :
CircleCenter = (Square.x + Radius, Square.y + Radius)
With that, we can now get the ball’s direction from the circle’s center :
BallDirection = (CircleCenter.x−BallCenter.x, CircleCenter.y−
BallCenter.y)
Now, for optimizations purposes (and for the effect to be good-looking),
we compute the current square’s distance from the ball’s center, and if it is
superior, we discard it and do not apply lighting on it. We do it this way :
Distance = (BallDirection2.x + BallDirection.y2)
After that, we need to normalize our BallDirection vector, so that we
can use it to create our light’s polygon. We do it this way :
NormalizedVector = (BallDirection.x/Distance, BallDirection.y/Distance)
Then, we compute the perpendicular to the normalized vector :
PerpendicularVector = (−NormalizedVector.y, NormalizedVector.x)
We use this vector so that we can have somewhat of an offset from the
center around the radius.
CHADY DIMACHKIE 15 MORAY BARUH
Glow Page 16 of 36
FIGURE 12 – Perpendicular vector offset
So, around the approximated circle’s radius, we put two opposite points
that will be used to create the final polygon for our light :
FirstPoint = (CircleCenter.x − PerpendicularVector.x ∗ Radius,
CircleCenter.y − PerpendicularVector.y ∗ Radius)
And the second, "opposite" point on the radius :
SecondPoint = (CircleCenter.x+PerpendicularVector.x∗Radius,
CircleCenter.y + PerpendicularVector.y ∗ Radius)
FIGURE 13 – First and Second Points
After all this, we need to compute the last two polygon’s points’ coordi-
nates.
We will compute the distance from the ball to the First and Second points :
CHADY DIMACHKIE 16 MORAY BARUH
Glow Page 17 of 36
DistanceFirstPoint = (FirstPoint.x−ballCenter.x, FirstPoint.y−
ballCenter.y)
DistanceSecondPoint = (SecondPoint.x−ballCenter.x, SecondPoint.y−
ballCenter.y)
And the lengths are :
LengthFirstPoint = (DistanceFirstPoint.x2 + DistanceFirstPoint.y2)
LengthSecondPoint = (DistanceSecondPoint.x2 + DistanceSecondPoint.y2)
We compute the normalized vector again :
FirstNormalized = (DistanceFirstPoint.x/LengthFirstPoint,
DistanceFirstPoint.y/LengthFirstPoint
SecondNormalized = (DistanceSecondPoint.x/LengthSecondPoint,
DistanceSecondPoint.y/LengthSecondPoint
And we multiply each components by the lighting intensity factor that
defines how far goes the projected lighting effect :
FirstNormalized = (FirstNormalized.x∗factor, FirstNormalized.y∗
factor)
FirstNormalized = (FirstNormalized.x∗factor, FirstNormalized.y∗
factor)
Finally, we can have our last two points which coordinates begin from the
First and Second points till farther from the square in an opposed directed as
that of the ball :
ThirdPoint = (FirstPoint.x + FirstNormalized.x, FirstPoint.y +
FirstNormalized.y)
FourthPoint = (SecondPoint.x+SecondNormalized.x, SecondPoint.y+
SecondNormalized.y)
Then, we use the API’s embedded functions to create the polygon very
easily and we’re finished.
So, this is what the lighting polygon looks like after computation conside-
ring all the previous parameters :
CHADY DIMACHKIE 17 MORAY BARUH
Glow Page 18 of 36
FIGURE 14 – Lighting Polygon
Because we like to improve and get the best result out of our work, we
decided to add a fading and gradient effect to the lighting via the help of the
API.
So, thanks to the "SetPaint" method of the "Graphics2D" objects, we can
use our custom made gradient painting to give a smooth and polished lighting
effect as follows :
FIGURE 15 – Final result
CHADY DIMACHKIE 18 MORAY BARUH
Glow Page 19 of 36
3.3.2 Optimization
As stated previously, we are working with an API that is absolutely inef-
ficient when it comes to its graphics rendering capabilities. In this sense, we
tried many methods to optimize the frame rate to keep the game as smooth as
possible.
To do so, we first tried modifying the "RenderingHints" provided by the
"Graphics2D" object to tell it that we need a faster rendering, be it at the
expense of some anti-aliasing. As subtle as it could be, the changes weren’t
drastic enough.
In this sense, we developed a method of dynamic clip space. This method
enable the CPU and GPU to only compute items visible to them in a certain
area that is way smaller than that of the actual screen.
This means a frame rate that is drastically improved while keeping the
lighting effect quality at its best.
The clip space being only a square (limitation of the API), we added a
mask that gave the effect of a circle and we made it follow the clip space’s
dynamic coordinates.
FIGURE 16 – Lighting Mask
CHADY DIMACHKIE 19 MORAY BARUH
Glow Page 20 of 36
3.4 Power-ups
The power-ups are bonuses or penalties which appears by chance when
a brick gets broken. The player should only catch bonuses and avoid penalty
power-ups in order to make the game easier. Most of the power-ups start
dropping from the brick that got broken and become active when the user
touches it with the paddle. We have implemented power-ups using an abstract
class which contains only three methods :
public void draw(Grphics2D g)
public int update(Game game, float dt)
public abstract int run(Game game);
The logic behind power-ups is based on the game loop which first updates
(computes logic calculations) and draws game elements accordingly. Therefore,
for each power-up we call update and then draw at each frame. The run method
is used by update when the user catches the power-up and it is overridden by
the subclasses according to the power-up.
3.4.1 Explosion
The explosion power-up, the only power-up that activates itself without the
user having to do anything, creates an explosion that destroys other bricks in a
certain range.
3.4.2 Paddle size
Two power-ups changes the size of the paddle. The enlarge power-up,
enlarges, whereas the shrink power-up shrinks down the size of the paddle. To
avoid the paddle from being too small or too large, we limit the size of the
paddle from each side, and when the limit is reached, the power-ups have no
more effects unless the paddle size changes.
3.4.3 Ball speed
Another example for bonus and penalty power-up couple is the fast forward
and fast backward power-ups. These power-ups changes the speed of the ball
CHADY DIMACHKIE 20 MORAY BARUH
Glow Page 21 of 36
by respectively increasing and decreasing it. Like the enlarge and shrink power-
ups, the fast forward and fast backward power-ups have no effects once the
ball has reached the lower or higher speed limit.
3.4.4 Extra Life
The extra life power-up is one of the most valuable power-ups in our game.
When picked, this power-up will grant an extra life to the user, giving him an
extra chance when he would normally be out of life.
FIGURE 17 – Power-ups
From left to right : explosion, enlarge, extra life, fast backward, shrink, fast
forward.
3.5 Level-design
The level-design is one of the most important part of games. Any game’s
challenge is based on how the level is designed, and especially, for a brick
breaker game, the level-design has to be creative to catch the user’s attention.
To simplify tasks and save time, we decided to load levels from text files where
all the information would be written. The text files have the following format :
x0 y0 [n0]
x1 y1 [n1]
.
.
.
xm ym [nm]
where (xi, yi) ∈ N2 is the position of the brick in the Cartesian coordinate
system of the computer screen and ni ∈ N∗ is the optional number of succes-
sive bricks on the x axis (one if not precised). Blank lines are also supported
for purpose of organization. The process of loading is pretty simple :
CHADY DIMACHKIE 21 MORAY BARUH
Glow Page 22 of 36
while document has unprocessed lines do
line ← nextline
args ← line split with space character
if args’ length is geater then 2 then
n ← args[3]
else
n ← 1
end
i ← 0
while i < n do
Create a brick with (x + i * brickWidth, y) coordinates
i ← i + 1
end
end
Algorithm 1: Loading bricks from text file
Of course, the algorithm above assumes that the text file is has a valid
format. For example, the first few lines of the text document corresponding to
the first level is as follow :
CHADY DIMACHKIE 22 MORAY BARUH
Glow Page 23 of 36
50 50 5
170 50 5
290 50 5
410 50 5
530 50 5
650 50 5
770 50 5
890 50 5
1010 50 5
1130 50 5
FIGURE 18 – Level 1 text file example
FIGURE 19 – Level 1
FIGURE 20 – Level 2
CHADY DIMACHKIE 23 MORAY BARUH
Glow Page 24 of 36
FIGURE 21 – Level 3
FIGURE 22 – Level 4
FIGURE 23 – Level 5
3.6 Scores
Scores are a way to challenge and help the user track its progress while
playing the game. They are composed of a name (or nickname) identifying
the user who got that score and the actual score the user scored. Each broken
brick gives ten points to the player and when the game is over, the user is asked
whether he wants to save his score or not. We have implemented two types of
scores for our game : local scores and online scores.
CHADY DIMACHKIE 24 MORAY BARUH
Glow Page 25 of 36
3.6.1 Local Scores
Local scores are scores saved on the local disk of the computer, each user
has a different set of local scores. They are saved the same way as options are.
Although as the Preferences class in java doesn’t support storing user-defined
data types (like our scores), we are serializing the scores into String objects
before saving and deserializing from Strings as we are loading.
3.6.2 Online Scores
Online scores are scores stored on our MySQL database, showing scores
from users all around the world. The download and upload process of these
scores are done by sending an HTTP POST request to a PHP script on our
server. The PHP script will access the database, do the adequate operation (add
a score or retrieve them) and send back a response.
POST /get_scores.php HTTP/1.1
Host: glow.ed-fame.com
username=yourUsername&password=yourPassword
FIGURE 24 – HTTP POST request example to retrieve scores
CHADY DIMACHKIE 25 MORAY BARUH
Glow Page 26 of 36
In the case of downloading the scores, the PHP script’s response will be a
string serialized with the JSON serialization. Since Java doesn’t have a native
JSON deserialization algorithm, he had to create one. By researching the JSON
standard, we came up with a simple algorithm which can easily parse our score
objects from JSON serialized strings.
CHADY DIMACHKIE 26 MORAY BARUH
Glow Page 27 of 36
<?php
$con = mysqli_connect("edfamecom.ipagemysql.com",
$username, $password, "mega_desert_bricks");
$username = mysqli_real_escape_string($con,
$_GET["username"]);
$password = mysqli_real_escape_string($con,
$_GET["password"]);
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " .
mysqli_connect_error();
}
$sql = "SELECT * FROM HighScores";
if ($result = mysqli_query($con, $sql))
{
$resultArray = array();
$tempArray = array();
while($row = $result->fetch_object())
{
$tempArray = $row;
array_push($resultArray, $tempArray);
}
echo json_encode($resultArray);
}
mysqli_close($con);
?>
Algorithm 2: PHP script to retrieve scores from database
CHADY DIMACHKIE 27 MORAY BARUH
Glow Page 28 of 36
<?php
$con = mysqli_connect("edfamecom.ipagemysql.com",
$_POST["username"], $_POST["password"],
"mega_desert_bricks");
if (!$con)
{
print "Failed to connect to MySQL: " .
mysqli_connect_error();
echo "0";
}
$name = mysqli_real_escape_string($con, $_POST[’name’]);
$score = mysqli_real_escape_string($con,
$_POST[’score’]);
$sql_cmd = "INSERT INTO HighScores (Name, Score) VALUES
(’$name’, ’$score’)";
if(!mysqli_query($con, $sql_cmd))
{
die("Error: ". mysqli_error($con));
echo "-1";
}
print "1 record added";
mysqli_close($con);
echo "1";
?>
Algorithm 3: PHP script to add a score to database
CHADY DIMACHKIE 28 MORAY BARUH
Glow Page 29 of 36
4 Ressources
4.1 Images
Images is one of the most important part of a game. They add character,
spirit and design to the game. Our project uses images for multiple purposes :
background images, button images, images for power-ups and the paddle. The
images used in multiple classes are hold in the ImageFactory class as static
variables in order to load them once from the disk and have easier access to
them.
4.2 Sounds
Sounds, like images are also important to give spirit and action to the game.
We use sounds for buttons, background music and the explosion sound effect in
our project. Sounds are played using the Clip class from Java. The background
music can be looped and sound effects can be just played once.
CHADY DIMACHKIE 29 MORAY BARUH
Glow Page 30 of 36
5 Distribution
Java is one of the most used and supported cross-platform programming
language in the world. With that being said, we couldn’t just stop by only
creating a classical jar file. We think that the user has to see a native application
to their operating system (.exe for Windows, .app for Mac OS X and .sh
for Linux). That’s why we have created three native installer files for each
operating system by the help of Install4j, a software by ej-technologies. Those
installers set up the files needed to run the project in a correct way for each
operating system. Of course, it is not possible to convert Java code into native
binaries but the installer creates those native binaries that the user will use to
launch the game and the launchers will run the jar file discretely on back-end,
giving the feel to the user that he is interacting only with native executables.
FIGURE 25 – Install4j logo
CHADY DIMACHKIE 30 MORAY BARUH
Glow Page 31 of 36
6 Web Site
How can you distribute your project worldwide without having a website ?
Our website is a simple single-page design inspiring curiosity on our project
and supplying download links for each platform’s installer. It has a responsive
design and scales according to the web browser’s size. You can visit our web
page at http ://www.glow.ed-fame.com.
FIGURE 26 – First look on our website
CHADY DIMACHKIE 31 MORAY BARUH
Glow Page 32 of 36
7 Conclusion
While doing this project, we learned many different aspects, specially
about Java programming. Since this was our first project using Java, we had
to learn the Java2D and Swing APIs to be able to create this project. Another
challenge for us was the limitation to use third party libraries which would be
the correct way to create games. Without the use of game libraries, we can’t use
the opportunities the GPU has to offer resulting in much longer computation
time for graphical rendering. Therefore, we had to optimize our algorithms as
much as we could in order to achieve a descent frame rate for our game, which
improved our skills in that field of programming. All these challenges were
accepted and resulted in Glow, a game we are glad to have created and will be
glad to talk about in the future.
CHADY DIMACHKIE 32 MORAY BARUH
Glow Page 33 of 36
Appendices
A Meaning of the colored lines
Each part of this has a colored line which represents the student who did
this part.
The colors are given the following way :
Chady DIMACHKIE
Moray BARUH
There is also a color that represents the group as a whole :
Group
CHADY DIMACHKIE 33 MORAY BARUH
Glow Page 34 of 36
Table of figures
1 Button images . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2 Main Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3 Help Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
4 High Score Menu . . . . . . . . . . . . . . . . . . . . . . . . 7
5 Options Menu . . . . . . . . . . . . . . . . . . . . . . . . . . 7
6 Pause Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
7 Save Score Menu . . . . . . . . . . . . . . . . . . . . . . . . 8
8 A brick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
9 The ball . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
10 The Paddle . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
11 A brick’s collision sides . . . . . . . . . . . . . . . . . . . . . 12
12 Perpendicular vector offset . . . . . . . . . . . . . . . . . . . 16
13 First and Second Points . . . . . . . . . . . . . . . . . . . . . 16
14 Lighting Polygon . . . . . . . . . . . . . . . . . . . . . . . . 18
15 Final result . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
16 Lighting Mask . . . . . . . . . . . . . . . . . . . . . . . . . . 19
17 Power-ups . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
18 Level 1 text file example . . . . . . . . . . . . . . . . . . . . 23
19 Level 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
20 Level 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
21 Level 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
22 Level 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
23 Level 5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
24 HTTP POST request example to retrieve scores . . . . . . . . 25
25 Install4j logo . . . . . . . . . . . . . . . . . . . . . . . . . . 30
26 First look on our website . . . . . . . . . . . . . . . . . . . . 31
CHADY DIMACHKIE 34 MORAY BARUH
Glow Page 35 of 36
Table of content
1 Introduction 3
2 Menus 4
2.1 Customizing the user interface . . . . . . . . . . . . . . . . . 4
2.1.1 Buttons . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.1.2 Text Fields . . . . . . . . . . . . . . . . . . . . . . . 4
2.2 MenuHandler . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.3 Main Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.4 Help Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.5 High Score Menu . . . . . . . . . . . . . . . . . . . . . . . . 6
2.6 Options Menu . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.7 Pause Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.8 Save Score Menu . . . . . . . . . . . . . . . . . . . . . . . . 8
3 Game 9
3.1 Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.1.1 Bricks . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.1.2 Ball . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.1.3 Paddle . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.1.4 Walls . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.2 Physics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.2.1 Ball physics . . . . . . . . . . . . . . . . . . . . . . . 11
3.2.2 Collision . . . . . . . . . . . . . . . . . . . . . . . . 11
3.2.2.a Detect a collision . . . . . . . . . . 11
3.2.2.b Bricks collision . . . . . . . . . . . 13
3.2.2.c Paddle collision . . . . . . . . . . . 13
3.2.2.d Walls collisions . . . . . . . . . . . 14
3.3 Lighting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.3.1 Computation . . . . . . . . . . . . . . . . . . . . . . 14
3.3.2 Optimization . . . . . . . . . . . . . . . . . . . . . . 19
3.4 Power-ups . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
CHADY DIMACHKIE 35 MORAY BARUH
Glow Page 36 of 36
3.4.1 Explosion . . . . . . . . . . . . . . . . . . . . . . . . 20
3.4.2 Paddle size . . . . . . . . . . . . . . . . . . . . . . . 20
3.4.3 Ball speed . . . . . . . . . . . . . . . . . . . . . . . . 20
3.4.4 Extra Life . . . . . . . . . . . . . . . . . . . . . . . . 21
3.5 Level-design . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
3.6 Scores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.6.1 Local Scores . . . . . . . . . . . . . . . . . . . . . . 25
3.6.2 Online Scores . . . . . . . . . . . . . . . . . . . . . . 25
4 Ressources 29
4.1 Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
4.2 Sounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
5 Distribution 30
6 Web Site 31
7 Conclusion 32
Appendices 33
A Meaning of the colored lines 33
CHADY DIMACHKIE 36 MORAY BARUH

More Related Content

What's hot

Nighthawk Controller
Nighthawk ControllerNighthawk Controller
Nighthawk Controller
Ben Speer
 
Cmd unity withc
Cmd unity withcCmd unity withc
Cmd unity withc
umairnoora
 
Um en
Um enUm en
Free agent theater+ user guide
Free agent theater+ user guideFree agent theater+ user guide
Free agent theater+ user guide
guest14331e6
 
Up cloth - GameDesignDoccument
Up cloth - GameDesignDoccumentUp cloth - GameDesignDoccument
Up cloth - GameDesignDoccument
Eléonore Arbaux
 
Galactic Wars XNA Game
Galactic Wars XNA GameGalactic Wars XNA Game
Galactic Wars XNA Game
Sohil Gupta
 
Run and jump tutorial (part 3) behaviours
Run and jump tutorial (part 3)   behavioursRun and jump tutorial (part 3)   behaviours
Run and jump tutorial (part 3) behaviours
Muhd Basheer
 
unity basics
unity basicsunity basics
Chapt 4 scene parameters
Chapt 4   scene parametersChapt 4   scene parameters
Chapt 4 scene parameters
Muhd Basheer
 
Mitsubishi graphic operation terminal got2000 series quick start guide dienha...
Mitsubishi graphic operation terminal got2000 series quick start guide dienha...Mitsubishi graphic operation terminal got2000 series quick start guide dienha...
Mitsubishi graphic operation terminal got2000 series quick start guide dienha...
Dien Ha The
 
Introduction to Game Programming: Using C# and Unity 3D - Chapter 3 (Preview)
Introduction to Game Programming: Using C# and Unity 3D - Chapter 3 (Preview)Introduction to Game Programming: Using C# and Unity 3D - Chapter 3 (Preview)
Introduction to Game Programming: Using C# and Unity 3D - Chapter 3 (Preview)
noorcon
 
ZTE Sonata 4G Manual / User Guide
ZTE Sonata 4G Manual / User GuideZTE Sonata 4G Manual / User Guide
ZTE Sonata 4G Manual / User Guide
manualsheet
 
Academy PRO: Unity 3D. Environment
Academy PRO: Unity 3D. EnvironmentAcademy PRO: Unity 3D. Environment
Academy PRO: Unity 3D. Environment
Binary Studio
 
Gt C6112 Um Open Eng Rev 1 1 091117
Gt C6112 Um Open Eng Rev 1 1 091117Gt C6112 Um Open Eng Rev 1 1 091117
Gt C6112 Um Open Eng Rev 1 1 091117
guest609017
 
Road attack
Road attackRoad attack
Road attack
Samba Siva
 
Profiler2_getting started
Profiler2_getting startedProfiler2_getting started
Profiler2_getting started
Luca Gastaldi
 
Unity 3D game engine seminar
Unity 3D game engine  seminarUnity 3D game engine  seminar
Unity 3D game engine seminar
NikhilThorat15
 

What's hot (17)

Nighthawk Controller
Nighthawk ControllerNighthawk Controller
Nighthawk Controller
 
Cmd unity withc
Cmd unity withcCmd unity withc
Cmd unity withc
 
Um en
Um enUm en
Um en
 
Free agent theater+ user guide
Free agent theater+ user guideFree agent theater+ user guide
Free agent theater+ user guide
 
Up cloth - GameDesignDoccument
Up cloth - GameDesignDoccumentUp cloth - GameDesignDoccument
Up cloth - GameDesignDoccument
 
Galactic Wars XNA Game
Galactic Wars XNA GameGalactic Wars XNA Game
Galactic Wars XNA Game
 
Run and jump tutorial (part 3) behaviours
Run and jump tutorial (part 3)   behavioursRun and jump tutorial (part 3)   behaviours
Run and jump tutorial (part 3) behaviours
 
unity basics
unity basicsunity basics
unity basics
 
Chapt 4 scene parameters
Chapt 4   scene parametersChapt 4   scene parameters
Chapt 4 scene parameters
 
Mitsubishi graphic operation terminal got2000 series quick start guide dienha...
Mitsubishi graphic operation terminal got2000 series quick start guide dienha...Mitsubishi graphic operation terminal got2000 series quick start guide dienha...
Mitsubishi graphic operation terminal got2000 series quick start guide dienha...
 
Introduction to Game Programming: Using C# and Unity 3D - Chapter 3 (Preview)
Introduction to Game Programming: Using C# and Unity 3D - Chapter 3 (Preview)Introduction to Game Programming: Using C# and Unity 3D - Chapter 3 (Preview)
Introduction to Game Programming: Using C# and Unity 3D - Chapter 3 (Preview)
 
ZTE Sonata 4G Manual / User Guide
ZTE Sonata 4G Manual / User GuideZTE Sonata 4G Manual / User Guide
ZTE Sonata 4G Manual / User Guide
 
Academy PRO: Unity 3D. Environment
Academy PRO: Unity 3D. EnvironmentAcademy PRO: Unity 3D. Environment
Academy PRO: Unity 3D. Environment
 
Gt C6112 Um Open Eng Rev 1 1 091117
Gt C6112 Um Open Eng Rev 1 1 091117Gt C6112 Um Open Eng Rev 1 1 091117
Gt C6112 Um Open Eng Rev 1 1 091117
 
Road attack
Road attackRoad attack
Road attack
 
Profiler2_getting started
Profiler2_getting startedProfiler2_getting started
Profiler2_getting started
 
Unity 3D game engine seminar
Unity 3D game engine  seminarUnity 3D game engine  seminar
Unity 3D game engine seminar
 

Viewers also liked

Lição 26´As maldades da casa de Israel depois do Éxodo
Lição 26´As maldades da casa de Israel depois do ÉxodoLição 26´As maldades da casa de Israel depois do Éxodo
Lição 26´As maldades da casa de Israel depois do Éxodo
CARLOS LINUS FERREIRA
 
LIÇÃO 24- DEUS DESMASCARA OS FALSOS PROFETAS E OS IDÓLATRAS
LIÇÃO 24- DEUS DESMASCARA OS FALSOS PROFETAS E OS IDÓLATRASLIÇÃO 24- DEUS DESMASCARA OS FALSOS PROFETAS E OS IDÓLATRAS
LIÇÃO 24- DEUS DESMASCARA OS FALSOS PROFETAS E OS IDÓLATRAS
CARLOS LINUS FERREIRA
 
el cid
el cidel cid
el cid
nitroxtwins
 
aiv.cv
aiv.cvaiv.cv
042 160126 Bookclub: INFOGRAFIS
042 160126 Bookclub: INFOGRAFIS042 160126 Bookclub: INFOGRAFIS
042 160126 Bookclub: INFOGRAFIS
Lia s. Associates | Branding & Design
 
Quando eu quero_falar_com_deus
Quando eu quero_falar_com_deusQuando eu quero_falar_com_deus
Quando eu quero_falar_com_deus
Sizenando Presentepravoce
 
Adv 410 quiz 2
Adv 410 quiz 2Adv 410 quiz 2
Adv 410 quiz 2
BellaMMV
 
Accolades: Sonja Moffett
Accolades: Sonja MoffettAccolades: Sonja Moffett
Accolades: Sonja Moffett
Sonja Moffett PHR MSHRM
 
6 page ferrari eastern brochure
6 page ferrari eastern brochure6 page ferrari eastern brochure
6 page ferrari eastern brochure
ferrari-eastern
 
Para o-melhor-amigo-o-melhor-pedao-mensagem-do-dia-16052008-1212082834012919-8
Para o-melhor-amigo-o-melhor-pedao-mensagem-do-dia-16052008-1212082834012919-8Para o-melhor-amigo-o-melhor-pedao-mensagem-do-dia-16052008-1212082834012919-8
Para o-melhor-amigo-o-melhor-pedao-mensagem-do-dia-16052008-1212082834012919-8
Sizenando Presentepravoce
 
Era Un Esclavo Que Logró Salir Adelante
Era Un Esclavo Que Logró Salir AdelanteEra Un Esclavo Que Logró Salir Adelante
Era Un Esclavo Que Logró Salir Adelante
guest552b7e
 
Practical communications considerations for protection engineers
Practical communications considerations for protection engineersPractical communications considerations for protection engineers
Practical communications considerations for protection engineers
Jose J. Rodriguez Alvarez, MEM
 
4Q alltel 04_Highlights
4Q alltel  04_Highlights4Q alltel  04_Highlights
4Q alltel 04_Highlights
finance27
 
10 Step marketing Plan: Gian Tenorio
10 Step marketing Plan: Gian Tenorio10 Step marketing Plan: Gian Tenorio
10 Step marketing Plan: Gian Tenorio
Gio Tenorio
 
A Study of Automated Decision Making Systems
A Study of Automated Decision Making SystemsA Study of Automated Decision Making Systems
A Study of Automated Decision Making Systems
inventy
 

Viewers also liked (15)

Lição 26´As maldades da casa de Israel depois do Éxodo
Lição 26´As maldades da casa de Israel depois do ÉxodoLição 26´As maldades da casa de Israel depois do Éxodo
Lição 26´As maldades da casa de Israel depois do Éxodo
 
LIÇÃO 24- DEUS DESMASCARA OS FALSOS PROFETAS E OS IDÓLATRAS
LIÇÃO 24- DEUS DESMASCARA OS FALSOS PROFETAS E OS IDÓLATRASLIÇÃO 24- DEUS DESMASCARA OS FALSOS PROFETAS E OS IDÓLATRAS
LIÇÃO 24- DEUS DESMASCARA OS FALSOS PROFETAS E OS IDÓLATRAS
 
el cid
el cidel cid
el cid
 
aiv.cv
aiv.cvaiv.cv
aiv.cv
 
042 160126 Bookclub: INFOGRAFIS
042 160126 Bookclub: INFOGRAFIS042 160126 Bookclub: INFOGRAFIS
042 160126 Bookclub: INFOGRAFIS
 
Quando eu quero_falar_com_deus
Quando eu quero_falar_com_deusQuando eu quero_falar_com_deus
Quando eu quero_falar_com_deus
 
Adv 410 quiz 2
Adv 410 quiz 2Adv 410 quiz 2
Adv 410 quiz 2
 
Accolades: Sonja Moffett
Accolades: Sonja MoffettAccolades: Sonja Moffett
Accolades: Sonja Moffett
 
6 page ferrari eastern brochure
6 page ferrari eastern brochure6 page ferrari eastern brochure
6 page ferrari eastern brochure
 
Para o-melhor-amigo-o-melhor-pedao-mensagem-do-dia-16052008-1212082834012919-8
Para o-melhor-amigo-o-melhor-pedao-mensagem-do-dia-16052008-1212082834012919-8Para o-melhor-amigo-o-melhor-pedao-mensagem-do-dia-16052008-1212082834012919-8
Para o-melhor-amigo-o-melhor-pedao-mensagem-do-dia-16052008-1212082834012919-8
 
Era Un Esclavo Que Logró Salir Adelante
Era Un Esclavo Que Logró Salir AdelanteEra Un Esclavo Que Logró Salir Adelante
Era Un Esclavo Que Logró Salir Adelante
 
Practical communications considerations for protection engineers
Practical communications considerations for protection engineersPractical communications considerations for protection engineers
Practical communications considerations for protection engineers
 
4Q alltel 04_Highlights
4Q alltel  04_Highlights4Q alltel  04_Highlights
4Q alltel 04_Highlights
 
10 Step marketing Plan: Gian Tenorio
10 Step marketing Plan: Gian Tenorio10 Step marketing Plan: Gian Tenorio
10 Step marketing Plan: Gian Tenorio
 
A Study of Automated Decision Making Systems
A Study of Automated Decision Making SystemsA Study of Automated Decision Making Systems
A Study of Automated Decision Making Systems
 

Similar to Glow_rapport

course1-Intrduction-to-the-game-industry.pdf
course1-Intrduction-to-the-game-industry.pdfcourse1-Intrduction-to-the-game-industry.pdf
course1-Intrduction-to-the-game-industry.pdf
BoubakerMedanas
 
Introduction to Game Programming: Using C# and Unity 3D - Chapter 2 (Preview)
Introduction to Game Programming: Using C# and Unity 3D - Chapter 2 (Preview)Introduction to Game Programming: Using C# and Unity 3D - Chapter 2 (Preview)
Introduction to Game Programming: Using C# and Unity 3D - Chapter 2 (Preview)
noorcon
 
The complete srs documentation of our developed game.
The complete srs documentation of our developed game. The complete srs documentation of our developed game.
The complete srs documentation of our developed game.
Isfand yar Khan
 
Game design document - BadBug Studio - Xbox Game
Game design document - BadBug Studio - Xbox GameGame design document - BadBug Studio - Xbox Game
Game design document - BadBug Studio - Xbox Game
UTC Fire & Security
 
Street runner final
Street runner finalStreet runner final
Street runner final
Kumar Narayan
 
COMP521-report
COMP521-reportCOMP521-report
COMP521-report
Minjoo Cha
 
intern.pdf
intern.pdfintern.pdf
intern.pdf
cprabhash
 
daryl bates engine terminology finished
daryl bates engine terminology finisheddaryl bates engine terminology finished
daryl bates engine terminology finished
DarylBatesGames
 
Educational Game Design Thesis
Educational Game Design ThesisEducational Game Design Thesis
Educational Game Design Thesis
Cory Buckley
 
98 374 Lesson 03-slides
98 374 Lesson 03-slides98 374 Lesson 03-slides
98 374 Lesson 03-slides
Tracie King
 
Noughts and Crosses Specification
Noughts and Crosses SpecificationNoughts and Crosses Specification
Noughts and Crosses Specification
Christopher Orchard
 
Work Flow for 2D Game
Work Flow for 2D GameWork Flow for 2D Game
Work Flow for 2D Game
bowes96123
 
Project Report Tron Legacy
Project Report Tron LegacyProject Report Tron Legacy
Project Report Tron Legacy
Manpreet Singh
 
MIND GAME ZONE - Abhijeet
MIND GAME ZONE - AbhijeetMIND GAME ZONE - Abhijeet
MIND GAME ZONE - Abhijeet
Abhijeet Kalsi
 
Final Report
Final ReportFinal Report
Final Report
Yifan Zhai
 
Game UI Development_1
Game UI Development_1Game UI Development_1
Game UI Development_1
Felipe Ramos
 
Units 14, 15 Assignment brief
Units 14, 15 Assignment briefUnits 14, 15 Assignment brief
Units 14, 15 Assignment brief
Zaxapias
 
Shootemup report
Shootemup reportShootemup report
Shootemup report
Vivek Prasad
 
Arcanoid 3D
Arcanoid 3DArcanoid 3D
Arcanoid 3D
graphitech
 
How to create_your_own_android_app
How to create_your_own_android_appHow to create_your_own_android_app
How to create_your_own_android_app
Charo Cuart
 

Similar to Glow_rapport (20)

course1-Intrduction-to-the-game-industry.pdf
course1-Intrduction-to-the-game-industry.pdfcourse1-Intrduction-to-the-game-industry.pdf
course1-Intrduction-to-the-game-industry.pdf
 
Introduction to Game Programming: Using C# and Unity 3D - Chapter 2 (Preview)
Introduction to Game Programming: Using C# and Unity 3D - Chapter 2 (Preview)Introduction to Game Programming: Using C# and Unity 3D - Chapter 2 (Preview)
Introduction to Game Programming: Using C# and Unity 3D - Chapter 2 (Preview)
 
The complete srs documentation of our developed game.
The complete srs documentation of our developed game. The complete srs documentation of our developed game.
The complete srs documentation of our developed game.
 
Game design document - BadBug Studio - Xbox Game
Game design document - BadBug Studio - Xbox GameGame design document - BadBug Studio - Xbox Game
Game design document - BadBug Studio - Xbox Game
 
Street runner final
Street runner finalStreet runner final
Street runner final
 
COMP521-report
COMP521-reportCOMP521-report
COMP521-report
 
intern.pdf
intern.pdfintern.pdf
intern.pdf
 
daryl bates engine terminology finished
daryl bates engine terminology finisheddaryl bates engine terminology finished
daryl bates engine terminology finished
 
Educational Game Design Thesis
Educational Game Design ThesisEducational Game Design Thesis
Educational Game Design Thesis
 
98 374 Lesson 03-slides
98 374 Lesson 03-slides98 374 Lesson 03-slides
98 374 Lesson 03-slides
 
Noughts and Crosses Specification
Noughts and Crosses SpecificationNoughts and Crosses Specification
Noughts and Crosses Specification
 
Work Flow for 2D Game
Work Flow for 2D GameWork Flow for 2D Game
Work Flow for 2D Game
 
Project Report Tron Legacy
Project Report Tron LegacyProject Report Tron Legacy
Project Report Tron Legacy
 
MIND GAME ZONE - Abhijeet
MIND GAME ZONE - AbhijeetMIND GAME ZONE - Abhijeet
MIND GAME ZONE - Abhijeet
 
Final Report
Final ReportFinal Report
Final Report
 
Game UI Development_1
Game UI Development_1Game UI Development_1
Game UI Development_1
 
Units 14, 15 Assignment brief
Units 14, 15 Assignment briefUnits 14, 15 Assignment brief
Units 14, 15 Assignment brief
 
Shootemup report
Shootemup reportShootemup report
Shootemup report
 
Arcanoid 3D
Arcanoid 3DArcanoid 3D
Arcanoid 3D
 
How to create_your_own_android_app
How to create_your_own_android_appHow to create_your_own_android_app
How to create_your_own_android_app
 

Glow_rapport

  • 2. Glow Page 2 of 36 Summary 1 Introduction 3 2 Menus 4 2.1 Customizing the user interface . . . . . . . . . . . . . . . . . . . . 4 2.2 MenuHandler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 2.3 Main Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 2.4 Help Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 2.5 High Score Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 2.6 Options Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 2.7 Pause Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 2.8 Save Score Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 3 Game 9 3.1 Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 3.2 Physics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 3.3 Lighting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 3.4 Power-ups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 3.5 Level-design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 3.6 Scores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 4 Ressources 29 4.1 Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 4.2 Sounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 5 Distribution 30 6 Web Site 31 7 Conclusion 32 Appendices 33 A Meaning of the colored lines 33 CHADY DIMACHKIE 2 MORAY BARUH
  • 3. Glow Page 3 of 36 1 Introduction For our Advanced Programming course in Bahçe¸sehir University, we were asked to create a brick breaker game in Java. This project is a mean for us to develop our programming skills as well as our way of thinking out of the box to be able to resolve any problem asked. We used our skills ranging from programming, mathematics, all the way to our communication skills for the promotion of this game. Our group, composed of Chady DIMACHKIE and Moray BARUH, created the game we named Glow. Even though a brick breaker game is usually referred to as "retro" and is one of the first computer games, we decided to add some twist that new technology provides resulting in a more colorful and new-looking game. In this report, we will be presenting every aspects of the game, as well as the technicals details relative to methods we have developed throughout our time making the game. <3 CHADY DIMACHKIE 3 MORAY BARUH
  • 4. Glow Page 4 of 36 2 Menus The menus are one of the main element in a game since it is the first visual impression of the game and helps the user navigate through the different features. 2.1 Customizing the user interface As our project is a game, we can’t afford using Swing’s default buttons and text fields as they are. For that purpose, we created customized buttons and text fields which will fulfil our needs. 2.1.1 Buttons For a game, buttons must have an image to have an appeal. In order to do that, our custom buttons has images and sound effects. We achieve this by inheriting from the JButton class, setting an image and adding a MouseListener to play sound effects and change the image when the user hoovers or clicks the button. FIGURE 1 – Button images On rest (left) and on mouse hoover (right). 2.1.2 Text Fields A placeholder in text fields is a string that displays usually in a light-gray color in the text field and disapears when the user clicks. It is used to give the user a hint about what should be written in that field. Although, Swing’s native text fields doesn’t support a placeholder. That’s why we needed to customize the native text field. We achieved to have a text field supporting a placeholder by overriding the PainComponent method in our custom text fields CHADY DIMACHKIE 4 MORAY BARUH
  • 5. Glow Page 5 of 36 and calling the Graphics2D#drawString(String str, int x, int y) method when the placeholder text should be drawn. 2.2 MenuHandler For easing the process of switching between different menus, we have created the MenuHandler class, which contains the main JFrame object that displays the game. After some research about different types of layouts, we have found CardLayout to be the best choice for our case. The CardLayour can set up multiple JPanel objects, (different menus for our case) and show them when asked. Our menus, therefore, became subclasses of JPanel objects. Another role of the MenuHandler class is to setup and run the frame. With all these implemented, the main function for our project became just one line : new MenuHandler().run(); One more issue was to setup a full screen window for our game. We just used the GraphicsDevice#setFullScreenWindow(Window w) function at start, but after some testing on different platforms, we figured out that only calling that function doesn’t work on all of them. Therefore, we had to use different code in order to setup the full screen according to the operating system used. 2.3 Main Menu The main menu is the first menu the user sees when launching the game. It consists of five different buttons : — Play : Starts the game. — Help : Opens the help menu. — High Scores : Opens the high scores menu. — Options : Opens the options menu. — Exit : Exits the game. CHADY DIMACHKIE 5 MORAY BARUH
  • 6. Glow Page 6 of 36 FIGURE 2 – Main Menu 2.4 Help Menu The help menu is a simple menu created to help the user understand the game’s rules. FIGURE 3 – Help Menu 2.5 High Score Menu The high score menu is where the high scores are displayed. It contains two JTable objects where the scores are displayed : one for scores saved on the local drive, one for scores saved on our database (cf. 3.6). By one click, the user can delete scores on the local disk, or refresh the scores from our database. CHADY DIMACHKIE 6 MORAY BARUH
  • 7. Glow Page 7 of 36 FIGURE 4 – High Score Menu 2.6 Options Menu The options menu is designed to give the user the possibility to change the volume of the game. One can change the value of two JSlider to set the music or sound effect volume for the game. The preferences are saved as the values are modified by using Java’s native Preferences class which provides utilities to set/read simple user settings data to to/from the local disk. FIGURE 5 – Options Menu CHADY DIMACHKIE 7 MORAY BARUH
  • 8. Glow Page 8 of 36 2.7 Pause Menu The pause menu is the menu that appears when the game gets paused by pressing the escape button. The pause menu has four different buttons : — Resume : Unpauses the game — New Game : Finishes the current game and starts a new one. — Options : Opens the options menu. — Main Menu : Opens the main menu. FIGURE 6 – Pause Menu 2.8 Save Score Menu The save score menu is shown to the user when the game is over. It is a screen to show the user its score and asks if he wants to save it. It contains a placeholder text field and two check boxes to give the option to enter his name and save his score on local and/or on our database. FIGURE 7 – Save Score Menu CHADY DIMACHKIE 8 MORAY BARUH
  • 9. Glow Page 9 of 36 3 Game 3.1 Elements In a break breaker game, there usually are several components such as bricks, a ball, a paddle and walls. In attempt to achieve a highly structured game, we created each game objects as inheriting from a basic "Element" class containing enough information that it could have an associated basic shape representing it, thus enabling it to be eventually drawn on screen. 3.1.1 Bricks The bricks are the elements supposed to be broken by a ball thrown toward it. As being game "elements", they naturally have the previously told properties as well as some particularities. These elements have an associated coordinate position, a color and are eventually drawn with a gradient effect. The bricks are initially loaded via our level loader and are placed in a list of elements that is used to keep track of them when it comes to updating their state (broken or not), applying our lighting algorithm (which make each brick cast a shadow) and finally, drawing them on screen. Bricks can also pop a bonus once in while during the game. FIGURE 8 – A brick 3.1.2 Ball The ball is an important element, as it is the one with which the bricks can be broken. It extends the "Element" class in such a way that it has its own physics algorithm tweaked to be as comfortable as possible. It also has a radius and a speed which can change depending on which bonus you get. CHADY DIMACHKIE 9 MORAY BARUH
  • 10. Glow Page 10 of 36 As the ball is the center of attention in our game, it is also the only element that casts light to its surrounding enabling the player to see a part of the environment he is playing in. FIGURE 9 – The ball 3.1.3 Paddle The paddle is also very important as it enables the player to control the ball and somewhat influence its trajectory. It is an "Element" that can only move on its X coordinate while being fixed on its Y-axis. It is controlled by the mouse using a MouseMotionListener provided by the API. The paddle is the element with which you can take the bonuses. Depending on some of them, you can change the paddle’s width to a certain extent. FIGURE 10 – The Paddle 3.1.4 Walls The walls are the limit of your screen. They allow the ball to bounce on them and can be used as part of brick breaking strategies. They are also the limit within which the paddle can freely move. Although they are not derived from the "Element" class, they interact with such elements. 3.2 Physics For a break breaker game to be successful and enjoyable by the end-user, there need to be a physics that is particularly taken care of. Such a physic CHADY DIMACHKIE 10 MORAY BARUH
  • 11. Glow Page 11 of 36 handling includes the way the ball behave while in mid-air, as well as when there is a collision either with bricks, walls or the paddle. Following such an intent, we worked on delivering the best experience possible for the game to feel enjoyable. 3.2.1 Ball physics The ball has two axis on which it has a certain freedom of move. The way it is going to take a particular direction is driven by the velocity. The velocity determines by how much the ball moves on each axis, each unit of time. It is defined as such : Velocity = (vx, xy) Depending on the sign of the vx and vy values, the ball can go in every possible direction until it hits an element and thus a collision is triggered, thus changing the ball’s velocity. This means that the position of the ball is updated as such : Position = (x+vx ∗speedMultipliyer, y+vy ∗speedMultipliyer) Where speedMultiplier ∈ R∗ + is a value used to change the speed velocity according to the bonuses taken. It is initialized to 1 at the beginning of the game. 3.2.2 Collision Collisions occur when the ball hits another game element. It results in a change of the ball’s velocity for it to bounce off of the element with which it collided. Of course, to be able to deliver the best experience possible, the collisions behave differently depending on the collided element. 3.2.2.a Detect a collision Before having the ball behave according to a collision, we need to detect it along with its point of happening. There are 4 sides to an element that we denote in the following way : We just have to check if the ball’s coordinates are within a certain range of the collied element’s coordinates. CHADY DIMACHKIE 11 MORAY BARUH
  • 12. Glow Page 12 of 36 FIGURE 11 – A brick’s collision sides So, for the south side, we check this : if (ballCenter.x >= collided.x && ballCenter.x <= collided.getMaxX() && ball.getMinY() <= collided.getMaxY() && ballCenter.y >= collided.getMaxY()) For the north side : if (ballCenter.x >= collided.x && ballCenter.x <= collided.getMaxX() && ball.getMaxY() >= collided.getMinY() && ballCenter.y <= collided.getMinY()) For the east side : if (ballCenter.x <= collided.x && ballCenter.y <= collided.getMaxY() && ball.getMaxX() >= collided.x && ballCenter.y >= collided.getMinY()) For the west side : if (ball.x <= collided.MaxX() && ballCenter.y <= collided.getMaxY() && ball.getMaxX() <= collided.x && ballCenter.y >= collided.getMinY()) CHADY DIMACHKIE 12 MORAY BARUH
  • 13. Glow Page 13 of 36 Thus, we know the side of collision. We do a similar operation for walls as they are the just the sides of the screen, it is easier. 3.2.2.b Bricks collision When the ball hits a brick, we iterate through our bricks list to get which one is colliding with the ball. Once this is done, we save the collision point (which we use when popping bonuses), we remove the brick from the list and change the ball’s velocity according to the side of the collision. We want the ball to deflect with the same angle it came with, but in the another direction it came from. So, we do as follow : If the collision is at the north side or the south side : Velocity = (x, −y) Or, if the collision is at the east side or the west side : Velocity = (−x, y) And, if it is in diagonal : Velocity = (−x, −y) Of course, with this method, the ball can bounce indefinitely if either of the component of the velocity is null. If this is the case, we just add a small random offset to the null component so that the player is not stuck and is not in the obligation to lose a life point on purpose. 3.2.2.c Paddle collision If we collide with the paddle, we want to give the user a minimum of a sense of control when it comes to deflecting back the ball. So if we had used the same collisions as with the bricks, the user would have had to go all the way to the left if he wanted the ball to go back right, for instance. To do so, we compute a "factor" based on the distance of collision on the paddle from its center : Factor = collisionWithPaddle.x − paddleCenter.x In our game, the factor’s maximum possible value divided by 2, is −90, and, if vx velocity component is superior to 0, the velocity on the north and south side become : CHADY DIMACHKIE 13 MORAY BARUH
  • 14. Glow Page 14 of 36 Velocity = (−x, −y) if vx <= 0 : Velocity = (x, −y), and we add the factor to the vx com- ponent so that the angle of deflection changes depending on the position of the ball on the paddle. And, to add some difficulty, the collision on the sides change vx to −vx, so that, if you hit the ball with the side of the paddle, the ball falls and you lose a life point. And we also handle the infinite bounce case like explained for the bricks collisions. 3.2.2.d Walls collisions The walls being the limit of the ball’s freedom of movement, we need to react to their collision. To do so, we check the position of the ball according to the screen’s height and width in pixels and we use the same behavior for all sides, except for the bottom side which happens to be where the ball falls and decreases the player’s life point. 3.3 Lighting Being people who like very polished and fancy-looking graphics, we decided to work on a method that would enable this. We decided to bring dynamic lighting effects in our game for the greatest pleasure of our player’s sight. Having to work with an API designed to use the CPU in almost every layer is a major drawback to make a very good-looking game. Even though, we overcame this while preserving a decent level of performance through many optimizations. 3.3.1 Computation Having quite a few experiences with lighting computation and rendering techniques on GPU, we worked on getting a somewhat similar effect on the CPU, which absolutely isn’t made for such computations. CHADY DIMACHKIE 14 MORAY BARUH
  • 15. Glow Page 15 of 36 Our effect works on the bricks and the paddle, with the ball being the light casting element. To simplify the rendering as much as possible, we decided to approximate each primitive shapes (like squares, rectangles) with a square’s containing sphere. Which means that we need to cut rectangles into several squares (with a 10% error margin on the sides’ lengths) for the effect to work. To do so, we compute the circle’s radius based on the square’s width : Radius = Square.width/2 Then, we compute the circle’s center based on the square’s vertices’s coordinates : CircleCenter = (Square.x + Radius, Square.y + Radius) With that, we can now get the ball’s direction from the circle’s center : BallDirection = (CircleCenter.x−BallCenter.x, CircleCenter.y− BallCenter.y) Now, for optimizations purposes (and for the effect to be good-looking), we compute the current square’s distance from the ball’s center, and if it is superior, we discard it and do not apply lighting on it. We do it this way : Distance = (BallDirection2.x + BallDirection.y2) After that, we need to normalize our BallDirection vector, so that we can use it to create our light’s polygon. We do it this way : NormalizedVector = (BallDirection.x/Distance, BallDirection.y/Distance) Then, we compute the perpendicular to the normalized vector : PerpendicularVector = (−NormalizedVector.y, NormalizedVector.x) We use this vector so that we can have somewhat of an offset from the center around the radius. CHADY DIMACHKIE 15 MORAY BARUH
  • 16. Glow Page 16 of 36 FIGURE 12 – Perpendicular vector offset So, around the approximated circle’s radius, we put two opposite points that will be used to create the final polygon for our light : FirstPoint = (CircleCenter.x − PerpendicularVector.x ∗ Radius, CircleCenter.y − PerpendicularVector.y ∗ Radius) And the second, "opposite" point on the radius : SecondPoint = (CircleCenter.x+PerpendicularVector.x∗Radius, CircleCenter.y + PerpendicularVector.y ∗ Radius) FIGURE 13 – First and Second Points After all this, we need to compute the last two polygon’s points’ coordi- nates. We will compute the distance from the ball to the First and Second points : CHADY DIMACHKIE 16 MORAY BARUH
  • 17. Glow Page 17 of 36 DistanceFirstPoint = (FirstPoint.x−ballCenter.x, FirstPoint.y− ballCenter.y) DistanceSecondPoint = (SecondPoint.x−ballCenter.x, SecondPoint.y− ballCenter.y) And the lengths are : LengthFirstPoint = (DistanceFirstPoint.x2 + DistanceFirstPoint.y2) LengthSecondPoint = (DistanceSecondPoint.x2 + DistanceSecondPoint.y2) We compute the normalized vector again : FirstNormalized = (DistanceFirstPoint.x/LengthFirstPoint, DistanceFirstPoint.y/LengthFirstPoint SecondNormalized = (DistanceSecondPoint.x/LengthSecondPoint, DistanceSecondPoint.y/LengthSecondPoint And we multiply each components by the lighting intensity factor that defines how far goes the projected lighting effect : FirstNormalized = (FirstNormalized.x∗factor, FirstNormalized.y∗ factor) FirstNormalized = (FirstNormalized.x∗factor, FirstNormalized.y∗ factor) Finally, we can have our last two points which coordinates begin from the First and Second points till farther from the square in an opposed directed as that of the ball : ThirdPoint = (FirstPoint.x + FirstNormalized.x, FirstPoint.y + FirstNormalized.y) FourthPoint = (SecondPoint.x+SecondNormalized.x, SecondPoint.y+ SecondNormalized.y) Then, we use the API’s embedded functions to create the polygon very easily and we’re finished. So, this is what the lighting polygon looks like after computation conside- ring all the previous parameters : CHADY DIMACHKIE 17 MORAY BARUH
  • 18. Glow Page 18 of 36 FIGURE 14 – Lighting Polygon Because we like to improve and get the best result out of our work, we decided to add a fading and gradient effect to the lighting via the help of the API. So, thanks to the "SetPaint" method of the "Graphics2D" objects, we can use our custom made gradient painting to give a smooth and polished lighting effect as follows : FIGURE 15 – Final result CHADY DIMACHKIE 18 MORAY BARUH
  • 19. Glow Page 19 of 36 3.3.2 Optimization As stated previously, we are working with an API that is absolutely inef- ficient when it comes to its graphics rendering capabilities. In this sense, we tried many methods to optimize the frame rate to keep the game as smooth as possible. To do so, we first tried modifying the "RenderingHints" provided by the "Graphics2D" object to tell it that we need a faster rendering, be it at the expense of some anti-aliasing. As subtle as it could be, the changes weren’t drastic enough. In this sense, we developed a method of dynamic clip space. This method enable the CPU and GPU to only compute items visible to them in a certain area that is way smaller than that of the actual screen. This means a frame rate that is drastically improved while keeping the lighting effect quality at its best. The clip space being only a square (limitation of the API), we added a mask that gave the effect of a circle and we made it follow the clip space’s dynamic coordinates. FIGURE 16 – Lighting Mask CHADY DIMACHKIE 19 MORAY BARUH
  • 20. Glow Page 20 of 36 3.4 Power-ups The power-ups are bonuses or penalties which appears by chance when a brick gets broken. The player should only catch bonuses and avoid penalty power-ups in order to make the game easier. Most of the power-ups start dropping from the brick that got broken and become active when the user touches it with the paddle. We have implemented power-ups using an abstract class which contains only three methods : public void draw(Grphics2D g) public int update(Game game, float dt) public abstract int run(Game game); The logic behind power-ups is based on the game loop which first updates (computes logic calculations) and draws game elements accordingly. Therefore, for each power-up we call update and then draw at each frame. The run method is used by update when the user catches the power-up and it is overridden by the subclasses according to the power-up. 3.4.1 Explosion The explosion power-up, the only power-up that activates itself without the user having to do anything, creates an explosion that destroys other bricks in a certain range. 3.4.2 Paddle size Two power-ups changes the size of the paddle. The enlarge power-up, enlarges, whereas the shrink power-up shrinks down the size of the paddle. To avoid the paddle from being too small or too large, we limit the size of the paddle from each side, and when the limit is reached, the power-ups have no more effects unless the paddle size changes. 3.4.3 Ball speed Another example for bonus and penalty power-up couple is the fast forward and fast backward power-ups. These power-ups changes the speed of the ball CHADY DIMACHKIE 20 MORAY BARUH
  • 21. Glow Page 21 of 36 by respectively increasing and decreasing it. Like the enlarge and shrink power- ups, the fast forward and fast backward power-ups have no effects once the ball has reached the lower or higher speed limit. 3.4.4 Extra Life The extra life power-up is one of the most valuable power-ups in our game. When picked, this power-up will grant an extra life to the user, giving him an extra chance when he would normally be out of life. FIGURE 17 – Power-ups From left to right : explosion, enlarge, extra life, fast backward, shrink, fast forward. 3.5 Level-design The level-design is one of the most important part of games. Any game’s challenge is based on how the level is designed, and especially, for a brick breaker game, the level-design has to be creative to catch the user’s attention. To simplify tasks and save time, we decided to load levels from text files where all the information would be written. The text files have the following format : x0 y0 [n0] x1 y1 [n1] . . . xm ym [nm] where (xi, yi) ∈ N2 is the position of the brick in the Cartesian coordinate system of the computer screen and ni ∈ N∗ is the optional number of succes- sive bricks on the x axis (one if not precised). Blank lines are also supported for purpose of organization. The process of loading is pretty simple : CHADY DIMACHKIE 21 MORAY BARUH
  • 22. Glow Page 22 of 36 while document has unprocessed lines do line ← nextline args ← line split with space character if args’ length is geater then 2 then n ← args[3] else n ← 1 end i ← 0 while i < n do Create a brick with (x + i * brickWidth, y) coordinates i ← i + 1 end end Algorithm 1: Loading bricks from text file Of course, the algorithm above assumes that the text file is has a valid format. For example, the first few lines of the text document corresponding to the first level is as follow : CHADY DIMACHKIE 22 MORAY BARUH
  • 23. Glow Page 23 of 36 50 50 5 170 50 5 290 50 5 410 50 5 530 50 5 650 50 5 770 50 5 890 50 5 1010 50 5 1130 50 5 FIGURE 18 – Level 1 text file example FIGURE 19 – Level 1 FIGURE 20 – Level 2 CHADY DIMACHKIE 23 MORAY BARUH
  • 24. Glow Page 24 of 36 FIGURE 21 – Level 3 FIGURE 22 – Level 4 FIGURE 23 – Level 5 3.6 Scores Scores are a way to challenge and help the user track its progress while playing the game. They are composed of a name (or nickname) identifying the user who got that score and the actual score the user scored. Each broken brick gives ten points to the player and when the game is over, the user is asked whether he wants to save his score or not. We have implemented two types of scores for our game : local scores and online scores. CHADY DIMACHKIE 24 MORAY BARUH
  • 25. Glow Page 25 of 36 3.6.1 Local Scores Local scores are scores saved on the local disk of the computer, each user has a different set of local scores. They are saved the same way as options are. Although as the Preferences class in java doesn’t support storing user-defined data types (like our scores), we are serializing the scores into String objects before saving and deserializing from Strings as we are loading. 3.6.2 Online Scores Online scores are scores stored on our MySQL database, showing scores from users all around the world. The download and upload process of these scores are done by sending an HTTP POST request to a PHP script on our server. The PHP script will access the database, do the adequate operation (add a score or retrieve them) and send back a response. POST /get_scores.php HTTP/1.1 Host: glow.ed-fame.com username=yourUsername&password=yourPassword FIGURE 24 – HTTP POST request example to retrieve scores CHADY DIMACHKIE 25 MORAY BARUH
  • 26. Glow Page 26 of 36 In the case of downloading the scores, the PHP script’s response will be a string serialized with the JSON serialization. Since Java doesn’t have a native JSON deserialization algorithm, he had to create one. By researching the JSON standard, we came up with a simple algorithm which can easily parse our score objects from JSON serialized strings. CHADY DIMACHKIE 26 MORAY BARUH
  • 27. Glow Page 27 of 36 <?php $con = mysqli_connect("edfamecom.ipagemysql.com", $username, $password, "mega_desert_bricks"); $username = mysqli_real_escape_string($con, $_GET["username"]); $password = mysqli_real_escape_string($con, $_GET["password"]); if (mysqli_connect_errno()) { echo "Failed to connect to MySQL: " . mysqli_connect_error(); } $sql = "SELECT * FROM HighScores"; if ($result = mysqli_query($con, $sql)) { $resultArray = array(); $tempArray = array(); while($row = $result->fetch_object()) { $tempArray = $row; array_push($resultArray, $tempArray); } echo json_encode($resultArray); } mysqli_close($con); ?> Algorithm 2: PHP script to retrieve scores from database CHADY DIMACHKIE 27 MORAY BARUH
  • 28. Glow Page 28 of 36 <?php $con = mysqli_connect("edfamecom.ipagemysql.com", $_POST["username"], $_POST["password"], "mega_desert_bricks"); if (!$con) { print "Failed to connect to MySQL: " . mysqli_connect_error(); echo "0"; } $name = mysqli_real_escape_string($con, $_POST[’name’]); $score = mysqli_real_escape_string($con, $_POST[’score’]); $sql_cmd = "INSERT INTO HighScores (Name, Score) VALUES (’$name’, ’$score’)"; if(!mysqli_query($con, $sql_cmd)) { die("Error: ". mysqli_error($con)); echo "-1"; } print "1 record added"; mysqli_close($con); echo "1"; ?> Algorithm 3: PHP script to add a score to database CHADY DIMACHKIE 28 MORAY BARUH
  • 29. Glow Page 29 of 36 4 Ressources 4.1 Images Images is one of the most important part of a game. They add character, spirit and design to the game. Our project uses images for multiple purposes : background images, button images, images for power-ups and the paddle. The images used in multiple classes are hold in the ImageFactory class as static variables in order to load them once from the disk and have easier access to them. 4.2 Sounds Sounds, like images are also important to give spirit and action to the game. We use sounds for buttons, background music and the explosion sound effect in our project. Sounds are played using the Clip class from Java. The background music can be looped and sound effects can be just played once. CHADY DIMACHKIE 29 MORAY BARUH
  • 30. Glow Page 30 of 36 5 Distribution Java is one of the most used and supported cross-platform programming language in the world. With that being said, we couldn’t just stop by only creating a classical jar file. We think that the user has to see a native application to their operating system (.exe for Windows, .app for Mac OS X and .sh for Linux). That’s why we have created three native installer files for each operating system by the help of Install4j, a software by ej-technologies. Those installers set up the files needed to run the project in a correct way for each operating system. Of course, it is not possible to convert Java code into native binaries but the installer creates those native binaries that the user will use to launch the game and the launchers will run the jar file discretely on back-end, giving the feel to the user that he is interacting only with native executables. FIGURE 25 – Install4j logo CHADY DIMACHKIE 30 MORAY BARUH
  • 31. Glow Page 31 of 36 6 Web Site How can you distribute your project worldwide without having a website ? Our website is a simple single-page design inspiring curiosity on our project and supplying download links for each platform’s installer. It has a responsive design and scales according to the web browser’s size. You can visit our web page at http ://www.glow.ed-fame.com. FIGURE 26 – First look on our website CHADY DIMACHKIE 31 MORAY BARUH
  • 32. Glow Page 32 of 36 7 Conclusion While doing this project, we learned many different aspects, specially about Java programming. Since this was our first project using Java, we had to learn the Java2D and Swing APIs to be able to create this project. Another challenge for us was the limitation to use third party libraries which would be the correct way to create games. Without the use of game libraries, we can’t use the opportunities the GPU has to offer resulting in much longer computation time for graphical rendering. Therefore, we had to optimize our algorithms as much as we could in order to achieve a descent frame rate for our game, which improved our skills in that field of programming. All these challenges were accepted and resulted in Glow, a game we are glad to have created and will be glad to talk about in the future. CHADY DIMACHKIE 32 MORAY BARUH
  • 33. Glow Page 33 of 36 Appendices A Meaning of the colored lines Each part of this has a colored line which represents the student who did this part. The colors are given the following way : Chady DIMACHKIE Moray BARUH There is also a color that represents the group as a whole : Group CHADY DIMACHKIE 33 MORAY BARUH
  • 34. Glow Page 34 of 36 Table of figures 1 Button images . . . . . . . . . . . . . . . . . . . . . . . . . . 4 2 Main Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 3 Help Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 4 High Score Menu . . . . . . . . . . . . . . . . . . . . . . . . 7 5 Options Menu . . . . . . . . . . . . . . . . . . . . . . . . . . 7 6 Pause Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 7 Save Score Menu . . . . . . . . . . . . . . . . . . . . . . . . 8 8 A brick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 9 The ball . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 10 The Paddle . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 11 A brick’s collision sides . . . . . . . . . . . . . . . . . . . . . 12 12 Perpendicular vector offset . . . . . . . . . . . . . . . . . . . 16 13 First and Second Points . . . . . . . . . . . . . . . . . . . . . 16 14 Lighting Polygon . . . . . . . . . . . . . . . . . . . . . . . . 18 15 Final result . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 16 Lighting Mask . . . . . . . . . . . . . . . . . . . . . . . . . . 19 17 Power-ups . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 18 Level 1 text file example . . . . . . . . . . . . . . . . . . . . 23 19 Level 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 20 Level 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 21 Level 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 22 Level 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 23 Level 5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 24 HTTP POST request example to retrieve scores . . . . . . . . 25 25 Install4j logo . . . . . . . . . . . . . . . . . . . . . . . . . . 30 26 First look on our website . . . . . . . . . . . . . . . . . . . . 31 CHADY DIMACHKIE 34 MORAY BARUH
  • 35. Glow Page 35 of 36 Table of content 1 Introduction 3 2 Menus 4 2.1 Customizing the user interface . . . . . . . . . . . . . . . . . 4 2.1.1 Buttons . . . . . . . . . . . . . . . . . . . . . . . . . 4 2.1.2 Text Fields . . . . . . . . . . . . . . . . . . . . . . . 4 2.2 MenuHandler . . . . . . . . . . . . . . . . . . . . . . . . . . 5 2.3 Main Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 2.4 Help Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 2.5 High Score Menu . . . . . . . . . . . . . . . . . . . . . . . . 6 2.6 Options Menu . . . . . . . . . . . . . . . . . . . . . . . . . . 7 2.7 Pause Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 2.8 Save Score Menu . . . . . . . . . . . . . . . . . . . . . . . . 8 3 Game 9 3.1 Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 3.1.1 Bricks . . . . . . . . . . . . . . . . . . . . . . . . . . 9 3.1.2 Ball . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 3.1.3 Paddle . . . . . . . . . . . . . . . . . . . . . . . . . . 10 3.1.4 Walls . . . . . . . . . . . . . . . . . . . . . . . . . . 10 3.2 Physics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 3.2.1 Ball physics . . . . . . . . . . . . . . . . . . . . . . . 11 3.2.2 Collision . . . . . . . . . . . . . . . . . . . . . . . . 11 3.2.2.a Detect a collision . . . . . . . . . . 11 3.2.2.b Bricks collision . . . . . . . . . . . 13 3.2.2.c Paddle collision . . . . . . . . . . . 13 3.2.2.d Walls collisions . . . . . . . . . . . 14 3.3 Lighting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 3.3.1 Computation . . . . . . . . . . . . . . . . . . . . . . 14 3.3.2 Optimization . . . . . . . . . . . . . . . . . . . . . . 19 3.4 Power-ups . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 CHADY DIMACHKIE 35 MORAY BARUH
  • 36. Glow Page 36 of 36 3.4.1 Explosion . . . . . . . . . . . . . . . . . . . . . . . . 20 3.4.2 Paddle size . . . . . . . . . . . . . . . . . . . . . . . 20 3.4.3 Ball speed . . . . . . . . . . . . . . . . . . . . . . . . 20 3.4.4 Extra Life . . . . . . . . . . . . . . . . . . . . . . . . 21 3.5 Level-design . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 3.6 Scores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 3.6.1 Local Scores . . . . . . . . . . . . . . . . . . . . . . 25 3.6.2 Online Scores . . . . . . . . . . . . . . . . . . . . . . 25 4 Ressources 29 4.1 Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 4.2 Sounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 5 Distribution 30 6 Web Site 31 7 Conclusion 32 Appendices 33 A Meaning of the colored lines 33 CHADY DIMACHKIE 36 MORAY BARUH