Phaser 2D Array Map Not working! I NEED HELP PLZ

[yesh0907]

Hi, this is my first post on here. Anyways I need help trying to solve this problem. I am making a 2D rpg game, and for now I am using a 2D array map on Phaser JS as a place holder for an actual map in the future. I need the map to generate randomly every time. I have tried my code on Phaser version 1.12 and it works. However, when I tried it on the latest version (v2.2.0) of Phaser, it did not work. I keep getting an error saying "Uncaught TypeError: Cannot set property 'content' of undefined". 

Here is my source code:

// font sizevar FONT = 22;//Map's Displayvar mapText;//var Height and Width for the Map's COLS and ROWSvar HEIGHT = 550;var WIDTH = 800;//Key variable set upvar cursors;var spaceKey;//offset for map's positionvar MAP_OFFSET = 2.38;//Game's height and widthvar gameHeight = 600,    gameWidth = 800;//Style of textvar style = { font: FONT + "px monospace", fill:"#fff"};// map dimensionsvar ROWS = HEIGHT/FONT;var COLS = WIDTH/FONT/0.61;// number of actors per level, including playervar ACTORS = 10;// the structure of the mapvar map;// the ascii display, as a 2d array of charactersvar asciidisplay;// initialize phaser, call create() once donevar game = new Phaser.Game(gameWidth, gameHeight, Phaser.CANVAS, '', {    preload: preload, create: create, update: update});function preload() {    game.load.spritesheet('dude', 'assets/dude.png', 32, 48);}function create() {    game.physics.startSystem(Phaser.Physics.ARCADE);    player = game.add.sprite(32, game.world.height - 150, 'dude');    game.physics.arcade.enable(player);    player.body.gravity.y = 1500;    player.body.collideWorldBounds = true;    player.animations.add('left', [0, 1, 2, 3], 10, true);    player.animations.add('right', [5, 6, 7, 8], 10, true);    //Subject to change:     cursors = game.input.keyboard.createCursorKeys();    spaceKey = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);    // initialize map    initMap(maze(ROWS, COLS));        // initialize ascii display    asciidisplay = [];    for (var y=0; y<ROWS; y++) {        var newRow = [];        asciidisplay.push(newRow);        for (var x=0;x<COLS;x++)            newRow.push(initCell('', x, y + MAP_OFFSET));    }    drawMap();}function update() {    player.body.velocity.x = 0;    if (cursors.left.isDown) {        player.body.velocity.x = -150;        player.animations.play('left');    }    else if (cursors.right.isDown) {        player.body.velocity.x = 150;        player.animations.play('right');    }    else {        //Stand Still        player.animations.stop();        player.frame = 4;    }    if (spaceKey.isDown) {        player.body.velocity.y = -550;    }}function initCell(chr, x, y) {    // add a single cell in a given position to the ascii display    game.add.text(FONT*0.6*x, FONT*y, chr, style);}//creating the mapfunction initMap(m) {    // create a new random map    map = [];    for (var j= 0; j<m.x*2+1; j++) {        var line= [];        if (0 == j%2)            for (var k=0; k<m.y*4+1; k++)                if (0 == k%4)                     line[k]= '+';                else                    if (j>0 && m.verti[j/2-1][Math.floor(k/4)])                        line[k]= ' ';                    else                        line[k]= '-';        else            for (var k=0; k<m.y*4+1; k++)                if (0 == k%4)                    if (k>0 && m.horiz[(j-1)/2][k/4-1])                        line[k]= ' ';                    else                        line[k]= '|';                else                    line[k]= ' ';        if (0 == j) line[1]= line[2]= line[3]= ' ';        if (m.x*2-1 == j) line[4*m.y]= ' ';        map.push(line.join('')+'\r\n');    }    return map.join('');}function drawMap() {    for (var y = 0; y < ROWS; y++)        for (var x = 0; x < COLS; x++)            asciidisplay[y][x].content = map[y][x];}function maze(x,y) {    var n=x*y-1;    if (n<0) {alert("illegal maze dimensions");return;}    var horiz =[]; for (var j= 0; j<x+1; j++) horiz[j]= [],        verti =[]; for (var j= 0; j<y+1; j++) verti[j]= [],        here = [Math.floor(Math.random()*x), Math.floor(Math.random()*y)],        path = [here],        unvisited = [];    for (var j = 0; j<x+2; j++) {        unvisited[j] = [];        for (var k= 0; k<y+1; k++)            unvisited[j].push(j>0 && j<x+1 && k>0 && (j != here[0]+1 || k != here[1]+1));    }    while (0<n) {        var potential = [[here[0]+1, here[1]], [here[0],here[1]+1],            [here[0]-1, here[1]], [here[0],here[1]-1]];        var neighbors = [];        for (var j = 0; j < 4; j++)            if (unvisited[potential[j][0]+1][potential[j][1]+1])                neighbors.push(potential[j]);        if (neighbors.length) {            n = n-1;            next= neighbors[Math.floor(Math.random()*neighbors.length)];            unvisited[next[0]+1][next[1]+1]= false;            if (next[0] == here[0])                horiz[next[0]][(next[1]+here[1]-1)/2]= true;            else                 verti[(next[0]+here[0]-1)/2][next[1]]= true;            path.push(here = next);        } else             here = path.pop();    }    return {x: x, y: y, horiz: horiz, verti: verti};}

