macguffin

Even better use pixijs - webGl with a canvas fallback. https://github.com/pixijs/pixi-particles https://pixijs.github.io/pixi-particles/examples/fountain.html This would be the easiest way to get a fountain effect

FYI I've updated the pen with another way of solving the problem, manual_pause/manual_unpause I'm setting the timescale of all the tweens to 0 using TweenMax.getAllTweens() Does TweenMax.getAllTweens() capture everything including delayedCalls? If it does it might be the easiest way pause everything current but still allow for new animation.

Updated tweenmax to your latest in the pen. It works better but still craps out after a while. Were the null tweens coming from me or you, if they are from me I apologise ? Thanks again

ok back again. The pause stuff it right at the end of the js code, everything else is just setup stuff. So I totally agree that exportroot would be the ideal solution. However when I make an "export root" timeline create more tweens then do it again and again I run into a maximum call stack exceeded. I never really though this was unreasonable as I'm making more and more timelines. So in this pen the bouncing things represent my game. If I pause using export root (export_pause and export_unpause buttons) and unpause then during the game more tweens are created it will break. After 10 or so pauses the error occurs or the timelines stop being make correctly, or some things stop moving. So what I normal do is set the TweenMax.globalTimeScale(0); (pause and unpause buttons). that way I know the error will never occur. But what I want to do is have a separate version of TweenMax that can run an animation during the pause (like flashing a close info button) or be able to specify that my tween are on xGlobalTime and the animation during the pause is on yGlobalTime. Hope I'm making some sense let me know if you're more confused than before I started. Cheers

I've always found that export root works a few times but then errors. I use spine2d to make/layout my games and convert that into TweenMax timelines. This means that I can have a lot of timlines sitting dormant. I can call export root once and it will work but the next time I need to pause I may have new tweens so I call export root again and it will freeze. I guess it's caught in some sort of recursive loop trying to add tweens to a timeline that have already been added. Let me see if I can set up a codepen to try and help explain what I'm doing

"Why in Gods's name would you want 2 instances running you fool" is your first response I'm sure, however..... So I have a game and when the instructions come up I pause everything. I've tried all sorts of ways of pausing including export root and running through the global array list. However the most solid way I've found is to TweenMax.globalTimeScale(0); as this stops everything nicely, timelines, callbacks, events etc. So great now I've paused everything but what if I need to use some tweens on the instruction page, kinda shot myself in the foot there haven't I. So back to the original question can I have an independent second instance of TweenMax? Could I use window.GreenSockGlobals = {}; to achieve this? As always thanks in advance for any thoughts or suggestions.

Hi just saw your topic. When I want to pause all and shut everything down I often do this: TweenMax.globalTimeScale(0); Setting the globalTimeScale to (0) will stop the animation and any callback/events. The problem with TweenLite.ticker.fps(0); is that even though the timelines are paused they do seem to complete even though you can't see it happening. When you un-pause your animation will then jump to the end of the timeline. Cheers

Whoo I typed my example so slowly I got 3 replies OSUblake that's a really good idea and yes I'm using Pixi Particles. I was thinking about storing the reference on the timeline but your solution might mean I can avoid this var pe_tl = new TimelineMax({repeat: -1}); pe_tl.lasttime=0; pe_tl.eventCallback("onUpdate", (_x) => { console.log('update_time', pe_tl._totalTime-pe_tl.lasttime) pe_tl.lasttime= pe_tl._totalTime; });

Hi Jonathan thanks for the reply. I don't think I explained myself very well http://codepen.io/anon/pen/OWdYmg?editors=1111 If you open the console you can see that the update time is 0.03 or something similar, this is the time between each update. I'm using GASP to power a particle effect but I need to know how long between updates the "update_time" As you can see I can work it out like this but wondered if this calculation was already been done in the timeline and I could just hook into that.

Hi trying to integrate a particle emitter into some stuff powered by GASP. I basically need the time since the last update as the emitter requires the elapsed number of seconds since the last update. var pe_tl = new TimelineMax(); console.log('foo2', pe_tl) pe_tl.eventCallback("onUpdate", () => { console.log('update emitter') }); I have found things like _totalDuration, _totalTime and I could work it out from these but wondered if there a var in the timeline that already stores/calculates this? Thanks

