Phaser3-雪花效果

Posted 2020-12-27 wzgblogs

最近想要模仿写雪人兄弟得游戏，其中开场想要用雪花效果。自己琢磨了半天，又去找了一些文章参考，最后实现效果如下：

 

这是最终得实现效果，一开始参照了Phaser3官方的demo，找了一圈没找到合适得。其中有一个是game objectsgroupsprite pool.js 下面的例子，仿照得做发现效果并不好。之后自己又再搜了一圈，最终找到了一篇老外得文章。

老外是用Phaser2.6写的，3.0的API和架构方式都有很多调整，所以只能参照思路，重新实现。大致实现思路如下：

1.用图片雪花，然后从Y=0向下坠落，如果超过显示的高度，设置Y坐标为-10，重新让雪花坠落

2.设置雪花的展示和透明度（每次重新坠落会重新设置显示大小和坠落的X坐标）

上代码：

雪花的类：

 1 class Flake {
 2     constructor(scene,w, h) {
 3         //make the graphic
 4         this.f=scene.add.graphics()
 5         this.f.fillStyle(0xffffff, 1);
 6         this.f.fillCircle(0,0, 5);
 7         //
 8         this.w=w;
 9         this.h=h;
10         //
11         //
12         //init properties 这里是为了让首次加载的雪花再显示界面随机出现，而不是从上往下坠落。效果会好看
13         this.y = Phaser.Math.Between(0, h);
14         this.reset();
15     }
16     reset()
17     {
18         //re-init properites
19         this.x = Phaser.Math.Between(0, this.w);
20         this.drift = Phaser.Math.Between(-1, 1) * (.05 + Math.random() * .1);
21         this.fallSpeed = 1 + Math.random() * 10;
22         this.f.scaleX = .1 + Math.random();
23         this.f.scaleY = this.f.scaleX;
24         this.f.alpha = .1 + Math.random();
25     }
26     move()
27     {
28         this.x+=this.drift;
29         this.y+=this.fallSpeed;
30      
31         if (this.y>this.h)
32         {
33             //take back to top
34             this.y=-10;
35             this.reset();
36         }
37         this.f.setPosition(this.x,this.y);
38         if (this.prevFlake)
39         {
40             //move the previous flake
41             this.prevFlake.move();
42         }
43        
44     }
45     destroy(){
46         this.f.visible=true;
47         this.f.destroy();
48         if (this.prevFlake)
49         {
50             //move the previous flake
51             this.prevFlake.f.destroy();
52         }
53     }
54 }

 

下雪类：

 1 class Snow {
 2     constructor(scene,w = 200, h = 200) {
 3         this.w = w;
 4         this.h = h;
 5         this.lastFlake = null;
 6         //
 7         //
 8         //
 9         this.makeFlakes(scene);
10     }
11     makeFlakes(scene) {
12         for (var i = 0; i < 250; i++) {
13             var flake = new Flake(scene,this.w, this.h);
14             //if the last flake exists 
15             //place it as the prev flake
16             if (this.lastFlake != null) {
17                 flake.prevFlake = this.lastFlake;
18             }
19             this.lastFlake = flake;
20         }
21     }
22     update() {
23         //move the last flake
24         //this will start a chain reaction
25         this.lastFlake.move();
26     }
27     destroy(){
28         this.lastFlake.destroy();
29     }
30 }

使用方法：

 1 class LoadScene extends Phaser.Scene{
 2     constructor(){
 3         super("LoadScene");
 4     }
 5     preload(){
 6     }
 7     create(){
 8 
 9         //雪花特效    
10         this.snow=new Snow(this,config.width,config.height);
11 
12     }
13     update(){
14 
15         this.snow.update();
16     }
17 }

最终实现效果就和开头展示的图片一样啦！

 目录结构如下：

源码

有错误或者更好的方法请联系我！