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>
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
Related
JS touch events in an .html file that I mail as an attachment to an iPhone5 (OS9.2), are never executed because a touch on the screen is intercepted by the Mail and interpreted as DONE. I'm new to this. Am I missing something obvious? The following code works in XCodeSimulator but not in a real phone. Is there a workaround? Are .html files unsupported in an attachment, for some reason?
Below is a typical test code I'm using. I prefer to work in vanilla JS, rather than JQuery, but I'd be grateful for any suggestions or advice, whatever.
<!DOCTYPE html>
<html>
<head>
<style>
#mycanvas{
position: absolute;
top:100px;
left:100px;
border:4px solid;
}
</style>
<script>
function init() {
var touchzone = document.getElementById("mycanvas");
touchzone.addEventListener("touchstart",draw,false);
}
function draw() {
var canvas = document.getElementById('mycanvas');
if(canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillRect(event.touches[0].pageX-100, event.touches[0].pageY-100,10,10);
}
}
</script>
</head>
<body onload="init()">
<canvas id="mycanvas" width="500" height="500">
Canvas element not supported.
</canvas>
<h2> Tap inside rectangle to leave a spot. Outside leaves nothing.</h2>
</body></html>
We realized that an .html e-mail attachment cannot work in iOS. Placing the file in Public folder on Dropbox gives it a web address that the phone can link. This works for us so far.
am making a Createjs and html5 project in which I am drawing a shape(Red circle), when I click over the circle it gives alert. It works fine on all desktops and android phones. Except when I open this in a windows phone it works fine on the normal screen but when I zoom the screen it loses it working, an alert is shown when I click anywhere on the screen(maybe where the co-ordinates of the shape resides) but not when I click over the shape(Circle),,
Your help is appreciated
my demo.html
<!DOCTYPE html>
<html>
<head><title></title>
<script type="text/javascript" src="createjs-2013.12.12.min.js"></script>
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
function init() {
var stage = new createjs.Stage("demoCanvas");
var circle = new createjs.Shape();
createjs.Touch.enable(stage);
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
circle.addEventListener("click", function(evt) { /*$("span#log").text(circle.x);*/ alert('clicked'); });
stage.addChild(circle);
stage.update();
}
</script>
</head>
<body onLoad="init();">
<span id="log"></span>
<br>
<canvas id="demoCanvas" width="500" height="300">
alternate content
</canvas>
</body>
</html>..
Here's the project
Not sure if this is relevant as haven't looked at sample code, but I think createjs.Touch.enable works on Stage instances rather than DisplayObjects
See here
I do alot of Research over this topic, and at the end i came to this point that this the
BUG in IE11 . Hope Microsoft helps to solve this.
I need to make a HTML5 page that can display live video coming from the device's camera/webcam and that has a button that can take a snapshot; nothing fancy (similar to html5camera.com). I tried following some tutorials (http://www.html5rocks.com/en/tutorials/getusermedia/intro/ AND http://davidwalsh.name/browser-camera), but I'm still new at HTML, so I'm not sure what to do with the code snippets I find.
I copied some code into a HTML-file, but when I open it with Chrome, it says at the right in the address bar that it blocked access to the camera and microphone (without bothering to ask for permission). When I click the option to ask for permission next time and reload the page, nothing happens. There is no way to set the preferences to allow by default. I also tried Chrome Canary (same as Chrome) and Firefox (didn't ask for permission).
Did I make a mistake in the HTML? Is Chrome the problem?
The code I have so far:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=yes">
</head>
<body>
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});
}, false);
</script>
</body>
</html>
You might also consider just going native. You can add native camera and camcorder support to any web app on Android, iOS or Windows Phone 8 very easily with BridgeIt: http://bridgeit.mobi. It's a simple javascript api that allows you to access native mobile features.
Googled this a lot and didn't get any useful hint/solution.
I have this simple html page including some CSS styles, jQuery, jQuery-ui and obviously Fabric.js; on document.ready I launch an ajax call and render something on the canvas. Until now everything seems fine but when a I need to catch some mouse events I get nothing. This behaviour is shown only on Chrome (current version 25.0.1364.97); everything works fine on Firefox or Internet Explorer (v. 9).
Here's some of the js code:
$(document).ready(function() {
//setup canvas etc.
eCanvas = new fabric.Canvas('EViewport', {
backgroundColor: 'rgba(255, 50, 50, .3)',
selection: true,
selectionColor: 'blue',
selectionLineWidth: 2
});
EViewport = $("#CanvasContainer");
viewW = EViewport.width();
viewH = EViewport.height();
eCanvas.setWidth(viewW);
eCanvas.setHeight(viewH);
eCanvas.observe('object:selected', function(options) {
if (options.target) {
console.log('an object was selected! ', options.target.type);
}
});
eCanvas.observe('mouse:down', function() {
console.log('mouse click! ');
});
eCanvas.on('mouse:down', function() {
console.log('mouse click! ');
});
eCanvas.on('mousedown', function() {
console.log('mouse click! ');
});
//... render some rectangles and stuff...
});
And here's the html structure (notice that Eviewport.js file contains previously pasted code):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="baseCss/jquery-ui.css" type="text/css">
<script type="text/javascript" src="baseJs/jquery.js"></script>
<script type="text/javascript" src="baseJs/jquery-ui.js"></script>
<script type="text/javascript" src="Eviewport.js"></script>
<link type="text/css" rel="stylesheet" href="Eviewport.css">
<script type="text/javascript" src="baseJs/Fabric.js"></script>
</head>
<body>
<div id="MainContainer">
<div id="CanvasContainer">
<canvas id="EViewport">
Canvas is not supported
</canvas>
</div>
</div>
</body>
</html>
Selection features don't work with chrome either while they work on IE and Firefox.
I tried many things (as you can see I tried changing canvas.observe with canvas.on), changed jQuery and jQueryui versions but nothing changed.
Using developer tools on Google Chrome doesn't show much.
There's no z-index on html elements given by CSS, and I tried disabling different js and CSS but that didn't solve the problem.
I noticed that the problem shows also shows on the demo page of Fabric.js (just tried http://fabricjs.com/stickman/); render works, effects also but no mouse events or selection working.
Is this a bug?
Ok, finally found what's not working.
I have a Wacom device attached and looks like latest Chrome version sets a flag about "touch enabled device" and that's breaking my code.
A simple solution can be changing chrome flags (chrome://flags/)
Related posts:
https://github.com/kangax/fabric.js/issues/450
I have built a jquery html5 canvas sketching app that accepts mouse events for desktop (pen tablets just use mouse events). I would also like to allow drawing with the finger on iphone, ipad, andriod devices as a mobile web enabled app. Since mobile devices also trigger mouse click events on their own: Does this mean that I should detect the type of browser and replace all mouse bindings with touch bindings in order to prevent events from double firing?
Here is a stupid example:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<canvas id="myCanvas" width="1600px" height="1600px" style="border:1px dashed gray;background-color:white;">
</canvas>
<script>
function brushStart() {
$('#myCanvas').css('background-color','blue');
}
function brushEnd() {
$('#myCanvas').css('background-color','red');
}
function brushMove() {
$('#myCanvas').css('background-color','yellow');
}
$('#myCanvas').bind('mousedown', brushStart);
$('#myCanvas').bind('mouseup', brushEnd);
$('#myCanvas').bind('mousemove', brushMove);
$('#myCanvas')[0].addEventListener('touchstart',brushStart,false);
$('#myCanvas')[0].addEventListener('touchend',brushEnd,false);
$('#myCanvas')[0].addEventListener('touchmove',brushMove,false);
</script>
</body>
</html>
I've used the following to do what you're looking for:
$("#myCanvas").bind("touchstart mousedown", function (event) {
var e = event.originalEvent;
e.preventDefault();
startX = (e.targetTouches != undefined) ? e.targetTouches[0].screenX : e.offsetX;
startY = (e.targetTouches != undefined) ? e.targetTouches[0].screenY : e.offsetY;
});
A couple of points -- you need to access the originalEvent in jQuery in order to work with targetTouches. Also, as I'm sure is apparent, you can substitute any property pair you need for offsetX/Y for the mouse events.