我已经做了很多搜索,所以请原谅我以前是否曾经问过这个问题(如果是这样的话,我似乎无法找到合适的措词)。
我已经使用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)并给我一些关于我搞砸的地方的见解,那将非常感谢!!
谢谢!
答案 0 :(得分:1)
我在Ipad(2)上遇到了同样的崩溃。它甚至删除了所有会话cookie和我注销的用户......
问题是你预加载的声音数量(或它们有多大,不确定)。将代码更改为不再预加载这么多音频,并根据需要加载它们(如果可能的话,用户点击某些内容)。我还需要在发出任何声音之前通过点击/触摸/用户事件开始游戏。
答案 1 :(得分:0)
我遇到了同样的问题。 尝试在目录之前使用斜杠,如
var manifest = [
{id:"gameintro", src:"/audio/intro.mp3"},
{src:"/images/Path.png"},
...
{src:"/images/owl.png"}
];