Isora 가이드

English | 한국어

Isora 는 아이소메트릭 씬을 데이터(JSON) 로 만들고, React 앱에서 그리고, 사람과 설비를 움직이는 프레임워크다. 씬은 Studio(GUI)나 코드로 만들고, 앱은 @isora/react 로 띄운다. 무엇을 어디에 둘지와 누가 어디로 갈지는 모두 @isora/core 의 순수 함수가 정하므로 서버 렌더·되감기·배속·다른 렌더러에서도 같은 모습이 나온다.

씬 JSON ──┐
          ├─► @isora/core ─ 배치·자리·길 찾기·행동 계획·움직임·깊이 정렬 ─► 그릴 파츠
에셋 팩 ──┘                                                            │
                                     @isora/react ─ <IsoScene>·훅·매 프레임 레이어 ◄─┘

문서

문서	이런 때 읽는다
시작하기	씬 파일을 React 앱에 처음 띄운다. 클릭·실시간 상태를 붙인다
기본 개념	좌표·오브젝트·에셋·자세·상태, 틱과 프레임, 결정성을 이해한다
사람 움직이기	루틴·시간표로 알아서 움직이게 하거나, 명령으로 원하는 곳에 보낸다. 위치·활동을 읽는다
그리기	<IsoScene> 을 다루고, 오버레이·클릭 좌표를 쓰고, 훅으로 직접 그리거나 다른 렌더러에 붙인다
움직임 엔진	걸음·앉기가 어떻게 계산되고 왜 가구를 뚫지 않는지, 성능은 어떤지
사람 에셋 만들기	직접 만든 사람 에셋이 걷고 앉도록 파츠를 짠다
구조	패키지·모듈이 나뉜 방식, 데이터 흐름, 확장 지점, 아직 없는 것
API 한눈에	공개 함수·훅·컴포넌트 목록 (언어 포함)

30초 요약

import { createRegistry, parseScene } from '@isora/core'
import { IsoScene, useBehaviorPlayback } from '@isora/react'
import { officialPacks } from '@isora/assets'
import sceneJson from './scenes/office.isora.json'

const scene = parseScene(sceneJson)
const registry = createRegistry(officialPacks)

export function Office() {
  // 앱이 행동 재생을 쥐면 사람에게 명령하고, 누가 무엇을 하는지 읽을 수 있다.
  // behavior(루틴)가 있는 사람은 알아서 움직이고, control 에 적은 사람(kim)은 명령만 기다린다.
  const behavior = useBehaviorPlayback(scene, registry, { control: ['kim'] })
  return (
    <IsoScene
      scene={scene}
      registry={registry}
      behavior={behavior}
      showActivities
      onSceneClick={(point, object) => {
        // 김 대리를 누른 곳(의자면 그 의자)으로 보낸다.
        if (object?.id.startsWith('chair')) behavior.command('kim', { type: 'do', spot: object.id })
        else behavior.command('kim', { type: 'go', to: [point[0] - 0.25, point[1] - 0.25] })
      }}
    />
  )
}