Post

phaser3튜토리얼 캐릭터 이미지 바꾸기

Posted Updated
By kiseonHan
5 min read
phaser3튜토리얼 캐릭터 이미지 바꾸기

개발자로서 인턴을 한지 1달정도가 되었다. 인턴 동기는 7명, 모바일 하시는 분을 제외하고 6명이서 미니게임3개를 만들기로 했다. 나는 슬롯머신팀에 배정되었지만, 디자인 경력이 있어서 다른 팀의 디자인도 함께 보기로 했다. 그중 phaser3를 활용하는 팀이 있어서 phaser3의 공식 홈페이지에 있는 튜토리얼을 공부하였다.

스프라이트 이미지가 한방향으로만 있을때 설정 방법

캐릭터

캐릭터 가로 세로 길이

1
2
3
4
5
6

function preload() {
    this.load.spritesheet("dude", "assets/dude.png", {
      frameWidth: 64,
      frameHeight: 64,
    });
  }

스프라이트 프레임 인덱스

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
29
30
31
32
33

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

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

//한방향으로만 스프라이트 이미지 설정 되어있는 경우, create함수에서 사용하지 않는 매서드 삭제
//update함수에서 왼쪽으로 갈때 player.anims.play("right", true);로 오른쪽으로 가는 스프라이트 사용 설정 후,player.setFlipX(true) 추가
//기존에 있는 방향은 player.setFlipX(false)추가
function update() {
      if (cursors.left.isDown) {
      player.setVelocityX(-160);
      player.setFlipX(true);
      player.anims.play("right", true);
    } else if (cursors.right.isDown) {
      player.setVelocityX(160);
      player.setFlipX(false);
      player.anims.play("right", true);
    } else {
      player.setVelocityX(0);
      player.anims.play("turn");
    }
}

페이저 튜토리얼 코드 수정본

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189

//dude를 픽셀즈 스프라이트 이미지(9*3)로 변경
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Making your first Phaser 3 Game - Part 10</title>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.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 stars;
      var bombs;
      var platforms;
      var cursors;
      var score = 0;
      var gameOver = false;
      var scoreText;

      var game = new Phaser.Game(config);

      function preload() {
        this.load.image("sky", "assets/sky.png");
        this.load.image("ground", "assets/platform.png");
        this.load.image("star", "assets/star.png");
        this.load.image("bomb", "assets/bomb.png");
        this.load.spritesheet("dude", "assets/dude.png", {
          frameWidth: 64,
          frameHeight: 64,
        });
      }

      function create() {
        //  A simple background for our game
        this.add.image(400, 300, "sky");

        //  The platforms group contains the ground and the 2 ledges we can jump on
        platforms = this.physics.add.staticGroup();

        //  Here we create the ground.
        //  Scale it to fit the width of the game (the original sprite is 400x32 in size)
        platforms.create(400, 568, "ground").setScale(2).refreshBody();

        //  Now let's create some ledges
        platforms.create(600, 400, "ground");
        platforms.create(50, 250, "ground");
        platforms.create(750, 220, "ground");

        // The player and its settings
        player = this.physics.add.sprite(100, 450, "dude");

        //  Player physics properties. Give the little guy a slight bounce.
        player.setBounce(0.2);
        player.setCollideWorldBounds(true);

        //  Our player animations, turning, walking left and walking right.

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

        this.anims.create({
          key: "right",
          frames: this.anims.generateFrameNumbers("dude", { start: 4, end: 8 }),
          frameRate: 10,
          repeat: -1,
        });
        this.physics.add.existing(player);
        //  Input Events
        cursors = this.input.keyboard.createCursorKeys();

        //  Some stars to collect, 12 in total, evenly spaced 70 pixels apart along the x axis
        stars = this.physics.add.group({
          key: "star",
          repeat: 11,
          setXY: { x: 12, y: 0, stepX: 70 },
        });

        stars.children.iterate(function (child) {
          //  Give each star a slightly different bounce
          child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
        });

        bombs = this.physics.add.group();

        //  The score
        scoreText = this.add.text(16, 16, "score: 0", {
          fontSize: "32px",
          fill: "#000",
        });

        //  Collide the player and the stars with the platforms
        this.physics.add.collider(player, platforms);
        this.physics.add.collider(stars, platforms);
        this.physics.add.collider(bombs, platforms);

        //  Checks to see if the player overlaps with any of the stars, if he does call the collectStar function
        this.physics.add.overlap(player, stars, collectStar, null, this);

        this.physics.add.collider(player, bombs, hitBomb, null, this);
      }

      function update() {
        if (gameOver) {
          return;
        }

        if (cursors.left.isDown) {
          player.setVelocityX(-160);
          player.setFlipX(true);
          player.anims.play("right", true);
        } else if (cursors.right.isDown) {
          player.setVelocityX(160);
          player.setFlipX(false);
          player.anims.play("right", true);
        } else {
          player.setVelocityX(0);
          player.anims.play("turn");
        }

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

      function collectStar(player, star) {
        star.disableBody(true, true);

        //  Add and update the score
        score += 10;
        scoreText.setText("Score: " + score);

        if (stars.countActive(true) === 0) {
          //  A new batch of stars to collect
          stars.children.iterate(function (child) {
            child.enableBody(true, child.x, 0, true, true);
          });

          var x =
            player.x < 400
              ? Phaser.Math.Between(400, 800)
              : Phaser.Math.Between(0, 400);

          var bomb = bombs.create(x, 16, "bomb");
          bomb.setBounce(1);
          bomb.setCollideWorldBounds(true);
          bomb.setVelocity(Phaser.Math.Between(-200, 200), 20);
          bomb.allowGravity = false;
        }
      }

      function hitBomb(player, bomb) {
        this.physics.pause();

        player.setTint(0xff0000);

        player.anims.play("turn");

        gameOver = true;
      }
    </script>
  </body>
</html>

https://github.com/user-attachments/assets/c3568c4c-b1a3-4933-84ba-c3d05d04c04b

PHASER3
phaser3
This post is licensed under CC BY 4.0 by the author.