Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

drewbit last won the day on August 17 2014

drewbit had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


drewbit last won the day on August 17 2014

drewbit had the most liked content!

Community Reputation

15 Newbie

About drewbit

  • Rank
  1. 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 w
  2. 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
  3. Exactly what I was after, but as usual, just over thinking it. Thanks.
  4. 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" al
  5. The series is complete and the code on github.
  6. Part 2 is up. Covers Cloud based development with Codio and adds collision detection and the GSAP Draggable plugin.
  7. 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
  8. Ditto for the lock-to-center request.
  9. FYI, you can now see this in action: http://bordereastcreative.com/spacecute/game.html.
  10. drewbit

    Game Demo

    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.
  11. drewbit

    Game Demo

    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.
  12. 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.
  13. 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 objec
  14. 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!
  15. 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 ma