私はかなりの検索を行ったので、これが以前に尋ねられた場合はご容赦ください (この場合、正しい言い回しを見つけることができなかったようです)。
ライブラリの 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 );
}
次に、ティッカーはいくつかの基本的な回転とトゥイーンを使用して物事を動かし、アルファ フィルターを使用して特定のアセット (船の正面の波など) の透明度を管理します。これがすべて終了したら、ユーザーは実際のゲームに進みます。このゲームでは、いくつかの非常に基本的な createjs.Bitmaps を使用して要素をステージに追加します。クイズ。ただし、すべてが iPad のオープニング シーケンスを超えるわけではありません。
誰かが (amateurgamingleague.com/pirates/english) を見て、私がどこを台無しにしているかについて少し洞察を与えることができれば、大歓迎です!!
ありがとうございました！