boy2k

haha damnit... knew it would be something simple... ? Thanks guys

Hi guys, just trying to animate some svg paths and used the gsap demo pen as a starting point. It's probobally something simple i have missed but i can't get the lines to animate... Can someone take a look at my pen and put me out of my misery haha.

Agreed, if i can get away with this approach it sounds like the best way.

Hmm interesting idea, so you mean have an off screen canvas to render elements on. I will look into this thanks. I would love to use just webGL but i know someone will find a device that it wont work on haha. I will look into using it though for sure but i would need a fall back so thank you for the input its been very helpful

Thanks for the example OSUblake, I'm using phaser 2.6.2 (latest version) so i guess i will look into webGL filters. I will also need to work out a fallback for canvas though as it needs to run on as many devices/ browsers as possible. Plus everyone i have spoken to tells me not to rely on webGL :/

Thanks for the info OSUblake, some great examples there! I'm writing a slot machine and i need to draw the win lines. If your not familiar with these games this is basically a line which passes though each of the winning reel items. eg. The problem i have is that i need the line to be uniform (which can be done drawing shapes) but it needs to have quite an aggressive glow on the line which is what is causing me problems. As i showed above i can use a rope on a bitmap but it only really works when you add in alot of points. I have found a few smoothing functions which produce a very uniform line but they all smooth the line through the points. Ideally i need it to be straight as my example above.

Hi OSUblake, Thanks for the quick response. I don't need it to tile, i have a graphic which is the right size and works well when more points are introduced. I just want the linear paths without the curves. It actually works a lot better without the black BG but i thought it easier to show this way. EDIT: i mean idealy i would love to just draw a line in code and add a glow but i cant seem to do that

Hi guys, i am trying to find a way of plotting extra steps between a set of points. The issue is i am using a pixi / phaser 'rope' to draw a line across the screen like this. This is a mockup of how i want it to look. The problem is when i supply the 7 points it gets stretched too far and distorts like this. The problem can be solved by incorporating more points into the path. My problem is i can only find Smoothing scripts which make it loose the edges. I really would like to keep the iniform shape but need a way to plot in extra points. I wasn't sure if GSAP would be able to plot points between the 7 supplied points and keep the straightness? I could then use those points to draw the rope. Any help would be great

lol.. how did i miss that... :/ you might need to update your docs though as i got the example from there. https://www.greensock.com/asdocs/com/greensock/plugins/RoundPropsPlugin.html Once again though greensock delivers

Hi guys, I am doing a starling slot game and i am having a problem with my sprites not tweening smoothly. The FPS are a constant 60 for me but the symbols seem to judder a bit... I think they are rounding to whole pixels so i added in: TweenMax.to(reelMC, .5, {y:0, roundProps:["y"], ease:Linear.easeNone, onComplete:loopReel}); I also added TweenPlugin.activate([RoundPropsPlugin]); which causes 1120: Access of undefined property TweenPlugin. Without the activation it compiles but is still jerky so not sure the plugin is working right... :/ Help please

Thanks for getting back to me Carl. It's a weird one that's for sure... I will ring fence this version for use with the slots framework. The main problem is having to swap out src paths when jumping between projects as i am using the latest version of GSAP on those. Not such a big problem sure but I will see if i can isolate the code so we can have a looksee. On a better note it must be nice to know that after years of use greensock is still my first and only port of call for coding my animations Keep up the good work guys

Hi guys, It seems the latest GSAP AS3 update has broken my tweens... I have a slot machine framework which has been used for many games over the last year or so and the latest update has messed the spin animations up (see attached) I am using TweenMax and the only thing i have updated is the greensock classes... I haven't updated the greensock classes in this project for quite a while so they were running v11.51 Do you have any idea what would cause this? I have included some example tween code to show the easing and params i am using which might help narrow it down a bit. TweenMax.to(mc, .2, { blurFilter:{blurY:30, quality:2}, y:endY, delay:delayNum, ease:Sine.easeIn, onComplete:spinLoop, onCompleteParams:[mc, mc2, 0]}); and TweenMax.to(mc, 0.12, { y:endY, delay:delayNum, ease:Linear.easeNone, onComplete:spinLoop, onCompleteParams:[mc, mc2, 0]});

Ok Jack thanks for the reply, i will get the latest version and give that a whirl. Good idea on the tweening of a generic object i will add that in and let you know how i get on.

Hi Jack, Thanks for getting back to me i know its a weekend, much apreciated The version i have currently is VERSION: 12.0.9 The reason i am altering the x on update is so the square loops in for one side to the next. So the user can scroll the line left or right and it will loop until the squares slow down. I am using onupdate to then bring the other squares on the line along with it.This is because the line can be tweened horizontally or vertically and the tween will be started from one of the squares in a 9x9 grid on finger press. I'm drawing up some examples for mobile games to try and get some funding for them for a local company. I have included a test file for the tween here: download. Thanks

