3

I'm trying to create an animation by setting a background to a canvas and then trying to move my assets over the background image. I'm able to display the background image in the canvas and also able to preload all my assets. However, I'm not able to display any of the assets on the canvas.

I tried to play around with the coordinates of the bitmap I'm trying to display in case if it's displaying outside the visible area. I also tried to check if there is any problem with the timing of updating the stage, but no luck. Any help would be appreciated.

function set()
{
    var cgroup = new createjs.Container();

    cgroup.x = 100;
    cgroup.y = 100;


    // var path = 'img/cloud1.png';
    var img = preload.getResult("c1");
    console.log(img.src);  //displaying correct preloaded file
    var cloud1 = new createjs.Bitmap(img);
    cgroup.addChild(cloud1);
    cloud1.x = 120;
    cloud1.y = 120;
    cloud1.regX = 62;
    cloud1.regY = 62;

    stage.addChild(cgroup);
    stage.update();
}
CryptoFool
  • 21,719
  • 5
  • 26
  • 44
Steve Tom
  • 31
  • 2
  • 1
    `console.log(img.src); //displaying correct preloaded file` doesn't mean the file is actually loaded (yet) – Jaromanda X Apr 07 '19 at 02:48
  • the file is showing in resources and network panel as loaded. thanks – Steve Tom Apr 07 '19 at 02:56
  • so, you're saying that you can tell the file is actually loaded at exactly this point `console.log(img.src);` (not even 1ms later) by viewing the resources and network panel? because `console.log(img.src);` does not indicate the file is loaded – Jaromanda X Apr 07 '19 at 03:13
  • yes i think you are correct there. i cannot confirm the load at that point. – Steve Tom Apr 07 '19 at 06:52
  • that's your problem then - how do you preload anyway? that's where you need to "fix" things – Jaromanda X Apr 07 '19 at 06:53
  • i played around with the ticker and stage.update and i got the second image to show up in canvas but it is resetting the canvas. so basically it is showing the background first and then showing the second image in a blank canvas. :| – Steve Tom Apr 07 '19 at 07:48
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/191394/discussion-between-steve-tom-and-jaromanda-x). – Steve Tom Apr 07 '19 at 12:41
  • Do you have multiple Stages? Your last comment sounds like you could have a second stage that is updating/overwriting. It is hard to tell without the rest of the code. – Lanny Apr 07 '19 at 14:06
  • i have only one stage created which is in my init function. but im gonna check if it is somehow getting overwritten and will get back to you. – Steve Tom Apr 07 '19 at 22:14
  • turns out that i was using context and the background image was displayed using drawImage and then when i add another image to the stage, the canvas was displaying the stage with just the second image, hence clearing out the first image. – Steve Tom Apr 08 '19 at 02:34

2 Answers2

1

You need to call the function to make it run. For instance, this would be for when the page loads. 

window.onload() = function(){
  var cgroup = new createjs.Container();

  cgroup.x = 100;
  cgroup.y = 100;

  // var path = 'img/cloud1.png';
  var img = preload.getResult("c1");
  console.log(img.src); //displaying correct preloaded file
  var cloud1 = new createjs.Bitmap(img);
  cgroup.addChild(cloud1);
  cloud1.x = 120;
  cloud1.y = 120;
  cloud1.regX = 62;
  cloud1.regY = 62;

  stage.addChild(cgroup);
  stage.update();
};
Yoko Ishioka
  • 161
  • 5
0

turns out that i was using context and the background image was displayed using drawImage and then when i add another image to the stage, the canvas was displaying the stage with just the second image, hence clearing out the first image.

Steve Tom
  • 31
  • 2