iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 24
0
Modern Web

Phaser 幫我撐個 30 天系列 第 24

Day 24:Light

》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 上。
https://ithelp.ithome.com.tw/upload/images/20181108/20111617SIA2KtAG9s.png


今天就先到這裡,我們明天見。


上一篇
Day 23:Follow
下一篇
Day 25:Tiled Map Editor
系列文
Phaser 幫我撐個 30 天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言