Cordova 打包phaser3.0 iOS游戏

Posted 2023-03-26

参考技术A 公司的项目是使用vue做前端的界面和逻辑，后面有一部分是使用phaser3.0 做了一个小游戏放到里面，然后整个项目打包成ios 和 android 项目。
其中遇到的几个问题总结一下，希望给有遇到同样问题困扰的人一个解决问题的方向：

这是我们最先面临的问题，我们需要数据的交互传递。
1、从vue界面传递到phaser游戏界面：（变量和无参数方法）

我们在vue界面中定义好变量和方法，将这些变量和方法传递给phaser的游戏界面中。
而我们在phaser 中的调用是直接这样使用：

上面是没有参数的时候调用。

2、phaser 和 vue 相互传递参数的调用
vue界面

phaser 界面

我们使用的是Cordova 打包的，在这个过程中，强调的一点是使用的phaser3打包的，而且用到了WKWebview，这个问题好像phaser2 是不存在这个样的，我搜索的好像是phaser3 加载器无法加载file://这样的资源。
我总结尝试了很久，找到了一个解决的办法。
我们需要在其中间加一个cordova插件：
cordova-plugin-wkwebview-file-xhr
我只解决了phaser3.0 使用cordova 打包过程中不能加载图片的问题，可能是一类问题，但是具体的不知道。
我找到这个问题在 github issuse .
这就是我的探究出来的，感觉改这个bug找了好长时间，记录一下吧。

如何在使用 Cordova 的 Phaser 游戏中避免高内存使用？

【中文标题】如何在使用 Cordova 的 Phaser 游戏中避免高内存使用？

【英文标题】：How to avoid high memory usage in Phaser game using Cordova?

【发布时间】：2016-10-22 12:39:07

【问题描述】：

我开发了一个 Cordova Phaser 游戏。它可以在 Android 和 iOS 设备上运行。

游戏有七个关卡，每个关卡都有多个精灵（背景、玩家）和组（子弹、敌人）。

在preload函数中，我已经加载了所有图片和atlasJSONHash

function preload()
    game.load.atlasJSONHash('anim', 'anim.png', 'anim.json');
    //and so on


function create()
     var star = game.add.sprite(160, 32, 'level1bg');
     star.x = 0;
     star.y = 0;
     star.height = game.height;
     star.width = game.width;

     bullets = game.add.group();
     bullets.enableBody = true;
     bullets.physicsBodyType = Phaser.Physics.ARCADE;

     bullets.createMultiple(30, 'bullet');
     bullets.setAll('anchor.x', 0.5);
     bullets.setAll('anchor.y', 1);
     bullets.setAll('outOfBoundsKill', true);
     bullets.setAll('checkWorldBounds', true);
     //and so on

function startlevel(level)

     var star = game.add.sprite(160, 32, 'level1bg');
     star.x = 0;
     star.y = 0;
     star.height = game.height;
     star.width = game.width;

     bullets = game.add.group();
     bullets.enableBody = true;
     bullets.physicsBodyType = Phaser.Physics.ARCADE;

     bullets.createMultiple(30, 'bullet');
     bullets.setAll('anchor.x', 0.5);
     bullets.setAll('anchor.y', 1);
     bullets.setAll('outOfBoundsKill', true);
     bullets.setAll('checkWorldBounds', true);
     //and so on

当关卡结束时，我会打电话给startlevel(2)等等。

在浏览器中它运行良好，但在移动内存中每个级别都会翻倍，应用程序最终会崩溃。如何避免这个内存问题？

【参考方案1】：

我希望这会有所帮助。在分配一个新组之前，为了确保旧组被销毁，我总是对它调用destroy，然后重新分配一个新组。 移过来，我想你会想要创建一个新函数来初始化你的子弹组并重新使用它。

function createBulletGroup()

    if(bullets!=null)
     
         bullets.destroy(true);
         bullets = null; 
    
    //.. The rest of add group

更多，因为你使用

var star = game.add.sprite(160, 32, 'level1bg');

每次你开始升级时，都会在旧星上放置一个新星，因为它们的位置是相同的。当star被创建时，它将被分配到世界。并且多次重新创建star会导致肉眼看不到的内存泄漏。

您可以尝试在开始新关卡时随机放置您的星星，也可以查看它是否与其他星星重叠或将其 alpha 设置为 0.5；

【讨论】：

我是否理解正确，我们应该在销毁后始终设置 NULL ref？似乎 Phaser 只是清理精灵中的道具而不是删除对象