Schöner machen
Um unser Game noch etwas aufzupeppeln, habe ich ein paar weitere Sprites vorbereitet. Ladet sie euch runter und kopiert sie in den drawable Ordner, ersetzt dabei die alten Spritesheetbilder mit den neuen.
[image img_id=”6352″]
[image img_id=”6229″]
[image img_id=”6231″]
[image img_id=”6241″]
[image img_id=”6243″]
[image img_id=”6285″]
Achtet bitte darauf, dass ihr die Namen der Bilddateien an eurem Code anpassen müsst, sofern diese nicht identisch sind.
Zunächst löschen wir den Textview unserer splash.xml und setzten als Hintergrund das Bild splashscreen.
Dann setzen wir das Bild gameover.png als Hintergrund unserer gameoverscreen.xml und ersetzen die beiden Button durch ImageButton, wobei wir die Bilder retry und button als Hintergründe für die Imagebutton verwenden. Die beiden ImageButton setzen wir auf ein Relativelayout jeweils unten rechts und links ein. Dann müsst ihr noch, Zentral mit einer von euch gewünschten Höhe, den TextView platzieren. Nicht vergessen die ids der Button anzupassen und zusätzlich in der GameOverActivity Button durch ImageButton zu ersetzen.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" android:background="@drawable/gameover">
<TextView
android:id="@+id/tvScore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="54dp"
android:text="-"
android:textAppearance="?android:attr/textAppearanceLarge" android:textSize="35dp"/>
<ImageButton
android:id="@+id/bReplay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" android:background="@drawable/retrybutton"/>
<ImageButton
android:id="@+id/bExit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true" android:background="@drawable/exitbutton"/>
</RelativeLayout>
Als nächstes führen wir ein paar kleine Änderungen an unserer GameView Klasse durch.
Dazu brauchen wir die globalen Variablen:
private Bitmap backgroundred, backgroundblue, backgroundyellow, backgroundgreen;
Die wir im Konstruktor initialisieren müssen:
backgroundblue = BitmapFactory.decodeResource(getResources(), R.drawable.backgroundblue);
backgroundred = BitmapFactory.decodeResource(getResources(), R.drawable.backgroundred);
backgroundgreen = BitmapFactory.decodeResource(getResources(), R.drawable.backgroundgreen);
backgroundyellow = BitmapFactory.decodeResource(getResources(), R.drawable.backgroundyellow);
Dann müssen wir noch ein Objekt vom Typen RectF global anlegen und RectF importieren…
private final RectF rectF = new RectF();
… um es in der drawBackground() Methode (siehe unten) zu verwenden.
Als nächstes ersetzen wir die Methode drawLines() durch:
public void drawBackground(Canvas canvas){
rectF.set(0, 0, getMeasuredWidth(), getMeasuredHeight());
if (currentColorNum == 0) {
canvas.drawBitmap(backgroundblue, null, rectF, null);
currentColor=paintBlue;
} else if (currentColorNum == 1) {
canvas.drawBitmap(backgroundred, null, rectF, null);
currentColor=paintRed;
} else if (currentColorNum == 2) {
canvas.drawBitmap(backgroundgreen, null, rectF, null);
currentColor=paintGreen;
} else if (currentColorNum == 3) {
canvas.drawBitmap(backgroundyellow, null, rectF, null);
currentColor=paintYellow;
}
}
Und rufen diese Methode am Anfang der (in früheren Versionen hieß es noch onDraw() Methode auf. Dabei wird abhängig von der currentColorNum (also unserer Farbennummer), der passende Hintergrund gewählt.
Dabei erzeugen und verwenden wir rectF damit das Bild, egal wie groß(welche Auflösung) der Bildschirm des Smartphones auf dem das Spiel läuft ist, auf den ganzen Bildschirm gezogen/gestaucht wird.
Außerdem dürfen wir nicht vergessen die if Abfragen für den Aufruf von drawLines in unserer (in früheren Versionen hieß es noch onDraw() Methode zu löschen und die Zeile in der wir die Hintergrundfarbe gemalt haben durch den Aufruf von drawBackground(canvas); zu überschreiben.
Da die Anordnung der Richtungen der Sprites auf dem Spritesheet nun andere sind, müssen wir in unserer Klasse Sprite noch den Array mit folgenden werten ersetzen:
private int[] DIRECTION_TO_SPRITE_SHEET = { 3, 1, 2, 0 };
Beim Testen der App ist mir noch ein kleiner Fehler aufgefallen, den wir beheben können, indem wir die onPause() Methode unserer GameActivity mit folgendem Code überschreiben:
@Override
protected void onPause() {
super.onPause();
theGameView.pauseThread();
firstStart = false;
if (mpBackground != null) {
mpBackground.release();
}
if (onPauseSecondTime == false) {
starttime = System.currentTimeMillis();
onPauseSecondTime = true;
}
}
Dann müssen wir noch zwei kleine Bugs beheben, die mir aufgefallen sind. Am einfachsten kriegen wir das über ein Workaround hin.
Erzeugt dazu eine gobale Variable:
private boolean gameOver = false;
Setzt diese Variable dann auf true in der onGameOver() Methode.
Als nächstes fügen wir die Abfrage ob gameOver false ist in der dialogState() Methode ein:
public void dialogState() {
if (dialogIsActive) {
dialog.hide();
dialogIsActive = false;
theGameView.setTransparency(false);
pauseTime = System.currentTimeMillis() - starttime + pauseTime;
theGameView.resumeThread();
onPauseSecondTime = false;
} else if (!dialogIsActive) {
theGameView.setTransparency(true);
if(!gameOver)
dialog.show();
dialogIsActive = true;
starttime = System.currentTimeMillis();
onPauseSecondTime = true;
}
}
Überarbeitet die onPause() Methode bitte noch, sodass sie folgendermaßen aussieht.
@Override
protected void onPause() {
super.onPause();
theGameView.pauseThread();
firstStart = false;
if (mpBackground != null) {
mpBackground.release();
}
if (onPauseSecondTime == false) {
starttime = System.currentTimeMillis();
onPauseSecondTime = true;
}
}
Wir brauchen mpBackground.stop() nicht mehr und auch nicht die abfrage mpBackground.isplaying() nicht mehr.
Wir wären damit am Ende dieser Tutorialserie angelangt. Ich hoffe ihr hattet Spaß und habt etwas gelernt, was ihr nun für eigene Projekte anwenden könnt.
Vielen Dank, dass ihr dabei wart 🙂