That is just the Javascript file. Please tell me if you want my HTML code. Thanks!

 

Links I used for tutorials to code this so far:

http://gamedevelopment.tutsplus.com/tutorials/how-to-make-your-first-roguelike--gamedev-13677 (got the map)

I also used an algorithm to generate the map details online.

 

Please help and thanks in advance!

 

[rich]

When it gives you the error it will say exactly which line caused it. Which was it?

[ultimatematchthree]

Short answer: Try adding the "return" keyword to the beginning of the game.add.text call in your initCell function.

 

Long answer: Your error refers to the property "content" of undefined. Fortunately, after doing a Ctrl+F, there's just exactly one occurrence of the text "content" in your code, inside the drawMap function. Here, you're referring to an element in an array contained in the asciiDisplay array. So we look for the place where you initialize the said array. This takes us to the last part of the create function, where you push into newRow whatever the initCell function returns. Finally, going to initCell, we see that it doesn't return anything, but I'm guessing that you probably intended to return the text object created inside initCell.

 

I'm not sure if this will fix things for you, but at the very least hopefully it would get rid of the error you mentioned.

 

Again, we're lucky that "content" is used only once in your code. As Rich suggests, indicating the line which caused the error is really helpful.

[ForgeableSum]

function drawMap() {for (var y = 0; y < ROWS; y++)for (var x = 0; x < COLS; x++)asciidisplay[y][x].content = map[y][x];}

Double check you asciidisplay array, make sure it is as large as you think it is.  Also make sure it has the property "content" because I don't see that set anywhere:

// initialize ascii displayasciidisplay = [];for (var y=0; y<ROWS; y++) {var newRow = [];asciidisplay.push(newRow);for (var x=0;x<COLS;x++)newRow.push(initCell('', x, y + MAP_OFFSET));}

[ultimatematchthree]

Also make sure it has the property "content" because I don't see that set anywhere

Good point regarding the "content" property. Even if the text object was actually returned, the error would still probably happen. Perhaps change "content" to "text" since Phaser.Text does have a "text" property?

[yesh0907]

If I am not mistaken the error shows up in drawMap. It is after the two for loops. Also I have tried to replace content with text and yet nothing printed to my screen but no erros show up. So why is the content in the array not printing to the screen?

Also thank you to the people who have replied to this topic. You have helped me so much so far.

[ultimatematchthree]

Hmmm at this point there are a couple of things I'd like to find out:

 

1) Are the text objects actually displaying on the screen? One way of testing this is to replace your assignment line in the drawMap function to this:

asciidisplay[y][x].content = "A";

This way, you take the "map" data structure and any problems that it might have with it out of the picture. If the A's show up, then great, we move to the second thing. Otherwise, figure out why the text objects aren't rendering and fix that.

 

2) So the text objects are rendering, you'll probably want to check if your "map" data structure contains what you expect it to contain. This will take a bit more work, you'll have to figure out if the map actually is what you expect it to be, that is, a 2D array of strings.

[yesh0907]

Good point regarding the "content" property. Even if the text object was actually returned, the error would still probably happen. Perhaps change "content" to "text" since Phaser.Text does have a "text" property?

 

 

 

Short answer: Try adding the "return" keyword to the beginning of the game.add.text call in your initCell function.

 

Long answer: Your error refers to the property "content" of undefined. Fortunately, after doing a Ctrl+F, there's just exactly one occurrence of the text "content" in your code, inside the drawMap function. Here, you're referring to an element in an array contained in the asciiDisplay array. So we look for the place where you initialize the said array. This takes us to the last part of the create function, where you push into newRow whatever the initCell function returns. Finally, going to initCell, we see that it doesn't return anything, but I'm guessing that you probably intended to return the text object created inside initCell.

 

I'm not sure if this will fix things for you, but at the very least hopefully it would get rid of the error you mentioned.

 

Again, we're lucky that "content" is used only once in your code. As Rich suggests, indicating the line which caused the error is really helpful.

 

 

Thank you guys so much. I changed content to text and did a return and it worked Thank you!!!!

[ultimatematchthree]

You're welcome! I just realized though that I made a mistake in my last post, I used the "content" property again where I should have used "text"! Anyway, am glad that you got it to work