▲
GN⁺ 6달전 | parent | ★ favorite | on: CSS 전용 지형 생성기 Layoutit Terra(terra.layoutit.com)
Hacker News 의견

  • JS를 끄면 지형 대신 로더만 보임. 정말 CSS-Only인지 궁금했음
    JS가 있어도 대단한 성취이긴 하지만, JS 없이도 동작하길 기대했음
    예를 들어 이 프로젝트는 진짜로 JS 없이 작동함

    • 렌더 엔진이 순수 CSS로 되어 있는 것 같음. 정적인 맵은 CSS로 표시할 수 있지만, 지형을 수정하는 도구는 JS가 필요함
    • 의도는 완성 후 다운로드한 결과물이 JS 없이도 작동한다는 의미 같음
      무언가를 만든 뒤 Download Code 버튼을 누르면, 그 HTML 패키지는 JS 없이도 로컬에서 렌더링됨

  • 정말 Roller Coaster Tycoon 같은 느낌이 남. 많은 사람들이 자신이 좋아하는 시뮬레이션 게임을 떠올릴 듯함. 멋진 작업임

    • 이런 등각 투영(isometric) 기반의 건설 게임이 그리움. RC Tycoon, Zoo Tycoon, Sim City, TTD 등
      현실감은 덜하지만, 모든 구조물이 완벽히 정렬되고 지도를 깔끔히 채울 수 있어서 작업이 즐거웠음
      반면 Cities Skylines나 Planet Coaster에서는 도로나 경로를 만드는 게 늘 어색하고 답답했음
    • 나는 오히려 OpenTTD가 떠올랐음
    • Populous도 많이 생각남. 참고로 Populous 위키 문서를 보면 어떤 게임인지 알 수 있음

  • “CSS-only”라기엔 JS가 꽤 많음. 렌더링만 CSS로 하는 것 같음

    • CodePen에서 CSS/HTML만으로도 지형을 열어볼 수 있음. 단, 인터랙션이나 드래그는 불가능함
      JS는 단지 지형이나 카메라 각도를 조정하는 UI 역할을 하는 듯함. 그래도 놀라운 성취임
    • “CSS-Only Terrain을 생성하는 Generator”라고 부르는 게 더 정확할 듯함
    • HTML 태그와 이미지도 많은데, 이건 분명 CSS-only가 아님. 약간 과장된 제목 같음
    • JS를 끄면 작동하지 않음. 제목이 오해를 불러일으켜 실망스러움

  • 정말 놀라움. SimCity 2000을 보는 듯한 느낌임

    • 그런데 SimCity 2000은 보통 노란빛 갈색 타일이 많지 않음? 3000 버전이 초록색 땅이었던 걸로 기억함

  • Populous가 떠오름. 정말 멋짐

    • 고마움! Populous와 Transport Tycoon이 큰 영감이 되었음
    • 나도 같은 생각이었음. 특히 지형을 올리고 내리는 도구가 Populous를 떠올리게 했음
      게임을 모르는 사람을 위해 Populous 위키 링크를 남김

  • 여러 지형 생성기를 써봤지만, 이게 제일 마음에 듦
    “CSS only”라는 제약이 있긴 하지만 충분히 매력적임
    마침 2D에서 3D 게임 개발로 전환 중이라 이런 프로젝트가 큰 도움이 됨

  • 지형을 회전하거나 줌인/줌아웃할 수 있다는 걸 깨달았을 때 정말 멋졌음

  • CSS-Only 아트에 관심 있는 사람이라면 Lynn Fisher의 작품도 추천함
    https://a.singlediv.com/

  • Roller Coaster Tycoon(RCT) 을 떠올리게 함. 아주 멋짐

  • 인상적이지만, 지형 수정이나 카메라 이동 후 지연(lag) 이 느껴짐
    브라우저가 GPU를 쓰는지 CPU를 쓰는지, 프레임당 밀리초를 확인할 방법이 있는지 궁금함

    • 브라우저 엔진의 레이아웃/스타일/컴포지션 문제로 보임
      Safari에서는 paint에 91%, layout에 6%, style에 2%의 CPU 시간이 걸림. 상태 변경마다 약 100~200ms 정도 소요됨
      Safari에서는 Web Inspector의 Timelines 탭에서 확인할 수 있고, Chrome에도 비슷한 기능이 있음