====== 🎮 Phaser.js ======

Phaser.js는 HTML5 게임 개발을 위한 JavaScript 프레임워크로, 웹 브라우저에서 게임을 만들 수 있게 해줍니다.

===== 📋 정의 =====

**Phaser.js**는 HTML5 Canvas와 WebGL을 기반으로 한 오픈소스 게임 프레임워크입니다. 스프라이트, 애니메이션, 사운드, 물리 엔진 등 게임 개발에 필요한 모든 기능을 제공합니다.

===== 🎯 주요 특징 =====

**1. 크로스 플랫폼 지원**
- 웹 브라우저에서 실행되는 HTML5 게임을 개발할 수 있습니다.
- 모바일, 데스크톱, 태블릿 등 다양한 기기에서 동작합니다.

**2. 풍부한 게임 기능**
- 스프라이트 관리 및 애니메이션
- 사운드 및 음악 재생
- 물리 엔진 (Arcade Physics, Matter.js)
- 입력 처리 (키보드, 마우스, 터치)
- 카메라 및 시각 효과

**3. 직관적인 API**
- 게임 개발에 특화된 API를 제공합니다.
- 씬(Scene) 기반 구조로 게임 상태를 관리합니다.

===== 🏗️ 기본 구조 =====

**Phaser 게임 설정:**
<code javascript>
import Phaser from 'phaser';

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    parent: 'game-container',
    backgroundColor: '#2c3e50',
    scene: {
        preload: preload,
        create: create,
        update: update
    },
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 300 },
            debug: false
        }
    }
};

const game = new Phaser.Game(config);
</code>

**기본 게임 씬:**
<code javascript>
function preload() {
    // 에셋 로드
    this.load.image('player', 'assets/player.png');
    this.load.image('background', 'assets/background.png');
    this.load.audio('jump', 'assets/jump.wav');
}

function create() {
    // 게임 객체 생성
    this.add.image(400, 300, 'background');
    this.player = this.physics.add.sprite(100, 450, 'player');
    
    // 입력 설정
    this.cursors = this.input.keyboard.createCursorKeys();
    
    // 사운드 설정
    this.jumpSound = this.sound.add('jump');
}

function update() {
    // 게임 로직 업데이트
    if (this.cursors.left.isDown) {
        this.player.setVelocityX(-160);
    } else if (this.cursors.right.isDown) {
        this.player.setVelocityX(160);
    } else {
        this.player.setVelocityX(0);
    }
    
    if (this.cursors.up.isDown && this.player.body.touching.down) {
        this.player.setVelocityY(-330);
        this.jumpSound.play();
    }
}
</code>

===== 🎨 스프라이트 관리 =====

스프라이트는 비디오 게임이나 컴퓨터 그래픽에서 사용되는 2D 비트맵 이미지 또는 애니메이션의 구성 요소입니다. 화면에 표시되는 캐릭터, 오브젝트 또는 배경 요소가 될 수 있습니다.

**스프라이트 생성:**
<file javascript>
// 이미지 스프라이트
const sprite = this.add.sprite(x, y, 'spriteKey');

// 물리 바디 추가
const physicsSprite = this.physics.add.sprite(x, y, 'spriteKey');

// 그룹 생성
const group = this.add.group();
group.add(sprite1);
group.add(sprite2);
</file>

**애니메이션 설정:**
<file javascript>
// 스프라이트 시트에서 애니메이션 생성
this.anims.create({
    key: 'walk',
    frames: this.anims.generateFrameNumbers('player', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
});

// 애니메이션 재생
sprite.play('walk');
</file>
===== 🎵 사운드 시스템 =====

**사운드 관리:**
<code javascript>
// 사운드 로드
this.load.audio('bgMusic', 'assets/music.mp3');
this.load.audio('jumpSound', 'assets/jump.wav');

// 사운드 재생
const bgMusic = this.sound.add('bgMusic', { loop: true, volume: 0.5 });
bgMusic.play();

// 효과음 재생
this.sound.play('jumpSound');
</code>

===== 🎮 입력 처리 =====

**키보드 입력:**
<code javascript>
// 커서 키 설정
this.cursors = this.input.keyboard.createCursorKeys();

// 특정 키 설정
this.spaceKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);

