Want to move an image on a path in canvas using javascript

I have to develop a game where I have to move an image. For reference please see video at following YouTube link:

https://www.youtube.com/watch?v=CQAMCuqMHpA

My game is not same as it but have to use same object moving functionality as in Train of Thoughts game of Lumosity. For that I have googled a lot for moving an image on a specific path in canvas using JavaScript but haven't found any perfect solution for this. I found TweenJS, which can help me out to move object on a path. I referenced it from following link:

http://createjs.com/docs/tweenjs/classes/MotionGuidePlugin.html

By using TweenJS I can move a shape like circle, rectangle etc. but unable to move an image on a path. When I tried doing this by converting image to bitmap and then move bitmap using TweenJS it shows exception.

Please suggest something by which I can do this functionality in JavaScript.

Solution

Are you using Animate CC to export your code? The MotionGuidePlugin is intended for export from Animate, although it can be worked with manually. If you are using Animate, how are you changing to a Bitmap? Are you just doing it with code, or swapping to a Bitmap instance inside of Animate?

I did a quick test in Animate, and using a bitmap works fine. I tested it with and without a local server, and there was no problem there (as long as the image is on the same server.

If you are using plain code, I suspect there might be an issue with it. Any chance you can post it here?

Here is a quick sample using an image (exported from Animate CC).

Code:

this.instance = new lib.chrisk();
this.instance.parent = this;
this.instance.setTransform(49,183.9,1,1,0,0,0,5.8,5.9);

this.timeline.addTween(cjs.Tween.get(this.instance).to({guide:{path:[49.2,183.8,44.7,191.3,41.3,202.7,37.2,216.5,37.2,228.8,37.2,247.3,40.1,254.9,43.4,263.8,54.5,270.9,62.4,275.9,89.3,288.6,126.6,306.1,153.2,319.8,153.3,325.2,155.4,327.6,157.5,330.2,163,331.1,167.6,331.9,178.3,331.9,184.8,331.9,203.2,331.8,203.5,331.8,227.2,330.6,252.3,329.1,259,327.8,264.4,326.7,269.5,324.5,275.3,322,279,318.8,281.2,315.8,280.3,308.1,279,301,279,300.8,279.6,287.9,279.6,284.8,279.6,280.7,277,277.8,274.4,274.8,271.8,270.9,269.1,267,267.9,265.7,263.6,260.7,251,255.8,229.2,247.2,209.9,244.7,203.4,243.8,196,243.6,188.8,243.4,185.9,243.3,177.4,242.8,174.9,238.5,172.2,233.8,172.2,217.3,172.2,207.4,174.8,195.4,177.8,181.3,183.2,169.8,197.4,140,222,140,233,140,242.3,150.4,254.8,164.7,259,194.8,260.6,207,271.4,218.3,281.4,228.7,297.8,237,313.4,244.9,331.8,249.3,350.3,253.8,367.5,253.8,396.5,253.8,417,243.8,440,232.6,440,213.8,440,206.9,437.3,198.1,434,187.7,428.1,178.8,412.1,155.6,384,153,343.4,149.3,322.1,144.6,306.5,141.2,298.7,137,291,132.7,291,127.5,291,122.3,294.9,112.9,299.2,102.3,306,93,324.2,68,347,68,351.1,68,381.9,69.5,412.6,71,420,71]}},59).wait(1));