how to get a messageField working from a class file?

[Bundaberg North5E42]

Hi team,

So I have this code that I have modified to run from the game.js class file.  

It runs with no errors and I can trace the text (loading) 

BUT - there is no text on the screen when I run it.

Thanks for your help 🙂

class Game
{
    constructor(root, lib)
    {
        this.root = root;
        this.stage = this.root.stage;
        this.canvas = this.root.canvas;
        this.messageField = this.root.messageField;
        this.lib = lib;
        this.init();
        this.keys ={}; 
    }
    
   init(e){
		this.player = this.root.player_mc;
		
		const game = this;
		
        document.addEventListener("keydown", (e) => {
  
    console.log(`Key "${e.key}" pressed [event: keydown]`);
            this.keys[e.key] = true;
  
});
        document.addEventListener("keyup", (e) => {
  
    console.log(`Key "${e.key}" pressed [event: keydown]`);
            this.keys[e.key] = false;
  
});
    
   
   	//Message display field
       
    this.canvas = document.getElementById("gameCanvas");
	this.stage = new createjs.Stage(this.canvas);
	this.messageField = new createjs.Text("Loading", "bold 24px Arial", "#FFFFFF");
	this.messageField.maxWidth = 1000;
	this.messageField.textAlign = "center";
	this.messageField.textBaseline = "middle";
	this.messageField.x = canvas.width / 2;
	this.messageField.y = canvas.height / 2;
	this.stage.addChild(this.messageField);
	this.stage.update(); 	//update the stage to show text
	console.log(this.messageField.text);
	}
   
}

[Bundaberg North5E42]

Ok so I noticed that the colour is white and I got excited and thought that I coudnt see the text because it was white on  a white background, but no, sadly even if I change the colour to #OOOOOO I still cant see the text.  Nevermind I thought I was onto it 🙂

[kglad]

what's lib?

did you edit the html to create "gameCanvas"?  if not, that would cause a failure to see Loading on stage.

[Bundaberg North5E42]

Hey Kglad!  I did edit the gamecanvas - my code looks like this now

class Game{
    constructor(exportRoot, stage){
        this.root = exportRoot;
        this.stage = stage;
        this.init();
    }
    
    init(){
        const game = this;
        this.stage = new createjs.Stage("animation container");
   
	
	this.messageField = new createjs.Text("Loading", "bold 24px Arial", "#OOOOOO");
	this.messageField.maxWidth = 1000;
	this.messageField.textAlign = "center";
	this.messageField.textBaseline = "middle";
	this.messageField.x = canvas.width/2;
	this.messageField.y = canvas.height/2;
	console.log(this.messageField.text);
       console.log(eval(this.messageField.x = canvas.width / 2));
        stage.addChild(this.messageField);
        this.stage.update();
        
    }
}

 and this is the result!!

so I guess I am doing something!  You can see part of the word LOADING in the centre of the screen.

[kglad]

i don't know why you're creating another stage, but both references are this.stage, not stage.

[Bundaberg North5E42]

Kglad something is going wrong here (with my understanding not your advice)

if i do this and put this in front of all the stage

class Game{
    constructor(exportRoot, stage){
        this.root = exportRoot;
        this.stage = stage;
        this.init();
    }
    
    init(){
        const game = this;
        this.stage = new createjs.Stage("animation container");
   
	
	this.messageField = new createjs.Text("Loading", "bold 24px Arial", "#OOOOOO");
	this.messageField.maxWidth = 1000;
	this.messageField.textAlign = "center";
	this.messageField.textBaseline = "middle";
	this.messageField.x = canvas.width/2;
	this.messageField.y = canvas.height/2;
	console.log(this.messageField.text);
    console.log(eval(this.messageField.x = canvas.width / 2));
    this.stage.addChild(this.messageField);
    this.stage.update();
        
    }
}

no errors but no text

If I comment out creating the new stage?

class Game{
    constructor(exportRoot, stage){
        this.root = exportRoot;
        //this.stage = stage;
        this.init();
    }
    