Hi @OSUblake sorry I never saw your reply. I have got some stuff I can show if you're interested I basically convert simple spine2D animations into GASP animation. The workflow is PSD->Spine2D powered by GSAP rendered by PixiJS. Simple layout and simple animations can be converted directly from Spine to GASP. Complex character animations are handled by thePixiSpine plugin. I can't show here but if you, Jack or anyone at Greensocks is interested I can set something up for you to see.

Thanks for the reply Jack. I thought you would ensure that calls fired. I suspect it's something my end.

Hi can anyone answers the following: I'm basically converting Spine2D animation into HTML5 using PixiJS to render and TweenMax (of course) to drive all the animation. It's actually working very well but I have a question about the 'accuracy' and reliability of labels. Spine2D allows you to place 'events' on it's timeline. I covert theSpine2D timeline to a TImelineMax and fire the event as below. myTimeLine.call(()=> { console.log(':: DO SOMTHING'); }, [], this, _event_data.time) If the _event_data.time which is a value generated via Spine2D is something like 6.3333 will it always fire? I am having some incidents on old devices, crappy computers where it looks like the call event is missed. So my basic question is If TimelineMax skips a frame or stalls on a slow device will the call() always fire or can it be missed? Are some rounded times more reliable? Thanks a lot all in advance. Matt

Of course so simple when you know how That will work just fine for what I need, I knew there would be a way around it as you guys seems to have thought of most things. Thanks very much for such a speedy response.

Great topic title I know, sorry about that. Hi I'm trying to build a TimelineMax animation dynamically by adding TweenLites which is working fine. As part of the code I need a function to be called when each of the TweenLite animations start. I'm doing this by calling onStart:. Again this works fine. I am repeating the timeline as I want to play it backwards which again is visually working as expected. I don't however seem to be able to get the onStart function to call when the TimelineMax animation is in reverse. In case this description makes no sense I have a codepen demo, you can see that the count is only increasing whilst the animation is playing forwards. I've also tried TimelineMax.reverse but this also only calles the onStart when going forwards. I'm sure there is an easy way to achieve this can anyone point me in the right direction. Cheers

Thanks very much Jonathan that was just what I needed: The code that worked with an {self} as a param was this: function collisionDetect( t) { console.log('matrix x pos =', t.target._gsTransform.x) }

Hi I was wondering if I could get x and y values of a transform matrix from the tween. Basically I have a small canvas stage that I'm moving rather than a small sprite on a large stage to maximise performance. var S_die = document.getElementById("IWGdie0"); TweenMax.to(S_die, 4, {x: 10, y: 10, onUpdate: collisionDetect, onUpdateParams: ["{self}"], ease: Strong.easeOut}); In the collisionDetect function I was hoping to pull the x and y values directly from the tween ("{self}"). function collisionDetect(t) { var s_x = t.vars.css.x, s_y = t.vars.css.y, console.log('matrix=', t) } I thought I found it with tween.vars.css.x but this seems to be set at the end value throughout the whole tween. (Edit: Obviously vars is what I'm defining in the tween, duh, which is why it's the same.) Is this possible as I think it would be easier in the long run than extracting the stuff from the matrix directly as I'm guessing your functions do a lot of work with compatibility. As always thanks for your help. Matt

Thanks for taking the time to reply. Cheers Matt

Hi I need to give my loaders created from parsing an array a specific ID based on the file name. I have done it but wanted to check that there wasn't a simpler (built in) way of doing it, as even though it works it seems a little long winded. So I create a LoaderMax with an onChildOpenHandler: var subLoadqueue : LoaderMax = LoaderMax.parse(anArrayOfURLS, {onChildOpen:childOpenHandler}); The handler gets the file location and then extracts just the file name using makeLoaderID(event) returns this name and sets it as the event.target.name. private function childOpenHandler(event : LoaderEvent) : void { if (event.target.name.toLocaleLowerCase().indexOf('loader') != -1) { //this stops the renaming of any non automatically named loaders event.target.name = makeLoaderID(event); } var $tempArray : Array = String(event.target).split(' '); IWGstore.loaderContent.push($tempArray); } private function makeLoaderID(event : LoaderEvent) : String { var $tempArray : Array = String(event.target).split(' '); var loaderID : String = 'empty'; if ($tempArray[2] != null) { var path : Array = $tempArray[2].split('/'); loaderID = path[path.length - 1].substr(0, loaderID.lastIndexOf('.')); } return loaderID; } So -FILELOCATION: (file:///e|/%7e%7ework/%7ecamelot/%7egames/newgames/asset_MC1.swf) gives me loaderContent-ID: asset_MC1 which I can then use to retrieve content in the usual way (LoaderMax.getLoader('asset_MC1').rawContent) Cheers

