Jump to content
Search Community

Can you use Draggable with Pixijs?

mspanish test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

It depends on what you're trying to do. Draggable only works with DOM elements, so you can't target a Pixi object directly, but you can still work with them using a proxy or dummy element. I actually just posted something about this. Check out the first demo in this post. If you click on the pan button, you can drag and throw Mario around using Draggable.

https://greensock.com/forums/topic/15787-floor-plan-setup-draggable/?p=68943

 

Do you think you can make a demo of what you're trying to do, or would like to do?

 

 

.

  • Like 1
Link to comment
Share on other sites

Hey thanks for the speedy reply! 

 

I will throw together  a Codepen of what i'm doing - it's just a simple letters drag and drop into a fish's mouth - the app is to teach reading to kids, and I want it to be really smooth on mobile so I'm experimenting with Pixijs. It's amazing how other than draggable very few people have paid attention to smooth drag and throw, which is pretty much the basis of most kids' learning apps.  The Pixijs native drag is really limited and doesn't work very well either.  

 

I'll be back in a little while with a Codepen for you :)

Link to comment
Share on other sites

as I'm doing this codepen it strikes me that i should probably ask around about an alternative to Pixijs - as I'm not sure I really even need it, and it's a pretty big pain to try and integrate with stuff!

 

Let me tell you what i'm looking for:

 

1- fast loading graphics - most of the scenes/pages in my app won't have more than 30 on a page, with a couple of sprite animations running and pretty much everything needs to be "animatable" = kids love stuff to happen when they touch it - and this app is for developmentally disabled kids (autism, dyslexia, and deaf are my primary targets - so the visuals are really important).  I've made a texture atlas and sprite sheets as I read that would speed up performance a lot - but if I ditch Pixijs i'll need another way to load them.

 

2-buttery smooth dragging and dropping. This is vital - and draggable is the best I've found, and really the only for JS! I just can't take the time to learn Lua or GDScript or something in order to make this app, so I really need to find a JS solution that will be as smooth as possible on IOS and Android.

 

3- smooth particles - the demo on Codepen of the draggng ball w/ cool green round particles coming out when you touch is about what I need - 

See the Pen hCElc by GreenSock (@GreenSock) on CodePen