    init(){
        const game = this;
        //this.stage = new createjs.Stage("animation container");
   
	
	this.messageField = new createjs.Text("Loading", "bold 24px Arial", "#OOOOOO");
	this.messageField.maxWidth = 1000;
	this.messageField.textAlign = "center";
	this.messageField.textBaseline = "middle";
	this.messageField.x = canvas.width/2;
	this.messageField.y = canvas.height/2;
	console.log(this.messageField.text);
    console.log(eval(this.messageField.x = canvas.width / 2));
    this.stage.addChild(this.messageField);
    this.stage.update();
        
    }
}

it shows errors in the create.js.min.js and does not work

If I comment out the other stage

class Game{
    constructor(exportRoot, stage){
        this.root = exportRoot;
        //this.stage = stage;
        this.init();
    }
    
    init(){
        const game = this;
        this.stage = new createjs.Stage("animation container");
   
	
	this.messageField = new createjs.Text("Loading", "bold 24px Arial", "#OOOOOO");
	this.messageField.maxWidth = 1000;
	this.messageField.textAlign = "center";
	this.messageField.textBaseline = "middle";
	this.messageField.x = canvas.width/2;
	this.messageField.y = canvas.height/2;
	console.log(this.messageField.text);
    console.log(eval(this.messageField.x = canvas.width / 2));
    this.stage.addChild(this.messageField);
    this.stage.update();
        
    }
}

no errors but it doesnt work.   😞 so I know its me and not you kglad. I am so gratelful for you taking the time.

[Bundaberg North5E42]

so maybe the problem is on my end - I changed browsers and ran your code in Chrome

here is the new code (from kglad) in case someone else is readng this thread

class Game {

constructor(root, lib) {
this.root = root;
this.stage = this.root.stage;
this.canvas = this.root.canvas;
this.messageField = this.root.messageField;
this.lib = lib;
this.init();
this.keys ={}; 
}

init(e){
this.player = this.root.player_mc;
const game = this;
document.addEventListener("keydown", (e) => {
//console.log(`Key "${e.key}" pressed [event: keydown]`);
this.keys[e.key] = true;
});
document.addEventListener("keyup", (e) => {
//console.log(`Key "${e.key}" pressed [event: keyup]`);
this.keys[e.key] = false;
});

//Message display field

//this.canvas = document.getElementById("gameCanvas");
//console.log("canvas",this.stage);
//this.stage = new createjs.Stage(this.canvas);
this.messageField = new createjs.Text("Loading", "bold 24px Arial", "#00FFFF");
console.log("a",this.stage);
this.messageField.maxWidth = 1000;
this.messageField.textAlign = "center";
this.messageField.textBaseline = "middle";
this.messageField.x = canvas.width/2;
this.messageField.y = canvas.height/2;
this.stage.addChild(this.messageField);
this.stage.update(); //update the stage to show text
console.log(this.messageField.text);
}

}

- with no errors but this result

[kglad]

this works. commenting out the bold italic lines solves the problem:

class Game {

constructor(root, lib) {
this.root = root;
this.stage = this.root.stage;
this.canvas = this.root.canvas;
this.messageField = this.root.messageField;
this.lib = lib;
this.init();
this.keys ={};
}

init(e){
this.player = this.root.player_mc;
const game = this;
document.addEventListener("keydown", (e) => {
//console.log(`Key "${e.key}" pressed [event: keydown]`);
this.keys[e.key] = true;
});
document.addEventListener("keyup", (e) => {
//console.log(`Key "${e.key}" pressed [event: keyup]`);
this.keys[e.key] = false;
});

//Message display field

//this.canvas = document.getElementById("gameCanvas");
//this.stage = new createjs.Stage(this.canvas);
this.messageField = new createjs.Text("Loading", "bold 24px Arial", "#00FFFF");
this.messageField.maxWidth = 1000;
this.messageField.textAlign = "center";
this.messageField.textBaseline = "middle";
this.messageField.x = canvas.width/2;
this.messageField.y = canvas.height/2;
this.stage.addChild(this.messageField);
this.stage.update(); //update the stage to show text
console.log(this.messageField.text);
}

}