how to move ball around spiral channel created via Physics Editor program?

[aida]

Hello,

I'm creating my first mobile game via Phaser framework and canvas.

So for creating the channel (please check attached screenshot of my spiral channel) I imported my sprite into Physics Editor program, did what is described in this tutorial. Now trying to prepare the part when user will press/touch the ball holder, after touch/press the ball should rotate around the channel and depending on the speed it should fall into holes.

Did some research but can't find any example on how I can make the ball move around the channel. Any ideas will be appreciated.

I have following code for loading spiral sprite and its json file:

preload: function() {
    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    game.load.image("spiral", "assets/images/pinball-channel.png");
    game.load.image("ballHolder", "assets/images/ball-holder.png");
    game.load.image("ball", "assets/images/ball.png");
    game.load.physics("physicsData", "assets/sprite_physics.json");
},
create: function() {
    var ballHolderGraphic;
    ballHolderGraphic = game.add.sprite(196.5, game.height-98, 'ballHolder'); 
    ballHolderGraphic.width = 60;
    ballHolderGraphic.height = 104;
    
    ballGraphic = game.add.sprite(213, game.height-ballHolderGraphic.height-23, 'ball'); 
    ballGraphic.width = 28;
    ballGraphic.height = 28;
    
    var channel;
    game.physics.startSystem(Phaser.Physics.P2JS);
    channel = game.add.sprite(225, 365, 'spiral');
    channel.width = 400;
    channel.height = 550;
    game.physics.p2.enable(channel, false);
    channel.body.clearShapes();
    channel.body.loadPolygon('physicsData', 'spiral');
}

Also I have one issue, after this line (channel.body.loadPolygon('physicsData', 'spiral');) nothing (image, button,etc...) is being displayed in the screen but once I add them before this channel part, it works perfectly. Any ideas why?

Thanks

[samid737]

What does your physics body look like? Normally you would build the polygon as inverted (the red area/channel should not be drawn in the physics editor), then its just A matter of manipulating gravity via input, which could be the mouse, gyroscope (mobile):

 

spiral.json

 

The spiral (red is transparant in the example)

[aida]

Hi,

Thanks for the feedback.

Attached please find my graphic look and the json file which I created with PhysicsEditor program. I think something is wrong with my json file. Can you please have a look at it? I checked your json file and it is different from mine.

I generate the json files like this:

1. Adding my sprite png file into the program

2. Then I use "Shape tracer" tool and  click "Ok" in opened window.

3. From Exporter dropdown choosing "Lime + Corona (JSON)"

4. Click on "Publish" button to get the json file.

I'm missing something?

Thanks

 

myChannelRoad.json

[samid737]

I have no clue about how the json exactly works so I can't help you with that, but I created the above via this tool. It automatically traces the transparent edges:

https://loonride.com/tools/physics

It should look like this:

[aida]

Thanks for sharing the tool and codepen example with me.

How I can move the ball at certain point? Like once my holder sprite is pressed, ball should move correspondingly. How to make it move ahead?

And also I can't make the ball to move all around the channel, do you have any idea on how to do that please?

 

[samid737]

 There are different ways to move the ball when pressing the sprite. This example is one way, but you can use moveToPointer (should work for p2), accelerate it to some point,  you can apply A force or set the velocity/acceleration directly. Maybe you can try changing the physics properties of the ball/wall  to get the desired result:  damping, friction, restitution . Updated the example A bit:

 

[aida]

Thanks for the suggestions on how to move the ball and also for the updated example. Though in your example the ball sometimes moves and sometimes no.

In your example you use game.input.activePointer.isDown, how can I check activePointer for specific sprite? I wanna reach it for pressing the ball holder so that I can move the ball to the corresponding part depending on pressed duration. Here is my code:

var ballButton;
ballButton = game.add.sprite(196, 100, 'ballHolder');
ballButton.inputEnabled = true;
ballButton.events.onInputDown.add(inputDownAction, this);

function inputDownAction(ballButton, pointer) {
    /* returns 0 */
    console.log( pointer.duration);
}

pointer.duration is not working and returns 0. But game.input.activePointer.duration inside update() function is working and returns duration.

if (game.input.activePointer.duration > 200 && game.input.activePointer.duration < 500){
    console.log('first range '+game.input.activePointer.duration);
}else if(game.input.activePointer.duration > 500 && game.input.activePointer.duration < 700){
    console.log('second range '+game.input.activePointer.duration);
}else if(game.input.activePointer.duration > 700){
    console.log('third range '+game.input.activePointer.duration);
}

Any ideas on how to get activepointer for the specific sprite?

Thanks

 

[samid737]

I think it should be the other way around, inputDownAction(pointer, ballButton).

 

[aida]

Like that it returns undefined.

[aida]

Seems found some temporary solution for pointer.

Re your example - when I add this line `game.physics.p2.enable(ballGraphic);`, the ball starts immediately to go around the channel. Why it starts to move?

And also when it starts to move, then it comes back, how to stop that behaviour? I mean either move ahead or stop at certain point.

Do you have any ideas please?

[samid737]

The ball immediately collides either with world bounds or the other object when it is spawned. If you spawn the ball At for example 500,400 it won't move at all.  The bouncing is either due to gravity or bounciness of the object. game.physics.p2.restitution sets the bounciness of all objects.

[aida]

Yes, now I see that ball moves when there is a gravity and without gravity ball doesn't move.

But my issue is that can't find any logic formula between gravity, friction and damping so that can stop the ball at a place where I want it to be stopped (i.e near the holes,etc...). 

For example, with below code it is near to first hole, but I just played with below numbers to get this result which makes things harder:

game.physics.p2.gravity.y = -250;
game.physics.p2.friction = 6;

ballGraphic.body.velocity.y = -200;
ballGraphic.body.damping = -1;

Maybe you or someone has something in your mind re this?

Thanks

[samid737]

You could set the holes as zones where the sprite slows down:

moreabout extending phaser sprites. You can slow it down by setting the strength as a function of the distance between the ball and the zone for example. Its more like skidding, but maybe its good enough for you. Otherwise you could try to add your own gravity to the game by defining some gravitational pull when the ball is close enough. Its pretty much doing the same thing, but the update function should be something like:

 

Hole.prototype.update = function(){	
   dist = Phaser.Point.distance(ball,this)
	if(dist<this.size){
		ball.body.acceleration.x = 1/(dist*dist)*this.strength;
		ball.body.acceleration.y = 1/(dist*dist)*this.strength;
	}	
}

 

[aida]

Thanks. It is really nice idea. I used holes and updated the logic a bit and now can control the ball. Thanks a lot.

[aida]

Hey guys,

Is there a way to detect when the ball stopped moving inside input.onUp callback function?

game.input.onUp.add(gameUpAction, this);

function gameUpAction(pointer){
    
    if (Math.abs(ballGraphic.body.velocity.x) < 1 && Math.abs(ballGraphic.body.velocity.y) < 1) {
        console.log("ball just stopped moving");
    }

}

With above code it doesn't working (actually I understand why it is not working). I think here I need to use it in some other way. Any ideas please?

Thanks