- I need to be able to make some colored stars particles, confetti and some small bubbles for water scenes (I could probably use animation for the bubbles as that would be less CPU intensive, right?

 

Does anybody have an idea of a framework that would help make this easier, to compliment Greensock's GSAP, Draggable, and the Throw Props and Physics plugins?

Link to comment
Share on other sites

How you making out with zim.js? It looks really nice, but seems to have a really small community.

 

I did have something else in mind if interested, Phaser. It's a framework/game engine built on top of Pixi. It has everything you could possibly ever need to create an interactive app, and lots of community resources. Also, the company behind Phaser, PhotonStorm, is primarily focused on building apps for children.

 

Pixi really isn't a framework/game engine. It's rendering engine, so it doesn't come with a lot stuff to help build an app from scratch. Using Phaser to manage Pixi definitely makes creating stuff easier. 

 

And since I'm sure this question is going to pop up again, I went ahead and made a demo showing how to create a Draggable with ThrowProps inside of Pixi. 

See the Pen 50e73afa5b9cd1f7141695524da09df4 by osublake (@osublake) on CodePen

 

.

  • Like 2
Link to comment
Share on other sites

Hey That's lovely!

 

to be honest not making out so great, Zim is amazing if i were making browser stuff, but it's not very optimized for mobile, and I'm bound to have issues with regards to performance. This app is mainly for the app stores, as my own child will only do it on the tablet and not on the computer - so I want to focus on the stores primarily, and web as a secondary platform.

 

After playing around w/ things like Unity (agggh) and Corona (actually quite nice, but samples are too limited for me w/ the lack of Lua knowledge) - I can upon Springroll, which is an "educational js ecosystem". They've got some great stuff using createJS and PixijS - they respond really fast on their issues board, and the guy who has helped me also authored the pixi particles engine which is very cool.

 

But.... it's still back to the drag and drop! Having a ticker involved in the drag and drop seems to be be a really bad idea - I read that will kill my app - but I found this lovely example of a multiple touch smooth drag using createJS here

 

But it uses the ticker nonstop so I decided I can't use it.

 

Your example is GREAT!  Would this be ok for performance? 

 

I looked at Phaser and thought 700 KB for the .min seemed really bloated for what I need, but maybe I'll pass back through.  I have basically no budget right now other than maybe for throw props :) but maybe later I can also look at some of the paid plugins.

 

Thanks again - I haven't posted much lately but I've used Greensock since AS3, and it's nice to see you all consistently mentioned as the smoothest and best performing animation library.

  • Like 1
Link to comment
Share on other sites

Hey 1 question: since you are using a DIV as a proxy, how would that convert if compiling to a native app via something like Cordova or Cocoon.io?  Cocoon seems to have 2 options, either Canvas+ or Webview, and apparently the Webview which uses DOM elements is a lot slower and less "native"-y.

 

Would using this proxy force you to choose that option?

Link to comment
Share on other sites

I must say, what you're going through sounds exactly like what I went through several years ago. I started out making educational apps, like this one for learning the Cherokee alphabet...

 

O3ADM7q.png

 

 

My requirements were to have solid performance on mobile devices and to be able to distribute the app through stores. It probably took me 2 years before I was able to finally find a solution that made all that possible. Phaser and Cocoon is what I finally settled on.

 

I spent a lot of time looking at some of the same stuff you did, Unity, Corona, Cocos. I also burned myself several times investing in projects on GitHub that looked like they had a lot of potential, but ended being abandoned several months later. I've learned my lesson. The first thing I do when looking at something on GitHub is check when the last open and closed issue was.

 

I was actually going to bring up SpringRoll in my previous post, but decided not to because I think it might be on it's last leg. I could be wrong, but the company behind it, CloudKid, is now defunct. They made a lot cool stuff, and it's shame to see them go, but all is not lost. A lot of those developers have been contributing to Pixi (Matt Karl, Andrew Start).

 

If you use Adobe AnimtaeCC, you should check out the exporter Matt just released, PixiAnimate.

https://creative.adobe.com/addons/products/14345#.WJBJ0RsrKUl

 

And I'm quite familiar with Pixi Particles. Here's a demo I made using only trail particles. Move your mouse around, and the orbs will follow it.

http://codepen.io/osublake/full/GpmPGy/

 

So yeah, as long as you're using some framework based on Pixi, performance should not be an issue for you as it can use WebGL, which is insanely fast. Check out the bunny benchmark! 

http://www.goodboydigital.com/pixijs/bunnymark_v3/

 

I'm kind of curious where you heard that using a ticker will kill your app. Maybe battery life on mobile, but it won't hurt performance if done correctly. You can also turn a ticker off when not needed. But using some type of ticker is pretty much standard operating procedure for canvas based apps as it usually drives some type of rendering loop. Without it, you wouldn't have all those nice, smooth animations. In my demo, I was using the same ticker GSAP uses to drive every animation.

 

About the file size of Phaser, I wouldn't worry about that too much. If you're distributing an app, it will be included with it, and if you using Phaser inside the browser, you can use a CDN, and it will cache it in the user's browser, so the download size will 0kb.

 

About my Draggable demo and the proxy element. Doing that inside of Cordova shouldn't be a problem as it's running inside an actual browser web view. Cocoon on the hand is a little bit different, well at least for the Canvas+, which is probably what you want. To be honest, I've actually never tried to do that, so I can't say.

 

It might be better to just use Pixi's interaction manager. You can still use the ThrowPropsPlugin with it. All you have do to is track the velocity of whatever you're dragging using the VelocityTracker. That's a utility class that comes with the ThrowPropsPlugin.

 

Check it out!

 

 

See the Pen dNdbwW by osublake (@osublake) on CodePen

 

You can also do multi-touch using the same technique.

 

.

  • Like 2
Link to comment
Share on other sites

Your Cherokee learning app looks really great, especially for HTML5! Boy sometimes I miss the days of Flash. You could just build something and know it would look great without worrying so much about the positioning woes that have come w/ moving to HTML5.  

 

Springroll's demos are super limited and don't work as advertised - they assume you've coded other stuff, which isn't a great way to do demos. The project looks like it had great promise but the docs are also 1/2 abandoned, at least on the wiki. 

 

Yeah I even tend to search Github based on "recently updated" - as I've also been burned by abandoned stuff before! 

 

I do want a framework I can grow with - I've done lots of kids stuff (dress up, learn to read, spanish teaching, etc) - but never really a GAME game, It would be really cool since this is an app for kids who really need things to be interesting to have some actual game features, maybe even a platformer thingy  - I'd love to learn how to do some of that stuff.

 

As for the ticker I read that here and someplace else https://blog.toggl.com/2013/05/6-performance-tips-for-html-canvas-and-createjs/

 

So I guess you're right about the ticker being necessary any time I have animation - the other drag and drop thing I had used it all the time, you couldn't disable it when the objects weren't being touched.  Seems like I should be able to pause it but the createJS setPaused(true) didn't seem to work, and using my own flag seemed to make it choppy when the user dragged.

 

I think I'm over thinking stuff I don't need to right now :)

 

