『Castle Survive』 웹게임 개발일지_아트 및 애니메이션

📂 Castle Survive 개발일지
├── 📄 프로젝트 소개 및 기획

├── 📄 개발환경 및 구조
├── 📄 게임 시스템 개발
├── 📄 UI/UX 디자인
├── 📄 아트 및 애니메이션
├── 📄 사운드 디자인
├── 📄 수익화 전략
├── 📄 문제해결 및 트러블슈팅
├── 📄 배포 및 운영
└── 📄 앞으로의 계획

1. 게임 아트 스타일

『Castle Survive』의 비주얼은 중세 판타지 세계를 배경으로 합니다. 고딕풍의 성, 몬스터들, 그리고 마법을 사용하는 캐릭터들로 구성된 이 세계는 플레이어가 몰입할 수 있는 독특한 분위기를 제공합니다. 게임 내 캐릭터와 배경은 픽셀 아트 스타일로 제작되었으며, 이를 통해 고전 게임의 느낌을 현대적인 웹 환경에서 재현할 수 있었습니다.

캐릭터 디자인: 주인공인 마법사 캐릭터는 2D 픽셀 아트로 그려졌습니다. 주인공 캐릭터의 디자인은 간단하면서도 강력한 느낌을 주도록 설정했습니다. 마법사의 이동 및 공격 동작은 부드러운 애니메이션으로 표현되며, fireball, lightning, poison 등의 마법을 사용하면서 게임의 핵심적인 시각적 요소를 강화했습니다.

몬스터 디자인: 각기 다른 특성을 가진 몬스터들이 등장합니다. 각 몬스터는 고유의 크기, 체력, 공격력을 가지며, 게임의 난이도를 점차적으로 상승시킵니다. 이러한 몬스터들은 다양한 색상과 스타일로 디자인되었으며, Monster_1.png와 같은 기본적인 이미지들로 구현되었습니다.

배경: 게임의 배경은 고딕풍의 성을 중심으로 한 다양한 환경이 펼쳐집니다. assets/1.png 이미지를 사용하여 배경을 설정했으며, 배경에 맞는 다양한 시각적 요소들이 게임의 진행에 따라 동적으로 변화합니다.

2. 애니메이션 구현

애니메이션은 게임의 몰입도를 높이는 데 중요한 역할을 합니다. 특히, 캐릭터와 적들의 움직임, 마법 발동 시의 효과 등은 게임의 재미와 긴장감을 극대화시킵니다.

캐릭터 애니메이션: 캐릭터는 기본적으로 idle, hit, dead 상태에 맞춘 애니메이션이 구현되었습니다.

• idle 상태에서는 캐릭터가 떠다니는 듯한 부드러운 움직임을 연출합니다. 이 애니메이션은 @keyframes idleFloat을 사용하여 구현되었으며, 50% 지점에서 캐릭터가 약간 위로 떠오르는 효과를 만들어냅니다.
• hit 상태에서는 캐릭터가 맞았을 때 붉은 플래시와 함께 화면이 흔들리는 효과를 줍니다. 이는 @keyframes flashRed 애니메이션을 통해 구현되었습니다.
• dead 상태는 캐릭터가 사망했을 때 축소되며 페이드 아웃되는 효과를 사용하여, 게임이 종료될 때의 비극적인 느낌을 강조합니다. 이 애니메이션은 @keyframes fadeOutShrink을 사용하여 구현되었습니다.

효과 애니메이션: 마법을 사용하거나 적이 맞았을 때의 애니메이션은 게임의 비주얼적인 핵심 요소입니다.

• fireball, lightning, poison, wind와 같은 마법은 각각의 특성에 맞는 애니메이션을 구현하여 플레이어가 시각적으로 마법의 효과를 명확히 인식할 수 있도록 했습니다. 예를 들어, fireball.gif는 불꽃이 튀는 효과로 마법의 강렬함을 강조하며, lightning.gif는 번개가 내려치는 시각적인 효과를 제공합니다.
• heal.gif는 체력 회복 효과를 시각적으로 구현하는 애니메이션으로, 게임의 전략적 요소를 강화합니다.

폭죽 효과: 플레이어가 레벨업을 할 때나 특정한 이벤트가 발생할 때, 게임 화면에 firework 애니메이션을 사용하여 축하의 효과를 추가했습니다. 폭죽은 화면 전체에 랜덤하게 등장하며, firework-blink 애니메이션을 사용해 깜빡이는 효과를 줍니다.

3. 스킬 및 공격 애니메이션

게임 내 캐릭터의 공격과 스킬 발동은 중요한 게임 플레이 요소입니다. 각 스킬은 고유의 애니메이션을 가지며, 이를 통해 플레이어는 각 스킬의 발동 효과를 직관적으로 이해할 수 있습니다. 예를 들어, Fireball은 불덩이가 날아가는 애니메이션을 통해 공격이 이뤄지며, Lightning은 번개가 내리치는 애니메이션을 통해 강력한 전기 공격을 시각적으로 표현합니다.

이러한 스킬 애니메이션은 게임의 몰입감을 높이는 중요한 요소로, 스킬 사용 시에 적절한 사운드 이펙트도 함께 제공됩니다. 예를 들어, shoot.wav와 같은 사운드가 Fireball 발사 시 재생되며, 스킬의 효과를 강조합니다.