Related
Hello everyone I have such a problem. I have two scripts, anim.js and main.js . In anim.js describes the animation, and in main.js I'm trying to make a stop by pressing a button. I'm trying to make a stop through timeline, but I can't access timeline in main.js, timeline initialize in the file anim.js
anim.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="Adobe_Animate_CC" name="authoring-tool">
<title>anim</title>
<!-- write your code here -->
<style>
#animation_container {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
body, canvas {
background: none transparent !important;
}
</style>
<script src="../js/libs/adobe/createjs.js"></script>
<script src="anim.js"></script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
var comp = AdobeAn.getComposition("4D38855BFA773041952A1579DB0CC3CC");
var lib = comp.getLibrary();
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", function (evt) {
handleFileLoad(evt, comp)
});
loader.addEventListener("complete", function (evt) {
handleComplete(evt, comp)
});
var lib = comp.getLibrary();
loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt, comp) {
var images = comp.getImages();
if (evt && (evt.item.type == "image")) {
images[evt.item.id] = evt.result;
}
}
function handleComplete(evt, comp) {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created
//in token create_stage.
var lib = comp.getLibrary();
var ss = comp.getSpriteSheet();
var queue = evt.target;
var ssMetadata = lib.ssMetadata;
for (i = 0; i < ssMetadata.length; i++) {
ss[ssMetadata[i].name] = new createjs.SpriteSheet({
"images": [queue.getResult(ssMetadata[i].name)],
"frames": ssMetadata[i].frames
})
}
exportRoot = new lib.anim();
stage = new lib.Stage(canvas);
//Registers the "tick" event listener.
fnStartAnimation = function () {
stage.addChild(exportRoot);
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
};
//Code to support hidpi screens and responsive scaling.
AdobeAn.makeResponsive(true, 'both', true, 1, [canvas, anim_container, dom_overlay_container]);
AdobeAn.compositionLoaded(lib.properties.id);
fnStartAnimation();
}
</script>
<script src="../js/main.js"></script>
<script>
function doLoadIframe() {
console.log('catch1');
let msg = function() {
p = 'привет';
return p;
}
//отправка события родителю
parent.postMessage(msg(), '*');
parent.focus();
init();
//setTimeout(stpAnimDef, 100);
}
</script>
<script>
window.addEventListener("message", function(msg){
console.log(msg.data);
if (msg.data == 'stop') {
stopAnimation();
} else if (msg.data == 'play'){
playAnimation();
}
let text = document.querySelector('.textAnim');
text.value = msg.data;
});
</script>
<!-- write your code here -->
</head>
<body onload="doLoadIframe();" style="margin:0px;">
<div id="animation_container" style="width:1280px; height:720px">
<canvas height="720" id="canvas"
style="position: absolute; display: block;"
width="1280"></canvas>
<div id="dom_overlay_container"
style="pointer-events:none; overflow:hidden; width:1280px; height:720px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
<input type='text' class='textAnim' />
</body>
</html>
anim.js
var timeline = new createjs.Timeline({paused: true});
(function (cjs, an) {
var p; // shortcut to reference prototypes
var lib={};var ss={};var img={};
lib.ssMetadata = [
{name:"anim_atlas_", frames: [[0,0,233,233]]}
];
// symbols:
(lib.CachedTexturedBitmap_1 = function() {
this.initialize(ss["anim_atlas_"]);
this.gotoAndStop(0);
}).prototype = p = new cjs.Sprite();
// helper functions:
function mc_symbol_clone() {
var clone = this._cloneProps(new this.constructor(this.mode, this.startPosition, this.loop));
clone.gotoAndStop(this.currentFrame);
clone.paused = this.paused;
clone.framerate = this.framerate;
return clone;
}
function getMCSymbolPrototype(symbol, nominalBounds, frameBounds) {
var prototype = cjs.extend(symbol, cjs.MovieClip);
prototype.clone = mc_symbol_clone;
prototype.nominalBounds = nominalBounds;
prototype.frameBounds = frameBounds;
return prototype;
}
(lib.Символ1 = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// Слой_1
this.instance = new lib.CachedTexturedBitmap_1();
this.instance.parent = this;
this.instance.setTransform(-0.5,-0.5,0.5,0.5);
var t = cjs.Tween.get(this.instance).wait(1);
timeline.addTween(t/*cjs.Tween.get(this.instance).wait(1)*/);
}).prototype = getMCSymbolPrototype(lib.Символ1, new cjs.Rectangle(-0.5,-0.5,116.5,116.5), null);
// stage content:
(lib.anim = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// Слой_1
this.instance = new lib.Символ1();
this.instance.parent = this;
this.instance.setTransform(210.85,268.85,1,1,0,0,0,57.8,57.8);
var t1 = cjs.Tween.get(this.instance).wait(1).to({x:243.8},0).wait(1).to({x:276.8},0).wait(1).to({x:309.8},0).wait(1).to({x:342.8},0).wait(1).to({x:375.8},0).wait(1).to({x:408.8},0).wait(1).to({x:441.8},0).wait(1).to({x:474.8},0).wait(1).to({x:507.8},0).wait(1).to({x:540.8},0).wait(1).to({x:573.8},0).wait(1).to({x:606.8},0).wait(1).to({x:639.8},0).wait(1).to({x:672.8},0).wait(1).to({x:705.75},0).wait(1).to({x:738.75},0).wait(1).to({x:771.75},0).wait(1).to({x:804.75},0).wait(1).to({x:837.75},0).wait(1).to({x:870.75},0).wait(1).to({x:903.75},0).wait(1).to({x:936.75},0).wait(1).to({x:969.75},0).wait(1).to({x:1002.75},0).wait(1).to({x:1035.75},0).wait(1).to({x:1068.75},0).wait(1).to({x:1101.75},0).wait(1).to({x:1134.75},0).wait(1).to({x:1167.75},0).wait(1)
.call(function(){
this.dispatchEvent("foo");
}, null, timeline);
timeline.addTween(t1);
timeline.setPaused(false);
//this.timeline.addTween(cjs.Tween.get(this.instance, {reversed:true})./*wait(1).to({x:243.8},0).wait(1).to({x:276.8},0).wait(1).to({x:309.8},0).wait(1).to({x:342.8},0).wait(1).to({x:375.8},0).wait(1).to({x:408.8},0).wait(1).to({x:441.8},0).wait(1).to({x:474.8},0).wait(1).to({x:507.8},0).*/wait(1).to({x:540.8},0).wait(1).to({x:573.8},0).wait(1).to({x:606.8},0).wait(1).to({x:639.8},0).wait(1).to({x:672.8},0).wait(1).to({x:705.75},0).wait(1).to({x:738.75},0).wait(1).to({x:771.75},0).wait(1).to({x:804.75},0).wait(1).to({x:837.75},0).wait(1).to({x:870.75},0).wait(1).to({x:903.75},0).wait(1).to({x:936.75},0).wait(1).to({x:969.75},0).wait(1).to({x:1002.75},0).wait(1).to({x:1035.75},0).wait(1).to({x:1068.75},0).wait(1).to({x:1101.75},0).wait(1).to({x:1134.75},0).wait(1).to({x:1167.75},0).wait(1));
//this.timeline.addTween(cjs.Tween.get(this.instance).wait(1).to({x:540.8},0).wait(1).to({x:573.8},0).wait(1).to({x:606.8},0).wait(1).to({x:639.8},0).wait(1).to({x:672.8},0).wait(1).to({x:705.75},0).wait(1).to({x:738.75},0).wait(1).to({x:771.75},0).wait(1).to({x:804.75},0).wait(1).to({x:837.75},0).wait(1).to({x:870.75},0).wait(1).to({x:903.75},0).wait(1).to({x:936.75},0).wait(1).to({x:969.75},0).wait(1).to({x:1002.75},0).wait(1).to({x:1035.75},0).wait(1).to({x:1068.75},0).wait(1).to({x:1101.75},0).wait(1).to({x:1134.75},0).wait(1).to({x:1167.75},0).wait(1).to({x:1134.75},0).wait(1).to({x:1101.75},0).wait(1).to({x:1068.75},0).wait(1).to({x:1035.75},0).wait(1).to({x:1002.75},0).wait(1).to({x:969.75},0).wait(1).to({x:936.75},0).wait(1).to({x:903.75},0).wait(1).to({x:870.75},0).wait(1).to({x:837.75},0).wait(1).to({x:804.75},0).wait(1).to({x:771.75},0).wait(1).to({x:738.75},0).wait(1).to({x:705.75},0).wait(1).to({x:672.8},0).wait(1).to({x:639.8},0).wait(1).to({x:606.8},0).wait(1).to({x:573.8},0).wait(1).to({x:540.8},0).wait(1));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(792.6,570.6,433.30000000000007,-243.5);
// library properties:
lib.properties = {
id: '4D38855BFA773041952A1579DB0CC3CC',
width: 1280,
height: 720,
fps: 20,
color: "#FFFFFF",
opacity: 1.00,
manifest: [
{src:"images/anim_atlas_.png", id:"anim_atlas_"}
],
preloads: []
};
// bootstrap callback support:
(lib.Stage = function(canvas) {
createjs.Stage.call(this, canvas);
}).prototype = p = new createjs.Stage();
p.setAutoPlay = function(autoPlay) {
this.tickEnabled = autoPlay;
}
p.play = function() { this.tickEnabled = true; this.getChildAt(0).gotoAndPlay(this.getTimelinePosition()) }
p.stop = function(ms) { if(ms) this.seek(ms); this.tickEnabled = false; }
p.seek = function(ms) { this.tickEnabled = true; this.getChildAt(0).gotoAndStop(lib.properties.fps * ms / 1000); }
p.getDuration = function() { return this.getChildAt(0).totalFrames / lib.properties.fps * 1000; }
p.getTimelinePosition = function() { return this.getChildAt(0).currentFrame / lib.properties.fps * 1000; }
an.bootcompsLoaded = an.bootcompsLoaded || [];
if(!an.bootstrapListeners) {
an.bootstrapListeners=[];
}
an.bootstrapCallback=function(fnCallback) {
an.bootstrapListeners.push(fnCallback);
if(an.bootcompsLoaded.length > 0) {
for(var i=0; i<an.bootcompsLoaded.length; ++i) {
fnCallback(an.bootcompsLoaded[i]);
}
}
};
an.compositions = an.compositions || {};
an.compositions['4D38855BFA773041952A1579DB0CC3CC'] = {
getStage: function() { return exportRoot.getStage(); },
getLibrary: function() { return lib; },
getSpriteSheet: function() { return ss; },
getImages: function() { return img; }
};
an.compositionLoaded = function(id) {
an.bootcompsLoaded.push(id);
for(var j=0; j<an.bootstrapListeners.length; j++) {
an.bootstrapListeners[j](id);
}
}
an.getComposition = function(id) {
return an.compositions[id];
}
an.makeResponsive = function(isResp, respDim, isScale, scaleType, domContainers) {
var lastW, lastH, lastS=1;
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
function resizeCanvas() {
var w = lib.properties.width, h = lib.properties.height;
var iw = window.innerWidth, ih=window.innerHeight;
var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;
if(isResp) {
if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {
sRatio = lastS;
}
else if(!isScale) {
if(iw<w || ih<h)
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==1) {
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==2) {
sRatio = Math.max(xRatio, yRatio);
}
}
domContainers[0].width = w * pRatio * sRatio;
domContainers[0].height = h * pRatio * sRatio;
domContainers.forEach(function(container) {
container.style.width = w * sRatio + 'px';
container.style.height = h * sRatio + 'px';
});
stage.scaleX = pRatio*sRatio;
stage.scaleY = pRatio*sRatio;
lastW = iw; lastH = ih; lastS = sRatio;
stage.tickOnUpdate = false;
stage.update();
stage.tickOnUpdate = true;
}
}
})(createjs = createjs||{}, AdobeAn = AdobeAn||{});
var createjs, AdobeAn;
main.js
function stopAnimation() {
console.log(timeline);
}
Cut and paste you all script to bottom of body htm tag
I'm having a problem dynamically creating and setting canvas backgrounds.
I want the user to be able to annotate the images with text and shapes, thats why I am doing stuff this way.
I would like to know why is this code producing such output
The idea
Send a get request to an endpoint which returns json data containing
image urls.
Convert that data into a javascript array.
Dynamically create fabric js canvases based on the length of above
array.
Set the canvas backgrounds to the images using their urls. (i.e each canvas will have a different background taken from the url)
The problem
Only the last canvas has a background image.
code
<!DOCTYPE html>
<html>
<head>
<style>
body {
}
</style>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"
></script>
</head>
<body>
<script src="fabric.js"></script>
<!--new start-->
<script>
//procedurally load images from a given source
//endpoint with image links
var end_point = "http://localhost:8080/endpoint.php";
var settings = {
url: "http://localhost:8080/endpoint.php",
method: "GET",
};
//get the images array from end point
$.ajax(settings).done(function (images_json) {
var images = JSON.parse(images_json);
//procedurally create farbric.js canvas for each image element in the html document and set their background as the corresponding image.
//for each item in the images array, create a fabric.js canvas with its background set as the image itself
var canvas_array = [];
for (var i = 0, len = images.length; i < len; i++) {
//console.log(images[i]);
//create canvas and then make it a fabric canvas
document.body.innerHTML += `<canvas
id=${[i]}
width="1000"
height="200"
style="border-style: solid;">
</canvas>`;
//canvases stored in canvas_array
canvas_array[i] = new fabric.Canvas(`${[i]}`);
console.log(canvas_array[i]);
//set canvas background as the image
canvas_array[i].setBackgroundImage(
`${images[i]}`,
canvas_array[i].renderAll.bind(canvas_array[i]),
{
backgroundImageOpacity: 1,
backgroundImageStretch: false,
}
);
}
});
</script>
<!--new end-->
</body>
</html>
result
result
note
The code is generating correct number of canvases. However the background image does not seem to work
Desired result would have 10 canvases with different backgrounds corresponding to the image urls.
I'm new to fabric.js, this may be a dumb mistake.
Using remote source was a strict requirement. I tried several stuff and this finally worked.
code
//c global variable
var n_can_arr = [];
var f_can_arr = [];
var img_arr = [];
//c procedurally load images from a given source
$.ajax({
url: "http://localhost:8080/endpoint.php",
type: "GET",
dataType: "json", //c added data type
success: function (res) {
for (var index = 0; index < res.length; index++) {
//c create canvas
var setHtml = `<canvas
id=${index}
width="1000"
height="800"
style="border-style: solid;">
</canvas>`;
document.body.innerHTML += setHtml;
//c update canvas and image arrays
n_can_arr.push(index);
img_arr.push(res[index]);
}
//c call image set after the loop is over
$(document).trigger("images_set");
},
});
//c on image_set called
$(document).bind("images_set", () => {
//c for each element of normal canvas array, create a fabric js canvas and set its background
for (var i = 0; i < n_can_arr.length; i++) {
create_canvas(i);
}
//c for each element of fabric canvas array, apply the extend canvas function
extend_canvas();
});
function create_canvas(i) {
//c create fabric js canvases with normal canvas id from canvas arrray
var canvas = new fabric.Canvas(`${i}`);
f_can_arr.push(canvas);
//c set canvas background using image array
canvas.setBackgroundImage(img_arr[i], canvas.renderAll.bind(canvas), {
backgroundImageOpacity: 1,
backgroundImageStretch: false,
});
}
function extend_canvas() {
f_can_arr.forEach((canvas) => {
var origX, origY, isDown, mode_rect, mode_uline, mode_free, pointer;
//c setting keypress listener
$(window).on("keypress", (e) => {
console.log(e.key);
//c drawing rectangles
if (e.key == 1) {
var rect;
console.log("Box");
isDown = true;
mode_free = false;
mode_uline = false;
mode_rect = true;
//c canvas event listners
canvas.on("mouse:down", function (o) {
isDown = true;
if (mode_rect) {
pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
console.log(origX + "," + origY);
rect = new fabric.Rect({
left: origX,
top: origY,
originX: "left",
originY: "top",
width: pointer.x - origX,
height: pointer.y - origY,
fill: "red",
angle: 0,
fill: "rgba(255,0,0,0.0)",
stroke: "black",
strokeWidth: 1,
});
canvas.add(rect);
}
});
canvas.on("mouse:move", function (o) {
if (mode_rect) {
if (isDown) {
var pointer = canvas.getPointer(o.e);
if (origX > pointer.x) {
rect.set({ left: Math.abs(pointer.x) });
}
if (origY > pointer.y) {
rect.set({ top: Math.abs(pointer.y) });
}
rect.set({ width: Math.abs(origX - pointer.x) });
rect.set({ height: Math.abs(origY - pointer.y) });
canvas.renderAll();
}
}
});
}
//c freehand drawing/Highlighter
if (e.key == 2) {
console.log("freehand");
isDown = true;
mode_free = true;
mode_uline = false;
mode_rect = false;
canvas.isDrawingMode = 1;
canvas.freeDrawingBrush.color = "rgba(255,0,0,0.2)";
canvas.freeDrawingBrush.width = 20;
//c canvas event listners
canvas.on("mouse:down", function (o) {
isDown = true;
if (mode_free) {
canvas.renderAll();
}
});
}
//c line mode
if (e.key == 3) {
var line;
console.log("line");
isDown = true;
mode_free = false;
mode_uline = true;
mode_rect = false;
//c canvas event listners
canvas.on("mouse:down", function (o) {
isDown = true;
var pointer = canvas.getPointer(o.e);
var points = [pointer.x, pointer.y, pointer.x, pointer.y];
if (mode_uline) {
line = new fabric.Line(points, {
strokeWidth: 3,
fill: "red",
stroke: "red",
originX: "center",
originY: "center",
targetFindTolerance: true,
});
canvas.add(line);
}
});
canvas.on("mouse:move", function (o) {
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
if (mode_uline) {
line.set({ x2: pointer.x, y2: pointer.y });
canvas.renderAll();
}
});
}
//c deleting a selected shape
if (e.key == 4) {
var activeObject = canvas.getActiveObject();
if (activeObject) {
canvas.remove(activeObject);
}
}
//c cancling freehand drawing mode
if (e.key == "x") {
console.log("freehand mode cancled");
canvas.isDrawingMode = 0;
}
});
//c removing previous event listeners and resetting some global variables
canvas.on("mouse:up", function (o) {
isDown = false;
mode_free = false;
mode_uline = false;
mode_rect = false;
canvas.off("mouse:down");
canvas.off("mouse:move");
});
});
}
function save_canvas() {}
function load_canvas() {}
solution
I setup a custom trigger event after the ajax call is made. When the trigger event is fired, only then I create fabricjs canvases.
(apparently even with promises, the fabric code was not running in correct order. Which was probably due to bad syntax. Custom triggers solve this issue.)
results
-Each image appear separately in its own fabric.js canvas as background.
-Each canvas is independent.
Have create for you just copy code and then use your own images in local to get actual full result in output div( images will generated) .
let CANVAS_LIST = [];
let imageList = [
'https://homepages.cae.wisc.edu/~ece533/images/airplane.png',
'https://homepages.cae.wisc.edu/~ece533/images/arctichare.png',
'https://homepages.cae.wisc.edu/~ece533/images/baboon.png',
]
imageList.forEach(element => {
let canvasElement = document.createElement("canvas");
canvasElement.width = '300';
canvasElement.height = '300';
$("#canvas_container").append(canvasElement);
let canvas = new fabric.Canvas(canvasElement);
// Adding Example Text here.
canvas.add(new fabric.Text('This text is added', {
fontFamily: 'Delicious_500',
color: 'red',
left: 10,
top: 100
}));
// Setting up Background to dynamic generated Canvas
canvas.setBackgroundImage(
`${element}`,
canvas.renderAll.bind(canvas),
{
backgroundImageOpacity: 1,
backgroundImageStretch: false,
}
);
CANVAS_LIST.push(canvas);
});
setTimeout(() => {
generateOutput();
}, 3000);
function generateOutput() {
$("#output").empty();
CANVAS_LIST.forEach(canvas => {
let image = $("<img>").attr({
width: 200,
height: 200,
src: canvas.toDataURL()
});
image.css({ marginLeft: '20px' });
$("#output").append(image);
})
}
<!DOCTYPE html>
<html>
<head>
<style>
body {}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.1.0/fabric.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div id="canvas_container">
</div>
<button onclick="generateOutput()"> Show output</button>
<div id="output">
</div>
</div>
</body>
</html>
Thanks
Ok I have an application on the market for testing purposes and Im trying to implement admob ads I have my account for banner ads and everything the only thing is that I dont know how to set it up I need help please this is the sample application. Thank you
Mostly what i need i need to show banner ads on my title screen game screen and game over screen Ive tried several tutorials none seem to get me anywhere so thats why i decided maybe here one of you can help Me with this.
This is the html file----------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8-8">
<meta name="viewport" content="user-scalable=0, initial-scale=1,minimum-scale=1, maximum-scale=1, width=device-width, minimal-ui=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script type="text/javascript" src="js/phaser.js"></script>
<script src="js/stateTitle.js"></script>
<script src="js/characters.js"></script>
<style>
body {
padding: 0px;
margin: 0px;
background: black;
c
}
</style>
</head>
<body>
<script src="js/stateOver.js"></script>
<script src="js/main.js"></script>
</body>
</body>
</html>
----------------------------------------------------------------------------_
Main.js
var score =0;
var highscore =0;
var highScoreText;
var scoreText;
var MainState = {
//load the game assets before the game starts
preload: function () { /////////////////////////////preload
this.load.image('background', 'assets/city.png');
this.load.image('bird', 'assets/bird.png');
game.load.image('pipe', 'assets/pipe.png');
},
//executed after everything is loaded
create: function () {
this.background = this.game.add.sprite(0, 0, 'background');
highScoreText = this.game.add.text(600, 40, 'HS: ' + highscore, {
font: '25px Arial',
fill: 'black'
});
/////Bird///////////////////////////////////////////////////
this.bird = this.game.add.sprite(100, 200, 'bird');
game.physics.startSystem(Phaser.Physics.ARCADE);
game.physics.arcade.enable(this.bird);
this.bird.body.gravity.y = 1000;
var spaceKey = game.input.keyboard.addKey(
Phaser.Keyboard.SPACEBAR);
game.input.onDown.add(this.jump, this); //////touch screen jump
spaceKey.onDown.add(this.jump, this);
this.bird.body.collideWorldBounds=true;
this.bird.body.immovable= true;
///////////////////////////////////////////////////////Pipes
this.pipes = game.add.group();
//timer
this.timer = game.time.events.loop(1400, this.addRowOfPipes, this); /////////////timer for pipes
///////////////////////////////////////////////////////Score
this.score = -1;
this.labelScore = game.add.text(20, 20, "0",
{ font: "30px Arial", fill: "black" });
},
// this is execated multiple times per second
update: function () { //////////////////////////////////////////////////update
if (this.bird.y < 0 || this.bird.y > 480)
game.state.start("StateOver");
///Collision
game.physics.arcade.overlap(
this.bird, this.pipes, this.restartGame, null, this);
////////////////////////////////////////////////////////////////////////// Highscore counter
highScoreText.text = 'HS: ' + this.currentHighScore;
{
if (this.score > this.currentHighScore)
{
this.currentHighScore = this.score;
}
}
},
jump: function () {
//this is for so the bird wount fly once dead
if (this.bird.alive == false)
return;
///sound
///this.jumpSound.play();
// Add a vertical velocity to the bird
this.bird.body.velocity.y = -350;
// Jump Animation
var animation = game.add.tween(this.bird);
// Change the angle of the bird to -20° in 100 milliseconds
animation.to({angle: -20}, 100);
// And start the animation
animation.start();
game.add.tween(this.bird).to({angle: -20}, 100).start();
},
restartGame: function () {
// Start the 'main' state, which restarts the game
game.state.start(game.state.current);
///Hit pipe Null
game.physics.arcade.overlap(
this.bird, this.pipes, this.hitPipe, null, this);
},
addRowOfPipes: function() {
var hole = Math.floor(Math.random() * 5) + 1; ///Math.floor(Math.random() * 5) + 1;
for (var i = 0; i < 10 ; i++) ///// (var i = 0; i < 8; i++)
if (i != hole && i != hole + 1) ///// if (i != hole && i != hole + 1)
this.addOnePipe(440, i * 50 ); ///// 640 starting point of pipe 240 point of down ////this.addOnePipe(480, i * 60 + 10);
///Score for pipes
this.score += 1;
this.labelScore.text = this.score;
},
addOnePipe: function(x, y) {
var pipe = game.add.sprite(x, y, 'pipe');
this.pipes.add(pipe);
game.physics.arcade.enable(pipe);
pipe.body.velocity.x = -200;
pipe.checkWorldBounds = true;
pipe.outOfBoundsKill = true;
},
hitPipe: function() {
// If the bird has already hit a pipe, do nothing
// It means the bird is already falling off the screen
if (this.bird.alive == false)
return;
else {
game.state.start("StateOver");
}
// Set the alive property of the bird to false
this.bird.alive = false;
// Prevent new pipes from appearing
game.time.events.remove(this.timer);
// Go through all the pipes, and stop their movement
this.pipes.forEach(function(p){
p.body.velocity.x = 0;
}, this);
},
};
// Initilate the Phaser Framework
var game = new Phaser.Game(480, 640, Phaser.AUTO);
game.state.add("main", MainState);
game.state.add("stateTitle", stateTitle);
game.state.add("StateOver", StateOver);
game.state.add("characters", characters);
game.state.start("stateTitle");
-----------------------------------------------------------------------------
Game over screen stateover.js
var StateOver={
preload:function()
{
game.load.spritesheet('button', 'assets/button.png', 215, 53, 8);
game.load.image("title", "assets/title.png");
game.load.image("game", "assets/extra/gameover.png");
},
create:function()
{
this.title = game.add.tileSprite(0, game.height-640,game.width, 640, 'title');
this.title.autoScroll(-100,0);
this.btnPlayAgain=game.add.button(110,400,'button',this.playAgain,this,2,3,2);
this.btnMainMenu=game.add.button(110,300,'button',this.mainMenu,this,4,5,4);
this.btnStore=game.add.button(110,200,'button',this.Store,this,6,7,6);
this.game.add.sprite (118, 100, "game");
highScoreText = this.game.add.text(130, 150, 'HS: ' + highscore, {
font: '25px Arial',
fill: 'black'
});
},
playAgain:function()
{
game.state.start("main");
},
mainMenu:function()
{
game.state.start("stateTitle");
},
Store:function()
{
game.state.start("characters");
},
update:function()
{
highScoreText.text = 'HIGHSCORE: ' + localStorage.getItem("highscore");
{
if (this.score > localStorage.getItem("highscore"))
{
localStorage.setItem("highscore", this.score);
}
}
},
};
This is the main title screen
var stateTitle={
preload:function()
{
game.load.image("logo", "assets/extra/Logo.png");
game.load.image("title", "assets/title.png");
game.load.spritesheet('button', 'assets/button.png', 215, 53, 8);
},
create:function()
{
this.title = game.add.tileSprite(0, game.height-640,game.width, 640, 'title');
this.title.autoScroll(-100,0);
this.btnStart=game.add.button(110,400,'button',this.startGame,this,0,1,1);
this.btnStore=game.add.button(110,480,'button',this.Store,this,6,7,6);
this.logo = game.add.sprite(60, 150, 'logo');
},
startGame:function()
{
game.state.start("main");
},
Store:function()
{
game.state.start("characters");
},
update:function()
{
},
};
Html with sample
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8-8">
<meta name="viewport" content="user-scalable=0, initial-scale=1,minimum-scale=1, maximum-scale=1, width=device-width, minimal-ui=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script type="text/javascript" src="js/phaser.js"></script>
<script src="js/stateTitle.js"></script>
<script src="js/characters.js"></script>
<style>
body {
padding: 0px;
margin: 0px;
background: black;
c
}
</style>
</head>
<body>
<script src="js/stateOver.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
function onDeviceready() {
admob.createBannerView({publisherId: "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB"});
}
document.addEventListener('deviceready', onDeviceready, false);
</script>
</body>
</html>
Firstly add admob plugin then just add below lines to your html file:
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
if (AdMob)
AdMob.prepareInterstitial({
adId : 'ca-app-pub-xxx/yyy',
autoShow : false
});
if (AdMob)
AdMob.createBanner({
adId : 'ca-app-pub-xxx/yyy',
position : AdMob.AD_POSITION.BOTTOM_CENTER,
autoShow : true,
overlap : true
});
}
</script>
You can change the place of the banner; use TOP_CENTER (I am not sure about this) instead of BOTTOM_CENTER.
Ok SOOOOO many tries alone I was able to fix this by simply inserting the extra needed plugins. Internet connection etc. BOOOOOOOOOOOOOOM Fixed any questions ask.
I am trying to develop the following carousel.
http://jsfiddle.net/2kLanjwn/2/
It should work in this way.
Clicking the button DOWN, carousel scrolls and resize always div in the center.
I am not able to apply the same logic on the reverse, so when I click button UP I need to contract the central div, and sliding up.
I kindly you what I am doing wrong and if you would be able to fix it on jsfiddle.
Also I would like to know if there is any better way to achieve that same effect or a component that can be reused.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Scroll text box example</title>
<style>
#btn-up, #btn-down {
position: absolute;
top: 600px;
}
#btn-up {
left: 0px;
}
#btn-down {
left: 50px;
}
#btn-up, #btn-down {
width: 50px;
height: 50px;
background-color: yellow;
outline: 1px solid black;
}
#content-scroll-container {
position: absolute;
top: 0;
left: 0px;
width: 500px;
height: 250px; /* MASK HEIGHT real mask would be 200*/
overflow: hidden;
}
#content-scroll-inner {
position: absolute;
}
.cnt {
height: 100px;
width: 500px;
background-color: red;
}
.cnt:nth-child(even) {
height: 100px;
background-color: pink;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var scroller = {
config: {
curPos: 0, // position
canExpand: false,
el: 'content-scroll-container', // visible area (container)
elInner: 'content-scroll-inner', // inner content
cntPosY: null, // content top-left corner (0 position)
cntHeight: null, // content lenght
maskHeight: null, // visible area (rest is masked out)
canMoveUp: null, // true jquery can slide up content
canMoveDown: null, // true jquery can slide down content
increment: 100, // slide of x pixel when user perfom an action
incrementOf: 0, // how much we have slided the contnt
animationSpeed: 500, // jquery animation speed, use 0 for no animation
isAnimationOn: false, // true when jquery is performing animation
},
data: '<div id="cnt-0" class="cnt">0</div><div id="cnt-1" class="cnt">1</div><div id="cnt-2" class="cnt">2</div><div id="cnt-3" class="cnt">3</div><div id="cnt-4" class="cnt">4</div><div id="cnt-5" class="cnt">5 empty</div>',
getCntPosition: function () {
// get y position of content
var elm = document.getElementById(this.config.elInner);
this.config.cntPosY = elm.offsetTop;
},
getCntSize: function () {
// get height for content
var elm = document.getElementById(this.config.elInner);
this.config.cntHeight = elm.clientHeight;
},
getMaskSize: function () {
// get height visible area
var elm = document.getElementById(this.config.el);
this.config.maskHeight = elm.clientHeight;
},
updateData: function () {
// refresh state
this.getMaskSize();
this.getCntPosition();
this.getCntSize();
this.canMoveUpCheck();
this.canMoveDownCheck();
//console.clear();
console.log(this.config);
},
canMoveUpCheck: function () {
// set flags allowing sliding up (in case we have enought content to show)
var lastScreenY = (this.config.cntHeight - this.config.maskHeight); // last screen visible
if ((this.config.incrementOf * -1) < lastScreenY)
this.config.canMoveUp = true;
else
this.config.canMoveUp = false;
},
canMoveDownCheck: function () {
// set flags allowing sliding down (in case we have enought content to show)
if (this.config.cntPosY >= 0)
this.config.canMoveDown = false; // cannot move more up if content is on start position (0 position)
else
this.config.canMoveDown = true;
},
goUp: function () {
// user want to read previose content
//this.updateData();
if (this.config.canMoveDown == true && this.config.isAnimationOn == false) {
this.moveCnt('down'); // content go down
}
},
goDown: function () { //**************************
// user want to read next content
//this.updateData();
if (this.config.canMoveUp == true && this.config.isAnimationOn == false) {
// check newPos
var newPos = this.config.curPos + 1;
if (newPos > 0) { // special case
if (this.config.canExpand == true)
this.config.increment = 150;
this.config.canExpand = true;
this.moveCnt('up');
}
}
},
moveCnt: function (direction) {
// do the actual animation
var moveOf;
this.isAnimationOn = true;
if (direction == 'up') {
this.config.curPos++;
if (this.config.cntPosY == 0) { // special case for first item
moveOf = '-=' + (this.config.increment / 2);
}
else {
moveOf = '-=' + this.config.increment;
}
var target = '#' + this.config.elInner + ':not(:animated)';
$(target).animate({ 'top': moveOf }, this.animationSpeed, this.cbEndAnimation.bind(this, direction));
} else if (direction == 'down') {
this.config.curPos++;
var distanceToFp = (this.config.increment / 2); // height to reach first page (special page)
var distanceToFp = 50;
if (this.config.cntPosY == (distanceToFp * -1)) {
moveOf = '+=' + distanceToFp;
// i need to contract only the firs tone
$('cnt-1').css({ height: '100px' }, 500, this.cbEndAnimationExpand.bind(this));
} else {
moveOf = '+=' + this.config.increment;
}
var target = '#' + this.config.elInner + ':not(:animated)';
$(target).animate({ 'top': moveOf }, this.animationSpeed, this.cbEndAnimation.bind(this));
}
//var target = '#' + this.config.elInner + ':not(:animated)';
//$(target).animate({ 'top': moveOf }, this.animationSpeed, this.cbEndAnimation.bind(this, direction));
},
cbEndAnimation: function (direction) {
// runs when animation end
this.config.isAnimationOn = false;
if (direction == 'up') {
this.config.incrementOf -= this.config.increment;
if (this.config.canExpand == true) { // expand
this.logicExpand();
} else {
// do nothing
}
}
else if (direction == 'down') {
this.config.incrementOf += this.config.increment;
}
this.updateData(); // refresh state has element has just moved
this.logicShowHideArrows();
},
logicExpand: function () {
// take contenf and expand it
var elm = document.getElementById('cnt-' + this.config.curPos);
$(elm).animate({ height: '150px' }, 500, this.cbEndAnimationExpand.bind(this));
},
cbEndAnimationExpand: function () {
console.log('end anim expand');
},
logicContract: function () {
var elm = document.getElementById('cnt-' + this.config.curPos);
$(elm).animate({ height: '-=50px' }, 500, this.cbEndAnimationContract.bind(this));
},
logicShowHideArrows: function () {
// reset first
this.hideArrow('btn-up');
this.hideArrow('btn-down');
if (this.config.canMoveUp == true)
this.showArrow('btn-down');
if (this.config.canMoveDown == true)
this.showArrow('btn-up');
},
cbEndAnimationContract: function () {
this.config.isAnimationOn = false;
this.moveCnt('down'); // content go down
},
showArrow: function (elmName) {
var elm = document.getElementById(elmName);
elm.style.display = '';
},
hideArrow: function (elmName) {
var elm = document.getElementById(elmName);
elm.style.display = 'none';
},
setEventHandler: function () {
// envet handlers for arrows
var btnUp = document.getElementById('btn-up');
btnUp.addEventListener('click', this.goUp.bind(this), false);
var btnDown = document.getElementById('btn-down');
btnDown.addEventListener('click', this.goDown.bind(this), false);
},
renderData: function () {
// render data content to slide
var elm = document.getElementById(this.config.elInner);
elm.innerHTML = this.data;
},
start: function () {
this.renderData();
this.updateData();
this.setEventHandler();
this.logicShowHideArrows(); // at start set arrows visibility
}
};
</script>
</head>
<body onload="scroller.start();">
<div id="content-scroll-container">
<div id="content-scroll-inner">
</div>
</div>
<div id="btn-up">UP</div>
<div id="btn-down">DOWN</div>
</body>
</html>
I can't find what in your code is wrong, but I made some changes to it, and it worked. Here is the code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Scroll text box example</title>
<style>
#btn-up, #btn-down {
position: absolute;
top: 400px;
}
#btn-up {
left: 0px;
}
#btn-down {
left: 50px;
}
#btn-up, #btn-down {
width: 50px;
height: 50px;
background-color: yellow;
outline: 1px solid black;
}
#content-scroll-container {
position: absolute;
top: 0;
left: 0px;
width: 500px;
height: 250px; /* MASK HEIGHT real mask would be 200*/
overflow: hidden;
}
#content-scroll-inner {
position: absolute;
}
.cnt {
height: 100px;
width: 500px;
background-color: red;
}
.cnt:nth-child(even) {
height: 100px;
background-color: pink;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var scroller = {
config: {
curPos: 0, // position
el: 'content-scroll-container', // visible area (container)
elInner: 'content-scroll-inner', // inner content
cntPosY: null, // content top-left corner (0 position)
cntHeight: null, // content lenght
maskHeight: null, // visible area (rest is masked out)
animationSpeed: 500, // jquery animation speed, use 0 for no animation
isAnimationOn: false, // true when jquery is performing animation
},
data: '<div id="cnt-0" class="cnt">0</div><div id="cnt-1" class="cnt">1</div><div id="cnt-2" class="cnt">2</div><div id="cnt-3" class="cnt">3</div><div id="cnt-4" class="cnt">4</div><div id="cnt-5" class="cnt">5 empty</div>',
getCntPosition: function () {
// get y position of content
var elm = document.getElementById(this.config.elInner);
this.config.cntPosY = elm.offsetTop;
},
getCntSize: function () {
// get height for content
var elm = document.getElementById(this.config.elInner);
this.config.cntHeight = elm.clientHeight;
},
getMaskSize: function () {
// get height visible area
var elm = document.getElementById(this.config.el);
this.config.maskHeight = elm.clientHeight;
},
updateData: function () {
// refresh state
this.getMaskSize();
this.getCntPosition();
this.getCntSize();
//console.clear();
console.log(this.config);
},
logicShowHideArrows: function () {
if(this.config.curPos<1) {
$('#btn-up').hide();
} else {
$('#btn-up').show();
}
if(this.config.curPos>=4) {
$('#btn-down').hide();
} else {
$('#btn-down').show();
}
},
goUp: function () {
if(this.config.curPos<4 && scroller.config.isAnimationOn ==false) {
scroller.config.isAnimationOn = true;
scroller.config.curPos++;
if(scroller.config.curPos==1) {
$('#content-scroll-inner').animate({'top':'-=50px'},500,function(){
$('#cnt-'+scroller.config.curPos).animate({'height':'+=50px'},500);
scroller.logicShowHideArrows();
scroller.config.isAnimationOn = false;
});
this.config.incrementOf-=50;
$('#btn-up').show();
}
else {
$('#content-scroll-inner').animate({'top':'-=150px'},500,function(){
$('#cnt-'+scroller.config.curPos).animate({'height':'+=50px'},500);
scroller.logicShowHideArrows();
scroller.config.isAnimationOn = false;
});
this.config.incrementOf-=150;
}
this.updateData();
}
},
goDown: function () { //**************************
// user want to read next content
//this.updateData();
if(this.config.curPos>0 && scroller.config.isAnimationOn ==false) {
scroller.config.isAnimationOn = true;
if(this.config.curPos==1) {
$('#cnt-'+scroller.config.curPos).animate({'height':'-=50px'},500,function(){
$('#content-scroll-inner').animate({'top':'+=50px'},500);
scroller.logicShowHideArrows();
scroller.config.isAnimationOn = false;
});
scroller.config.curPos--;
this.config.incrementOf+=150;
this.updateData();
}
else {
$('#cnt-'+scroller.config.curPos).animate({'height':'-=50px'},500,function(){
$('#content-scroll-inner').animate({'top':'+=150px'},500);
scroller.logicShowHideArrows();
scroller.config.isAnimationOn = false;
});
scroller.config.curPos--;
this.config.incrementOf+=150;
this.updateData();
}
}
},
setEventHandler: function () {
$('#btn-up').click(function() {
scroller.goDown();
});
$('#btn-down').click(function() {
scroller.goUp();
});
},
renderData: function () {
// render data content to slide
var elm = document.getElementById(this.config.elInner);
elm.innerHTML = this.data;
},
start: function () {
this.renderData();
this.updateData();
this.setEventHandler();
this.logicShowHideArrows();
}
};
</script>
</head>
<body onload="scroller.start();">
<div id="content-scroll-container">
<div id="content-scroll-inner">
</div>
</div>
<div id="btn-up">UP</div>
<div id="btn-down">DOWN</div>
</body>
</html>
Does anyone know the syntax to call a function recursively to chain path.animate events using the Raphael library?
I have posted a JS Fiddle for reference at http://jsfiddle.net/Quarkist/c4TzV/
The function animString() (result on left) chains events properly and is animated.
The recursive function animRecursion() (result on right) does not animate.
Any insight is appreciated. Thank you!
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Recursive animatePath w/Raphael</title>
<style type="text/css">
<!--
#displayA { position: absolute; top: 0px; left: 0px; }
#displayB { position: absolute; top: 0px; left: 112px; }
// -->
</style>
<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript">
// Paths to animate
var path1 = "M200,50c-27.5,0,50,78,50,50 c0-27.5-77.5,50-50,50c28,0-50-77.5-50-50C150,127.5,228,50,200,50z";
var path2 = "M200,150c-27.5,0-50-22.5-50-50 s22.5-50,50-50s50,22.5,50,50S227.5,150,200,150z";
var path3 = "M200,171 130,100 200,30 271,100 200,171z";
var path4 = "M250,150 150,150 150,50 250,50 250,150z";
var path5 = "M200,50 200,83.5 200,116.5 200,150";
// animString works by stringing code along
function animString()
{ var tempCanvas = Raphael(document.getElementById('displayA'), 0, 0, 320, 240);
var path = tempCanvas.path( path1 );
var speed = 1000;
path.animate(
{ path: path1 }, 1000, // twist
function(){ path.animate( { path: path1 }, speed, 2000,
function(){ path.animate( { path: path2 }, speed, 2000,
function(){ path.animate( { path: path3}, speed, 2000,
function(){ path.animate( { path: path4}, speed, 2000,
function(){ path.animate( { path: path5}, speed, 2000
) } ) } ) } ) } ) } );
}
// animRecursion fails
function animRecursion(pathArray, speedArray, initialization)
{ var newPath=pathArray.shift(pathArray);
var newSpeed=speedArray.shift(speedArray);
if ( !initialization )
{ initialization=1;
var tempCanvas = Raphael(document.getElementById('displayB'), 0, 0, 320, 240);
var path = tempCanvas.path( newPath );
path.animate({path:newPath},newSpeed,animRecursion(pathArray, speedArray, initialization));
} else
{ if ( pathArray.length !=1 )
{ path.animate({path:newPath},newSpeed,animRecursion(pathArray, speedArray, initialization));
} else
{ if ( pathArray.length ==1 )
{ path.animate({path:newPath},newSpeed);
}
}
}
}
var sendArray = new Array();
var sendSpeed = new Array();
sendArray = [path1, path2, path3, path4, path5];
sendSpeed= [100,200,300,400,500];
</script>
</head>
<body onLoad="animString(); animRecursion(sendArray,sendSpeed);">
<div id="displayA"></div>
<div id="displayB"></div>
</body>
</html>
Notice that the working code does this:
path.animate(x,y,z,function(){path.animate()});
instead of this:
path.animate(x,y,z,path.animate());
But the failing code does this:
path.animate(x,y,z,animRecursion());
What you should have done is to do it the way the working code does it:
path.animate(x,y,z,function(){animRecursion()});
That is, pass a function to be called, not call a function.