value on an array don't work

[espace]

hi,

I want to have an external file with some parameters and after use it to draw my elements.

The problem is that my value number.radius don't work in my circle...what i'm going wrong ?

My index.html is good and inform the correct order ...parameters.js ...main.js

//PARAMETERS.js
var number=[]
number.radius=100
alert(number.radius) 
// i got effectively the result 100

//MAIN.js
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { create: create });
function create() {

var graphics = game.add.graphics(0, 0);

graphics.beginFill(0xFF0000, 1);
graphics.drawCircle(300, 300, number.radius);

// but here my circle don't appear why ?
}

 

[symof]

17 minutes ago, espace3d said:

hi,

I want to have an external file with some parameters and after use it to draw my elements.

The problem is that my value number.radius don't work in my circle...what i'm going wrong ?

My index.html is good and inform the correct order ...parameters.js ...main.js

//PARAMETERS.js
var number=[]
number.radius=100
alert(number.radius) 
// i got effectively the result 100

//MAIN.js
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { create: create });
function create() {

var graphics = game.add.graphics(0, 0);

graphics.beginFill(0xFF0000, 1);
graphics.drawCircle(300, 300, number.radius);

// but here my circle don't appear why ?
}

 

Well there is alot going on there for you.

1. You declare the variable number in a different file then the one you are using

2. You declare the number as an array. var number = []

3. You then convert the number as an object by adding : number.radius

4. You don't use ";" after your line endings in PARAMETERS.js which is probably causing errors on the page you use the script in.

The question is. What are you trying to do? I'm pretty sure there are better solutions if you want to set global variables.

[espace]

hi symof,

Thanks for your reply. i follow your advice with the missing ; and using the global variable but i have still an error. Could you tell me more please....

//PARAMETERS.js
number={};
number.radius=100;
alert(number.radius);
// i got effectively the result 100

//MAIN.js
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { create: create });
function create() {

var graphics = game.add.graphics(0, 0);

graphics.beginFill(0xFF0000, 1);
graphics.drawCircle(300, 300, number.radius);

// but here my circle don't appear why ?
}

 

[mattstyles]

You don't need semi-colons, JS doesn't need them and they cause more harm than good (use them if you want, totally up to you, the war about semi-colons or not is stupid and annoying).

Also, its worth using a keyword to declare the variable, i.e. `var number = {}`, in your case it actually is not necessary, if you omit it (as you have) then `number` will be appended globally, this is actually what you want but under most circumstances this is bad (just get in the habit of declaring variables explicitly and it'll save your headaches later).

Try console.log the number variable where you declare your graphics object, just to double check you have that variable and that there isn't more going on.

Don't you need an update or render loop with Phaser? All of the example have a render function declared, even if it does not do too much. I suspect this isn't the problem though.

I think you just need to tell the graphics that you've finished drawing, try this:

graphics.beginFill(0xFF0000, 1)
graphics.drawCircle(300, 300, number.radius)
graphics.endFill()

source: http://phaser.io/docs/2.6.1/Phaser.Graphics.html

Also, look in to using a module system (commonJS or ES2016 modules would be best) as you're on that path anyway by wanting to separate your code and they save you spamming globals.

[symof]

1 hour ago, mattstyles said:

You don't need semi-colons, JS doesn't need them and they cause more harm than good (use them if you want, totally up to you, the war about semi-colons or not is stupid and annoying).

Also, its worth using a keyword to declare the variable, i.e. `var number = {}`, in your case it actually is not necessary, if you omit it (as you have) then `number` will be appended globally, this is actually what you want but under most circumstances this is bad (just get in the habit of declaring variables explicitly and it'll save your headaches later).

Try console.log the number variable where you declare your graphics object, just to double check you have that variable and that there isn't more going on.

Don't you need an update or render loop with Phaser? All of the example have a render function declared, even if it does not do too much. I suspect this isn't the problem though.

I think you just need to tell the graphics that you've finished drawing, try this:

graphics.beginFill(0xFF0000, 1)
graphics.drawCircle(300, 300, number.radius)
graphics.endFill()

source: http://phaser.io/docs/2.6.1/Phaser.Graphics.html

Also, look in to using a module system (commonJS or ES2016 modules would be best) as you're on that path anyway by wanting to separate your code and they save you spamming globals.

You don't need to do graphics.endFill to draw a circle

https://jsfiddle.net/1om1de6L/

2 hours ago, espace3d said:

hi symof,

Thanks for your reply. i follow your advice with the missing ; and using the global variable but i have still an error. Could you tell me more please....

//PARAMETERS.js
number={};
number.radius=100;
alert(number.radius);
// i got effectively the result 100

//MAIN.js
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { create: create });
function create() {

var graphics = game.add.graphics(0, 0);

graphics.beginFill(0xFF0000, 1);
graphics.drawCircle(300, 300, number.radius);

// but here my circle don't appear why ?
}

 

//param.js
var number={};
number.radius=100;

=============================================================

//main.js
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game-div', {create: create });

function create() {

    var graphics = game.add.graphics(0, 0);

    // graphics.lineStyle(2, 0xffd900, 1);

    graphics.beginFill(0xFF0000, 1);
    graphics.drawCircle(300, 300, number.radius);

}

//index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--
        Load your javascript files. The param.js should be in front of main.js if 
        main.js uses variables from that file.
        -->
        <script type="text/javascript" src="phaser-min-2-6-1.js"></script>
        <script type="text/javascript" src="param.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body>
        <div id="game-div"></div>
    </body>
</html>

You need to be carefull with the scope of the variables so using "var" and ";" is essential for that. It will also help if/when you want to minify your javascript files.

[mattstyles]

52 minutes ago, symof said:

You need to be carefull with the scope of the variables so using "var" and ";" is essential for that. It will also help if/when you want to minify your javascript files.

@symof Just to reiterate, semi-colons are optional in JS, they are required nowhere, advise using them if you think its looks pretty but they are totally non-essential in JS. Using 'var' is also non-essential (particularly in this case) but is advisable for reasons I stated. Neither var nor semi-colons are essential and they certainly don't help minifiers to do their job (minifiers will add semi-colons using the same rules as ASI simply because its one byte cheaper than a carriage return, which is also a valid terminator in JS).

Your solution seems to be to ensure the order of the js inclusion, I agree, but the OP has said that is already good, unless they are mistaken, thats why I suggested logging the value to see if that is the problem.

[espace]

hi both,

Thank you very much for your explanation.

I put a console.log in my main.js and  number.radius is undefined . i had two variable number !

That's was the mistake. 

For the semi-colon ...i had also the habit to no-use them because i come from lua language

+1 for the jsfiddle i will take the habit in the futur to use it.