8 Phaser3-图片透明效果

最新推荐文章于 2024-06-16 18:09:06 发布

纵横驰骋的小野马

最新推荐文章于 2024-06-16 18:09:06 发布

阅读量82

点赞数

分类专栏： Phaser 3 文章标签：动画 javascript

本文链接：https://blog.csdn.net/qiqi123j/article/details/133344320

版权

Phaser 3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

效果展示

在这里插入图片描述

关键技术点

元素使用setAlpha设置透明度，可以设置整体透明、局部透明和动态透明

部分主要文件代码

BootScene.js

import {Scene} from 'phaser'
import bear from '@/game/assets/bear.png'
import barbarian from '@/game/assets/barbarian.png'

export default class BootScene extends Scene {
    constructor() {
        super({key: 'BootScene'});
    }

    preload() {
        // 加载图片素材
        this.load.image("bear", bear)
        this.load.image("barbarian", barbarian)
    }

    create() {
        this.scene.start('PlayScene')
    }
}

PlayScene.js

import {Scene, Display} from 'phaser'
export default class PlayScene extends Scene {
    constructor() {
        super({key: 'PlayScene'})
    }

    create() {

        this.barbarian = this.add.image(0,0,"barbarian").setOrigin(0)
        this.bear1 = this.add.image(0,0,"bear")
        this.bear2 = this.add.image(0,0,"bear")
        this.bear3 = this.add.image(0,0,"bear")
        this.bear4 = this.add.image(0,0,"bear")
        this.bear5 = this.add.image(0,0,"bear")

        // 顺序top left, top right, bottom left, bottom right，0为透明
        // 效果为底部透明
        this.bear1.setAlpha(1, 1, 0, 0)
        // 整体透明
        this.bear2.setAlpha(0.2)
        // 效果为上部透明
        this.bear3.setAlpha(0, 0, 1, 1)
        // 左部透明
        this.bear4.alphaTopLeft = 0;
        // 多组透明效果切换
        this.tweens.add({
            targets: this.bear5,
            alphaTopLeft: { value: 0, duration: 1000, ease: 'Power1' },
            alphaBottomRight: { value: 0, duration: 1000, ease: 'Power1' },
            alphaBottomLeft: { value: 0, duration: 1000, ease: 'Power1', delay: 500 },
            yoyo: true,
            loop: -1

        });

        Display.Align.In.Center(this.bear1, this.barbarian);
        Display.Align.In.TopRight(this.bear2, this.barbarian);
        Display.Align.In.TopLeft(this.bear3, this.barbarian);
        Display.Align.In.TopCenter(this.bear4, this.barbarian);
        Display.Align.In.BottomCenter(this.bear5, this.barbarian);
    }

    update() {
    }
}