》Light
今天我們來試看看燈光效果。首先你需要有 normal maps,可以使用工具來製作 SpriteIlluminator 工具來製作。
》Javascript 內容
let scene = new Phaser.Scene('Game')
let config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene
}
let game = new Phaser.Game(config)
scene.preload = function () {
    this.load.setPath('assets/');
    
    // 加載圖像, 01.png 為一般圖像 ;  01_n.png 為 normal map
    this.load.image('character', ['01.png', '01_n.png']);
}
scene.create = function() {
    let capguy = this.add.sprite(250, 300, 'character')
    capguy.setScale(0.5)
    
    // 讓角色接受光源
    capguy.setPipeline('Light2D')
    // 在 (350, 250) 位置添加半徑 200 的光源
    let light = this.lights.addLight(350, 250, 200)
    this.lights.enable()
        
    // 設定環境燈
    this.lights.setAmbientColor(0x555555)
    // 滑鼠移動,變更燈光位置
    this.input.on('pointermove', function (pointer) {
        light.x = pointer.x;
        light.y = pointer.y;
    });
}
》結論
今天我們使用簡單的燈光效果,如果載入 sprite sheet 的話,也必須有 normal map sheet,我們可以使用 TexturePack 工具產生 json 檔,使用 load.multiatlas() 載入兩種 sheet,將 normal 連結到 sprite sheet 上。
今天就先到這裡,我們明天見。