Ağu.20

HTML5 ve PhaserJS ile Oyun Programlama – PART 8 : Klavye ile Karakteri Kontrol Etmek ve Yürüme Animasyonlarını Oynatmak

Phaser.js’de 3 farklı fizik sistemi vardır: Bunlar;

• Arcade Pyhsics
• Ninja Pyhsics
• P2.js Full-Body Pyhsics

Bunlardan mobil cihazlar için en hafifletilmiş sürüm olan Arcade Pyhsics kullanılır.

ArcadePhysics.Body metodu ile nesneyi bütün olarak ele alır.

player.body.gravity.y = 150;

ArcadePhysics.Body metodunun gravity.y alt metoduna 150 değeri verilerek yerçekimi uygulanmıştır.

function update() {
    game.physics.arcade.collide(player, platforms);
}

update() fonksiyonu sürekli olarak çağırılıyor. Bu fonksiyon içinde de player ve platforms nesnelerinin sürekli olarak çarpışması kontrol ediliyor.

Karakteri yürütmek için de Klavye’den giriş almamız gerekiyor. Bunun için şu metot uygulanır.

,
cursors = game.input.keyboard.createCursorKeys();

Cursor’ler, sadece yukarı, aşağı, sağa ve sola tuşlarını algılar.

<!doctype html> 
<html lang="tr"> 
<head> 
	<meta charset="UTF-8" />
	<script type="text/javascript" src="js/phaser.min.js"></script>
</head>
<body>

<script type="text/javascript">

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function preload() {
    game.load.image('sky', 'assets/sky.png');
    game.load.image('ground', 'assets/platform.png');
    game.load.image('star', 'assets/star.png');
    game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}

// player ve cursors nesneleri tanımlanıyor.
var player;
var cursors;

var platforms;

function create() {
    game.physics.startSystem(Phaser.Physics.ARCADE);
    game.add.sprite(0, 0, 'sky');
    platforms = game.add.group();
    platforms.enableBody = true;
    var ground = platforms.create(0, game.world.height - 64, 'ground');
    ground.scale.setTo(2, 2);
    ground.body.immovable = true;
	
    var ledge = platforms.create(400, 400, 'ground');
    ledge.body.immovable = true;
	
    ledge = platforms.create(-150, 250, 'ground');
    ledge.body.immovable = true;

    player = game.add.sprite(100, game.world.height - 300, 'dude');

    game.physics.arcade.enable(player);

    player.body.bounce.y = 0.3;
    player.body.gravity.y = 150;
    player.body.collideWorldBounds = true;
    player.animations.add('left', [0, 1, 2, 3], 10, true);
    player.animations.add('right', [5, 6, 7, 8], 10, true);
	
    // Kontroller
    cursors = game.input.keyboard.createCursorKeys();
    
}

function update() {

    	game.physics.arcade.collide(player, platforms);

   	// Yerçekimi ivmesi sıfırlanıyor. 
	// Klavyeden yukarıya basılınca bu değer artacak.
    	player.body.velocity.x = 0;
	
	// Eğer bir tuşa basılırsa...
    	if (cursors.left.isDown)
    	{
        		// Sol tuşa basılırsa 70 pixel sola
      		player.body.velocity.x = -70;
		
		// left isimli animasyon oynatılıyor.
        		player.animations.play('left');
   	 }
   	 else if (cursors.right.isDown)
   	 {
       		 // Sağtuşa basılırsa 70 pixel sağa
        		player.body.velocity.x = 70;

		// right isimli animasyon oynatılıyor.
        		player.animations.play('right');
   	 }
   	else
    	{	
       		// Eğer bir tuşa basılmıyorsa animasyonlar durduruluyor.
        		player.animations.stop();
		
		// Karakter 4. sprite görüntüsüne, yani duran görüntüsüne gidiyor.
       		player.frame = 4;
   	}
    
    	//  Yukarı tuşuna basılıyorsa (klavye ve dokunmatik ekran)
   	 if (cursors.up.isDown && player.body.touching.down)
    	{
		// Karakter 400 pixel yukarı zıplıyor.
       		player.body.velocity.y = -400;
    	}
}
</script>

</body>
</html>

Kodları çalıştırıp klavyeden ok tuşlarına basarak test etiğinizde, karakterin zıpladığını, havada yürüdüğünü, aynı şekilde platformlar üzerinde de yürüdüğünü, platformlar üzerine düştüğünde de sabit kaldığını göreceksiniz.

İçeriği paylaş:
  • facebook
  • twitter

Leave a comment

Yorum