도시의 낭만! ( AI 협업 도시 시뮬레이션 )

 

``

윈드서프 AI와 함께 협업으로 만들어 보았습니다.
AI코딩 도구 없으면 일 안 다니고도 1 ~ 2주 걸릴만한 일인데,
4시간 가량 씨름하다 완성했네요.

아래 사이트에 접속하시면 가상 3D 도시 시뮬레이션을 보실 수 있습니다.
( PC에서 안정적으로 작동합니다. 모바일 사용성까지는 고려를 안했네요. )

https://cray7.mycafe24.com/City/

사용법은 그리 어렵지는 않은데요.
처음 접속하면 빈 월드가 등장합니다.

이어서, 왼쪽 건물 목록에서 건물을 선택, 이어서 바닥을 선택하면 건물이 생겨납니다.
연속해서 배치가 되기 때문에 취소하려면 ESC 키를 눌러주셔야 해요.

주거건물과 상업건물, 산업건물은 모두 비스무리한데 색상과 분위기가 좀 다릅니다.

도로와 공원도 배치할 수 있긴 한데,
도로는 좀(많이..) 어색한 부분이 있긴 합니다.

배치 구성에 따라 인구와 자금이 점점 올라갑니다.
자금이 부족하면 건물을 지을 수 없으니 점점 모아야 지을 수 있습니다.
행복도는 어떻게 올리는 걸까요? 여러분께서 한번 파헤쳐 보세요.

우측의 날씨 창은 4가지의 날씨를 조정하는데요.
각각 선택하면 사뭇 다른 도시의 분위기와 효과음을 즐기실 수 있습니다.

비오는 분위기를 선택하면 비가 내리는 효과까지 볼 수 있어, 비오는 분위기를 좋아하시는 분이면 더 좋겠지요?

도시를 어느 정도 키워서 스카이뷰로 보면 꽤 그럴싸 합니다. 만족스럽네요 ㅎㅎ.

만드는데 시간은 적게 걸렸지만 그래도 비교적 힘든 부분은 있었습니다.
AI가 못 찾는 원인을 찾느라... 사운드같은건 픽사베이에서 찾아서 넣고 간단한 건 직접 수정하며 발품을 좀 했지요.

AI가 모든걸 다 해줄거라 믿으면 결국 한계에 부딛히는 데요. 내가 코딩을 어느정도 이해해야 그만큼 개발할 수가 있습니다.

4시간동안 씨름한 프롬프트 내역, 공개합니다! ( AI 답변은 너무 길어서 안 넣었어요~ )

안녕 클로드? 듣기로 너는 최고의 게임예술가라고 들었어.

그렇구나. 심시티같은 가상 도시 시뮬레이션을 만들고 싶은데 3D로 네 상상력을 동원해 재미있게 만들어 볼래?

이런 오류가 발생하네. 확인해줄래?

Uncaught TypeError: Cannot destructure property 'year' of 'city.gameTime' as it is undefined.
    at updateUI (ui.js:291:13)
    at City.updateStats (city.js:286:9)
    at City.buildBuilding (city.js:135:14)
    at City.createInitialBuildings (city.js:69:14)
    at new City (city.js:36:14)
    at init (main.js:48:12)
    at main.js:12:1

이런 걸 만들다니 대단해! 오류가 좀 있는데 수정해줄래? 건물이 겹치지 않는 곳애 배치하는데도 '빈 띵에만 건설할 수 있습니다.'라고 나와.

새로 고침하면 건물들이 모두 날아가는데, 로컬 스토리지에 저장해서 다음에 들어오면 다시 복원했으면 좋겠어

Continue

buildBuilding, upgradeBuilding, demolishBuilding 에 저장 기능을 수동으로 추가했어. 로컬 스토리지에 저장한 건물이 복원된 경우 철거가 안되네? 봐 줄래?

음.. 마찬가지인데.. 원인을 살펴보기 위해 건물을 선택하면 오브젝트의 트리 구조를 살펴볼 수 있는 모니터링 화면을 화면 우측 아래 띄워줘

돈이 부족해서 새 건물 건설이 불가능해 테스트가 어려워. 돈을 늘려주는 치트키 기능을 만들어줘

확인해보니 불러온 신축 건물은 
아래와 같은 정보가 뜨는데 불러온 건물은 뜨지 않아.

→ 건물 정보:
▶ ID: 17488652574810ef6cb662a3ce
▶ 타입: residential
▶ 레벨: 1
▶ 위치: X=20.20, Z=15.00

intersect 로 피킹한 건물의 buildingid 가 city.buildings 배열에 없더라구.
해당 부분 확인해 즐래?
참고로 여기서 미리보기할 수 있어.

http://localhost/City/

잘했어. 이제 너가 만들려고 준비한 changeWeather() 함수를  js/weather.js 파일로 분리했어. 날씨 효과를 추가해줄래? 현재 날씨 상태는 UI에서 보여주도록 하고.

비가 내릴 때는 sounds 폴더에 rain.mp3 를 무한 루프로 재생해줘, 파일을 준비해 놓았어

잘 되는데? 밤에는 sounds 폴더의 night.mp3 를 재생하게 수정해줘.

너무 잘하네! 이제 같은 방법으로 '맑음'에는 day.mp3, '흐림'에는 windy.mp3 를 적용해줘.

배경음악도 하나 준비했어. city-bgm.mp3 인데 볼륨은 0.1 정도로 작게 하고 날씨와 관계없이 항상 틀어줘. 웹브라우저 정책이 배경음악이 처음에 재생을 차단하니까 화면 아무데나 클릭하면 재생하게 해줘.

이제 건물 선택시 뜨는 모니터링 창은 기본으로 숨겨줘. 치트키를 누를 때만 등장하게 해줘.

창문의 높이가 건물 꼭대기보다 위에 생기는경우가 있는데 확인해 줄래?@building.js

 

구경거리가 되셨나 모르겠네요?
오늘도 방문 주셔서 감사합니다!