0

我已经做了很多搜索,所以如果之前有人问过这个问题,请原谅我(如果是这样的话,我似乎找不到正确的措辞)。

我已经使用 createjs 库套件将一个问答游戏从 Flash 转换为 html5,它在 android 设备和 iPhone 上运行良好(在 iPhone 4s 和 5c 上测试)。但是,每当我尝试加载它时,它似乎都会在 iPad 上崩溃。

在将游戏打包成 cocoonjs 进行移动部署时,我首先认为问题出在转换过程中的某个地方,但是当我在 iPad 上访问 URL 时遇到了同样的问题,让我相信问题一定出在我的某个地方代码。

代码本身使用 loadManifest 来预加载游戏的图像资源和打开的音频文件。此队列中加载了大约 170 个资产。这些文件是使用 body 标记中的 onLoad 方法加载并调用 loadFiles() 的,它看起来像这样(由于清单中加载的大量图像资产而被截断):

    var queue = new createjs.LoadQueue(true);
var manifest = [
    {id:"gameintro", src:"audio/intro.mp3"},
    {src:"images/Path.png"},
    ...
    {src:"images/owl.png"}
];
queue.loadManifest(manifest);
queue.setMaxConnections(5);
queue.addEventListener("complete", loadComplete);

    function loadAll() {
        document.getElementById('canvas').style.backgroundImage="url('images/splash.png')";
        canvas = document.getElementById('canvas');
        canvas.height = H;
        canvas.width = W;
        stage = new createjs.Stage("canvas");
        var loadingText = new createjs.Text("Loading...", "bold 30px Arial", "#9d3202");
        loadingText.x = 350;
        loadingText.y = 585;
        loadingText.textBaseline = "alphabetic";
        stage.addChild(loadingText);
        stage.update();
        while (manifest.length > 0) {
            loadAnother();
        }
        //console.log('done');
    }

    function loadAnother() {
        // Get the next manifest item, and load it
        var item = manifest.shift();
        queue.loadFile(item);

        // If we have no more items, disable the UI.
        if (manifest.length == 0) {
            //do nothing
        }
    }
    function loadComplete()
    {
        stage.removeAllChildren();
        var clickToPlay = new createjs.Bitmap("images/clicktoplay.png");
        clickToPlay.x = 350;
        clickToPlay.y = 565;
        clickToPlay.textBaseline = "alphabetic";
        stage.addChild(clickToPlay);
        stage.update();
        canvas.addEventListener("click", function(event) {
            event.target.removeEventListener(event.type, arguments.callee);
            createjs.Sound.registerSound({id:"gameintro", src:"audio/intro.mp3"});
            createjs.Sound.addEventListener("fileload", function(event){
                    event.target.removeEventListener(event.type, arguments.callee);
                    init(); 
                });

        });
    }

    loadAll();
};

