Ağu.20

HTML5 ve PhaserJS ile Oyun Programlama – PART 5 : Platform Sahne (Dünya) Oluşturmak

Kodlar arasında yer alan açıklama satırlarını inceleyip ekran çıktısına bakarak yazılan kodların ne işe yaradığını kavrayabilirsiniz.

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

}
// platforms adlı bir nesne tanımlanıyor.
var platforms;

function create() {

    	// Arcade Physics sistemi ile fizik kurallarını ekliyoruz.
    	game.physics.startSystem(Phaser.Physics.ARCADE);

    	// sky adlı nesnemiz ile bir arkaplan oluşturuyoruz. 
	// Yukarıda sky nesnesine sky.png grafiğinin eklendiğini görebilirsiniz.
   	 game.add.sprite(0, 0, 'sky');

    	// platforms adlı bir grup oluşturuyoruz. Buna, iki adet yatay platform ekleyeceğiz.
	// platform nesnemiz de ground ismi ile platform.png grafiğini eklemişti.
    	platforms = game.add.group();

    	// platforms nesnemizde fizik kurallarını uyguluyoruz. 
    	platforms.enableBody = true;
	
    	// Bir zemin oluşturuyoruz. Bu zemin oyun sahnesinin en altından -64 pixel eksik. 
	// Bu zemin sayesinde karakter ekranın dışına çıkamayacak.
    	var ground = platforms.create(0, game.world.height - 64, 'ground');

    	// Platformu ölçülendiriyoruz. 
    	ground.scale.setTo(2, 2);

   	// Bu zeminde karakterin durmasını sağlıyoruz.
    	ground.body.immovable = true;

    	// Oyunda, karakterin üstüne çıkacağı 2 adet çıkıntı yapıyoruz.
    	var ledge = platforms.create(400, 400, 'ground');
	
	// Bu zeminde karakterin durmasını sağlıyoruz. 
	// Aynı şekilde karakterin platformun altında zıplaması ile de üstüne geçmesini engelliyoruz.
    	ledge.body.immovable = true;
	
	// İkinci çıkıntıyı ilgili koordinata taşıyoruz.
    	ledge = platforms.create(-150, 250, 'ground');

	// Bu zeminde de karakterin durmasını sağlıyoruz.
    	ledge.body.immovable = true;
    
}

function update() {
}

</script>

</body>
</html>

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

Leave a comment

Yorum