How do I draw an Image from GameObjectFactory (this.make.image) to a RenderTexture

[EndreB]

Hi community, new Phaser 3 newb here.

I've been trying to figure out a good way to draw 9 images into a RenderTexture once so I can composite a UI panel and then only render the RT itself later on. The images are PNGs representing the corners, edges and centre area, all 16px. I'm stretching the edge segments and centre to the required heights and widths to achieve the right look while keeping the proportions correct.

This (temporary) steaming mess currently does the job:

...
        let panel_width = 450, panel_height = 250, panel_x = 100, panel_y = 100, image_dim = 16;

        // Top row
        this.add.image(panel_x, panel_y, 'panel_tl').setOrigin(0,0);
        this.add.image(panel_x + image_dim, panel_y, 'panel_t')
            .setOrigin(0,0)
            .setDisplaySize(panel_width - (2*image_dim), image_dim);
        this.add.image(panel_x + panel_width - image_dim, panel_y, 'panel_tr').setOrigin(0,0);

        // Middle row
        this.add.image(panel_x, panel_y+image_dim, 'panel_l')
            .setOrigin(0,0)
            .setDisplaySize(image_dim, panel_height - (2*image_dim));
        this.add.image(panel_x + image_dim, panel_y+image_dim, 'panel_c')
            .setOrigin(0,0)
            .setDisplaySize(panel_width - (2*image_dim), panel_height - (2*image_dim));
        this.add.image(panel_x + panel_width - image_dim, panel_y+image_dim, 'panel_r')
            .setOrigin(0,0)
            .setDisplaySize(image_dim, panel_height - (2*image_dim));

        // Bottom row
        this.add.image(panel_x, panel_y + panel_height - image_dim, 'panel_bl').setOrigin(0,0);
        this.add.image(panel_x + image_dim, panel_y + panel_height - image_dim, 'panel_b')
            .setOrigin(0,0)
            .setDisplaySize(panel_width - (2*image_dim), image_dim);
        this.add.image(panel_x + panel_width-image_dim, panel_y + panel_height - image_dim, 'panel_br').setOrigin(0,0);
...

 

What I actually want to do is not add the images straight to the display, but to a RenderTexture. I was playing with the Phaser 3 example for Render Texture to RenderTexture but I'm fussy and didn't want to use this.add.image(x, y, 'bunny').setVisible(false) because.. I don't actually want to add the image just yet and adding it then making it invisible seems cumbersome. And since RenderTexture doesn't seem to allow for resizing of images in the draw() method, I figured I need to create the Images myself and set them up first before drawing them onto the RT.

But when I use this.make.image(x, y, 'bunny') I only get a green box suggesting the image didn't work properly:

    let rt = this.make.renderTexture({width: 200, height: 200}, false);

    // This seems to want to draw itself immediately as per add.image, but shows the missing image green box
    let bunnyImg = this.make.image(0, 0, 'bunny').setOrigin(0);
    // bunnyImg = this.add.image(100, 100, 'bunny').setVisible(false).setOrigin(0);
    
    rt.draw(bunnyImg, 0, 0);
    let t = rt.saveTexture('texBunny');
    this.add.image(100, 100, 'texBunny');

Clearly I'm doing something wrong with this.make.image, and regardless, it seems I would still need to call setVisible(false) on it before using the RT.

I would appreciate some guidance on the idiomatic way of doing this in Phaser 3, because my Googling is letting me down here!

[rich]

When you use `this.make` you need to provide a configuration object as the argument, which is why it errors in the above.

The following example shows how:

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

function preload ()
{
    this.load.image('brush', 'assets/sprites/brush1.png');
}

function create ()
{
    var rt = this.add.renderTexture(0, 0, 800, 600);

    var brush = this.make.image({ key: 'brush' }, false);

    this.input.on('pointermove', function (pointer) {

        if (pointer.isDown)
        {
            rt.draw(brush, pointer.x, pointer.y);
        }

    }, this);
}

 

[rich]

Also, if you don't need to scale the image, you can just draw the texture frame directly to the Render Texture without creating an image at all. Just pass the texture key and the x/y coords to the draw method.

[EndreB]

Oooh, I was looking at the API doc for the wrong class. make is the GameObjectCreator, not Factory. Was going around in circles for so long I confused myself. Thank you!

Where can I find documentation on the configuration object to pass to make.image?

Edited September 26, 2018 by EndreB
Added query about config object documentation