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

Report · Oct 20, 2018

Hi,

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).

I have tried setting the height and width in my Javascript as well as in the actions tab in Animate and I can't seem to get it to appear as its correct size.

I have tried this:

var thebackground = new lib.Background();

this.stage.addChild(thebackground);

thebackground.setBounds(0,0,500,500);

And I have tried:

var thebackground = new lib.Background();

this.stage.addChild(thebackground);

thebackground.height = this.stage.height;

thebackground.width = this.stage.width;

And I have tried:

var thebackground = new lib.Background();

this.stage.addChild(thebackground);

thebackground.height = this.stage.getBounds().height;

thebackground.width = this.stage.getBounds().width;

And nothing seems to work. Any suggestions? Thanks in advance for your help!!

Report · Oct 21, 2018

use the scaleX and scaleY properties on thebackground.

Report · Oct 21, 2018

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";

}

var game = new Game(lib);

Report · Oct 21, 2018

no, you probably want something like

thebackground.scaleX=canvas.width/thebackground.nominalBounds.width;

Report · Oct 21, 2018

Hi kglad,

Your answer is a 95% improvement. Before my background was taking up 30% of the canvas but now it is taking up 90%. I don't know why it won't fill the entire 100% of the width....but I will continue to play around with it. Do you have any more ideas? I am going to mark your answer as correct because I think it is the correct answer...I just think I am doing something wrong. But if you have any more ideas let me know. Thanks so much for your help!!

Report · Oct 21, 2018

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?

Report · Oct 21, 2018

I don't know why my background is only filling up 90% of the canvas. Do you have any ideas? I implemented KGlad's solution and it is a great improvement but for some reason it does not fill up 100% of the canvas. I am using this code:

thebackground.scaleX=canvas.width/thebackground.nominalBounds.width;

thebackground.scaleY=canvas.height/thebackground.nominalBounds.height;

If you have any other ideas please let me know. Thanks for you help!!

Report · Oct 21, 2018

No... no. I'm saying you shouldn't have to be using any code because your background symbol shouldn't be spontaneously resizing itself.

Report · Oct 21, 2018

Yeah honestly I don't know. In Animate CC I physically made the background the size of the canvas, is that sufficient? I mean should I be doing more in Animate CC?

Report · Oct 21, 2018

Nothing ever just resizes on its own in Animate. Are you sure you aren't doing something to it with tweens, or advanced layers, or some other code messing with it?

Report · Oct 21, 2018

Well, I was just playing around with it and when I changed the x and y position of the background it did take up the entire canvas just like I wanted. I am new to Animate CC and canvas. I assumed that if I physically moved the background in Animate to take up the entire screen that it would do the same on the canvas. I guess I was wrong. So here is the code that works:

thebackground.scaleX=canvas.width/thebackground.nominalBounds.width;

thebackground.scaleY=canvas.height/thebackground.nominalBounds.height;

thebackground.x = -440;

thebackground.y = 30;

I am going to mark Kglad's answer as correct.

Report · Oct 21, 2018

ramonas95472076 wrote
I am new to Animate CC and canvas. I assumed that if I physically moved the background in Animate to take up the entire screen that it would do the same on the canvas. I guess I was wrong.

No, you were not wrong, things are supposed to stay put in Animate. If you insist on plastering over this issue this time, it's just going to keep happening until you bother to figure out the root cause.

Report · Oct 21, 2018

I want to find out the root cause. I just don't know what to do next. If you have any ideas let me know. Thanks for your insight and help.

Report · Oct 22, 2018

I would recommend posting the FLA somewhere, like Google drive, so we can take a look at it.

Report · Oct 22, 2018

Hi ClayUUID,

Here is my sample FLA, html and javascript files number_game - Google Drive

The FLA as you can see is super simple, just a background but if you view the html the background symbol looks really small;

but in the FLA, as you can see, I made it the entire width and height of the canvas.

Any ideas as to why this is happening?

Thanks for your help!!

Report · Oct 22, 2018

comment out

var game = new Game(lib, exportRoot);

and retest.

Report · Oct 22, 2018

I need the following code:

var game = new Game(lib, exportRoot);

because it initializes the game class.

Without that code there is no game.

But you are right in that when you comment out that code

the symbol takes up the entire width of the canvas (and almost all of the height).

Any other ideas?

Report · Oct 22, 2018

I'm guessing you omitted the game class, because all that line does now is crash JavaScript.

Apparently something in your game code is messing with the background. But since we don't have that code, we can't tell you where the problem is.

Report · Oct 22, 2018

Ok I will look at my game code, but if you are interested my game ode is here

https://drive.google.com/open?id=10_ykb5vqbSPbYwNrqgS0_WJyt6duTypr

the file is my_code.js. Thanks again for your help!

Report · Oct 23, 2018

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);

Your game code creates a new stage?

In addition to that, it all seems rather... overengineered.

Report · Oct 22, 2018

if you have a Game class, your fla being "simple" is irrelevant.

what is relevant is there's no problem with the code being removed from the fla you posted. if you add the code and whatever code is in your Game class, you see a problem. ergo, the problem you see is in your Game class.

Report · Oct 22, 2018

Indeed. This immediately crashes into a runtime error because there's no such library symbol "Game".

Report · Oct 22, 2018

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

Report · Oct 23, 2018

you're welcome.

Report · Oct 23, 2018

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!!

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

1 Correct answer