Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
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
Tags
more
Archives
Today
Total
관리 메뉴

짱이 될거야

2022-07-21: Phaser 실습하기(3) 본문

Today I Learned

2022-07-21: Phaser 실습하기(3)

jeong57 2022. 7. 21. 12:19

어제 Phaser 실습에 성공했는데, 다른 노트북에서 처음부터 실행하려고 하니까 실패했다.

 

1. index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./hide_on_complete.js"></script>
  <script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
  <title>Document</title>
</head>
<body>
  
</body>
</html>

 

2. hide_on_complete.js

class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.spritesheet('invader', 'assets/tests/invaders/invader1.png', { frameWidth: 32, frameHeight: 32 });
        this.load.spritesheet('boom', 'assets/sprites/explosion.png', { frameWidth: 64, frameHeight: 64, endFrame: 23 });
    }

    create ()
    {
        this.add.text(400, 32, 'Click the invaders to destroy them', { color: '#00ff00' }).setOrigin(0.5, 0);

        var config1 = {
            key: 'move',
            frames: 'invader',
            frameRate: 4,
            repeat: -1
        };

        var config2 = {
            key: 'explode',
            frames: 'boom',
            hideOnComplete: true
        };

        this.anims.create(config1);
        this.anims.create(config2);

        var colors = [ 0xef658c, 0xff9a52, 0xffdf00, 0x31ef8c, 0x21dfff, 0x31aade, 0x5275de, 0x9c55ad, 0xbd208c ];

        //  Create a load of random sprites
        for (var i = 0; i < 128; i++)
        {
            var x = Phaser.Math.Between(50, 750);
            var y = Phaser.Math.Between(100, 550);

            var ship = this.add.sprite(x, y, 'invader');

            ship.play('move');

            ship.setTint(Phaser.Utils.Array.GetRandom(colors));

            ship.setInteractive();

            ship.once('pointerdown', function () {

                this.clearTint();

                //  Sprite will have visible = false set when the animation finishes repeating because of 'hideOnComplete' property
                this.play('explode');

            });
        }
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: [ Example ]
};

const game = new Phaser.Game(config);

 

3. ERROR

Uncaught ReferenceError: Phaser is not defined at hide_on_complete.js:1:23(anonymous) @ hide_on_complete.js:1

 

4. hide_on_complete.js 파일 맨 위에 'import Phaser from "phaser";' 코드를 넣었다.

 

5. ERROR

Uncaught SyntaxError: Cannot use import statement outside a module (at hide_on_complete.js:1:1)

 

6. hide_on_complete.js 파일에 넣었던 import 문을 지우고, index.html에서 js 파일을 불러올 때 type="module"로 설정해줬다.

<script type="module" src="./hide_on_complete.js"></script>

 

7. 성공 화면

'Today I Learned' 카테고리의 다른 글

2022-09-02: Github 꾸미기  (0) 2022.09.02
2022-08-05: HTTP STATE CODE  (0) 2022.08.05
2022-07-20: Phaser 실습하기(2)  (0) 2022.07.20
2022-07-20: Phaser 실습하기(1)  (0) 2022.07.20
2022-07-13: Git-Flow 실습  (0) 2022.07.13
'Today I Learned' Related Articles more
Comments