Jump to content

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


Recommended Posts


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;
    channel = game.add.sprite(225, 365, 'spiral');
    channel.width = 400;
    channel.height = 550;
    game.physics.p2.enable(channel, false);
    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?



Link to comment
Share on other sites

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):




The spiral (red is transparant in the example)


Link to comment
Share on other sites


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?





Link to comment
Share on other sites

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?


Link to comment
Share on other sites

 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:


Link to comment
Share on other sites

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?



Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?


Link to comment
Share on other sites

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)
		ball.body.acceleration.x = 1/(dist*dist)*this.strength;
		ball.body.acceleration.y = 1/(dist*dist)*this.strength;


Link to comment
Share on other sites

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?


Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...