버튼 만들기

「다시 하기」, 「시작」처럼 화면에서 누르는 버튼을 만들고, 눌렀을 때 스크립트가 일을 하게 합니다. 버튼은 BUTTON 컴포넌트와 Image Element가 붙은 엔티티이고, 글자는 그 자식 Text Element입니다.

이 페이지의 실측은 2026-10-29 oasisw.ai 에디터(판 표시 OasisW 7e2aa65, macOS Chrome)에서 한 것입니다. 별도 표시가 없는 동작은 1회 확인했습니다.

시작하기 전에

• 씬에 2D Screen이 있어야 합니다. 없으면 HIERARCHY + → User Interface → 2D Screen으로 만듭니다(화면 위 글자와 버튼의 구조).
• 버튼 글자가 보이려면 프로젝트에 글꼴 에셋이 있어야 합니다(점수·안내 글자 바꾸기 3단계).

에디터에서 직접 하기

1. 버튼 만들기

1. HIERARCHY에서 2D Screen을 고릅니다.
2. + → User Interface → Button을 누릅니다.
3. 2D Screen 아래에 Button이 생기고, 그 아래에 자식 Text가 함께 생깁니다.

새 Button에는 BUTTON과 ELEMENT(Image, 100×100, 화면 가운데) 컴포넌트가 붙어 있습니다. 실측에서 Launch하자 화면 가운데에 흰 사각형과 검은 Text 글자가 나왔습니다. 자식 Text의 Font에는 프로젝트에 이미 있던 글꼴 에셋(NanumGothic.ttf)이 들어 있었습니다. 글꼴 에셋이 하나도 없는 프로젝트에서 만들면 Text의 Font가 Empty이고, Launch하면 흰 사각형만 보이고 글자는 나오지 않았습니다(2026-10-30 실측, 1회). 이때는 글꼴 에셋을 올리고 Text의 Font에 넣어야 글자가 보입니다.

2. 모양 바꾸기

• 버튼 글자: 자식 Text를 고르고 Text 칸을 바꿉니다. 예: 다시 하기. 한글이면 글꼴의 Characters에 그 글자를 넣고 다시 생성합니다.
• 크기와 위치: Button의 Width·Height와 Preset을 바꿉니다.
• 색: Button의 ELEMENT Color가 기본 색이고, BUTTON의 Hover Tint·Pressed Tint가 마우스를 올렸을 때와 누를 때의 색입니다.

칸 전체는 Element 속성에 있습니다.

3. 눌렀을 때 일하게 하기

버튼은 누르면 click 이벤트를 보냅니다. 스크립트에서 이 이벤트를 받습니다. 다음은 누를 때마다 몇 번째인지 기록하는 스크립트입니다. 스크립트를 만들고 붙이는 법은 새 스크립트 만들고 붙이기에 있습니다.

var ButtonClick = ow.createScript('buttonClick');

ButtonClick.prototype.initialize = function () {
    this.count = 0;
    this.entity.button.on('click', this.onClick, this);
};

ButtonClick.prototype.onClick = function () {
    this.count += 1;
    console.log('버튼을 눌렀습니다: ' + this.count + '번째');
};

1. 이 스크립트를 Button 엔티티에 붙입니다.
2. ▶ Launch로 열고 버튼을 누릅니다.
3. 게임 탭의 브라우저 Console에 기록이 나오는지 봅니다(디버깅).

실측에서는 Launch한 게임에서 위 코드로 스크립트를 만들어 Button에 붙이고 버튼을 두 번 눌렀습니다. 두 번 모두 onClick이 불렸습니다(1·2번째).

메뉴로 만든 Button은 ELEMENT의 Use Input이 처음부터 켜져 있습니다. 2026-10-30 실측에서 버튼을 한 번 클릭하자 hoverstart → pressedstart → click 순서로 이벤트가 왔고, 실행 중에 Use Input을 끄자 같은 자리를 눌러도 이벤트가 하나도 오지 않았습니다(1회).

게임을 처음부터 다시 하기

가장 단순한 방법은 지금 씬을 다시 불러오는 것입니다. 씬의 모든 엔티티가 에디터에 저장된 처음 상태로 돌아갑니다.

var RestartButton = ow.createScript('restartButton');

RestartButton.prototype.initialize = function () {
    this.entity.button.on('click', this.onClick, this);
};

RestartButton.prototype.onClick = function () {
    // 따옴표 안은 SETTINGS의 Scene Name과 같아야 합니다
    this.app.scenes.changeScene('physics-1029');
};

실측에서 상자를 X -2로 옮긴 뒤 this.app.scenes.changeScene('physics-1029')를 실행하자, 씬이 다시 불러와지고 상자가 처음 자리(높이 4)에서 다시 떨어져 X 3, 높이 0.5에 멈췄습니다(1회). 씬 이름이 바뀌면 코드도 고쳐야 하므로, 이름을 스크립트 속성(type: 'string')으로 꺼내 두면 편합니다.

AI가 만든 게임이라면 이미 있는 재시작 기능(키 입력 등)을 버튼에 연결하는 편이 나을 수 있습니다. 점수를 프로젝트 전체에서 관리하는 스크립트가 있으면 씬만 다시 불러와서는 점수가 남을 수 있기 때문입니다.

AI에게 맡기기

게임이 끝나면 화면 가운데에 "다시 하기" 버튼을 보여 주고, 누르면 처음부터 다시 시작하게 해 주세요.
버튼은 2D Screen 아래에 만들고, 이름은 RestartButton으로 해 주세요.
요청한 것 외에는 손대지 마세요.

끝나면 Launch로 게임을 끝까지 해 본 뒤 버튼을 눌러 봅니다. 버튼 글자가 한글이면 글꼴에 그 글자가 들어 있는지도 봅니다. 작성 대기 AI에게 맡기기 실측 — 같은 요청 3회

막혔을 때

다음으로

• Element 속성
• 이벤트와 스크립트 간 통신