drewbit

I had a need for controlling a sprite-sheet, with pause, play, and go-to-frame functionality. Also needed practice creating jQuery plugins. The result is jquery.gsap.sprite.js. Gitub: https://github.com/agrothe/jquery.gsap.sprite Demo: http://jsbin.com/quvuzo/6/edit?html,js,output Sample Usage: var mark = $(".mark").sprite({ frameWidth: 24, frameHeight: 70, sheetWidth: 120, imageSrc:"https://dl.dropboxusercontent.com/u/6801572/marksprite.png" }); // Pause the sprite mark.sprite("pause"); // Play the sprite mark.sprite("play"); // Resume the sprite from where it was paused mark.sprite("resume"); // Restart the sprite from the beginning mark.sprite("restart"); // Stop the sprite mark.sprite("stop"); // Goto first frame (0 indexed) and stop mark.sprite("seek", 0, true); // Goto thrid frame (0 indexed) and stop mark.sprite("seek", 2, true); // Goto thrid frame (0 indexed) and continue mark.sprite("seek", 2); A few advanced features are overrides for TweenMax and TimelineMax libraries, as well as passing in your own Timeline object for maximum control. Comments and suggestions more than welcome.

Hey Shaun, I hope you don't mind I mentioned you in credit for that technique on my tutorial I just wrote on my blog. If there is a better link then your profile link here let me know and I'll add it! I've done a codepen as well to demonstrate the idea I was prototyping: http://codepen.io/agrothe/pen/NqPYVR

Exactly what I was after, but as usual, just over thinking it. Thanks.

I'm trying to repeatedly scroll items in a list. I have a container with 3 images all with float: left set on them. When the first element is animated, the second one stays in place, instead of moving. Relevant code here, complete example at: http://jsbin.com/tivupa/2/edit?html,output .slideshow { display: block; width:7300px; position: absolute; top: 200px; left: 0px; } .slideshow img { float:left;margin:0;padding:0; } <container> <div class="slideshow"> <img src="https://dl.dropboxusercontent.com/u/6801572/terrain.png" alt="" width="2400" height="305" /> <img src="https://dl.dropboxusercontent.com/u/6801572/terrain.png" alt="" width="2400" height="305" /> <img src="https://dl.dropboxusercontent.com/u/6801572/terrain.png" alt="" width="2400" height="305" /> </div> </container> TweenMax.to($(".slideshow img:first"), 10, {x:"-=2400px", ease:Linear.easeNone, onComplete: function(){ $(".slideshow img:first").insertAfter(".slideshow img:last");}}); Any ideas how I can get a continuous scrolling effect?

The series is complete and the code on github.

Part 2 is up. Covers Cloud based development with Codio and adds collision detection and the GSAP Draggable plugin.

Hi again. I've started a beginner tutorial series for people looking to get started with HTML5 game development using jQuery and GSAP. Thought I'd link here for those who might be interested. I hope this is relevant, if not, feel free to moderate. The series will cover prototyping with JSBIN (substitute codepen, jsfiddle), animation (GSAP of course), basic collision detection and added particle effects with canvas. Part 1 covering prototyping and animation is fresh of the press and working on the collision detection next. Thanks, Andrew

Ditto for the lock-to-center request.

FYI, you can now see this in action: http://bordereastcreative.com/spacecute/game.html.

Yes, I'm using the bezier plugin. Couldn't write the math myself And thanks for the tip, didn't know they both were included in TweenMax. I don't usually read enough documentation, heh.

Well, I finally made something with GSAP. Take a look: http://bordereastcreative.com/spacecute/game.html. Maybe there should be a gallery forum? Would love to see what other people are making. Note: Chrome/Safari best for the demo, IE11 works, haven't tried FF. Still a work in progress but certainly playable for 2-3 levels.

The jQuery plugin basically just does that. the doPIxelsCollide function gets the matrix of points that make up the non-transparent image and compares them. So it basically does a similar compare, but not on the bounding box, but on the actual edges of your image. So if you have two circles, you won't get phantom collision on the empty corners of the images, but on the actual edges of the circle.