// 키 이벤트
this.input.keyboard.on('keydown-A', function() {
    console.log('A 키가 눌렸습니다!');
});
</code>

**마우스/터치 입력:**
<code javascript>
// 클릭 이벤트
this.input.on('pointerdown', function(pointer) {
    console.log('클릭 위치:', pointer.x, pointer.y);
});

// 스프라이트 클릭 이벤트
sprite.setInteractive();
sprite.on('pointerdown', function() {
    console.log('스프라이트가 클릭되었습니다!');
});
</code>

===== 🏃 물리 엔진 =====

**Arcade Physics:**
<code javascript>
// 물리 바디 추가
this.player = this.physics.add.sprite(100, 450, 'player');

// 중력 설정
this.player.body.setGravityY(300);

// 충돌 감지
this.physics.add.collider(this.player, this.platforms);

// 오버랩 감지
this.physics.add.overlap(this.player, this.coins, this.collectCoin, null, this);
</code>

**충돌 처리:**
<code javascript>
function collectCoin(player, coin) {
    coin.disableBody(true, true);
    this.score += 10;
    this.scoreText.setText('Score: ' + this.score);
}
</code>

===== 📱 모바일 최적화 =====

**반응형 디자인:**
<code javascript>
const config = {
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH
    }
};
</code>

**터치 컨트롤:**
<code javascript>
// 가상 조이스틱
this.joyStick = this.plugins.get('rexvirtualjoystickplugin').add(this, {
    x: 100,
    y: 500,
    radius: 50,
    base: this.add.circle(0, 0, 50, 0x888888),
    thumb: this.add.circle(0, 0, 25, 0xcccccc),
    // ... 기타 설정
});
</code>

===== 🎨 시각 효과 =====

**파티클 시스템:**
<code javascript>
// 파티클 생성
const particles = this.add.particles('particle');

const emitter = particles.createEmitter({
    speed: 100,
    scale: { start: 1, end: 0 },
    blendMode: 'ADD'
});

// 파티클 발사
emitter.setPosition(400, 300);
</code>

**카메라 효과:**
<code javascript>
// 카메라 팔로우
this.cameras.main.startFollow(this.player);

// 카메라 흔들기
this.cameras.main.shake(500, 0.01);

// 페이드 효과
this.cameras.main.fade(1000, 0, 0, 0);
</code>

===== 📊 성능 최적화 =====

**메모리 관리:**
<code javascript>
// 사용하지 않는 텍스처 제거
this.textures.remove('unusedSprite');

// 스프라이트 풀링
const spritePool = this.add.group();
for (let i = 0; i < 10; i++) {
    const sprite = this.add.sprite(0, 0, 'bullet');
    sprite.setActive(false);
    sprite.setVisible(false);
    spritePool.add(sprite);
}
</code>

**렌더링 최적화:**
<code javascript>
// 정적 객체는 한 번만 렌더링
this.add.staticGroup();

// 배치 렌더링 사용
this.add.batch('sprites');
</code>

===== 📚 관련 용어 =====

  * [[wiki:glossary:web_technologies:javascript|JavaScript]] - 프로그래밍 언어
  * [[wiki:glossary:web_technologies:css|CSS]] - 스타일링
  * [[wiki:glossary:development_tools:git:github|GitHub]] - 코드 저장소

===== 🔗 관련 문서 =====

  * [[wiki:it:dream_of_enc:metaverse:phaser|Phaser.js 게임 엔진]]
  * [[wiki:it:dream_of_enc:metaverse:game_logic|바둑 게임 로직]]
  * [[wiki:glossary:web_technologies:css|CSS]] - 스타일링
  * [[wiki:glossary:development_tools:git:github|GitHub]] - 코드 저장소

---
//이 페이지는 자동으로 생성되었습니다.//