I'll look at your samples - I really appreciate the advice and help, I'll be really happy to post my app once it comes online too - it's a real labor of love for me as I'm hoping ot helps my daughter learn to read despite the fact that she is still nonverbal at 4.  She LOVES sorting apps though, and can remember tons of things throughout all of her apps like Toca Boca and others - so I have a lot of hope that a visual approach can help her really sink her teeth into reading.

Link to comment
Share on other sites

  • 1 month later...

Hi @mspanish,

 

I missed your reply, but how are you making out? I've been noticing your name on GitHub for some Pixi related stuff, so I guess that's what you decided on using?

 

I've been working on some gestures with Pixi. I got pinch-to-zoom to work, and sort of have two-finger rotation working with ThrowProps. I'll post a demo when I have zoom and rotation working together.

 

I saw your issues about shockwaves and ripples. For underwater stuff, you should look into creating your own displacement maps. They're not too hard make in something like Photoshop. Just create an image of the RGB channel with the most contrast. Here's a tutorial on that.

https://digital-photography-school.com/get-creative-displacement-maps-photoshop/

 

 

Check it out! It creates a very nice like looking water effect...

See the Pen ?editors=0010 by osublake (@osublake) on CodePen

 

 

.

Link to comment
Share on other sites

Hey Blake! I'm just writing about you in a new blog I started :) I stopped by to grab the link to that great sample you made for me of the buttery smooth drag and drop using Pixi and Greensock.

 

Things are going great - I'm trying to upload the demo of my app today or tomorrow - I'll be sure to post a link here. On a weird side note I've applied for this opportunity to compete to be selected for a free trip to interview for jobs in Wellington, New Zealand (LookSee) - so I'm trying to clean up some of my stuff and build a blog that makes me sound like I know what I'm talking about, lol. I'd love to leave behind the Alaskan winters for a few years, and we've read great things about the schools and outdoor lifestyle for families there. I was reading about the thousands of devs who have applied, and I thought "what they should really do is try to get the guys from GREENSOCK to move there" :)

 

I'll look at those links today too - THANK YOU!! Spine has been uber cool too - they were very kind in offering me a free license for a little while to help get the app off the ground - and Spine has totally changed the app, although I'm also still using TweenMax for a lot of stuff.

 

thanks again

Stacey

  • Like 2
Link to comment
Share on other sites

Beware I'm sure there are still glitches, and there's lots of cleanup to do - but here is a link to the live demo of the Learn to Read Visually app!  No website or anything yet, and the app is far from done. You have to match about 7 things to move through each scene, and right now I have 4 activities live. Just about all tweening uses GSAP - as well as the drag and drop,  the animation stuff is Spine.

 

sub.png

  • Like 1
Link to comment
Share on other sites

  • 3 years later...

Hi

I've started doing some experimentation with PIXI.

https://fonosteps.com/pt/demo

(sorry is in Portuguese, but there is still not a lot to see :p)

 

I'm struggling a bit with the game "scenes" management, to optimize performance, not sure about using sprites, containers, movieclips (apparently not available on V5), would love to know your thoughts on that.

 

 

A more practical question, how you recommend animate a dropshadowfilter?

@OSUblake

thank you!

 

Link to comment
Share on other sites

On 10/1/2020 at 12:18 PM, jlgouveia said:

I've started doing some experimentation with PIXI.

https://fonosteps.com/pt/demo

(sorry is in Portuguese, but there is still not a lot to see :p)

 

Looks like you're off to a good start.

 

On 10/1/2020 at 12:18 PM, jlgouveia said:

I'm struggling a bit with the game "scenes" management, to optimize performance, not sure about using sprites, containers, movieclips (apparently not available on V5), would love to know your thoughts on that.

 

You can do movieclips.

 

For scene management, you can group everything inside a container. When a scene isn't in use, remove the scene container from the stage so it doesn't get rendered. If memory becomes an issue, you should probably destroy all the display objects in that container when the scene isn't active.

 

On 10/1/2020 at 12:18 PM, jlgouveia said:

A more practical question, how you recommend animate a dropshadowfilter?

 

Just animate whatever properties you want.

 

const dropShadow = new PIXI.filters.DropShadowFilter();

mySprite.filters = [dropShadow];

gsap.to(dropShadow, {
  rotation: 100,
  blur: 5,
  distance: 10
});

 

  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...