iPad的移动游猎在基于画布的游戏(画架,音响,预载)上崩溃

时间:2015-01-26 17:05:09

标签: ipad html5-canvas easeljs createjs soundjs

我已经做了很多搜索,所以请原谅我以前是否曾经问过这个问题(如果是这样的话,我似乎无法找到合适的措词)。

我已经使用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' s)并启动打开动画。该部分的代码如下:

    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 );
    }

然后,自动收报机使用一些基本的旋转和补间来移动东西,并使用一些alpha过滤器来管理某些资产的透明度(如船上的前波)。完成所有这些操作后,用户就可以进入实际游戏,使用一些非常基本的createjs.Bitmaps将元素添加到舞台上,同时使用Sound.play和一些SpriteSheets进行基本动画,如眨眼和嘴部动作quizzers。然而,整个事情并没有超越iPad上的开场序列。

如果有人可以看看(amateurgamingleague.com/pirates/english)并给我一些关于我搞砸的地方的见解,那将非常感谢!!

谢谢!

2 个答案:

答案 0 :(得分:1)

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

问题是你预加载的声音数量(或它们有多大,不确定)。将代码更改为不再预加载这么多音频,并根据需要加载它们(如果可能的话,用户点击某些内容)。我还需要在发出任何声音之前通过点击/触摸/用户事件开始游戏。

答案 1 :(得分:0)

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

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

];