# Trouble understanding example, how is 'this.add.image' equivalent to 'this.textures.getFrame'?

**URL:** <https://phaser.discourse.group/t/trouble-understanding-example-how-is-this-add-image-equivalent-to-this-textures-getframe/475>\
**Category:** Phaser 3\
**Created:** [December 26, 2018, 8:00am UTC](https://phaser.discourse.group/t/trouble-understanding-example-how-is-this-add-image-equivalent-to-this-textures-getframe/475 "2018-12-26T08:00:21Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![turbine](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/turbine/32/318_2.png) [@turbine](https://phaser.discourse.group/u/turbine)\
**Post date:** [December 26, 2018, 8:00am UTC](https://phaser.discourse.group/t/trouble-understanding-example-how-is-this-add-image-equivalent-to-this-textures-getframe/475/1 "2018-12-26T08:00:22Z")

</div>

Hey, I’m interested in using RenderTexture, similarly as I would in SFML. However after viewing an example, I’m left with more questions than answers.

Regarding this example (press edit): [https://labs.phaser.io/view.html?src=src/game%20objects\render%20texture\render%20texture%20to%20render%20texture.js](https://labs.phaser.io/view.html?src=src/game%20objects%5Crender%20texture%5Crender%20texture%20to%20render%20texture.js)

There contains a few lines of concern:  
var gridFrame = this.textures.getFrame(‘grid’);  
var gridImage = this.add.image(0, 0, ‘grid’).setVisible(false).setOrigin(0);

```
rt1 = this.add.renderTexture(0, 0, 800, 600);
rt1.draw(gridFrame, 0, 0);
rt1.draw(gridImage, 128, 0);

```

I’m having trouble understanding how these two lines can display the same image.  
this.textures.getFrame(‘grid’);  
// Equivalent to  
this.add.image(0, 0, ‘grid’).setOrigin(0);

I apologise if it is a daft question. Are one of these methods preferred and when might I want to use one over the other?

Thank you.

---

<div class="post-metadata">

**Author:** ![kiklop133](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/kiklop133/32/108_2.png) [@kiklop133](https://phaser.discourse.group/u/kiklop133)\
**Post date:** [December 26, 2018, 11:30am UTC](https://phaser.discourse.group/t/trouble-understanding-example-how-is-this-add-image-equivalent-to-this-textures-getframe/475/2 "2018-12-26T11:30:32Z")

</div>

@turbine Not sure but I think that image object is more complex , therefore texture usage in this example should be less performance expensive.

---

<div class="post-metadata">

**Author:** ![B3L7](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/b3l7/32/25_2.png) [@B3L7](https://phaser.discourse.group/u/B3L7)\
**Post date:** [December 26, 2018, 1:49pm UTC](https://phaser.discourse.group/t/trouble-understanding-example-how-is-this-add-image-equivalent-to-this-textures-getframe/475/3 "2018-12-26T13:49:17Z")

</div>

this.textures.getFrame and this.add.image are not equivalent. this.add.image actually places the image in the scene for rendering. Essentially all the work is done in one line.

textures.getFrame simply returns a reference to the frame so that you can use it which is what happens in the lines you quote after.

The important stuff is:

```
var gridFrame = this.textures.getFrame('grid');
rt1 = this.add.renderTexture(0, 0, 800, 600);
rt1.draw(gridFrame, 0, 0);

```

That is:

1. Reference a texture under the variable gridFrame.
2. Add a renderTexture to the scene.
3. Pass the gridFrame texture to the renderTexture.

You can also pass an image that has been added to the scene to the renderTexture which is what you see with:

`rt1.draw(gridImage, 128, 0);`

Notice when gridImage is initially added to the scene it is called with setVisible(false) which is the reason it can’t be seen until it is passed to the renderTexture.

If you were to change the code as such:

```
var gridFrame = this.textures.getFrame('grid');
var gridImage = this.add.image(0, 0, 'grid').setVisible(true).setOrigin(0);

//rt1 = this.add.renderTexture(0, 0, 800, 600);
//rt1.draw(gridFrame, 0, 0);
//rt1.draw(gridImage, 128, 0);
//rt1.draw(gridFrame, 256, 0);

// rt2 = this.add.renderTexture(200, 200, 800, 600);
// rt2.draw(bob, 200, 200);
// rt2.draw(rt2, 0, 0);

```

You would see that gridImage still renders but gridFrame does not.

Hope that makes sense.

---

<div class="post-metadata">

**Author:** ![turbine](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/turbine/32/318_2.png) [@turbine](https://phaser.discourse.group/u/turbine)\
**Post date:** [December 27, 2018, 12:20pm UTC](https://phaser.discourse.group/t/trouble-understanding-example-how-is-this-add-image-equivalent-to-this-textures-getframe/475/4 "2018-12-27T12:20:19Z")

</div>

Thank you everyone for clearing this up. 🙂

You explained it really well B3L7.