화면단에서 이동시 cpu 부하가 많이 걸리는 현상

✨ Describe

움직이면 노트북 헬리콥터 모드로 변신함

✅ Tasks

[x] cpu 사용량 최적화
[x] 메모리 사용량 최적화

🕰️ Estimated Time of Completion

알수없음

🙋🏻 More

지피티의 답

타일 맵의 크기 줄이기 타일 맵의 크기를 줄이면 로딩 시간과 CPU 사용량이 줄어듭니다. 필요하지 않은 타일을 제거하거나, 타일 맵을 여러 개의 작은 맵으로 나누어 필요할 때만 로드할 수 있습니다.
타일 시트 최적화 타일 시트를 최적화하여 사용하지 않는 타일을 제거하고, 타일 시트의 크기를 줄여 메모리 사용량을 줄일 수 있습니다.
타일 맵 데이터 압축 타일 맵 데이터를 압축하여 전송하고, 클라이언트 측에서 압축을 해제할 수 있습니다. Phaser 3는 zlib과 같은 라이브러리를 사용하여 압축된 데이터를 처리할 수 있습니다.
타일 맵 로딩 비동기화 타일 맵을 비동기적으로 로드하여 게임의 메인 스레드가 블로킹되지 않도록 할 수 있습니다. Phaser 3의 로더는 비동기 로딩을 지원합니다.
타일 맵 레이어 최적화 타일 맵의 레이어 수를 줄이고, 사용하지 않는 레이어를 비활성화하여 CPU 사용량을 줄일 수 있습니다.
카메라와 뷰포트 최적화 현재 화면에 보이는 타일만 렌더링하여 CPU 사용량을 줄일 수 있습니다. Phaser 3는 카메라와 뷰포트 기능을 제공하여 이 작업을 지원합니다.

Phaser 3에서 타일 맵을 로딩할 때 CPU 자원을 효율적으로 사용하기 위한 몇 가지 방법이 있습니다. 타일 맵은 대규모의 데이터를 다루기 때문에 최적화가 필요합니다. 아래는 이를 위한 몇 가지 전략입니다.

타일 맵의 크기 줄이기 타일 맵의 크기를 줄이면 로딩 시간과 CPU 사용량이 줄어듭니다. 필요하지 않은 타일을 제거하거나, 타일 맵을 여러 개의 작은 맵으로 나누어 필요할 때만 로드할 수 있습니다.
타일 시트 최적화 타일 시트를 최적화하여 사용하지 않는 타일을 제거하고, 타일 시트의 크기를 줄여 메모리 사용량을 줄일 수 있습니다.
타일 맵 데이터 압축 타일 맵 데이터를 압축하여 전송하고, 클라이언트 측에서 압축을 해제할 수 있습니다. Phaser 3는 zlib과 같은 라이브러리를 사용하여 압축된 데이터를 처리할 수 있습니다.
타일 맵 로딩 비동기화 타일 맵을 비동기적으로 로드하여 게임의 메인 스레드가 블로킹되지 않도록 할 수 있습니다. Phaser 3의 로더는 비동기 로딩을 지원합니다.
타일 맵 레이어 최적화 타일 맵의 레이어 수를 줄이고, 사용하지 않는 레이어를 비활성화하여 CPU 사용량을 줄일 수 있습니다.
카메라와 뷰포트 최적화 현재 화면에 보이는 타일만 렌더링하여 CPU 사용량을 줄일 수 있습니다. Phaser 3는 카메라와 뷰포트 기능을 제공하여 이 작업을 지원합니다.

아래는 위의 방법들을 적용한 예제 코드입니다.

javascript 코드 복사 // 게임 설정 const config = { type: Phaser.AUTO, width: 800, height: 600, scene: { preload: preload, create: create } };

const game = new Phaser.Game(config);

function preload() { // 타일 시트와 타일 맵 로드 this.load.tilemapTiledJSON('map', 'path/to/tilemap.json'); this.load.image('tiles', 'path/to/tileset.png'); }

function create() { // 타일 맵 생성 const map = this.make.tilemap({ key: 'map' }); const tileset = map.addTilesetImage('tileset_name', 'tiles');

// 필요한 레이어만 로드
const layer = map.createLayer('Tile Layer 1', tileset, 0, 0);

// 카메라 설정
this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
this.cameras.main.startFollow(player);

// 화면에 보이는 타일만 렌더링하도록 설정
layer.setCullPadding(2, 2);

}

타일 맵을 나누어 로딩하기 큰 타일 맵을 여러 개의 작은 맵으로 나누고, 플레이어의 위치에 따라 필요한 맵만 로드할 수 있습니다. 이는 메모리 사용량과 CPU 부하를 줄이는 데 효과적입니다.
타일 맵 캐싱 자주 사용되는 타일 맵 데이터를 캐싱하여 다시 로드할 때 빠르게 접근할 수 있습니다.

위의 방법들을 적용하여 Phaser 3에서 타일 맵 로딩 시 CPU 자원을 효율적으로 사용하도록 최적화할 수 있습니다. 필요에 맞게 최적화 전략을 조합하여 사용하시기 바랍니다.

Jungle-Team3-Olympus / Pixeller-react