[feat] 캐릭터가 접근할 수 없는 곳 블로킹 처리

front/src/components/Map/ServerMap/Character.ts

@@ -8,12 +8,16 @@ export const createCharacter = (
 ): Phaser.Physics.Arcade.Sprite => {
   if (scene.textures.exists("basic_character")) {
     // "basic_character" 라는 텍스처 로드가 완료 되면 캐릭터 생성
-    return scene.physics.add.sprite(
+    const character = scene.physics.add.sprite(
       x, // 캐릭터가 생성되면 기본 x축의 위치
       y, // 캐릭터가 생성되면 기본 y축의 위치
       "basic_character", // preload파일에서 atlas의 key값과 동일한 keyㄴ값
       "move-down-2.png" // 움직이지 않는 상태의 기본 캐릭터
     );
+
+    character.setSize(10, 10); // 캐릭터 사이즈
+
+    return character;
   } else {
     throw new Error("캐릭터가 생성되지 않았습니다.");
   }
@@ -30,7 +34,7 @@ export const charanterAnimation = (scene: Scene) => {
       prefix: "move-down-",
       suffix: ".png",
     }),
-    frameRate: 15,
+    frameRate: 20,
     repeat: -1,
   });
   // Move-Up
@@ -42,7 +46,7 @@ export const charanterAnimation = (scene: Scene) => {
       prefix: "move-up-",
       suffix: ".png",
     }),
-    frameRate: 15,
+    frameRate: 20,
     repeat: -1,
   });
 
@@ -55,7 +59,7 @@ export const charanterAnimation = (scene: Scene) => {
       prefix: "move-left-",
       suffix: ".png",
     }),
-    frameRate: 15,
+    frameRate: 20,
     repeat: -1,
   });
 
@@ -68,7 +72,7 @@ export const charanterAnimation = (scene: Scene) => {
       prefix: "move-right-",
       suffix: ".png",
     }),
-    frameRate: 15,
+    frameRate: 20,
     repeat: -1,
   });
 };

front/src/components/Map/ServerMap/Debug.ts

