Eki.20

HTML5 ve PhaserJS ile Oyun Programlama – PART 7 : Sahneye ve Karaktere Fizik Kuralları Eklemek

Bu aşamada, oyun sahnesinde bir karakter tanımlayacağız. Bu karakterde de SpriteSheet tekniği ile sağa ve sola yürüme animasyonları tanımlayacağız. Ayrıca karakter için fizik kuralları da oluşturacağız. Yine kodlar arasında yer alan açıklama satırlarını ve ekran görüntüsünü inceleyin.

<!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);
}

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;

    	// Oyuncu karakterini oluşturuyoruz ve koordinatlarını tanımlıyoruz.
	// x = 100, y = sahneden - 300 pixel yukarıda (aşağıya düşecek), dude nesnesi.
   	player = game.add.sprite(100, game.world.height - 300, 'dude');

    	// Karaktere fizik kurallarını ekliyoruz.
    	game.physics.arcade.enable(player);

    	// Karaktere uygulanan fizik kurallarının değerlerini giriyoruz.
	// Zıplama değeri
    	player.body.bounce.y = 0.3;
	// Yerçekimi ivmesi
    	player.body.gravity.y = 150;
	// Hangi alanda geçerli olacağı.
   	player.body.collideWorldBounds = true;

    	// Karaktere iki adet animasyon tanımlanıyor.
	// Her bir animasyon 4 karede gösterilecek.
	// right ve left
	// SpriteSheet grafiği içinde hangi karelerin kaç fps değeri ile görüntüleneceği yer alıyor.
	// 32x0,1,2,3 değerleri ile sola yürüme animasyonu.
	// 32x5,6,7,8 değerleri ile sağa yürüme animasyonu
	// true parametresi ile animasyonu sürekli tekrarlar.
	// false parametresi verilirse tek bir defa oynatılır.
    	player.animations.add('left', [0, 1, 2, 3], 10, true);
    	player.animations.add('right', [5, 6, 7, 8], 10, true);
}

function update() {
}

</script>

</body>
</html>

Kodları çalıştırıp test etiğinizde, karakterin ilk oluşturulduğu koordinattan alt platforma doğru fizik kuralları değerleri ile düşüp zemine çarptığında da zıpladığını göreceksiniz.

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

Leave a comment

Yorum