在此之后运行的 init 函数会加载剩余的音频文件(其中有很多 ~ 160 mp3)并开始播放动画。该部分的代码如下:

    function init(){
        createjs.Sound.registerSound({id:"meintroduction", src:"audio/Mentor/ME1.mp3"});

        ...

        createjs.Sound.registerSound({id:"jennyfalse3", src:"audio/Pirate_Jenny/PJE10.mp3"});
        document.getElementById('canvas').style.background="#B5D7ED";
        canvas = document.getElementById('canvas');
        canvas.height = H;
        canvas.width = W;
        stage = new createjs.Stage("canvas");
        //add path
        path = new createjs.Bitmap("images/Path.png");
        path.x = 0;
        path.y = 0;
        stage.addChild(path);

        //add sun
        sun = new createjs.Bitmap("images/sun.png");
        sun.x = 800;
        sun.y = 600;
        stage.addChild(sun);

        //add pinkcloud
        pinkcloud = new createjs.Bitmap("images/pinkcloud.png");
        pinkcloud.x = -4;
        pinkcloud.y = 150;
        stage.addChild(pinkcloud);
        //add bluecloud
        bluecloud = new createjs.Bitmap("images/bluecloud.png");
        bluecloud.x = -4;
        bluecloud.y = 250;
        stage.addChild(bluecloud);

        //add farisland
        farisland = new createjs.Bitmap("images/farisland.png");
        farisland.x = 600;
        farisland.y = 180;
        stage.addChild(farisland);
        //add backwave
        backwave = new createjs.Bitmap("images/backwave.png");
        backwave.x = -4;
        backwave.y = 420;
        stage.addChild(backwave);
        //shark
        shark = new createjs.Bitmap("images/shark.png");
        shark.x = 900;
        shark.y = 600;
        stage.addChild(shark);
        //fish3
        fish3 = new createjs.Bitmap("images/fish3.png");
        fish3.x = 800;
        fish3.y = 600;
        stage.addChild(fish3);
        //add middlewave
        middlewave = new createjs.Bitmap("images/middlewave.png");
        middlewave.x = -800;
        middlewave.y = 450;
        stage.addChild(middlewave);
        //add ship
        pirateship = new createjs.Bitmap("images/pirateship.png");
        pirateship.x = -500;
        pirateship.y = 400;//445x384
        pirateship.regX = 445/2;
        pirateship.regY = 384/2;
        stage.addChild(pirateship);
        //fish1
        fish1 = new createjs.Bitmap("images/fish1.png");
        fish1.x = 800;
        fish1.y = 600;
        stage.addChild(fish1);
        //fish1
        fish2 = new createjs.Bitmap("images/fish2.png");
        fish2.x = 900;
        fish2.y = 700;
        stage.addChild(fish2);
        //add frontwave
        frontwave = new createjs.Bitmap("images/frontwave.png");
        frontwave.x = -4;
        frontwave.y = 500;
        stage.addChild(frontwave);
        //bird
        bird1 = new createjs.Bitmap("images/bird.png");
        bird1.x = 0;
        bird1.y = 0;
        bird1.scaleX = -1;
        stage.addChild(bird1);
        bird2 = new createjs.Bitmap("images/bird.png");
        bird2.x = 800;
        bird2.y = 0;
        stage.addChild(bird2);
        //add island
        island = new createjs.Bitmap("images/island.png");
        island.x = 800;
        island.y = 200;
        stage.addChild(island); 
        //add setsail
        setsail = new createjs.Bitmap("images/Setsail.png");
        setsail.x = -358;
        setsail.y = 80;
        createjs.Tween.get(setsail).to({alpha: 0,},0);
        stage.addChild(setsail);
        setsail1 = new createjs.Bitmap("images/Setsail.png");
        setsail1.x = 350;
        setsail1.y = 80;
        //add butwatchout
        butwatchout = new createjs.Bitmap("images/Butwatchout.png");
        butwatchout.x = -358;
        butwatchout.y = 300;
        createjs.Tween.get(butwatchout).to({alpha: 0,},0);
        //stage.addChild(butwatchout);
        butwatchout1 = new createjs.Bitmap("images/Butwatchout.png");
        butwatchout1.x = 200;
        butwatchout1.y = 300;
        setTimeout(function(){createjs.Sound.play("gameintro");},1500);
        fn = createjs.Ticker.on("tick", tick);
        createjs.Ticker.setFPS(80);
        createjs.Ticker.addEventListener("tick", stage );
    }

然后,ticker 使用一些基本的旋转和补间来移动事物,并且还使用一些 alpha 过滤器来管理某些资产的透明度(例如船上的前波)。完成所有这些后,用户进入实际游戏,它使用一些非常基本的 createjs.Bitmaps 将元素添加到舞台,以及 Sound.play 和一些 SpriteSheets 用于基本动画,如眨眼和嘴巴动作测验者。然而,整件事并没有超过 iPad 上的开场顺序。

如果有人可以看一下(amateurgamingleague.com/pirates/english)并给我一些关于我搞砸的地方的见解,我们将不胜感激!

谢谢!

4

2 回答 2

1

我在 Ipad (2) 上也遇到过同样的崩溃。它甚至删除了所有会话 cookie 和我注销的用户......

问题是你预加载的声音量(或者它们有多大,不确定)。更改您的代码以不再预加载这么多音频,并尽可能按需加载它们(当用户单击某些内容时)。在播放任何声音之前,我还需要通过单击/触摸/用户事件来启动游戏。

于 2015-02-08T20:57:04.217 回答
0

我遇到了同样的问题。尝试在目录之前使用斜杠

var manifest = [
{id:"gameintro", src:"/audio/intro.mp3"},
{src:"/images/Path.png"},
...
{src:"/images/owl.png"}

];

于 2015-07-01T13:14:47.107 回答