0
이전에 물어 본 적이 있다면 용서해주세요. (올바른 구절을 찾을 수없는 것 같습니다. , 만일이 경우라면).캔버스 기반 게임 (easeljs, soundjs, preloadjs)에서 iPad의 모바일 사파리 충돌이 발생했습니다.
저는 createjs 라이브러리 모음을 사용하여 Flash에서 html5로 퀴즈 게임을 변환했으며 Android 기기 및 iPhone (iPhone 4s 및 5c에서 테스트 됨)에서 제대로 작동합니다. 그러나 iPad를로드 할 때마다 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);
}
시세는 다음에 대한 물건을 이동하는 몇 가지 기본적인 회전 및 트윈을 사용하고, 또한의 전면 물결 같은 특정 자산의 투명성 (관리하기 위해 일부 알파 필터를 사용 배). 이 모든 작업이 끝나면 사용자는 실제 게임을 진행합니다.이 게임은 아주 기본적인 createjs.Bitmaps를 사용하여 Sound.play와 함께 무대에 요소를 추가하고 SpriteSheets는 깜박임과 입 움직임과 같은 기본적인 애니메이션을 제공합니다. 퀴즈꾼들. 그러나 모든 것이 iPad의 시작 시퀀스를 지나치게 만듭니다.
누군가가 (amateurgamingleague.com/pirates/english) 한 번 봐 주셔서 내가 엉망진창에 관해서 약간의 통찰력을 줄 수 있다면, 크게 감사하겠습니다 !!
감사합니다.
URL이 유효합니까? 나는 amateurgamingleague.com/pirates/English를 의미합니까? – Kiran
나는 그렇게 믿는다! 나는 여기에서 URL을 복사했습니다 : http://amateurgamingleague.com/pirates/english/ 감사합니다! – scud
대소 문자를 구분하는 URL입니다. 최소한의 코드 나 연구와 같은 세부 사항을 추가하십시오. 당신이 한 일을 보여주십시오. – Kiran