@@ -5,11 +5,12 @@ import { Layers } from "../../../types/server";
 
 export const debugCollision = (scene: Scene, layers: Layers) => {
   const collidableLayers = [
-    layers.hillsLayer,
+    layers.hillsCollidesLayer,
     layers.groundLayer,
     layers.fenceLayer,
     layers.furnitureLayer,
     layers.woodenHouseLayer,
+    layers.wallsLayer,
   ];
 
   collidableLayers.forEach((layer) => {
@@ -34,7 +35,7 @@ export const renderDebug = (
   layers.fenceLayer?.renderDebug(debugGraphics, debugOptions);
   layers.furnitureLayer?.renderDebug(debugGraphics, debugOptions);
   layers.woodenHouseLayer?.renderDebug(debugGraphics, debugOptions);
-  layers.hillsLayer?.renderDebug(debugGraphics, debugOptions);
+  layers.hillsCollidesLayer?.renderDebug(debugGraphics, debugOptions);
 };
 
 export const addCollider = (
@@ -43,7 +44,7 @@ export const addCollider = (
   layers: Layers
 ) => {
   const collidableLayers = [
-    layers.hillsLayer,
+    layers.hillsCollidesLayer,
     layers.groundLayer,
     layers.fenceLayer,
     layers.furnitureLayer,

front/src/components/Map/ServerMap/Layers.ts

@@ -4,8 +4,8 @@ import { Layers } from "../../../types/server";
 export const createLayers = (map: Phaser.Tilemaps.Tilemap, scene: Scene) => {
   // Tiled에서 그린 잔디, 집, 나무 등과 같은 타일 요소들을 화면에 뿌려준다.
   // preload에서 지정한 이미지 파일 keymap.addTilesetImage(Tiled에서 지정한 tilessets의 이름, preload에서 지정한 이미지 파일 key);
-  const hillsLayerTileset = map.addTilesetImage("hills", "hillImg");
-  const dirtLayerTileset = map.addTilesetImage("dirt", "dirtImg");
+  const hillsTileset = map.addTilesetImage("hills", "hillImg");
+  const dirtTileset = map.addTilesetImage("dirt", "dirtImg");
   const basicPlantsTileset = map.addTilesetImage(
     "basic_plants",
     "basicPlantsImg"
@@ -25,6 +25,10 @@ export const createLayers = (map: Phaser.Tilemaps.Tilemap, scene: Scene) => {
   const fenceTileset = map.addTilesetImage("fence", "fenceImg");
   const eggsTileset = map.addTilesetImage("eggs", "eggsImg");
   const chickenTileset = map.addTilesetImage("chicken", "chickenImg");
+  const hillsCollidesTileset = map.addTilesetImage(
+    "hills_collider",
+    "hillCollidesImg"
+  );
 
   let layers: Layers = {};
 
@@ -34,38 +38,40 @@ export const createLayers = (map: Phaser.Tilemaps.Tilemap, scene: Scene) => {
     chickHouseTileset &&
     basicGrassTileset &&
     bridgeTileset &&
-    dirtLayerTileset &&
+    dirtTileset &&
     basicPlantsTileset &&
-    hillsLayerTileset &&
+    hillsTileset &&
     woodenHouseTileset &&
     cowTileset &&
     fenceTileset &&
     eggsTileset &&
     chickenTileset &&
-    furnitureTilset
+    furnitureTilset &&
+    hillsCollidesTileset
   ) {
+    // 순서: 제일 위에 있는 layer가 가장 밑에 깔림
     layers.mapLayer = map.createLayer("map", waterTileset);
-
     layers.groundLayer = map.createLayer("grass", grassTileset);
     layers.fenceLayer = map.createLayer("fence", fenceTileset);
     layers.chickHouseLayer = map.createLayer("chick_house", chickHouseTileset);
     layers.bridgeLayer = map.createLayer("bridge", bridgeTileset);
-    layers.dirtLayer = map.createLayer("dirt", dirtLayerTileset);
+    layers.dirtLayer = map.createLayer("dirt", dirtTileset);
     layers.basicPlantsLayer = map.createLayer(
       "basic_plants",
       basicPlantsTileset
     );
-    layers.hillsLayer = map.createLayer("hills", hillsLayerTileset);
-    layers.woodenHouseLayer = map.createLayer("house", woodenHouseTileset);
-    layers.basicGrassLayer = map.createLayer(
-      "basic_grass_1",
-      basicGrassTileset
+    layers.hillsLayer = map.createLayer("hills", hillsTileset);
+    layers.hillsCollidesLayer = map.createLayer(
+      "hills_collides",
+      hillsCollidesTileset
     );
+    layers.woodenHouseLayer = map.createLayer("house", woodenHouseTileset);
+    layers.basicGrassLayer = map.createLayer("basic_grass", basicGrassTileset);
     layers.cowLayer = map.createLayer("cow", cowTileset);
     layers.eggsLayer = map.createLayer("eggs", eggsTileset);
     layers.chickenLayer = map.createLayer("chicken", chickenTileset);
     layers.furnitureLayer = map.createLayer("furniture", furnitureTilset);
-    layers.wallsTileset = map.createLayer("walls", woodenHouseTileset);
+    layers.wallsLayer = map.createLayer("walls", woodenHouseTileset);
 
     return layers;
   }

front/src/components/Map/ServerMap/MainMap.ts

@@ -1,5 +1,4 @@
 import { Scene } from "phaser";
-import { Layers } from "../../../types/server";
 import { charanterAnimation, createCharacter } from "./Character";
 import { createLayers } from "./Layers";
 import { addCollider, debugCollision } from "./Debug";
@@ -42,6 +41,7 @@ export class MainMap extends Scene {
 
         this.keyboards = this.input.keyboard?.createCursorKeys()!; // 방향키로 캐리터 조정
         this.cameras.main.startFollow(this.character); // 캐릭터의 움직을 따라 카메라 움직임
+        this.cameras.main.setZoom(2);
 
         // 캐릭터가 접근할 수 없는 곳 블로킹
         if (layers) {

front/src/components/Map/ServerMap/Preloader.ts

@@ -15,6 +15,7 @@ export class Preloader extends Scene {
     this.load.image("dirtImg", "../assets/dirt.png");
     this.load.image("basicPlantsImg", "../assets/basic_plants.png");
     this.load.image("hillImg", "../assets/hills.png");
+    this.load.image("hillCollidesImg", "../assets/hills_collider.png");
     this.load.image("woodenHouseImg", "../assets/wooden_house.png");
     this.load.image("basicGrassImg", "../assets/basic_grass.png");
     this.load.image("cowImg", "../assets/cow.png");

front/src/components/Map/main.tsx

@@ -9,7 +9,7 @@ const config: Phaser.Types.Core.GameConfig = {
     // 물리 엔진 설정
     default: "arcade", // 충돌 감지와 기본적인 물리 효과 제공
     arcade: {
-      debug: false, // 디버그모드 활성화 시 충돌 영역과 물리 효과 확인하고 조정가능
+      debug: true, // 디버그모드 활성화 시 충돌 영역과 물리 효과 확인하고 조정가능
     },
   },
 };

front/src/types/server.ts

@@ -24,5 +24,6 @@ export interface Layers {
   eggsLayer?: Phaser.Tilemaps.TilemapLayer | null;
   chickenLayer?: Phaser.Tilemaps.TilemapLayer | null;
   furnitureLayer?: Phaser.Tilemaps.TilemapLayer | null;
-  wallsTileset?: Phaser.Tilemaps.TilemapLayer | null;
+  wallsLayer?: Phaser.Tilemaps.TilemapLayer | null;
+  hillsCollidesLayer?: Phaser.Tilemaps.TilemapLayer | null;
 }