Jump to content
Search Community

drewbit last won the day on August 17 2014

drewbit had the most liked content!

drewbit

Members

  • Posts

    26

  • Joined

  • Last visited

  • Days Won

    3

 Content Type 

Posts posted by drewbit

    jQuery + GSAP + Sprite Plugin

    in GSAP

    Posted

    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.

    See the Pen edit?html,js,output by quvuzo (@quvuzo) on CodePen

    • Like 2

    continuous repeating scroll

    in GSAP

    Posted

    The way to do this would be to

    1. Use Javascript to duplicate the repeated image once and append it to the container (no need to put them in markup)
    2. Use CSS to position these images side by side by telling the container not to wrap
    3. Tween the x property of the *container* to the width of the single image (this will move both images in lock)
    4. Repeat the tween infinitely (-1)

    Here is a codepen to demonstrate: 

    See the Pen KpwWgy by sgorneau (@sgorneau) on CodePen

     

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

    • Like 1

    continuous repeating scroll

    in GSAP

    Posted

    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?

    See the Pen edit?html,output by tivupa (@tivupa) on CodePen

    Beginner HTML5 game development tutorial

    in GSAP

    Posted

    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

    • Like 4

    Game Demo

    in GSAP

    Posted

    Nice job, looks great!!!

     

    One question, are you using the bezier plugin to animate the curve paths?. I saw that you're drawing the paths with canvas.

     

    Also I noticed that you're loading both TweenMax.min and TimelineMax.min. TweenMax already has TimelineMax so you're loading an extra unnecessary file, unless there's a specific reason for that of course.

     

    Rodrigo.

     

    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.

    Pixel perfect collision detection

    in GSAP

    Posted

    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.

    • Like 1

    Pixel perfect collision detection

    in GSAP

    Posted

    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

    • Like 1

    Randomizing doesn't change in recursion

    in GSAP

    Posted

    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?

    run code on repeat

    in GSAP

    Posted

    ah, ok it seems now that your issue relates to the fact that the scaleX is being recorded in the full Matrix2D props and you are trying to externally alter those values.

     

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

    run code on repeat

    in GSAP

    Posted

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

    run code on repeat

    in GSAP

    Posted

    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!

     

    Tweening along a defined path

    in GSAP

    Posted

    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. 

    Mobile performance with 88 element grid

    in GSAP

    Posted

    I didn't have time to analyze all the code (unfortunately, as much as I like the challenge, I just can't do free consulting services for general performance fine-tuning), but in addition to echoing Rodrigo's encouragement to use x/y transforms rather than top/left, I also noticed that you're doing a lot of jQuery lookups in the DOM very frequently rather than caching those things as variables. In other words, when you do something like $('#game img[alt='+((row) +'-'+ col)+']'), it's having to search through the DOM and do a lot of work to find that particular element(s), but you'd get better performance if you managed an array or some variables or something that made lookups much faster (without touching the DOM). 

     

    Also, it looks like you're using jQuery's animate() method in some spots and you didn't load the jquery.gsap.js plugin, so those animations will run much slower than if you used GSAP. Our engine is literally up to 20 times faster. 

     

    Good luck!

     

    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!

    Mobile performance with 88 element grid

    in GSAP

    Posted

    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!

1
2
Page 1 of 2  
×
×
  • Create New...