WebVision Canvas
워크플로우

Phaser Studio 워크플로우를 위한 phaser js 예시

03
타일맵 떨림 수정

카메라가 스프라이트를 따라갈 때 타일맵 떨림 수정

카메라가 스프라이트를 따라갈 때 타일맵이 떨리는 현상이 자주 발생합니다. 원인은 명확하지 않습니다. 에이전트가 씬 코드를 읽고 카메라 추적 설정을 조정합니다. 그런 다음 빌드 명령을 실행하여 프로젝트가 여전히 빌드되는지 확인하고, 브라우저에서 떨림 현상을 직접 확인해야 합니다. 변경 사항을 적용하기 전에 diff를 검토합니다.

01

프로젝트 폴더 열기

에이전트 채팅 창에서 폴더를 엽니다.

02

씬 파일 목록 확인

에이전트가 폴더 내 모든 씬 파일을 나열합니다.

03

씬 코드 읽기

에이전트가 메인 씬 코드 파일을 읽습니다.

04

빌드 명령 실행

에이전트가 오류를 확인하기 위해 빌드 명령을 실행합니다.

기본 게임 구조

src/main.js
class MainScene extends Phaser.Scene {
  constructor() {
    super('MainScene');
  }
  create() {
    this.add.text(400, 300, 'Hello World', {
      fontSize: '32px',
      fill: '#ffffff'
    });
  }
}
const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: MainScene
};
new Phaser.Game(config);

이 일반 JavaScript 예시는 텍스트 객체가 있는 기본 씬 클래스를 보여줍니다. 구성은 게임 유형을 AUTO로 설정하고 너비와 높이를 정의합니다.

phaser typescript 워크플로우

씬 코드 분석

에이전트는 list_dir을 사용하여 프로젝트 구조를 파악하고 씬 파일을 찾은 후, read_file을 통해 메인 코드를 읽어서 게임을 이해합니다. 로컬에서 작동합니다. grep을 사용하여 게임 객체를 검색하여 오류를 찾습니다. web_search와 http_get을 사용하여 공식 Phaser 문서를 읽고 메서드 시그니처를 검증합니다. Plan only 모드에서 변경 사항을 확인하며 검토합니다. Ask first 모드로 전환하여 각 편집을 승인할 수 있습니다. edit_file을 사용하여 편집을 적용하고 모든 파일에 대한 diff를 보여줍니다. 브라우저에서 경로 위치와 스케일 변경 방법을 확인하여 phaser js 예시를 테스트합니다.

카메라 떨림 수정

에이전트는 glob을 사용하여 프로젝트 내 모든 타일맵 및 스프라이트 파일을 찾고, read_file을 사용하여 씬 코드에서 카메라 추적 로직을 읽습니다. 확인합니다. 에이전트는 떨림 효과를 유발하는 특정 카메라 설정을 검색합니다. 카메라平滑화 옵션에 대한 공식 Phaser 문서를 확인합니다. edit_file을 사용하여 씬 파일의 카메라 추적 설정을 수정합니다. 카메라가 스프라이트를 따라갈 때 타일맵 떨림을 수정하려면 이러한 설정을 조정하세요. 에이전트가 로컬 개발 서버를 시작하기 위해 dev 서버 명령을 실행합니다. Shell은 명령의 실제 종료 코드를 표시하고 사용자는 브라우저에서 결과를 확인합니다.

Windows용 WebVision Canvas

오늘 바로 Phaser 프로젝트를 시작하세요

WebVision Canvas 다운로드 ↗