CODEWITHSUNDEEP
htmlipadaudiocanvaspreloading
Francesco Muja
Francesco Muja

Reputation: 11

HTML5 canvas game won't even preload on Newgrounds on pc, but it works on iPad.

I'm trying to make a game with flash cs6 and createjs. When I test it locally (meaning, I click on the .html file in the output) it works just fine and as intended.

Then I uploaded it on Newgrounds and previewed it with my pc (windows 8.1, google chrome) and the game got stuck on a white screen - meaning the preloading function isn't working properly?

Then I previewed it on my iPad (always from Newgrounds), and it worked on Safari - even though there was no audio.

Then I tried reuploading it on Newgrounds - but this time I removed all the sound from the game - and it works even when previewed on my computer.

From all this, I've deduced that there must be some conflicting code that involves audio preloading when I try to start the game with my pc on Newgrounds. My questions are:

1) When I preview my game on Newgrounds, why won't it even load if there's audio in it and I use my pc? (Remember, it works if I preview it on newgrounds with my iPad, and it works even on my pc if I completely remove the sound files)

2) Why is it that the audio won't work on the Ipad? I added a onclick function at the very first frame of the game to start the sound, as suggested elsewhere; the function works but the sound won't start.

Thanks in advance for your help, please note that I have NO experience with Javascript (all I ever coded with is Actionscript) but I'm willing to learn and trying my best.

Here's the code I have in my index.html file:

<!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>

Upvotes: 0

Views: 178

Answers (1)

Francesco Muja
Francesco Muja

Reputation: 11

Issue solved. All I had to do was to use the most recent versions of the createjs tool in the html code, like this:

<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.5.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.7.1.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.4.1.min.js"></script>
<script src="http://code.createjs.com/soundjs-0.5.2.min.js"></script>

So, problem solved, please ignore me, just coding around

Upvotes: 1

Related Questions