Pages

Animasi pada Android

Dalam pembuatan game, Animasi adalah hal yang sangat penting, karena untuk membuat game yang menarik harus memiliki pergerakan. pada tutorial ini penulis akan membuat animasi yang sederhana. bola yang ada dalam canvas akan bergerak terus menerus di dalam gambar. Untuk melakukan pengontrolan agar bola tetap di dalam canvas, penulis gunakan source berikut :
1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
if (x >= getWidth() - gambarBola.getWidth()) {
 xSpeed = -10;
}
if (x == 0) {
 xSpeed = 10;
}
x = x + xSpeed;

if (y >= getHeight() - gambarBola.getHeight()) {
 ySpeed = -10;
}
if (y == 0) {
 ySpeed = 10;
}
y = y + ySpeed;

canvas.drawColor(Color.WHITE);
canvas.drawBitmap(gambarBola, x , y, null);

  1. Buka Eclipse
  2. Pada Eclipse File - New - Project - Android - Android Project - 
  3. Kemudian pada jendela New Android Project isikan field berikut :
    1. Project Name : Animasi Android
    2. Build Target : Android 2.2
    3. Aplication name : Animasi Android
    4. Package Name : jhohannes.purba
    5. Create Activity : MainActivity
    6. Kemudian klik Finish  
  4. Masukkan sebuah gambar yang akan dijadikan bola, beri dengan nama bola.png (Animasi Android => res => drawable-mdpi) . Pastikan bahwa penamaan menggunakan huruf kecil semua, karena huruf Besar tidak diperbolehkan.
  5. Kemudian buat 2 class baru(Animasi Android=>src=jhohannes.purba), yaitu Kanvas.java dan ThreadKanvas.java sehingga sehingga sekarang sudah memiliki 3 class java.
  6. Pada MainActivity.java ketikkan source code berikut: 
    1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
    package jhohannes.purba;

import android.app.Activity;
import android.os.Bundle;

public class mainActivity extends Activity {
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(new Kanvas(this));
 }
}
  7. Pada Kanvas.java ketikkan source code berikut:
    1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
    package jhohannes.purba;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

public class Kanvas extends SurfaceView{

 SurfaceHolder surfaceHolder;
 ThreadKanvas threadKanvas;
 Bitmap gambarBola;

 private int x = 0; 
 private int y = 0;
 private int xSpeed = 5;
 private int ySpeed =5;
 public Kanvas(Context context) {
  super(context);

  threadKanvas = new ThreadKanvas(this);
  surfaceHolder = getHolder();

  surfaceHolder.addCallback(new SurfaceHolder.Callback() {

   public void surfaceDestroyed(SurfaceHolder holder) {
    boolean retry = true;
    threadKanvas.setRunning(false);
    
    while (retry) {
     try {
      threadKanvas.join();
      retry = false;
     } catch (InterruptedException e) {}
    }
   }

   public void surfaceCreated(SurfaceHolder holder) {
    threadKanvas.setRunning(true);
    threadKanvas.start();
   }

   public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {}
  });

  gambarBola= BitmapFactory.decodeResource(getResources(), R.drawable.bola);
 }

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);

  if (x >= getWidth() - gambarBola.getWidth()) {
   xSpeed = -10;
  }
  if (x == 0) {
   xSpeed = 10;
  }
  x = x + xSpeed;

  if (y >= getHeight() - gambarBola.getHeight()) {
   ySpeed = -10;
  }
  if (y == 0) {
   ySpeed = 10;
  }
  y = y + ySpeed;

  canvas.drawColor(Color.WHITE);
  canvas.drawBitmap(gambarBola, x , y, null);
 }
}
  8. Pada ThreadKanvas.java ketikkan source code berikut:
    1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
    package jhohannes.purba;

import android.graphics.Canvas;

public class ThreadKanvas extends Thread{
 Boolean isRunning = true;
 Kanvas kanvas;

 static final long FPS = 30;
 private boolean running = false;

 public ThreadKanvas(Kanvas kvs) {
  this.kanvas = kvs;
 }

 public void run() {
  long ticksPS = 100 / FPS;
  long waktuMulai;
  long waktuStop;

  while (running) {
   Canvas c = null;
   waktuMulai = System.currentTimeMillis();

   try {
    c = kanvas.getHolder().lockCanvas();

    synchronized (kanvas.getHolder()) {
     kanvas.onDraw(c);
    }

   } finally {
    if (c != null) {
     kanvas.getHolder().unlockCanvasAndPost(c);
    }
   }

   waktuStop = ticksPS-(System.currentTimeMillis() - waktuMulai);

   try {
    if (waktuStop> 0)
     sleep(waktuStop);
    else
     sleep(10);
   } catch (Exception e) {}

  }
 }

 public void setRunning(boolean run) {
  running = run;
 }

}
  9. Jika dijalankan, animasi akan tampil seperi berikut : 
Jhohannes H Purba Coding Sederhana October 04, 2012
Kategori :

14 comments:

  1. AnonymousDecember 9, 2012 at 9:16 AM

    klo pake android build 1.6 bisa ga gan, ane dah coba bisa di run tapi ga ada tampilannya

    ReplyDelete
  2. Pak Guru JudinMarch 22, 2013 at 6:12 PM

    ini runningnya harus via android atau simulator doang?
    nama sumulatornya apaan ya?
    sory, banyak tanya, masih belum pernah nyoba sih :)

    ReplyDelete
  3. UnknownJune 3, 2013 at 11:26 AM

    untuk saya coba di emulator android gan, kalau mau coba di hp tinggal masukkan file apk nya aja...

    ReplyDelete
  4. UnknownMay 2, 2014 at 7:20 AM

    kalau mau mulai animasinya tapi harus pake button gimana caranya gan ?

    ReplyDelete
    Replies
    1. Pemancing Danau TobaJune 11, 2014 at 11:21 AM

      deklarasikan sebuah button, kemudian pada onclick button pindah source code berikut..

      setContentView(new Kanvas(this));

      Delete
  5. StevJune 9, 2014 at 7:08 PM

    Terima kasih atas tutorial nya mas,

    ReplyDelete
  6. Company Registration DelhiDecember 22, 2014 at 3:57 AM

    very informative post for me as I am always looking for new content that can help me and my knowledge grow better.

    ReplyDelete
  7. Web Development IndiaJuly 4, 2015 at 12:16 AM

    This is very good Coding.. useful information thanks..

    ReplyDelete
  8. UnknownAugust 16, 2016 at 1:43 AM

    gak usah pkek xml ya gan?
    cz setelah sya jalanx cuma mncul tulisan hello word

    ReplyDelete
  9. Samsunda cilingirDecember 1, 2016 at 8:30 AM

    Selam admin tenku web site super basarilarinizin devamini bekleriz

    ReplyDelete
  10. Buy contact lenses online in indiaJanuary 1, 2017 at 11:02 PM

    Hi, Really great effort. Everyone must read this article. Thanks for sharing.

    ReplyDelete
  11. Buy Contact LensesApril 10, 2017 at 1:14 AM

    It was very useful for me. Keep sharing such ideas in the future as well. This was actually what I was looking for, and I am glad to came here! Thanks for sharing the such information with us.

    ReplyDelete

Subscribe to: Post Comments (Atom)