Maelfyn last won the day on October 26 2014

Maelfyn had the most liked content!

Maelfyn

BusinessGreen
  • Content count

    77
  • Joined

  • Last visited

  • Days Won

    2

Maelfyn last won the day on October 26 2014

Maelfyn had the most liked content!

Community Reputation

39 Newbie

About Maelfyn

  • Rank
    Advanced Member
  • Birthday 01/29/1979

Contact Methods

Profile Information

  • Gender
    Male
  • Location
    Maryland
  • Interests
    Web development, LAMP stack, animation, Christianity, King James Bible

Recent Profile Visitors

3,719 profile views
  1. I plan to distribute my HTML5 game as a nwjs app and I am using GSAP for all of my animations. I was wondering how much performance would be improved if there was a GSAP version that only targeted the latest Chrome builds for people using nwjs or Electron. Is this worth it? Would it noticeably enhance animation performance due to skipping all feature and version detection? This was just something I was thinking about and I was curious if it was on your (Jack, Carl) radar.
  2. Maelfyn

    SteppedEase - easing between between frames?

    That's a good idea, Blake. You could use division to round down to the nearest hundred to set the backgroundPosition.
  3. Maelfyn

    SteppedEase - easing between between frames?

    Haven't messed with that before. Here's how I'm currently solving my problem... I'm using a few delayed sets that transition into a SteppedEase. This works, but I'll look into CustomEase, too. tl.set(test.mob.element, { overwrite: 1, backgroundPosition: '0% -300%' }).set(test.mob.element, { backgroundPosition: '-100% -300%' }, '+=.13') .set(test.mob.element, { backgroundPosition: '-200% -300%' }, '+=.12') .set(test.mob.element, { backgroundPosition: '-300% -300%' }, '+=.11') .to(test.mob.element, .4, { startAt: { backgroundPosition: '-400% -300%' }, backgroundPosition: '-900% -300%', ease: SteppedEase.config(5), onComplete: function(){ var filters = { opacity: 'opacity(100%)', brightness: "brightness(100%)" }; var tl = new TimelineMax({ onUpdate: function(){ test.filters.death(test.mob.element, filters); } }); tl.to(filters, 1.5, { opacity: 'opacity(0%)', brightness: "brightness(0%)" }); } });
  4. SteppedEase is convenient for animating in a linear fashion between frames in a spritesheet, but what if I want an easing between each step? Is this possible? Let's say I want a monster to die and go through 10 frames of animation, but I don't want it to go through the frames in linear jumps. What if I'd like a Quad.easeOut through the steps for a more dramatic effect? Is that possible?
  5. Maelfyn

    Can we create a basic retro game using GSAP?

    Thanks, Warren. Note that when I developed those games, I was new to web development. I was not even a professional web developer, so someone with more experience should be able to make something much more polished. Those games were developed with a 4-digit budget.
  6. Maelfyn

    Can we create a basic retro game using GSAP?

    I've made a few games using GSAP: Nevergrind - Single-Player RPG Firmament Wars - Realtime Multiplayer Strategy Game I have no regrets using GSAP. It's my favorite tool and as far as I'm concerned it hasn't limited me in any way and I feel very productive with it. I plan to make a 3rd game, a multiplayer co-operative rogue-like follow-up to Nevergrind. Developing games with GSAP is a pure joy. If needed you can even pause the game, as long as you don't use setTimeout or setInterval. As long as every timer and animation is created using GSAP (TweenMax, TimelineMax, TweenMax.delayedCall), you can just do TweenMax.pauseAll() to pause the game (this can be done in Nevergrind by hitting ESC). Since GSAP can tween any object value using any ease, it's simple to Tween using the set method, onUpdate, over time, or whatever kind of animating you need to do. Hope that helps. Discovering GSAP was like finding the holy grail for me because I was seriously using JQuery's .animate before that.
  7. Probably not as much as I should. Thanks, Blake.
  8. I think my main concern is that I want it to perform well at 1920 x 1080, and I'm not sure canvas will be happy about that. I want players to be able to go full screen and use their whole monitor. I'll just have to experiment and find out how it performs.
  9. Seems interesting. I might experiment with this a bit. The Outrun demo is impressive. I am just leery about over-engineering a solution when a simple one will do. I'm not really convinced that there's a robust 3D solution out there for browsers yet. Thanks!
  10. Yeah, I don't need collision detection or anything fancy like that. Just something to indicate progress along a rail-like hallway system found in games like Darkest Dungeon.
  11. This is perhaps not the best place for this question, but I know there's a lot of animation expertise in this forum. I generally don't want to use canvas due to its complexity and dev pain, so I am considering developing a simple pseudo 3d environment using GSAP. Think Phantasy Star 1 dungeon hallways, which was developed in 1987 on the Sega Master System. Can the DOM do something like this 30 years later? I don't need hills or anything complex like that. Just flat surfaces. Moving down hallways. Something suitable to a dungeon crawler RPG. The most complicated thing I would like is turning 90 degree corners. I think moving down a straight hallway wouldn't be too hard to develop. I think this could be done using either DOM or SVG... I'm curious if anyone has any pointers, advice, or general guidance on creating something like this using GSAP. Regardless, I am going to attempt developing something like this. I'm just curious if others have tried something similar. Sample video to get an idea what I have in mind:
  12. Maelfyn

    Animating multiple CSS filters?

    I just experimented with this tonight. In Chrome I was able to independently tween 1000 different 382x400 images using an infinite looping hue rotation. In Chrome it animated it flawlessly. I noticed that Firefox was choppier, but it still performed far beyond my expectations. I only expect to have 10 or 20 images on the screen, so it should perform very well on any modern desktop/browser combo.
  13. Maelfyn

    Animating multiple CSS filters?

    Kind of off-topic, but how much filtering can modern desktop browsers handle? Can I blur 2? 10? 20? 100 images? When would a desktop choke? This is something I will be experimenting with myself when I get the chance. I'm also curious about the performance compared to canvas.
  14. Maelfyn

    Animating multiple CSS filters?

    Perfect. This works perfectly! I was having a hard time getting the tween to actually work, but now it's working perfectly. Here's what I was using for folks that are interested: TweenMax.to('#mainBG', 3, { startAt: { filter: 'invert(0%) grayscale(0%) brightness(100%) sepia(0%) saturate(100%) hue-rotate(0deg)' }, filter: 'invert(100%) grayscale(100%) brightness(100%) sepia(100%) saturate(400%) hue-rotate(120deg)' });
  15. Maelfyn

    Animating multiple CSS filters?

    I was having issues setting multiple CSS filters on an element. I wanted to create a colorization filter similar to what you'd see in GIMP or Photoshop. It seems like some filters don't play nicely with others. hue-rotate seems to be one culprit, among others: TweenMax.set('#main-bg', { filter: 'invert(40%)', filter: 'greyscale(100%)', filter: 'brightness(40%)', filter: 'sepia(100%)', filter: 'saturate(400%)', filter: 'hue-rotate(-50deg)' }); It wasn't colorizing the element red as I expected. Is this possible using GSAP or are there known issues with tweening multiple filters? Is my syntax wrong? Do I need to set it as one property as an object or something like that?