Thanks Carl also discovered the skipFailed feature. Cheers

Hi I'm sure this is simple but can you listen for an onError or onFail event from a loader created via xml. example My xml has this: if this file is missing my flash output window states: Error on SWFLoader 'MGGO' (monopolygoldtwtw_MG_GO1.swf): Error #2032: Stream Error.etc etc as expected. I want my loader to be able to listen for any error created via this XML load method. Is there a catch all for loaderMax errors? Cheers Matt

Thanks Rob I knew there would be an event in there that did this. Thanks for taking the time to let me know. Cheers

I'm sure I'm missing something very obvious but can an appended XMLLoader detect any XML format errors? If my XML is well formed LoaderMax.getContent("XML") shows the XML. If I deliberately spoil my XML (leave off an end tag for example) LoaderMax.getContent("XML")=null. Also once the XML is corrupted the onComplete and onError which are attached to the XMLLoader aren't fired. I thought I might be able to get round it with an onRawLoad or onIOError event but these are also not fired. Is your XMLLoader detecting that the XML is corrupt and ignoring it? If this is the case can this 'ignoring' be listened for? Part of my loader needs to check that the XML is well formed and report any errors if it isn't. I wondered if there was a way to get an error if the XML is bad, end tags missing etc. my loader queue code: loadQueue = new LoaderMax({name:"mainLoad", onChildOpen:childOpenHandler, onProgress:progressHandler, onComplete:completeHandler, onError:errorHandler}); loadQueue.append(new SelfLoader(this, {name:"self"})); loadQueue.append(new XMLLoader(loadFile, {name:"XML",onComplete:completeXMLHandler, onError:errorXMLHandler})); loadQueue.load(); Cheers Matt

Yes that's exactly what I was thinking of. I'll let you know how I get on with it and many thanks, Cheers

Hi Jack, Whilst I totally agree that your approach is the right one and 'best practice' I would like to see the addition of a SELFLoader.as class. Could this be an optional activation so that it doesn't add additional weight and leaves the default as the preferred 'best practice' external loaded? I often find that restrictions placed on me by legacy infrastructures and clients demands mean that I have to adopt the less efficent 'single SWF preloading' approach. This is particulary the case with my main client who I make games for, as whilst they allow the loading of external assets the actual main part of the game need to be 'self sufficient'. Your loader class is great for getting these external assets in as I can be confident that when the queue has completed the asset will be there, that the xml will not have errors etc. I guess it if farly simple to incorporate your loader and a bog standard one along these lines: addEventListener(Event.ENTER_FRAME, mainLoadTracker); private function mainLoadTracker(event:Event):void { MAINSWFLoadPercent = (((loaderInfo.bytesLoaded / loaderInfo.bytesTotal) + JACKSPercentage) / 2) * 100 if (MAINSWFLoadPercent == 100 && isAssetsLoaded == true) { //game and all assets totally loaded } } In the above code I am getting an acurate % load of the mainSWF as JACKSPercentage is updated by your onProgress:progressHandler. I also get the additional safty check that the assets are loaded as isAssetsLoaded is only set to true when loaderMax completeHandler is fired by your class. However is doesn't seem to be as neat as it could be. One suggestion would be to add a switch to a particular LoaderMax queue somewhere along the lines of SELFLoad=true. If this if detected the loader class would add its self to that queue much in the same way I have done manually. or var queue:LoaderMax = new LoaderMax({name:"mainQueue", onProgress:progressHandler, onComplete:completeHandler, onError:errorHandler}); queue.append(new SELFLoad()); and have the weight of the mainSwf added to the queue. I understand that both these approaches might cause problems and that my initial solution may actually be the simplest but I thought I'd see what your thoughts were. Cheers Matt