Lawnmower concept

[ogramp]

(PS, I'm new to Phaser, so this might as well be a dumb question but I'm still asking  )

I am trying to create a lawnmower game with Phaser where you basically drive around top-down view and cut grass.

I got something working and at the moment I use bitmap data object to paint a circle of light green color (short grass) on top of the background color that is supposed to be the tall grass. 

Now the problem is that grass is not just a solid green colored area. It needs texture. Putting texture on the background seems easy and tall grass is then textured. But running around and painting with bitmap data object I don't see a way to do so that it would leave a texture as a trail.

Does anyone have a good idea how to do it or something they can point me to.

[drhayes]

You could make the "mowed" stuff a mask for something beneath it with a different color and texture? This example seems relevant: http://phaser.io/examples/v2/bitmapdata/alpha-mask

[ogramp]

I've thought of that. I was unable to generate the "mowed" mask at run time. But I'm smarter than I was yesterday. I'll try again!

[ogramp]

var game = new Phaser.Game(500, 375, Phaser.AUTO, 'phaser-example', { 
    preload: preload, 
    create: create
});

var sprite;
var mask;

function preload() {

    game.load.image('shortgrass', 'assets/img/grass.jpg');

}

function create() {
    shortgrass = game.add.sprite(0, 0, 'shortgrass');

    mask = game.add.graphics(0, 0);
    mask.beginFill(0x000000);
    mask.drawCircle(0, 0, 1);

    shortgrass.mask = mask;

    game.input.addMoveCallback(move, this);
}

function move(pointer, x, y) {
    mask.drawCircle(x, y, 50);
}

So I tried this masking thing, and it almost works as I want to. For some reason it works only for some time and then turns weird. I suspect it might be because I draw to mask every move of the cursor and maybe that is too much? 

It's weird because all I actually do is paint mask graphic and through that I expose the sprite of shortgrass. Why would it stop working mid drawing?

Can someone see something totally wrong here? 

[drhayes]

What does "turns weird" mean?

[ogramp]

I attached two images. The green grass is a sprite with a mask applied to it. I draw the mask every time I move the mouse. But every time at some point it freaks out, some weird lines appear and it stops drawing the mask.

[ogramp]

Alright alright alright. I think I figured something out. It doesn't like the drawCircle method. Or any other primitive shape that calculates corners I think.

I used console.log to print out how many times I was able to call the drawCircle() method and turns out it crashes every time it reaches 799nth time. I have no idea why it does it like that but changing the method to drawRect() does not crash. I tried the other primitive shapes as well (ellipse, rounded rectangle) and same thing.

This is the crashing circle version.

This is the working rectangle version.

At this point I'm done trying to draw circles. Rectangles are the way to go

[drhayes]

That's weird alright.

I wish I could help more, but I don't have a lot of experience using Graphics so I don't know what its limits are w/r/t lots of draw calls and stuff.

And hey, uh... lawnmowers are rectangular anyway! So it's better, right? ( =