Java İle Android LibGDX Animasyon Oluşturma

LibGDX, android oyun geliştiriciler için java dilinde yazılmış bir oyun motorudur. LibGDX sayesinde oyun geliştirmek daha kolay bir hal almıştır. Bu yazıda LibGDX ile nasıl 2d animasyonlar oluşturabileceğinizi göstereceğim.

Aşağıdaki görsel üzerinden ilerleyecek olursak, bu görsel 4 adet görselin birleşiminden oluşmuş bir gif dosyasıdır.

LibGDX üzerinde gif dosyasını direk olarak oynatamıyoruz. Bunun yerine 4 adet görseli gdx-texturepacker-3.2.0.zip isimli program ile .pack haline getirmemiz gerekiyor.

Öncesinde görselleri aşağıda olduğu gibi tek bir .png dosyası olarak birleştirmeliyiz.

Daha sonrasında ise indirdiğimiz gdx-texturepacker-3.2.0 isimli dosyanın içerisindeki gdx-texturepacker.jar isimli dosyayı başlatmalıyız.

Uygulamayı başlatınca aşağıdaki gibi bir ekran bizi karşılamaktadır. Buradan “New pack” butonuna tıklayıp herhangi bir pack ismi girmelisiniz (Örneğin, “bird” gibi).

“Input directory” kısmından yukarıdaki 4 adet görselin birleştirilmiş halinin bulunduğu klasörü seçmeniz gerekiyor.

“Output directory” kısmından ise oluşturulacak pack dosyamızın nereye kaydedileceğini seçmeniz gerekiyor. Bunun için android projenizdeki “assets” klasörünü seçmeniz gerekiyor.

Son olarak ise “Pack selected” butonuna tıklamanız gerekiyor. Açılan pencerede “Done!” ifadesini görürseniz işlem tamamlanmış demektir.

Şimdi sıra geldi oluşturduğumuz pack dosyasını sınıflar ile uygulamamıza dahil etmeye.

Player ve Assets olmak üzere iki adet sınıf oluşturuyoruz.

Player.java Dosyası

public class Player {
    private static final int FRAME_COLS = 2;
    private static final int FRAME_ROWS = 2;

    public static final int WALKING = 0;
    private int currentAnimation;

    private float stateTime = 0;

    private Animation<TextureRegion> walkingAnimation;
    private TextureRegion[] walkingFrames;

    private TextureRegion currentFrame;
    private Animation [] animations;

    private int stepIndex = 0;
   
  
    int birdX,birdY;
    public Player(TextureRegion textureRegionWalking) {
        // Walking Animation
        TextureRegion[][] tmp = textureRegionWalking.split(textureRegionWalking.getRegionWidth() / FRAME_COLS,
                textureRegionWalking.getRegionHeight() / FRAME_ROWS);
        walkingFrames = new TextureRegion[FRAME_COLS * FRAME_ROWS];
        int index = 0;
        for (int i = 0; i < FRAME_ROWS; i++) {
            for (int j = 0; j < FRAME_COLS; j++) {
                walkingFrames[index++] = tmp[i][j];
            }
        }
        walkingAnimation = new Animation(0.08f, walkingFrames);
        walkingAnimation.setPlayMode(Animation.PlayMode.LOOP);


        // Array of Animations
        animations = new Animation[2];
        animations[0] = walkingAnimation;

        // Initial currentAnimation
        setCurrentAnimation(WALKING);
    }

    public void setCurrentAnimation(int currentAnimation) {
        this.currentAnimation = currentAnimation;
        stateTime = 0;
        stepIndex = 0;
    }



    public void update(SpriteBatch batch){
        stateTime += Gdx.graphics.getDeltaTime();

        currentFrame = (TextureRegion) animations[currentAnimation].getKeyFrame(stateTime, true);
        birdX = Gdx.graphics.getWidth() / 4 - currentFrame.getRegionWidth() /2;
        birdY = Gdx.graphics.getHeight() / 2 - currentFrame.getRegionHeight() /2;

        batch.begin();
        batch.draw(grass,0,0,Gdx.graphics.getWidth(),Gdx.graphics.getHeight());
    
  batch.draw(currentFrame, birdX, birdY);
        
        batch.end();
    }
}

Yukarıdaki kodda kendimize göre ayarlamamız gereken kısımlar var. Bunlar aşağıdaki gibidir.

private static final int FRAME_COLS = 2; //görselinizdeki frame’ler kaç sütun

private static final int FRAME_ROWS = 2; // görselinizdeki frame’ler kaç satır.

walkingAnimation = new Animation(0.08f, walkingFrames); // 0.08f değeri frame’ler arası geçiş hızını belirlemektedir. Yani geçiş hızını bu değer ile ayarlıyoruz.

Assets.java Dosyası

public class Assets {
    public AssetManager manager;

    public void load(){
        if(manager == null){
            manager = new AssetManager();
        }
        manager.load("kus.pack",  TextureAtlas.class);
    }
}

Bu dosyada düzenlemeniz gereken kısım pack ismini olacaktır. Ben pack ismi olarak “kus” yazmıştım. Siz bird yazdıysanız veya farklı bir şey buraya onu yazmanız gerekiyor.

Asıl Proje Dosyamıza Eklememiz Gereken Kodlar

Öncelikle aşağıdakileri tanımlamamız gerekiyor.

private Assets assets; 
private Player player; 
private Skin skin;

Create fonksiyonu içerisine aşağıdaki ekliyoruz.

assets = new Assets();
		assets.load();
		assets.manager.finishLoading();

		skin = new Skin();
		skin.addRegions(assets.manager.get("kus.pack", TextureAtlas.class));

		player = new Player(skin.getRegion("walking"));

Buradaki kus.pack kısmını yine kendinize göre düzenlemeniz gerekiyor.

Render fonksiyonu içerisine aşağıdaki kodu ekliyoruz.

player.update(batch);

Son olarak pack dosyamıza aşağıdaki gibi “walking” yazısını ekliyoruz. rotate kodundan önce eklemeye dikkat edin.

kus.png
format: RGBA8888
filter: Nearest,Nearest
repeat: none
walking
  rotate: false
  xy: 1, 1
  size: 376, 295
  orig: 376, 295
  offset: 0, 0
  index: -1

Ve artık kuş hareketli hale geldi. Ben buraya gif olarak ekleyemedim ama aşağıdaki görsel hareketli. Arkaplan kısmını ben kendim ekledim kodda paylaşmadım, orayı sizde halledebilirsiniz. 🙂

AvatarYazar:

Yıllardır internetle haşır neşir, bir şeyler üretmeyi seven, müzik ve teknolojiyle arası iyi bir zat-ı muhterem.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir