티스토리 뷰

Study/NodeJS

[Node.js + Phaser3] Hello Phaser? (4)

Hoon's Blog 2022. 2. 19. 23:47
Ready Player One

 

목표

목표: 충돌 처리와 움직임

 

 이전글

 

 

 예제

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Making your first Phaser 3 Game - Part 7</title>
    <script src="javascripts/phaser.min.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script type="text/javascript">

	var config = {
		type: Phaser.AUTO,
		width: 800,
		height: 600,
		physics: {
			default: 'arcade',
			arcade: {
				gravity: { y: 300 },
				debug: false
			}
		},
		scene: {
			preload: preload,
			create: create,
			update: update
		}
	};

	var player;
	var platforms;
	var cursors;

	var game = new Phaser.Game(config);

	function preload ()
	{
		this.load.image('sky', 'images/sky.png');
		this.load.image('ground', 'images/platform.png');
		this.load.image('star', 'images/star.png');
		this.load.image('bomb', 'images/bomb.png');
		this.load.spritesheet('dude', 'images/dude.png', { frameWidth: 32, frameHeight: 48 });
	}

	function create ()
	{
		this.add.image(400, 300, 'sky');

		platforms = this.physics.add.staticGroup();

		platforms.create(400, 568, 'ground').setScale(2).refreshBody();

		platforms.create(600, 400, 'ground');
		platforms.create(50, 250, 'ground');
		platforms.create(750, 220, 'ground');

		player = this.physics.add.sprite(100, 450, 'dude');

		player.setBounce(0.2);
		player.setCollideWorldBounds(true);

		this.anims.create({
			key: 'left',
			frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
			frameRate: 10,
			repeat: -1
		});

		this.anims.create({
			key: 'turn',
			frames: [ { key: 'dude', frame: 4 } ],
			frameRate: 20
		});

		this.anims.create({
			key: 'right',
			frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
			frameRate: 10,
			repeat: -1
		});

		cursors = this.input.keyboard.createCursorKeys();

		this.physics.add.collider(player, platforms);
	}

	function update ()
	{
		if (cursors.left.isDown)
		{
			player.setVelocityX(-160);

			player.anims.play('left', true);
		}
		else if (cursors.right.isDown)
		{
			player.setVelocityX(160);

			player.anims.play('right', true);
		}
		else
		{
			player.setVelocityX(0);

			player.anims.play('turn');
		}

		if (cursors.up.isDown && player.body.touching.down)
		{
			player.setVelocityY(-330);
		}
	}

</script>

</body>
</html>

 

 설명

 

1. 충돌과 키 입력

 

충돌에 대해 정의되어있지 않은 오브젝트

오브젝트간 충돌에 대해 정의하지 않으면 위와 같이 통과하게 된다.

player, platforms 두 오브젝트간 충돌에 대해 정의는 다음과 같다.

this.physics.add.collider(player, platforms);

 

player 오브젝트의 움직임을 구현하기 위해서는 키 입력을 받아야한다.

키입력을 받기위해 다음과 같은 코드를 추가한다.

cursors = this.input.keyboard.createCursorKeys();

 

 player 오브젝트의 움직임을 구현하기 위해서는 update에 각 키가 눌렸을때 동작에 대해 정의가 필요하다.

 

 

2. update

 

function update ()
{
    if (cursors.left.isDown)
    {
        player.setVelocityX(-160);

        player.anims.play('left', true);
    }
    else if (cursors.right.isDown)
    {
        player.setVelocityX(160);

        player.anims.play('right', true);
    }
    else
    {
        player.setVelocityX(0);

        player.anims.play('turn');
    }

    if (cursors.up.isDown && player.body.touching.down)
    {
        player.setVelocityY(-330);
    }
}

 

(1) Key 가 눌렸을때에 대한 Event는 this.input.keyboard.createCursorKeys().키.isDown과 같이 받을 수 있다.

예제에서는 좌측 방향키에 대한 입력을 cursors.left.isDown과 같이 받아서 처리한다.

 

(2) object.setVelocityX(n) : X축을 기준으로 오브젝트의 움직이는 속도와 방향에 대한 정의이다.

player.setVelocityX(-160);

player.anims.play('left', true);

음수일 경우 좌측, 양수일 경우 우측으로 움직인다. 수치가 올라갈수록 더 빠르게 움직인다.

Left 키에 대한 Velocity 값만 -500으로 변경한 경우

 

 

 

3. 다른 키에 대한 처리의 예

 

방향키가 아닌 W,A,S,D 그리고 Space에 대한 키도 아래와 같이 설정할 수 있다.

// key에 대한 정의
var keyW;
var keyA;
var keyS;
var keyD;
var keySpace;


function create ()
{
    // ... 생략 ...
    keyW = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W);
    keyA = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A);
    keyS = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S);
    keyD = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D);
    keySpace = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
    // ... 생략 ...
}

function update ()
{
    if (cursors.left.isDown || keyA.isDown)
    {
        player.setVelocityX(-160);

        player.anims.play('left', true);
    }
    else if (cursors.right.isDown || keyD.isDown)
    {
        player.setVelocityX(160);

        player.anims.play('right', true);
    }
    else
    {
        player.setVelocityX(0);

        player.anims.play('turn');
    }

    if ((cursors.up.isDown || keyW.isDown || keySpace.isDown) && player.body.touching.down)
    {
        player.setVelocityY(-330);
    }
}

 

 

 

 

 

 

Ref. https://stackoverflow.com/questions/58383619/how-to-use-a-s-d-w-keys-in-phaser

 

 

 

 

 

 다음글

 

 

 

 

 

 

 

저작자표시 비영리 변경금지

'Study > NodeJS' 카테고리의 다른 글

[Node.js + Phaser3] Hello Phaser? (5)  (0) 2022.02.20
[Node.js + Phaser3] Hello Phaser? (3)  (0) 2022.02.17
[Node.js + Phaser3] Hello Phaser? (2)  (0) 2022.02.17
[Node.js + Phaser3] Hello Phaser? (1)  (0) 2022.02.17
[Node.js] Linux 서버에 Nodejs 설치  (1) 2020.03.09
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/02   »
일 월 화 수 목 금 토
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
글 보관함