Jump to content
Search Community

Hamatek

Members
  • Posts

    2
  • Joined

  • Last visited

Hamatek's Achievements

  1. Hello OSUblake, Thanks for getting back to me, I will try to post some use case in codePen when I got more time. Regarding sdrasner I try to get in touch with her few weeks ago but unfortunately she doesn't respond I am building a 1v1 2D mind guessing game, animation are mostly feedback animation unpon player actions. There is a few infinite animation that rotate some complex SVG illustration such has character or UI there is only a bit of gradients used in those SVG no transparency or filters. All the game loop are inside react components and initialized like below in their mount cycle. TweenMax.to(character, 2, { skewX: -1, transformOrigin: "bottom", repeat: -1, ease: "Power1.easeOut", yoyo: true }); I didn't know react-game-kit I will look into it thank you ~ I did look into phaser.io but it seems too much of a learning curve for me, and it felt overkill for what my game needs.
  2. Hello, First thanks for this nice library and fine the documentation you produced. I am working on a 2D SVG game built with react.js. Why react? Because its something I have already used and know and also because react.js is the hot lib nowadays... Turn out that I needed a solution to animate my SVG, I first tried plain CSS animation but the result weren't the same in different browser or platforms so I spent some time to look for a more robust solution and I end up going for GSAP. I quickly found out that GSAP and React aren't the best friend but things could be worked out, after reading forum I tried react-gsap-enhancer but well It didn't solve my issues. One of my goals was to have some SVG element animation in a loop inside different components and containers all getting their props from redux store. What happened is that loop were working fine at first but at some point after some rendering due to game activity loop animation stopped definitely... , I solved some of those issues by creating a react component (not stateless) for each svg I wanted to animate, using ref callback to get the element and starting the animation when componentDidMount() and preventing the component the rerender using shouldComponentUpdate(){return false} in order to prevent react from rerendering the component on every tick of a timer for example. So I thought I found a solution, I got my simple animation loop going in background only tweening 1 or 2 attribute like scale, a total of 5+ animation loop. Thats when I started to realized that the app got slower and checking the CPU usage it was at best around 140 just in idle mode (only open the web page), i removed all loop and it was back to 0 in idle mode. Thus here I come asking for help..., I do need animations for the game... I was about to go premium so I could add even more animation like particles and text animation... but now I do not know what I can do to prevent animation from killing players CPU also the game main target will be mobile phone... Is there anyway to hire a GSAP expert to look into those issues ? (please note its an indie game not so much $) Has anyone managed to make react and GSAP play well together to animate a bit more than just a svg rectangle or circle... but complex SVG with hundreds of paths ?
×
×
  • Create New...