Well, I just wanted to give back a little bit to this great community. I've combined two pieces of code to obtain very easy pixel level collision detection. It may not be "perfect" but it seems fairly accurate. Another post on the forum reference jQuery-Collision plugin, which is really efficient at providing fast rectangular detection. It of course, suffers when your images do not resemble boxes. I found this great little piece of code that does pixel level collision detection on canvas objects. Combining the two gives us a nice two layered approach to first determine if objects bounding boxes collide, then get nit-picky about the pixels. So, include both files above, drop a canvas layered below your jQuery objects with the same width & height as your stage and do the following in your game loop/update function: var breakable = player.collision( ".asteroid" ); // jquery-collision if(breakable!==null&&breakable!==undefined&&breakable.length!==0){ // first test bounding box // draw player and enemy on underlying ctx canvas context2D ctx.drawImage(player.get(0), player.position().left, player.position().top); var roid = $(".asteroid"); ctx.drawImage(roid.get(0), roid.position().left, roid.position().top); // get imageData from just the areas we need to check var imgD1 =ctx.getImageData(int(player.position().left), int(player.position().top), int(player.width()), int(player.height())); var imgD2 =ctx.getImageData(roid.position().left,roid.position().top,roid.width(), roid.height()); // now test pixel collisions if(isPixelCollision(imgD1 , player.position().left,player.position().top, imgD2, roid.position().left, roid.position().top, false )){ collide(hitTests[i].id); } ClearCanvas(); // ctx.clearRect(), so we don't leave images behind } I took this from my code, but I think the idea is pretty clear. Combining existing code gives us a pretty decent collision detection. Also, I have found that using the layered canvas allows me to draw some nice effects behind my jQuery objects while still using DOM elements to create a game. I've found that some mobile devices have trouble with straight canvas games so I think this allows me to "turn off" certain effects fairly easy. Hopefully this helps someone while creating a demo / proof-of-concept without spending a ton of time on things like collision detection. At some point, I'll get this in a nice blog post. Cheers, Andrew

Yes indeed, thanks. I had to put the second tween in side of an "onComplete" function of the first and drop the "repeat" parameter. Too close to the trees... however that saying goes!

I'm trying to randomize some settings in a tween. The first time it gets random values, but each iteration thereafter is identical. function RandomTween(e,o,w,h){ TweenMax.to(e, 0, {x:(int(o.left*w)), y:(int(o.top*h)),rotation:getRandomArbitary(1.05,6.25)+"rad"}); TweenMax.to(e, getRandomArbitary(0.5,5), {y: o.animation.to.y*h,repeat:-1,x: o.animation.to.x*w,force3D:true, rotation:getRandomArbitary(1.05,6.25)+"rad",ease:Linear.easeNone,onComplete:function(e,o,w,h){ RandomTween(e,o,w,h); },onCompleteParams:[e,o,w,h]}); } /** * Returns a random number between min and max */ function getRandomArbitary (min, max) { return random() * (max - min) + min; } var seed = 1; function random() { var x = Math.sin(seed++) * 10000; return x - Math.floor(x); } Am I missing something here?

Timeline it is! I haven't tried using timelines yet, still playing with the straight .to but this does the trick nicely.

Bingo. I switched to animating the 'left' property and it works as expected. Thanks for pointing that out!

Here is a fiddle showing the above: http://jsfiddle.net/45C6C/

Ok, so I have the following class defined in my CSS: .flip { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } If I add this to an image, the image flips horizontally as expected. If I add the class dynamically in the onRepeat function, it doesn't flip. I can see the class getting added and removed during animation in the inspector, but the image doesn't flip. Is something in the animation stopping it or something else I'm missing? EDIT: trying to put up a fiddle here now...

Ahh, thanks.I couldn't find that in the getting starting guide and the API doesn't seem to have a search, unless I'm missing it.

I have the following code: TweenMax.to($("#octopus"), 4, {x:'+=' + (screen.width() - $("#octopus").width()*0.8), repeat:-1, yoyo:true,ease:Linear.easeNone,delay:0.3,onComplete:function(){ $("#octopus").toggleClass("flip"); }}); the onComplete never runs as it is an infinite loop, but I'd like to toggle a class while the animation is reversing and then again before it runs. Will I need a play / reverse loop for this or is there a way to run code before each leg of a yoyo? Thanks!

Exactly what I was after! thank you very much.

If I have a set number of coordinates, say a user draws an s-curve with their mouse/finger, what would be the best way to tween an object along the same path? I can loop a bunch to TweenTo calls but I'm wondering if there is a better way? A plugin maybe that helps with this? Thanks for any suggestions.

The suggestions from Rodrigo was exactly what I was after. Thanks for the suggestion on caching. I'm not sure how that would work as I remove and add new element frequently. I don't think a max of 88 elements will slow things down. The only performance issue I've seen is in the actually animation which happens after the DOM queries finish. The jQuery animate isn't used, I just didn't get a chance to refactor that code yet. I'm moving everything to GSAP. I found a few tools called optipng and pngcrush that help reduce draw time of png files and the change over to translate from top/left really made a large difference. I need to go back and try my canvas version again using translate as well, although the jQuery version with top/left animation outperformed the canvas version so not sure if it will be as good as what I'm seeing right now. Thanks for all the pointers folks, greatly appreciated!

Thanks Rodrigo, I will try both of those. Hopefully I can find a way to make it work with the transparency, it puts a nice effect once you start adding backgrounds and such, but that probably does have some effect on performance. I never thought about the drawing aspect of it. And I will post a link to the finished product as well, even if I can't figure out the mobile side, this will be at least be a facebook game. Cheers!