Jump to content


  • Posts

  • Joined

  • Last visited


2 Newbie

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Wow. You just made me realize that we are using this other library in our project. You are right man, thanks for pointing out, and of course, I prefer GSAP, as I used it for another projects (PIXIjs, SVG..) and it works like a charm. Rock on
  2. @Carl sorry for posting it in different places, but: 1. I posted it on github issues because I think it could be an issue. 2. I posted it on a 2013 post, without realizing the year, and then when I realized: 3. I posted it here as a new post. Thanks and sorry for the trouble
  3. Hi there @Sahil and thanks for your kind answer. I guess that by "many methods" you mean this line: controls.setRotation(this.x, this.y); Yes, that is part of my app logic, but anyway I wanted to focus on the important stuff and that is the x and y values that onUpdate is bringing on every call. Your example works, and thanks to you I could mine work too. What I want to state is that, the only difference between your code and mine, is: - My animation time was specified in milliseconds, and in this case it should be seconds. - I was using new TWEEN.Tween... and you are just using the static class to declare a Tween and then changing values inside onUpdate. What comes up from this, is that there is no way to make directionalRotation work when you try to create a Tween the way I was doing it. It only works your way, but I don't know why... thanks a lot, Ricardo
  4. Sorry for the starting and goTo values. They are not like in the example, but it doesn't matter... pretty similar and good enough for everybody to see the problem.. Thanks a lot in advance, Ricardo
  5. Hello there. I'm trying to make the directional rotation plugin work with this simple object, however, it is not behaving properly. I tried to set up a codepen but it says TWEEN is not defined, and I'm not sure why. The thing is, I would like to go the short way always, setting up rotation in radians inside a sphere. But it is not working as expected. Here is what the console is throwing:
  6. Hello there! What if I would like to to that with a variable? Something like: let cameraLookatTransition = { x: cameraLookat.x, y: cameraLookat.y }; let cameraActualLookat = { x: this.controls.getPolarAngle(), y: this.controls.getAzimuthalAngle() }; let actualTween = new TWEEN.Tween(cameraActualLookat) .to(cameraLookatTransition, this.easingDuration) .onUpdate(function(actualLookAt) { controls.setRotation(this.x, this.y) }) .easing(TWEEN.Easing.Sinusoidal.Out) .start(); Now, this is bringing the absolute way so to say, that is, in many cases, the longest way and then it is causing my orbitCamera (threeJS) spinning really fast on a weird way. is there any way to provide the Tween a kind of threshold? So, in my case, it would be 3.14 and -3.14 and then it would add or substract to go the shortest way. Thanks a lot... Ricardo
  7. Thank you very much for all this information, it is really useful! The Object I'm getting from pixi-svg-loader is great, and everything inside it keeps/has its position perfectly, so when I attach it to my stage it renders fine. The only problem I'm having is when I try to, for example, use AnimatedSprite from PixiJS in order to create an animation between textures and make my character "talk". What is happening is that my textures are losing the original position and they are rendering on the top left corner of my Object. I inspect them with the great Chrome tool that you mentioned, but they don't have any position, they must have been rendered right at the spot and therefore don't keep a position inside the parent Container, right? Maybe I should try with the texture swapping...
  8. What if I don't use Pixijs? is there a performant solution so I can draw my full SVG with all the transforms in it, into a canvas? Thanks so much
  9. Let me ask something else... So, having a stage structure like the one you see attached: Could I keep doing morphs on what used to be SVG groups, or am I getting something wrong? My guess is that I won't be able to do that anymore since now they are just.. sprites. For example, what we were doing was to morph all paths in grup ala_der_backup to ala_der_meneito_1, ala_der_meneito_2, and so on... creating an affect of flying for our character. I guess we should do that just going from one Container to the next one, making them visible one by one or something like that? Sorry for this obvious questions, as I said, I'm new to all this... Thanks a lot, Ricardo
  10. Just made it show up. It was an issue with the size of my sprites... got to play with that and make it show responsively to the screen!
  11. Wow, what an adventure it is being to make this work, hahaha! I'll share everything about it as soon as it is finished. By now, I got my svg fully loaded into a stage with all the containers nicely organized... just not showing up when I try to render it.. This is being harder than taking the ring to Mordor. Cheers
  12. Like this: /* Loads the SVG into the DOM and creates tweens ready for playback @param {Object} canvas @param {String} svg @param {Array} animations @param {Int} duration @param {Function} callback */ loadSVG: function(canvas, svgSrc, svgId, viewBox, callback) { var self = this; Snap.load(svgSrc, function(data) { // Place SVG nodes into DOM tree canvas.append(data); if (viewBox != null) { Snap(svgId).attr({viewBox:viewBox}); } if (typeof callback === "function") { callback(); } }); } I have my svg file in my project, not already embedded into my HTML. I did it this way so my Javascript is more modular and ready to run in different projects. I initialize the "class" that contains this function with some options and then I load the SVG. All the core code that runs the tweens is inspired by this component that a guy had on his github: https://github.com/hellomichael/svg-animation/blob/master/svgAnimation.js It is all pretty similar, but using GSAP for timelines and transforms and then Snap for morphs. Cheers!
  13. I have been trying to make https://github.com/blunt1337/pixi-svg-loader work but it doesn't look like a solid option. The documentation is poor and up to know I couldn't make it work. Certainly, I think it would be faster for me and this is the option I prefer, as I'm not really a game designer, but a web one. I opened an issue on that github so I'll see tomorrow if the creator can help me a little bit. Of course, I would share here all my experience and learnings. I am very grateful for all your help, thanks a lot @OSUblake we'll be in touch! Ricardo
  14. Hello again! I managed to integrate my TimelineMax with Pixi.js canvas and it works like a charm. However, there is now some challenges that I must overcome. For example, I don't know how to have access to all my SVG groups so I can transform and move independent parts of my character. Should I use pixi-spine? I'm not sure about how to use it. Tried looking for an example of an atlas.json configuration but I found none. Thank you very much in advance. Ricardo
  15. WOW. Thank you so much for your answer. So, pretty much, what I should do is use Pixi.js as a renderer and keep all the logic I have with GSAP and snap for all my transforms and tweens, right? I saw this link on another thread of this forum: https://github.com/noprotocol/gsap-pixi-plugin I'm not sure if this is what I would need.. I will try to connect my timelines with Pixi so I can render on a full screen canvas. Thanks a lot