Wikitude
How can we help you today?
Animated Image Drawable won't show
6 CommentsSorted by Oldest First
Hi Guys, I am trying to show an AnimatedImageDrawable when an ImageDrawable is clicked. However, both of them are not appearing. Can you tell me what is wrong? The path of the images are correct.
var imgOne = new AR.ImageResource("fruitballimages/fruitball.png");
var overlayOne = new AR.ImageDrawable(imgOne, 1, {
scale: 1.5,
offsetY: 0.12
});
var spriteDrawable = new AR.Image
var spriteDrawable = new AR.AnimatedImageDrawable("fruitballimages/sprites.png", 10 , 1080 , 1920 {
});
var pageOne = new AR.Trackable2DObject(this.tracker, "fruitballmarker", {
drawables: {
cam: spriteDrawable
},
onEnterFieldofVision: function animate(){
overlayOne.onClick = function play(){
shakeAnimation.animate(, 10, 10);
}
}
});
}
Thanks for the help.
Hi Christian,
My mistake on the code. The code I am using is this:
var imgOne = new AR.ImageResource("fruitballimages/fruitball.png");
var overlayOne = new AR.ImageDrawable(imgOne, 1, {
scale: 1.5,
offsetY: 0.12
});
var spriteDrawable = new AR.ImageResource("fruitballimages/sprites.png");
var spriteAnimation = new AR.AnimatedImageDrawable(spriteDrawable, 10 , 1080 , 1920 {
});
var pageOne = new AR.Trackable2DObject(this.tracker, "fruitballmarker", {
drawables: {
cam:
},
onEnterFieldofVision: function animate(){
overlayOne.onClick = function play(){
shakeAnimation.animate(, 10, 10);
}
}
});
Hi Christian,
The first frame of the AnimatedImageDrawable is showing but won't play. Here is my updated code.
The number "1" appears, numbers 2 and 3 won't.
var spriteDrawable = new AR.ImageResource("fruitballimages/123.png");
var spriteAnimation = new AR.AnimatedImageDrawable(spriteDrawable, 3, 100 , 300, {
//enabled: false
});
var pageOne = new AR.Trackable2DObject(this.tracker, "fruitballmarker", {
drawables: {
cam:
},
onEnterFieldofVision: function (){
spriteAnimation.animate(, 1000, 10);
}
});
Attached here is the image I used.
Hello Miguel,
is this really the code you are using? Because I see 2 syntax errors:
var spriteDrawable = new AR.Image
var spriteDrawable = new AR.AnimatedImageDrawable("fruitballimages/sprites.png", 10 , 1080 , 1920 {});
You can remove the line: var spriteDrawable = new AR.Image
And I don't think this works:
onEnterFieldOfVision: function animate()
instead write:
onEnterFieldOfVision: function()
Please check your code in the browser if you have any syntax errors. Therefore you can use the ade.js or you can use remote debugging. Here our description for a debugging workflow iOS and for Android.
I hope that helps,
Christian
You have a typo, you wrote onEnterFieldofVision.
It should be: onEnterFieldOfVision
So your function was never called. Sorry, didn't notice that in the first post.
There is still another syntax error in this line:
var spriteDrawable = new AR.AnimatedImageDrawable("fruitballimages/sprites.png", 10 , 1080 , 1920 {});
You forgot the comma, this is the correct call:
var spriteDrawable = new AR.AnimatedImageDrawable("fruitballimages/sprites.png", 10, 1080, 1920, {});
And the shakeAnimation object you want to animate after a click is not defined.
Additionally you redefine the overlayOne.onClick with every onEnterFieldOfVision. It would be better to define it outside the trigger.
© 2021 Wikitude, a Qualcomm company
Rivera.migueld