Jump to content

Rope for Tarzan


Recommended Posts



I read some topics here on how to create a rope system like http://www.html5gamedevs.com/topic/5881-trying-to-create-a-lizard-tongue/


My hero is moving around and jumping. When pressing a button a rope will be thrown in a direction (from my hero). I think I'll use only one sprite for the rope so it'll be non-flexible rope for the beginning.


How to detect collision between my tilemap and my rope in order to fix the rope to the tilemap and transform my hero into Tarzan ?

How to fix the rope to the tilemap ?

How to change rope angle depending on my hero's mass and speed ?


I'm using P2.


I think it could be very usefull for a lot of us that kind of system.


Thx ;)

Link to comment
Share on other sites

wow.. thats a hard one..  this is just one suggestion:


configure your tilemap layer so it will be in a specific collision group... lets say groundCG

configure the last rope element to be in a specific collision group .. lets say anchorCG


configure both to collide with each other and activate impactEvents 


you can then create a groupCallback on the last ropeElement to fire a custom function..  


the moment you create the rope (onclick) the first element could create a revolute constraint with your player

the last element could accelerate to the point of click... all the other elements should have no gravity to be able to fly..



sooo ... now we need to anchor the last rope element on collision to the wall..  in the collisionCallback function you could create a single anchor element at the exact point of the last ropeElement when it collided..

and then create a revoluteconstraint between the last rope element and the new anchor element on the wall..  for this element to act as anchor you will need to make it "static" so it won't move..


now you just need to find a way to remove the whole rope and the constraints...  maybe on rightclick or on inputUp..  to delete all the ropeElements you would need a group and add all elements to this group.. you could then call group.destroy() when the time comes and the rope has to disappear..



i'll give it a try when i find some time..  let me know if you made some progress :)



an other way i could imagine - maybe wayyy more easy...    would be to shoot a very very fast (invisible) bullet into the direction of the pointer.. if it collides with a wall you'll get the x and y coordinates ... you could then calculate the distance between your player and that point and create a "distanceConstrait"  (if the distance is 200 for example the constrait would get 180)... voila.. your player would do a little jump (20 px) you are chained to that point!    painting the rope along that constraint would be another problem in that case...  no idea for that yet :)

Link to comment
Share on other sites

well... i gave it a try..    i would love to see your improvements to the code so please share everything you change in this thread.. maybe we could create a good phaser-example and issue a pull request if it's done   :)


my working example does the trick but it's not perfect and maybe the code could be refined and made much easier..  


also have a look at the game "teeworlds"  (that's what i had in mind when creating the rope)   in teeworlds the rope is continuously reduced in length if the anchor is docked to a wall..   this is nice (but not a 'musthave' )  but one thing i find important is that creating the rope does not affect the player..  in my example the player is affected very much .. the rope pushes the player away or pulls him up..   


the rope maxLength is 300 - so you'll have to jump to anchor it to the wall  






(use the cursors to move an jump and the left mouse button to create a rope.. the mouse cursor to aim and hold the mouse button as long as the rope should exist -  up in the air you can apply a force to the left or to the right to swing)

Link to comment
Share on other sites

I just looked at it. I don't need a rope in multiple part (boucing, elastic effect), just a solid rope you can bend, I'll try to add something like that.


But your example is nice, I'll try to get the effect I need and if I can keep the multipart rope I'll

Link to comment
Share on other sites

Hmmm in fact it's pretty cool, I just need to fix the bouncing effect.


We should create the rope as it's going further for collision. Here the rope is completely created and then it moves

Link to comment
Share on other sites



We should create the rope as it's going further for collision. Here the rope is completely created and then it moves

that's what i thought..  but i had no idea how to implement this..  


btw..   i just uploaded a refined version and added a simpler version without the rope but with a distance constraint..  i thought.. if this one works i could worry about the rope later..   so now i worry about the rope ^^


here is the link..  



and i also attached the complete thing as zip file.. so all the assets are there


Link to comment
Share on other sites

well..  with the rope it is more realistic..  especially when you hit ground while still on the rope..   the second approach does not allow to come closer to the wallAnchor.. 



did you play teeworlds ? in that game the moment the wallAnchor is docked the distance constraint is reducing it's distance.. so you get pulled up..  this is really fun and makes the case where you sit on the ground with an active distance constraint that does not allow you to walk on the ground  less important..  

Link to comment
Share on other sites




yet another approach..  but i think it's getting better every time..

 this time all the chainelements get a velocity and are created separately .. because of that the chain sections don't get pulled away from each other and stay in contact.. looks much better that way!


also i build in a small delay..   (the line in the update() function with the modulo operator %)

i don't build the whole chain altogether in one step - for now modulo 1 shoots every frame.. modulo 2 would create a new element every second frame (i'm sure there is a better way to create a precice delay depending on the already passed flight distance but it works for now)  if the first anchor hits it's target i stop all elements so the chain creates a small ripple effect rather than getting pulled together to a small heap of chainsections...

Link to comment
Share on other sites


  • Recently Browsing   0 members

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