지금까지 구현한 페이지에 배경과 장애물 타일을 적용해보도록 하겠습니다.

1. 배경 준비

• 스프라이트 시트 이미지를 준비한 것 처럼, 배경 타일 셋을 준비해야 합니다.
• 타일 셋이란, 일정한 크기의 작은 이미지 조각(타일)을 모아놓은 이미지 파일 또는 이미지 집합입니다. 이러한 타일들은 게임 내에서 반복적으로 사용되며, 맵이나 레벨을 구성하는 데 사용됩니다. 예를 들어, 풀, 물, 벽돌, 나무와 같은 배경 요소들이 각각 타일로 표현됩니다.
• 스프라이트 시트를 구한 곳과 마찬가지로, itch.io에서 Cainos님이 무료로 제공하고 있는 pixel art top down basic 타일 셋을 사용하도록 하겠습니다.
  • https://cainos.itch.io/pixel-art-top-down-basic
• 위 링크에서 압축 파일을 다운로드 받아 압축 해제한 후 파일을 assets 폴더 안에 넣어둡니다.
• 여러 이미지가 추가될 상황을 대비하여 assets 폴더에 Character와 Map 폴더를 추가하여 구분하여 줍니다.

2. App.vue에서 배경 및 장애물 이미지 사용

<template>
  <div id="app">
    <!-- Background container -->
    <div class="background"></div>

    <SpriteAnimator
      :frameWidth="24"
      :frameHeight="24"
      :animationSpeed="100"
      :spriteSheet="spriteSheetPath"
      :scale="2"
      :obstacles="obstacles"
    />
    <div
      v-for="(obstacle, index) in obstacles"
      :key="index"
      :style="getObstacleStyle(obstacle)"
      class="obstacle"
    ></div>
  </div>
</template>

<script>
import SpriteAnimator from '@/components/SpriteAnimator.vue'
import spriteSheetPath from '@/assets/Character/Girl-Sheet.png'

export default {
  name: 'App',
  components: {
    SpriteAnimator
  },
  data() {
    return {
      spriteSheetPath,
      obstacles: [
        { x: 100, y: 100, width: 50, height: 50 },
        { x: 200, y: 150, width: 50, height: 50 },
        { x: 150, y: 300, width: 50, height: 50 }
      ]
    }
  },
  methods: {
    getObstacleStyle(obstacle) {
      return {
        position: 'absolute',
        left: `${obstacle.x}px`,
        top: `${obstacle.y}px`,
        width: `${obstacle.width}px`,
        height: `${obstacle.height}px`
      }
    }
  }
}
</script>

<style>
#app {
  position: relative;
  width: 100%;
  height: 95vh;
  overflow: hidden;
}

/* Background styling */
.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/Map/TX Tileset Grass.png');
  background-repeat: repeat; /* 배경 이미지를 반복하여 채움 */
  z-index: -1; /* 배경이 다른 요소들 뒤에 위치하도록 설정 */
}

.obstacle {
  background-image: url('@/assets/Map/TX Plant.png'), url('@/assets/Map/TX Shadow Plant.png'); /* 장애물을 풀로 지정하고 그림자도 불러옵니다. */ 
  background-repeat: no-repeat; /* 배경 이미지 반복을 비활성화 */
  background-position: -215px -180px; /* 배경 이미지의 풀 부분만 표시 */
}
</style>

2.1. 배경 이미지 설정

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/Map/TX Tileset Grass.png');
  background-repeat: repeat;
  z-index: -1; 
}

• position: absolute;: 배경 요소를 절대 위치로 설정하여, #app 요소 내부에서 상대적인 위치를 가집니다. top: 0; left: 0;와 함께, 배경이 화면의 좌상단에 고정됩니다.
• width: 100%; height: 100%;: 배경이 화면 전체를 덮도록 크기를 설정합니다.
• background-image: url('@/assets/Map/TX Tileset Grass.png');: 배경으로 사용할 이미지를 지정합니다. 여기서는 "@/assets/Map/TX Tileset Grass.png" 경로에 있는 이미지가 사용됩니다. 이 이미지는 주로 타일셋 또는 텍스처로 사용될 수 있는 반복 가능한 이미지입니다.
• background-repeat: repeat;: 배경 이미지를 반복하여 화면 전체를 채우도록 설정합니다. 이 옵션을 사용하면, 하나의 작은 이미지가 여러 번 반복되어 큰 배경을 형성할 수 있습니다.
• z-index: -1;: 배경이 다른 요소들보다 뒤에 위치하도록 설정합니다. z-index 값이 낮을수록 요소가 뒤에 배치되므로, 이 경우 배경이 화면의 가장 뒤쪽에 위치하게 됩니다.

2.2. 장애물 이미지 설정

.obstacle {
  background-image: url('@/assets/Map/TX Plant.png'), url('@/assets/Map/TX Shadow Plant.png'); 
  background-repeat: no-repeat; 
  background-position: -215px -180px;
}

• background-image: url('@/assets/Map/TX Plant.png'), url('@/assets/Map/TX Shadow Plant.png');: 장애물에 두 개의 이미지를 배경으로 설정합니다. 첫 번째는 실제 식물 이미지를, 두 번째는 그림자 이미지를 사용합니다. CSS에서는 여러 개의 배경 이미지를 콤마로 구분하여 적용할 수 있습니다.
• background-repeat: no-repeat;: 배경 이미지가 반복되지 않도록 설정합니다. 장애물의 크기가 작기 때문에 이미지가 반복되지 않도록 하는 것이 중요합니다.
• background-position: -215px -180px;: 지정한 좌표에서 이미지의 특정 부분을 잘라서 표시합니다. 여기서 -215px은 배경 이미지의 왼쪽에서 오른쪽으로 215픽셀, -180px은 위에서 아래로 180픽셀 이동한 지점에서 이미지를 시작하겠다는 의미입니다. 이는 타일셋에서 특정 타일을 선택하는 데 유용합니다.

3. 실행 결과

• 실행하면 아래 사진과 같이 동작을 볼 수 있습니다.
• 배경과 장애물에 이미지가 적용된 모습을 확인할 수 있습니다.