GDevelop

← 게임에 콘텐츠 연결하기

GDevelop 5 · JavaScript 이벤트

먼저 문장 하나를 화면에 표시해 보세요. 이 작은 예제는 실제 항구 내보내기 파일을 직접 읽으며, 완전한 대화 재생기는 아닙니다. 이후 데이터를 게임 UI에 연결하세요.

1 · 파일 및 장면 준비

프로젝트 리소스에 story.json이라는 JSON 리소스로 story.json을 추가하세요. DialogueText라는 Text 객체를 만들어 장면에 배치하세요. At the beginning of the scene 이벤트 아래에 JavaScript 이벤트를 추가하세요. 로드 콜백이 화면 텍스트를 채웁니다.

story.json · 내보낸 파일 설명

2 · 첫 번째 텍스트 표시

// JavaScript event under "At the beginning of the scene".
// Register story.json as a JSON resource named story.json first.
const label = runtimeScene.getObjects('DialogueText')[0];
const manager = runtimeScene.getGame().getJsonManager();
manager.loadJson('story.json', (error, story) => {
  if (error || !story) { label.setString('Cannot load story.json'); return; }
  try {
    const locale = 'en';
    const id = 'fd7b61a3-8233-4ba7-8f77-b88b119a91bf';
    const content = story.content;
    const translation = content.translations[locale]?.[id];
    const message = translation ? translation.message : content.texts[id].sourceMessage;
    const line = message.segments.map(segment => {
      if (segment.kind !== 'text') throw new Error('Text-only example');
      return segment.text;
    }).join('');
    label.setString(line);
  } catch (error) { label.setString('Cannot read this story text'); }
});

예상 출력은 “Welcome to the harbour. I am Mira.”입니다. locale = "de" 또는 언어 매개변수 de를 사용하면 “Willkommen im Hafen. Ich bin Mira.”가 표시됩니다. 없는 언어는 원문을 사용합니다. 이 예제는 텍스트 세그먼트를 지원하며, 자리표시자를 알림 없이 무시하지 않습니다.

3 · 한 문장에서 대화

위의 고정 텍스트 ID는 첫 번째 테스트용입니다. 게임에서는 story-index.json에서 flowRef/entryRef를 선택하고 execution.entries[entryRef].nodeRef, 이어서 execution.nodes[nodeRef]를 읽으세요. 현재 대화 노드는 text.textRef와 speakerRef를 제공합니다. 다음 진행 방식은 노드 종류에 따라 달라집니다.

텍스트 객체는 setString()을 사용합니다. 답변 버튼 이벤트는 선택지 ID를 유지하고, JavaScript는 같은 JSON 객체를 평가할 수 있습니다. End에서는 hide(true)로 대화 객체를 숨기고 장면 변수로 입력 이벤트를 제어하세요.

1. Continue와 End: 연결을 따라 진행하고 대화창 닫기
2. 선택지: 답변 ID, 표시 순서, 선택한 답변의 다음 진행
3. 조건과 변수: 10 또는 2 골드
4. 언어: 같은 ID로 새 언어의 콘텐츠 가져오기
5. 명령: 아이템을 주고 가게를 엽니다.
6. Call/Return: 하위 이야기로 이동했다가 돌아오기

// story is already loaded. Keep each optionId on its answer button.
const choice = story.execution.nodes['42edfff8-b8fe-46bf-ae0d-9e2347b6e726'];
for (const optionId of choice.optionOrder) {
  const option = choice.options[optionId];
  console.log(optionId, option.text.textRef); // Resolve text, then create your button.
}
// Inspect the actual purchase check. This particular node is Gold >= 5.
const branch = story.execution.nodes['c1c3c372-0a73-4cd0-851d-ede59d5709bb'];
const gold = 10; // Repeat with 2, using your current game value.
const next = gold >= branch.condition.right.value.value ? branch.whenTrue : branch.whenFalse;
console.log(next.nodeRef);

4 · 자신의 이미지 연결하기

이 추가 예제는 현재 대화 객체 node와 주석에 적힌 UI 요소가 있다고 가정합니다. C++와 MonoGame에서는 speakerRef를 이미 SpeakerId 또는 speakerId로 읽은 상태입니다. 키는 미라의 실제 캐릭터 ID이며, 이미지 이름과 위치는 게임에서 정합니다. 표시된 위치에 코드를 넣으세요.

// Add the image to a Portrait Sprite animation named Mira in the editor.
const animations = {'807b2957-7bab-4a28-83a4-1f3d1589bbc2': 'Mira'};
const portrait = runtimeScene.getObjects('Portrait')[0];
const animation = animations[node.speakerRef];
portrait.hide(!animation);
if (animation) portrait.setAnimationName(animation);

화자 이름도 대사처럼 content.characters[speakerRef].nameTextRef로 구하세요. 이미지 연결이 없으면 이전 초상화를 숨기거나 대체 이미지를 표시하세요. 이미지는 언어에 따라 선택되지 않습니다.

전체 내보내기의 이미지 참조 사용하기

5 · 게임과 함께 파일 배포하기

파일을 프로젝트 리소스로 등록하고 내보낼 때도 포함하세요. 로컬 디스크의 고정 경로를 코드에 넣지 마세요. 콜백은 비동기이므로 이후 이벤트는 로딩이 성공한 뒤 데이터를 사용해야 합니다.

결과 확인

1. 영어와 독일어 인사말이 올바르게 표시되고, 사용할 수 없는 언어를 선택하면 영어 원문이 표시되어야 합니다.
2. 진행 로직을 추가했다면 두 답변, 금화 10개와 2개, 하위 이야기에서 돌아오기, End를 시험하세요.
3. 빌드한 게임을 프로젝트 폴더 밖에서 실행하세요. JSON, 글꼴, 초상화가 그곳에서도 제공되어야 합니다.

공식 문서

API 및 이 접근 방식을 위한 설정 참조:

• JSON 리소스 관리자
• RuntimeGame
• Sprite 애니메이션 API