FAQ: Learn Phaser Basics: Color A Pegasus - Updating Color

This community-built FAQ covers the “Updating Color” exercise from the lesson “Learn Phaser Basics: Color A Pegasus”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Learn Phaser

FAQs on the exercise Updating Color

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

I don’t understand, why should I use context in the event listener in this exercise at all?
This works just fine:

    paletteCircle.on("pointerup", function(){
      gameState.selectedColor = color
    })
4 Likes

I don’t understand it either. Can someone help??

Apologies for the “bump” if this is not allowed, but I am totally confused on the purpose of “context”. Why do our event listeners need to know what certain things refer to when they appear to already be able to be altered themselves?

Why is there no context for:

shape.on('pointerup', function() { 
      this.fillColor = gameState.selectedColor;
    });

And yet we need context for:

paletteCircle.on('pointerup', function() {
      gameState.selectedColor = this.color;
    }, { color });

It would seem to me that we’d need context for fillColor or something.
There’s something here that I really don’t get, and I don’t think context was explained earlier.

And in a later lesson, we need to provide two pieces of context in:

paletteCircle.on('pointerout', function() {
      this.paletteCircle.strokeColor = 0x000000;
      if (this.color === gameState.selectedColor) {
        this.paletteCircle.strokeColor = 0xffc836;
      }
    }, { paletteCircle, color });

But only one in:

paletteCircle.on('pointerup', function() {
      gameState.selectedColor = this.color;
    }, { color });

(which I think was the same thing from before)

Can anyone explain how context works? I looked it up on the web and couldn’t find anything. I didn’t see anything helpful in the lessons either.

Hello,

While the JavaScript functionality behind contexts and is better defined here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

One simple way to test the difference (or why we might use context) is by changing the color after we set the event handler.

For example, test the code using this:

    /* add a click handler for each palette circle here */
    paletteCircle.setInteractive()
    paletteCircle.on('pointerup',function(){
      gameState.selectedColor = this.color
      },{color})
    color = 0x000000;

Now hit “Run” and try painting. You will notice that we are still painting with the correct color selected from the palette, that is, changing the color to 0x000000 below did not change the color we are painting with.

However, if we remove the context and try this instead:

    /* add a click handler for each palette circle here */
    paletteCircle.setInteractive()
    paletteCircle.on('pointerup',function(){
     gameState.selectedColor = color 
    })
    color = 0x000000;

Then hit “Run” and try painting and changing colors, we will notice that every color we select now paints black.

Ok, from that we can say that using “color” directly will use the current value of color (even if we changed it after setting the ‘pointerup’ event handler.) However, using the context will preserve the value of the colors defined above, so if we changed the value of color after that, the event handler will use the old value (or copy of the value).

So, if we don’t want to change the value afterwards, using the context seems like a good idea. Otherwise, if we want to change those colors by changing the color variable after (below) setting up the event handler, we don’t need to use the context.

In this lesson, it will work the same either way because we aren’t changing the color variable below the event handler code.

I hope the description is helpful.

9 Likes

Not sure I understand the syntax of requiring the third argument color in {}. What’s the point of the added curly braces?

Curly braces indicate an object (like how brackets [ ] indicate an array ).
object.on() has a third optional argument that defaults to this inside the function
So paletteCircle.on(‘pointerup’,function() {}) is the same as
paletteCircle.on(‘pointerup’,function(this) {}, this)
so inside the function this defaults to this outside the function, otherwise
this = {color, paletteCircle} or whatever. Objects can be referenced by dot notation so
this.color is is like this[‘color’] if it was an array.

1 Like

It’s because of the scope, you have to specifie with “this”, to let clear that you are working on a specified scoped level.