Ich versuche, ein Spiel mit Flash CS6 und createjs zu machen. Wenn ich es lokal teste (das heißt, ich klicke auf die .html-Datei in der Ausgabe), funktioniert es gut und wie beabsichtigt.HTML5 Canvas-Spiel wird nicht einmal auf Newgrounds auf dem PC vorgeladen, aber es funktioniert auf dem iPad.
Dann habe ich es auf Newgrounds hochgeladen und sah es mit meinem PC (Windows 8.1, Google Chrome) in der Vorschau und das Spiel blieb auf einem weißen Bildschirm stecken - was bedeutet, dass die Vorladefunktion nicht richtig funktioniert?
Dann sah ich es auf meinem iPad (immer von Newgrounds), und es funktionierte auf Safari - obwohl es kein Audio gab.
Dann habe ich versucht, es auf Newgrounds neu zu laden - aber dieses Mal habe ich den gesamten Sound aus dem Spiel entfernt - und es funktioniert auch bei der Vorschau auf meinem Computer.
Aus all dem, ich habe abgeleitet, dass es einige widersprüchliche Code, Audio-Preloading umfasst, wenn ich versuche, das Spiel mit meinem PC auf Newgrounds zu starten. Meine Fragen sind:
1) Wenn ich mein Spiel auf Newgrounds vorschaue, warum wird es nicht sogar laden, wenn es Audio darin gibt und ich meinen PC verwende? (Denken Sie daran, es funktioniert, wenn ich es auf newgrounds mit meinem iPad Vorschau, und es funktioniert auch auf meinem PC, wenn ich die Sound-Dateien vollständig entfernen)
2) Warum funktioniert das Audio nicht auf dem Ipad? Ich habe im ersten Frame des Spiels eine Onclick-Funktion hinzugefügt, um den Sound zu starten. Die Funktion funktioniert, aber der Sound wird nicht gestartet.
Vielen Dank im Voraus für Ihre Hilfe, bitte beachten Sie, dass ich keine Erfahrung mit Javascript habe (alles, was ich jemals mit Actionscript codiert), aber ich bin bereit zu lernen und mein Bestes zu versuchen.
Hier ist der Code, den ich in meiner Datei index.html haben:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from testgame</title>
<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.4.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.6.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.3.0.min.js"></script>
<script src="http://code.createjs.com/soundjs-0.4.0.min.js"></script>
<script src="testgame.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var manifest = [
{src:"images/Bitmap10.png", id:"Bitmap10"},
{src:"images/Bitmap12.png", id:"Bitmap12"},
{src:"images/Bitmap13.png", id:"Bitmap13"},
{src:"images/Bitmap14.png", id:"Bitmap14"},
{src:"images/Bitmap15.png", id:"Bitmap15"},
{src:"images/Bitmap16.png", id:"Bitmap16"},
{src:"images/Bitmap17.png", id:"Bitmap17"},
{src:"images/Bitmap18.png", id:"Bitmap18"},
{src:"images/Bitmap19.png", id:"Bitmap19"},
{src:"images/Bitmap20.png", id:"Bitmap20"},
{src:"images/Bitmap21.png", id:"Bitmap21"},
{src:"images/Bitmap22.png", id:"Bitmap22"},
{src:"images/Bitmap23.png", id:"Bitmap23"},
{src:"images/Bitmap24.png", id:"Bitmap24"},
{src:"images/Bitmap30.png", id:"Bitmap30"},
{src:"images/Bitmap31.png", id:"Bitmap31"},
{src:"images/Bitmap32.png", id:"Bitmap32"},
{src:"images/Bitmap33.png", id:"Bitmap33"},
{src:"images/Bitmap34.png", id:"Bitmap34"},
{src:"images/Bitmap35.png", id:"Bitmap35"},
{src:"images/Bitmap36.png", id:"Bitmap36"},
{src:"images/Bitmap37.png", id:"Bitmap37"},
{src:"images/Bitmap38.png", id:"Bitmap38"},
{src:"images/Bitmap39.png", id:"Bitmap39"},
{src:"images/Bitmap4.png", id:"Bitmap4"},
{src:"images/Bitmap5.png", id:"Bitmap5"},
{src:"images/Bitmap6.png", id:"Bitmap6"},
{src:"images/Bitmap7.png", id:"Bitmap7"},
{src:"images/Bitmap8.png", id:"Bitmap8"},
{src:"images/Bitmap9.png", id:"Bitmap9"},
{src:"sounds/siglaintro.mp3", id:"siglaintro"},
{src:"sounds/siglaloop.mp3", id:"siglaloop"}
];
var loader = new createjs.LoadQueue(false);
loader.installPlugin(createjs.Sound);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(manifest);
}
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
function handleComplete() {
exportRoot = new lib.testgame();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(24);
createjs.Ticker.addEventListener("tick", stage);
}
function playSound(id, loop) {
createjs.Sound.play(id, createjs.Sound.INTERRUPT_EARLY, 0, 0, loop);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="820" height="480" style="background-color:#ffff66"></canvas>
</body>
</html>