Ok so i seem to have left out most of the important info lol... sorry busy week! i am trying to animate a block of 9 70x70 squares which are part of a 9x9 grid. Each brick can move the entire row either horizontally or vertically... basically a 2d rubics cube So i start the throwprops and then once a square goes either past the first or last points in the endPoint array i move it forward or backward by 630. I think this x position adjustment is throwing off the end: for the throwprops tween. is there a way to make the tween recalculate? here is a very simple script to explain. import flash.display.MovieClip; import flash.geom.Point; import com.greensock.*; import flash.events.MouseEvent; import com.greensock.plugins.*; import com.greensock.easing.*; var bricks:Array = new Array(brick0, brick1, brick2, brick3, brick4, brick5, brick6, brick7, brick8); var bounds:Point = new Point(-20, 610); var speed:int = 0; var endPoints:Array = new Array(-20, 50, 120, 190, 260, 330, 400, 470, 540, 610); TweenPlugin.activate([ThrowPropsPlugin]); function doTween() { trace("doTween called.") for( var i:int = 0; i < bricks.length; i++) { var mc:MovieClip = bricks[i] as MovieClip; if( i == 0 ) { TweenMax.to(mc, 5, { throwProps:{x:{velocity:500, min:endPoints[0], max:endPoints[endPoints.length -1], end:endPoints} }, ease:Linear.easeNone, onUpdate:checkPosX, onComplete:doTrace}); } else { TweenMax.to(mc, 5, { throwProps:{x:{velocity:500, min:endPoints[0], max:endPoints[endPoints.length -1], end:endPoints} }, ease:Linear.easeNone, onUpdate:checkPosX}); } } } function doTrace() { for( var i:int = 0; i < bricks.length; i++) { var mc:MovieClip = bricks[i] as MovieClip; trace("mc.x:"+mc.x) } } function checkPosX() { for( var i:int = 0; i < bricks.length; i++) { var mc:MovieClip = bricks[i] as MovieClip; if( mc.x > bounds.y) { mc.x -= ( 630 ); } if( mc.x < bounds.x) { mc.x += ( 630 ); } } } doTween() stop();

Hi Guys, Just trying to work out why i can't give ThrowProps an Array of end points for it to snap to onComplete. works fine in JS but doesnt seem to work in AS3. var endPoints:Array = new Array(-20, 50, 120, 190, 260, 330, 400, 470, 540, 610); TweenMax.to(mc, 5, { throwProps:{x:{velocity:500, end:endPoints} }, ease:Strong.easeOut, onUpdate:checkPosX, onComplete:doTrace}); Any ideas?

As always Carl you replies are amazing if anything it must be an issue with iphone 4/4s with iOS 7 or easelJS 0.7 on the 4/4s have tested it with iphone 5 and 5s both work full speed, ipad full speed, even the galaxy tab now runs amazing.. its just crap on the 4... I will research further and post the results here in the chance someone else can benefit from it.

Hi Jamie, Thanks for the reply I'm not pinning this on greensock i'm just trying to figure out why its just seems to be on the iphone 4/4s really. I was just asking if anyone has come across any issues with these devices on ios 7 and if so how did they get round them. It runs lovely on the galaxy tab now which it ran horribly on before... makes no sense lol. All i can think is that it perhaps easeljs now has higher overheads or lower limits on graphic memory now? its weird... as i say the other skins run fine. Unfortunately the code is behind closed doors so i cant show any examples... i know lol not very helpful! frustrating...

Hi guys, i have a few canvas games that were built with easeljs 0.6.1. These worked fine with greensock but i have noticed since upgrading to easeljs 0.7 that a few of the games now completely die to a frame-rate of 1 or 2 when run on iphone 4 /4s... they all run fine on pc and ipad 3 and are much improved on android which was a little low fps with 0.6 It could be an iOS 7 thing as the iphone 4's are ios7 and the ipad was ios 6. Just wondering if anyone else has come across this or can throw some light onto why these run bad suddenly... it only affects a few which is even stranger.... they are all skins of the same game!

Firstly thank you Jonathan and Jack! some amazing tips there. I was never in doubt that the performance issues were not the fault of GSAP, i was just wondering if anyone had a few tips on how to improve things on android. Once again greensock delivers! Not only the platform but the community and support is second to none!

Hi jon, Thanks for helping us with this. The actual code isn't something to easy to put into a fiddle as its part of a dynamic game on a locked down internal network. We have lifted out a small section so you can test though. Its a simple tween to open a panel, super smooth on iOS but nasty on android 4.1 (galaxy tab 2) and nasty on galaxy note also. http://jsfiddle.net/m5ycR/

Hi all, we are experiencing really bad performance tweening dom elements when running on android devices. The same code runs nice and smooth on iOS so i just wanted to check if there are any tweaks or hacks to get more from android? The difference is quite big...

DOH!!! haha I throught the min/max were to control the velocity speed... /facepalm... thank you Carl

Hi all, im having an issue with Throwprops where the end: value will not work unless it is a posative number. I am doing a simple y tween but it always defaults any negative number to 0 instead. my code: var maxY = 215; var minY = maxY - ((targContainer.getNumChildren()-1) * this.stakeNumYSpacer); // get the current velocity var vY = this.Ytracker.getVelocity("y"); // get available end points var endArr = new Array(); for( var i=0; i < targContainer.getNumChildren(); i++) { endArr.push(maxY - (i*this.stakeNumYSpacer)); } // tween flick ThrowPropsPlugin.to( targContainer, {throwProps:{y:{velocity:vY, max:1000, min:0, end:endArr}}, ease:Strong.easeOut}, 2, 0.2, 0.6); This is a log of the array i am passing endArr:215,172,129,86,43,0,-43,-86,-129,-172,-215,-258,-301,-344,-387,-430,-473,-516,-559,-602,-645,-688,-731,-774,-817 Any ideas what i am doing wrong? edit: I'm using CreateJS if that comes into the equation? Shouldn't think so because its just a numerical value but for info purposes...

Thanks for your help jack, i will dust off my maths books then