FAQ: Learn Phaser: Basics - Create A Config

This community-built FAQ covers the “Create A Config” exercise from the lesson “Learn Phaser: Basics”.

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

Learn Phaser

FAQs on the exercise Create A Config

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!

const config = {width: 700, height: 700, backgroundColor: 2F0};
// why "is config defined" is getting thrown?
2 Likes

idk
solution was marked as
const config = {
width: 400,
height: 500,
backgroundColor: 0xffff77
}

const game = new Phaser.Game(config)

1 Like

The documentation of Phaser 3 is mediocre at best, and the link from this lesson is a great example of it. In fact, the documentation doesn’t mention any of the 4 properties of config mentioned in the lesson. I feel like linking to the docs might actually discourage people from using this great engine, it is so unhelpful.

1 Like

same error here. can’t get to next stage even though my syntax is correct.
“Is config defined”

I copied the solution and it passed

I’m a little confused about this part of the lesson. In the introduction it talks about calling “new Phaser.Game” and then it goes on a bit more about the concept but then it asks us to declare a config object and then to make a new game. It doesn’t tell us how to do that until you press the hint and then it shows “const game” in the first part of the hint I don’t understand what that means because it wasn’t introduced to me at all in this whole lesson and I feel like I missed something. I don’t like to use the hints or solution to pass but I don’t think it gave me enough information to find the answer myself and in the end I do not understand what “const” means and why they used that to create the config and game.

okay, so basically, i did the first thing, i did the whole const config = {
width: 400,
height: 500,
backgroundColor: 0xffff77
} and all that jazz, but how do i do the next thing, how do i fill out const game = new phaser.game(config);
it also tells me to save the results into a variable called game, how do i do that

also I am confused from were const came from

const config = {
width: 1300,
height: 600,
backgroundColor: “#5f2a55”,
};
const game = new Phaser.Game(config); here you go so the const is used to create a variable for the game image

The const is one of the new variable types in Javascript if that’s what you mean by that??

It stands for constant. The other new variable time is let which gives you a little more flexibility. But obvs. the Academy will explain it better than I will.

But otherwise even though I finished the Javascript basics course the wording for this in unclear and I am here because maybe the order is off they should have us set a new game first before manipulating images and sprites??

Also they were saying that the ES6 syntax isnt used as widely in Phaser which ugh lame. I like my arrow functions…

Okay my guess is they want you to add parameters because even though they don’t specify any in the example the syntax being correct is not sufficient for the error catching for a pass. It’s a little buggy report it??!

So I did the bonus question and I’m having a delight filled time with mah lil boxes if you all want to see it solved:

const gameState = {

onColor: 0xaaffaa,

offColor: 0xffaaaa

}

function create() {

gameState.rect1 = this.add.rectangle(200, 100, 100, 100, gameState.onColor);

gameState.rect2 = this.add.rectangle(200, 300, 100, 100, gameState.offColor);

// add the switchedOn state here

gameState.rect1.setInteractive();

gameState.rect1.on(‘pointerup’,function() {

gameState.rect1.fillColor = gameState.offColor;

gameState.rect2.fillColor = gameState.onColor; 

})

// set gameState.rect2 as interactive here

gameState.rect2.setInteractive();

// create the pointerup listener for rect2 here

gameState.rect2.on(‘pointerup’, function() {

gameState.rect2.fillColor = gameState.onColor;

gameState.rect2.fillColor = gameState.offColor;

gameState.rect1.fillColor = gameState.onColor;

})

}

const config = {

type: Phaser.AUTO,

width: 400,

height: 450,

backgroundColor: 0x333333,

scene: {

create

}

}

const game = new Phaser.Game(config)

Question: How do you change the color for a with a built in color picker? I don’t know how to create colors in Phaser.js with writing only.