100个优秀的loading进度条PSD素材下载

http://sc.chinaz.com/info/130128045447.htm
好的,下面是一个简单的用Phaser.6写loading进度条的示例代码: ```javascript // 创建Phaser游戏实例 const game = new Phaser.Game({ type: Phaser.AUTO, width: 800, height: 600, scene: { preload: preload, create: create, update: update } }); // 加载进度条相关的资源 function preload() { this.load.image('loading-bar', 'assets/loading-bar.png'); } // 创建loading进度条 function create() { // 添加背景 this.add.rectangle(0, 0, game.config.width, game.config.height, 0x000000).setOrigin(0); // 添加loading图标 const loadingBar = this.add.image(game.config.width / 2, game.config.height / 2, 'loading-bar'); // 创建loading进度条 const progressBar = this.add.graphics(); const progressBox = this.add.graphics(); progressBox.fillStyle(0x222222, 0.8); progressBox.fillRect(game.config.width / 2 - 160, game.config.height / 2 - 25, 320, 50); // 监听加载进度事件,更新进度条 this.load.on('progress', function (value) { progressBar.clear(); progressBar.fillStyle(0xffffff, 1); progressBar.fillRect(game.config.width / 2 - 150, game.config.height / 2 - 15, 300 * value, 30); }); // 监听加载完成事件,跳转到游戏场景 this.load.on('complete', function () { // TODO: 跳转到游戏场景 }); } function update() {} ``` 在上述代码中,我们首先在preload函数中加载了一个loading-bar.png图片作为loading图标的素材,然后在create函数中创建了一个loading-bar精灵,并且用add.graphics()函数创建了一个进度条的背景和进度条本身,最后监听了Phaser的load.on('progress')事件,实时更新进度条的宽度,同时也监听了load.on('complete')事件,在所有资源加载完成后跳转到游戏场景。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值