2
\$\begingroup\$

so I've been troubleshooting for hours now. I am using the latest version of Phaser.io and I cannot get troubleshoot the errors. I am aware that it is related to

Phaser.Rectangle.contains(e.body, game.input.activePointer.x, game.input.activePointer.y);

and

shapesprite.body.setSize(30, 30, 0, 0);

If you would like me to put the entire project on my GitHub, I am more than happy to do so or upload it to my website. I have commented out the line above, and it somewhat works, but then I get errors pertaining to "frame". My sprite has 18 I guess sections (not sure what to call it) to read through.

Here is the sprite image. The left column is the unclicked state, and then right column is the clicked state

The entire Javascript code is:

gameObj.Game = function (game) {
    //step 1
    var myTime;
    var gameSeconds; //total game seconds
    var timerSeconds = "0"; //current timer in seconds
    var secondsLeft; //total game seconds - current timer second
    var points;
    var pointsShow;
};
var tile_size = 69;

gameObj.Game.prototype = {
    create: function () {
        var border = this.add.sprite(this.world.centerX, this.world.centerY, 'border');
        border.anchor.setTo(0.5, 0.5);

    var stroke = this.add.sprite(this.world.centerX + 30, this.world.centerX - 450, 'stroke');
    points = 0;
    gameObj.finalScore = points;
    var currentTarg = this.add.sprite(this.world.centerX + 200, this.world.centerX - 125, 'currenttarget');

    this.shapes = this.add.group();
    this.shapes.createMultiple(36, 'shapesprite');

    this.shapes.setAll('inputEnabled', true);
    this.shapes.setAll('input.useHandCursor', true);

    var progressbackground = this.add.sprite(this.world.centerX + 90, this.world.centerX - 380, 'progressbg');

    var myPercentStyle = {
        font: "400 24px Architects Daughter",
        fill: "#000",
        align: "center"
    };
    pointsShow = this.add.text(this.world.centerX + 195, this.world.centerX - 300, points + '%', myPercentStyle);

    var myProgress = "Progress of \nShape Painting"
    var myProgressStyle = {
        font: "400 18px Architects Daughter",
        fill: "#000",
        align: "center"
    };
    var myProgressShow = this.add.text(this.world.centerX + 160, this.world.centerX - 360, myProgress, myProgressStyle);

    var currentTargText = "Mix colors and make a:"
    var currentTargStyle = {
        font: "400 18px Architects Daughter",
        fill: "#000",
        align: "center"
    };
    var currentTargShow = this.add.text(this.world.centerX + 135, this.world.centerX - 220, currentTargText, currentTargStyle);

    var targetBg = this.add.sprite(this.world.centerX + 140, this.world.centerX - 190, 'targetbg');




    var timerbackground = this.add.sprite(this.world.centerX + 90, this.world.centerY + 120, 'timerbg');


    var myTimeText = "Time until Art Show:";
    var myTimeTextStyle = {
        font: "400 24px Architects Daughter",
        fill: "#000",
        align: "center"
    };
    var myTimeShow = this.add.text(this.world.centerX + 110, this.world.centerX + 35, myTimeText, myTimeTextStyle);

    var myTime = "2:00"
    var myTimeStyle = {
        font: "400 35px Architects Daughter",
        fill: "#000",
        align: "center"
    };


    myTimerShow = this.add.text(this.world.centerX + 190, this.world.centerX + 70, myTime, myTimeStyle);

    tmpWinnerBtn = this.add.button(100, 200, 'btn_winner', this.winnerFun, this, 1, 0, 2);
    tmpWinnerBtn.anchor.setTo(0.5, 0.5);

    tmpLoserBtn = this.add.button(200, 200, 'btn_loser', this.loserFun, this, 1, 0, 2);
    tmpLoserBtn.anchor.setTo(0.5, 0.5);
    //timevars 
    tmpPointsBtn = this.add.button(300, 100, 'points_btn', this.pointsIncrease, this, 1, 0, 2);


    gameSeconds = 120;
    timerSeconds = 0;
    secondsLeft = 0;

    //create timer object
    timerObj = this.game.time.create(false);
    //set a timer event to occur every 1 second
    timerObj.loop(1000, this.updateTimer, this);
    //start the timer running
    timerObj.start();


    //        this.combo_s = this.game.add.audio('combo');

    this.clicked = false;
    this.count = 0;
    this.moves = 0;
    this.type = -1;
    this.deleted_shapes = [];
    this.pos_i = -1;
    this.pos_j = -1;
    this.offset_x = 120;
    this.offset_y = 150;
    this.next_time = 0;
    score = 0;
    //this.width=69;
    this.build_world();
},

update: function () {

    this.shapes.forEachAlive(function (e) {
        if (e.scale.x == 2) e.kill();
    }, this);

    if (game.input.activePointer.isDown && game.time.now > this.next_time) {
        this.clicked = true;
        this.try_select_a_shapesp();
    }


    if (game.input.activePointer.isUp && this.clicked) {
        if (this.count > 1) {
            this.remove_selected_shapes();
            this.move_shapes_down();
            this.add_missing_shapes();

        } else
            this.unselect_all_shapes();

        //this.next_time = game.time.now + 300;
        this.count = 0;
        this.clicked = false;
        this.type = -1;
        this.pos_i = -1;
        this.pos_j = -1;
    }
},
build_world: function () {
    for (var i = 0; i < 6; i++)
        for (var j = 0; j < 6; j++)
            this.add_shapesp(i, j, true);
},
add_shapesp: function (i, j, type) {
    var shapesprite = this.shapes.getFirstExists(false);

    var r = rand(3);
    if (r == 1) shapesprite.frame = 2;
    else if (r == 3) shapesprite.frame = 6;
    else if (r == 2) shapesprite.frame = 4;
    //        else if (r == 2) shapesprite.frame = 4;
    //        else if (r == 3) shapesprite.frame = 6;

    //        else if (r == 4) shapesprite.frame = 8;
    //        else if (r == 5) shapesprite.frame = 10;
    //        //        else if (r == 6) shapesprite.frame = 12;
    //        else if (r == 7) shapesprite.frame = 14;
    //        //        else if (r == 8) shapesprite.frame = 16;
    //        else if (r == 9) shapesprite.frame = 18;
    //        //        else if (r == 10) shapesprite.frame = 20;
    //        else if (r == 11) shapesprite.frame = 22;
    //        //        else if (r == 12) shapesprite.frame = 24;
    //        else if (r == 13) shapesprite.frame = 26;
    //        else if (r == 14) shapesprite.frame = 28;
    //        //        else if (r == 15) shapesprite.frame = 30;
    //        else if (r == 16) shapesprite.frame = 32;
    //        else if (r == 17) shapesprite.frame = 34;
    //        else if (r == 18) shapesprite.frame = 36;


    shapesprite.anchor.setTo(0.5, 0.5);
    shapesprite.selected = false;
    shapesprite.pos_i = i;
    shapesprite.pos_j = j;
    shapesprite.move_y = 0;
    shapesprite.move_x = 1;

    shapesprite.body.setSize(30, 30, 0, 0);
    shapesprite.alpha = 1;
    shapesprite.scale.setTo(5, 1);
    shapesprite.alive2 = true;
    shapesprite.reset(this.offset_x + j * tile_size, this.offset_y + i * tile_size);

    if (type)
        this.game.add.tween(shapesprite.scale).delay(j * 100 + 1).to({
            x: 1,
            y: 1
        }, 400).start();
    else
        this.game.add.tween(shapesprite.scale).delay(400).to({
            x: 1,
            y: 1
        }, 400).start();
},

try_select_a_shapesp: function (e) {
    this.shapes.forEachAlive(function (e) {
        var bool = Phaser.Rectangle.contains(e.body, game.input.activePointer.x, game.input.activePointer.y);

        if (e.selected || !bool) {
            //console.log('hi');
            return;
        }


        if (this.type == -1)
            this.type = e.frame;

        if (this.type == e.frame && this.in_range(e))
            this.select_a_shapesp(e);
        else
            this.unselect_all_shapes();
    }, this);
},

select_a_shapesp: function (e) {


    e.selected = true;
    e.frame += 1;
    this.count += 1;
    this.pos_j = e.pos_j;
    this.pos_i = e.pos_i;
    // this.increase_bar();
},

remove_selected_shapes: function (e) {
    this.shapes.forEachAlive(function (e) {
        if (!e.selected)
            return;

        this.game.add.tween(e.scale).to({
            x: 2,
            y: 2
        }, 300).start();
        this.game.add.tween(e).to({
            alpha: 0
        }, 300).start();
        this.deleted_shapes.push({
            i: e.pos_i,
            j: e.pos_j
        });
        e.alive2 = false;
    }, this);
},

unselect_all_shapes: function () {
    this.count = 0;
    this.shapes.forEachAlive(function (e) {
        if (e.selected) {
            e.selected = false;
            e.frame -= 1;
        }
    }, this);
    this.clear_bar();
},

move_shapes_down: function () {
    for (var i = 0; i < this.deleted_shapes.length; i++) {
        var tmp_i = this.deleted_shapes[i].i;
        var tmp_j = this.deleted_shapes[i].j;

        this.shapes.forEachAlive(function (e) {
            if (!e.selected && e.pos_j == tmp_j && e.pos_i < tmp_i)
                e.move_y += tile_size;
        }, this);
    }

    this.shapes.forEachAlive(function (e) {
        if (e.move_y == 0)
            return;

        var coef = e.move_y / tile_size;
        e.pos_i += coef;
        this.add.tween(e).delay(100).to({
            y: e.y + e.move_y
        }, 100 * coef).start();
        e.move_y = 0;
    }, this);

    this.deleted_shapes = [];
},

add_missing_shapes: function () {
    var min = [6, 6, 6, 6, 6, 6];

    this.shapes.forEachAlive(function (e) {
        if (e.pos_i < min[e.pos_j] && e.alive2)
            min[e.pos_j] = e.pos_i;
    }, this);

    for (var i = 0; i < 6; i++)
        for (var j = 0; j < min[i]; j++)
            this.add_shapesp(j, i, false);
},

update_score_and_labels: function () {


    this.clear_bar();
    this.game.state.start('End');
},


in_range: function (d) {
    if (this.pos_j == -1) return true;

    return (this.pos_j - 1 == d.pos_j && this.pos_i == d.pos_i) ||
        (this.pos_j + 1 == d.pos_j && this.pos_i == d.pos_i) ||
        (this.pos_j == d.pos_j && this.pos_i - 1 == d.pos_i) ||
        (this.pos_j == d.pos_j && this.pos_i + 1 == d.pos_i);
},
clear_bar: function () {
    this.game.add.tween(this.progress).to({

    }, 300).start();
},

add_tuto: function () {
    this.tuto = this.game.add.button(0, 0, 'tuto', this.remove_tuto, this);
},

updateTimer: function () {
    //console.log('hola');
    timerSeconds++;


    if (timerSeconds <= gameSeconds) {
        secondsLeft = gameSeconds - timerSeconds;
        //
        displayMin = Math.floor(secondsLeft / 60) % 60;
        displaySec = Math.floor(secondsLeft) % 60;
        //
        if (displayMin < 10) {
            displayMin = "" + displayMin;
        }
        if (displaySec < 10) {
            displaySec = "0" + displaySec;
        }
        myTimerShow.setText(displayMin + ":" + displaySec);
    } else {
        timerSeconds = 0;
        this.loserFun();
    }
},
pointsIncrease: function () {
    //console.log("increase");
    gameObj.finalScore += 10;
    points = gameObj.finalScore;
    pointsShow.setText(points + "%");

    if (points == 100) {
        this.game.state.start('Winner');
    }
},
winnerFun: function () {
    gameObj.finalTime = timerSeconds;
    this.state.start('Winner');
},
loserFun: function () {
    gameObj.finalTime = timerSeconds;
    this.state.start('Loser');
}

};

Oh, and the error I get is

Game.js:195 Uncaught TypeError: Cannot read property 'setSize' of null

Yes, I know what it means, but I cannot seem to figure out how to get rid of it.

Thank you!

\$\endgroup\$

1 Answer 1

1
\$\begingroup\$

It doesn't look like you're initializing the physics anywhere.

If you're trying to set attributes on the 'body', the body will be null unless you've initialized a physics engine on the sprite. Do this with something like:

game.physics.startSystem(Phaser.Physics.ARCADE);
game.physics.enable(shapesprite, Phaser.Physics.ARCADE);

But my guess is that you aren't trying to set the size of the body (what collides with things, but you don't see).

It looks like you're trying to set the size of the sprite? If that's the case, try changing the size of the sprite by scaling the image with:

shapesprite.scale.setTo(xScale, yScale)
\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .