Finish debug

public/Assets/map.csv

-0, 1, 1, 2
-3, 4, 4, 5
-3, 4, 4, 5
-6, 7, 7, 8
+0, 1, 1, 2, 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1
+3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5
+3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5
+6, 7, 7, 8, 6, 7, 7, 8, 6, 7, 7, 8, 6, 7, 7, 8, 6, 7, 7, 8
\ No newline at end of file
+3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5
+3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5
+6, 7, 7, 8, 6, 7, 7, 8, 6, 7, 7, 8, 6, 7, 7, 8, 6, 7, 7, 8
+3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5
+3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5
+0, 1, 1, 2, 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1
+3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5
+3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5
+6, 7, 7, 8, 6, 7, 7, 8, 6, 7, 7, 8, 6, 7, 7, 8, 6, 7, 7, 8
+0, 1, 1, 2, 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1
+3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5
+3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5
+6, 7, 7, 8, 6, 7, 7, 8, 6, 7, 7, 8, 6, 7, 7, 8, 6, 7, 7, 8
+6, 7, 7, 8, 6, 7, 7, 8, 6, 7, 7, 8, 6, 7, 7, 8, 6, 7, 7, 8
+3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5
+3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5, 3, 4, 4, 5
+6, 7, 7, 8, 6, 7, 7, 8, 6, 7, 7, 8, 6, 7, 7, 8, 6, 7, 7, 8
\ No newline at end of file

public/index.html

@@ -17,43 +17,42 @@
 
         preload ()
         {
-            this.load.setBaseURL('https://git.ajou.ac.kr/copomos00/phaser3/-/raw/master/public/Assets/');
-            this.load.image('tiles', 'catastrophi_tiles_16.png');
-            this.load.tilemapCSV('map', 'catastrophi_level2.csv');
-            this.load.spritesheet('player', 'spaceman.png', { frameWidth: 16, frameHeight: 16 });
+            this.load.setBaseURL('https://raw.githubusercontent.com/Anbak98/phaser3/master/public/assets/');
+            this.load.image('tiles', 'Tilemap.png');
+            this.load.tilemapCSV('map', 'map.csv');
+            this.load.spritesheet('player', 'Arrow.png', { frameWidth: 16, frameHeight: 16 });
         }
 
         create ()
         {
             // When loading a CSV map, make sure to specify the tileWidth and tileHeight
-            this.map = this.make.tilemap({ key: 'map', tileWidth: 16, tileHeight: 16 });
+            this.map = this.make.tilemap({ key: 'map', tileWidth: 8, tileHeight: 8 });
             const tileset = this.map.addTilesetImage('tiles');
             const layer = this.map.createLayer(0, tileset, 0, 0);
 
             //  This isn't totally accurate, but it'll do for now
-            this.map.setCollisionBetween(0, 3);
 
             this.anims.create({
                 key: 'left',
-                frames: this.anims.generateFrameNumbers('player', { start: 8, end: 9 }),
+                frames: this.anims.generateFrameNumbers('player', { start: 2, end: 2 }),
                 frameRate: 10,
                 repeat: -1
             });
             this.anims.create({
                 key: 'right',
-                frames: this.anims.generateFrameNumbers('player', { start: 1, end: 2 }),
+                frames: this.anims.generateFrameNumbers('player', { start: 3, end: 3 }),
                 frameRate: 10,
                 repeat: -1
             });
             this.anims.create({
                 key: 'up',
-                frames: this.anims.generateFrameNumbers('player', { start: 11, end: 13 }),
+                frames: this.anims.generateFrameNumbers('player', { start: 0, end: 0 }),
                 frameRate: 10,
                 repeat: -1
             });
             this.anims.create({
                 key: 'down',
-                frames: this.anims.generateFrameNumbers('player', { start: 4, end: 6 }),
+                frames: this.anims.generateFrameNumbers('player', { start: 1, end: 1 }),
                 frameRate: 10,
                 repeat: -1
             });
@@ -66,23 +65,11 @@
 
             this.cameras.main.setBounds(0, 0, this.map.widthInPixels, this.map.heightInPixels);
             this.cameras.main.startFollow(this.player);
-
-            this.debugGraphics = this.add.graphics();
-
-            this.input.keyboard.on('keydown-C', event =>
-            {
-                this.showDebug = !this.showDebug;
-                this.drawDebug();
-            });
-
+            
+            // Debug!!!!
+            // I do not use this code on Tutorial  video
             this.cursors = this.input.keyboard.createCursorKeys();
-
-            this.helpText = this.add.text(16, 16, this.getHelpMessage(), {
-                fontSize: '18px',
-                fill: '#ffffff'
-            });
-
-            this.helpText.setScrollFactor(0);
+           
         }
 
         update (time, delta)
@@ -131,28 +118,7 @@
                 this.player.anims.stop();
             }
         }
-
-        drawDebug ()
-        {
-            this.debugGraphics.clear();
-
-            if (this.showDebug)
-            {
-                // Pass in null for any of the style options to disable drawing that component
-                this.map.renderDebug(this.debugGraphics, {
-                    tileColor: null, // Non-colliding tiles
-                    collidingTileColor: new Phaser.Display.Color(243, 134, 48, 200), // Colliding tiles
-                    faceColor: new Phaser.Display.Color(40, 39, 37, 255) // Colliding face edges
-                });
-            }
-
-            this.helpText.setText(this.getHelpMessage());
-        }
-
-        getHelpMessage ()
-        {
-            return `Arrow keys to move.\nPress "C" to toggle debug visuals: ${this.showDebug ? 'on' : 'off'}`;
-        }
+                
     }
 
     const config = {