Copy link to clipboard
Copied
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!!
no, you probably want something like
thebackground.scaleX=canvas.width/thebackground.nominalBounds.width;
Copy link to clipboard
Copied
use the scaleX and scaleY properties on thebackground.
Copy link to clipboard
Copied
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);
Copy link to clipboard
Copied
no, you probably want something like
thebackground.scaleX=canvas.width/thebackground.nominalBounds.width;
Copy link to clipboard
Copied
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!!
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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!!
Copy link to clipboard
Copied
No... no. I'm saying you shouldn't have to be using any code because your background symbol shouldn't be spontaneously resizing itself.
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
I would recommend posting the FLA somewhere, like Google drive, so we can take a look at it.
Copy link to clipboard
Copied
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!!
Copy link to clipboard
Copied
comment out
var game = new Game(lib, exportRoot);
and retest.
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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!
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
Indeed. This immediately crashes into a runtime error because there's no such library symbol "Game".
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
you're welcome.
Copy link to clipboard
Copied
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!!