montego

Dear Greensock Pros, We are developing a Formular 1 Race Game. The game is mostly of strategic nature but as a visualisation we also want to show the final races in a very plain and 2Dish style like shown in the codepen. We would like to pass an array of objects to GSAP-Module with all the data of the 18 participating drivers: id name avg time (this player will need for one round based on his settings) pitstops (array of lap numbers in which the players plans to do pitstops) pitstop delay (s) probability of accident probability of technical problems All the GSAP has to do now is to animate those 18 dots along the SVG track according to the avg time every player needs for each round, which should have a little fluctuation, maybe 2%, each round. We dont have to show a realistic movement (slower in curves and faster on straights) but if that can be done easily it would look nicer. The dynamically drawn course color based on speed as shown in the pen is NOT neccessary. A plain black track would do just fine. If one of the two events (accident or technical problems) happen the car slows down and comes to a halt. On rounds stated as pitstop rounds, the car should follow a second SVG track which is identical to the first one, but has a pitstop-lane instead (compare: http://internet-agentur-bodensee.com/intern/pm/f1/trackItaly.html). The car will slow down on the pitstop lane and stop there for the players pitstop delay time. Afterwards it will resume the race. After a predefined number of rounds (48 to 62) the reace is over. Meanwhile the script should fill another array with the race times of each player. Thats it... I am looking forward to your proposal and will be glad to answer questions if there are any. Greez Daniel

Yes, as you said: the solution is pretty close but I would even have trouble converting the whole thing to a timeline. Also I am not really sure if thats the best way to go as we have 18 cars in the race and they all need their independent timeline and speed. Too bad we cant get you for this litte mod Well i'll try to post a freelnace offer in the forum then. Thanks for your help.

Hi Blake, Thanks for your very helpful hints and links. I studied your last example and played around with it to simulate the pit stop but it produces funny results: http://codepen.io/Montego/pen/MyKEyB?editors=0010 Now as I dont want to overstress your helpfullness and as this feature is only a visualisation for our game which is mainly strategic, it would make sense to oursorce this part of development. Do you or Greensock offer that kind of service or how could I find someone to help us out here? Thanks again for your ideas Daniel

Dear Superheros, Thanks for sheding light on this feature. The last thing I cant grasp is, if its possible to alter the timing of the animation during runtime. Working on a race game its necessary for example to slow down the movement speed of items after certain events. As we are looping the track for up to 60 rounds, altering the animation duration (in SMIL)setting produces unwanted/unrealistic effects. Is there a solution within the bezier/morph plugin? Thanks again for a hint!

Thanks a lot for your quick response. That sounds like our solution! Which membership do I need to use that? Is the "green" enough? Thanks again

Dear Green Sock pros, We are developing a Formular 1 simulation for which we depend on "cars" (=dots) moving on tracks, that we already built as SVG path. We are delighted by GSAPs animation capabilties so we would very much like to use it. Sadly it seems, it supports animation along a path only based on bezier curves with a value list, but not on SVG path'. Does anyone know a workaround or have information about the implementation of SVG path support. Thanks a heap! Daniel