createJS - how to set width and height of symbol on stage

Hi All:

I finally figured it out with the help of JoãoCésar . The Transformation point was off...check out this video https://i.imgur.com/G20QESx.gif

And I also find it helpful to put all the javascript in the FLA and not have it in a js file.

Thanks all for your help!!

Hi All:

I figured out the problem. I put all of my JavaScript in the FLA. I had most of my JavaScript in a .js file which my Html referenced. Now things make more sense. Sorry for the confusion. Just trying to learn Animate. Thanks again for all of your help.

Ramona

ramonas95472076  wrote I am creating a game using Animate and CreateJS, and I have a background image that I have created as a symbol in Animate. This background symbol is the correct size in Animate but when I export the Javascript and Html and view it in the browser the background symbol is very small (a lot smaller than the height and width set in Animate).

This should absolutely not be happening all on its own. So you're saying that one, and only one, of your symbols is spontaneously resizing at runtime, for no discernible reason?

Hi kglad,

Thanks for your response. I appreciate it. I am probably implementing your suggestion wrong, and that is probably why it is not working...but did you mean like this:

    var thebackground = new lib.Background();

    this.stage.addChild(thebackground);

    thebackground.scaleX = this.stage.width;

    thebackground.scaleY = this.stage.height;

Because when I implement the above my entire background disappears. Below I have pasted my entire code. If you have time can you glance at it and tell me what I am doing wrong? I know that is a lot to ask but thanks in advance for your help!! The 4 lines in question are below in the Game class.

The code below implements a background and random boxes with numbers appear on top; and the user clicks on them in order to make them disappear:

class NumberedBox extends createjs.Container {

  constructor(lib, number=0, game){

    super();

    this.game = game;

    this.number = number;

    var movieclip = new lib.NumberedBox();

    movieclip.numberedText.text = number;

    this.addChild(movieclip);

    this.setBounds(0,0,50,50);

    this.on('click', this.handleClick.bind(this));

  }

    handleClick(){

      this.game.handleClick(this);

    }

}

class GameData{

  constructor(){

    this.amountOfBox = 20;

    this.resetData();

  }

  resetData(){

    this.currentNumber = 1;

  }

  nextNumber(){

    this.currentNumber += 1;

  }

  isRightNumber(number){

    return(number === this.currentNumber);

  }

  isGameWin(){

    return false;

  }

}

class Game {

  constructor(lib){

    this.lib = lib;

    this.canvas = document.getElementById("canvas");

    this.stage = new createjs.Stage(this.canvas);

    this.stage.width = this.canvas.width;

    this.stage.height = this.canvas.height;

    createjs.Touch.enable(this.stage);

    this.retinalize();

    createjs.Ticker.framerate = 60;

    this.gameData = new GameData();

    createjs.Ticker.on("tick", this.stage);

    var thebackground = new lib.Background();

    this.stage.addChild(thebackground);

    thebackground.scaleX = this.stage.width;

    thebackground.scaleY = this.stage.height;

    this.generateMultipleBoxes(lib);

  }

  generateMultipleBoxes(lib, amount=10) {

    //this.lib = lib;

    for(var i = amount; i > 0; i--){

      var movieclip = new NumberedBox(lib, i, this);

      this.stage.addChild(movieclip);

      movieclip.x = Math.random() * (this.stage.width - movieclip.getBounds().width);

      movieclip.y = Math.random() * (this.stage.height - movieclip.getBounds().height);

    }

  }

  handleClick(numberedBox){

    if(this.gameData.isRightNumber(numberedBox.number)){

    this.stage.removeChild(numberedBox);

    this.gameData.nextNumber();

  }

  }

  retinalize(){

    this.stage.width = this.canvas.width;

    this.stage.height = this.canvas.height;

    let ratio = window.devicePixelRatio;

    if(ratio === undefined){

      return

    }

    this.canvas.setAttribute('width', Math.round(this.stage.width * ratio));

    this.canvas.setAttribute('height', Math.round(this.stage.height * ratio));

    this.stage.scaleX = this.stage.scaleY = ratio;

    //set css style

    this.canvas.style.width = this.stage.width + "px";

    this.canvas.style.width = this.stage.width + "px";

  }

}

var game = new Game(lib);

use the scaleX and scaleY properties on thebackground.