Issue with text displaying and materials


#1

I’m having trouble trying to display text on a plane with a material. I get the error “Can not read property material of undefined”, but it’s attached as a component in my entity.

here’s the script ( copied from another project , a tutorial about text displaying : https://playcanvas.com/project/362231/overview/tutorial-canvas-text )


var Text = pc.createScript('text');

Text.attributes.add('text', { type: 'string', default: 'Hello World'});

Text.prototype.initialize = function () {
    // Create a canvas to do the text rendering
    this.canvas = document.createElement('canvas');
    this.canvas.height = 128;
    this.canvas.width = 512;
    this.context = this.canvas.getContext('2d');

    this.texture = new pc.Texture(this.app.graphicsDevice, {
        format: pc.PIXELFORMAT_R8_G8_B8,
        autoMipmap: true
    });
    this.texture.setSource(this.canvas);
    this.texture.minFilter = pc.FILTER_LINEAR_MIPMAP_LINEAR;
    this.texture.magFilter = pc.FILTER_LINEAR;
    this.texture.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
    this.texture.addressV = pc.ADDRESS_CLAMP_TO_EDGE;

    this.updateText();

    console.log(this.entity.model);
    
   var material =  this.entity.model.material;  ///this.entity.model.material;
    material.emissiveMap = this.texture;
    material.opacityMap = this.texture;
    material.blendType = pc.BLEND_NORMAL;
    material.update();
    
    this.on('attr', function (name, value, prev) {
        this.updateText();
    });
};

Text.prototype.updateText = function () {
    var ctx = this.context;
    var w = ctx.canvas.width;
    var h = ctx.canvas.height;

    // Clear the context to transparent
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, w, h);

    // Write white text
    ctx.fillStyle = 'white';
    ctx.font = 'bold 70px Verdana';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(this.text, w / 2, h / 2);

    // Copy the canvas into the texture
    this.texture.upload();
};

Furthermore, after some tinkerings (sometimes) i’ve beeen able to display text in the plane, but it’s the same one all the time. IE: having 3 objects, each one with the text script attached, the three of them will show the text of the last object added to the scene.

Here’s the link to my project : https://playcanvas.com/project/613153/overview/udg