Jump to content

Use PixiJs Spine with transparent background ?


Recommended Posts

Hi Team !

I'm building a new project and I just discovered PixiJs that could match my needs !
But not sure, I need to know if it's do-able :

Can I use PixiJs spine animations (eg : the goblin below) with a transparent background : and display it on my website ?
What I want to do, is that when my users will be on my website (video game website), the goblin comes to the screen and start talking to them, but still with my website in background :)
(The goblin will be like this characters in video games that tell you the story about why you're here, ie prof. Chen in pokemon ;))

Thanks a lot !


Link to comment
Share on other sites

yes, this kind of process can be done using 2 way in my opinion.

1: If you are an good animator and know well afterEffect, simply use
spriteSheetanimations from pixijs and load with texturePacker json,
You will have unequaled performance, and in addition to enjoying the software filter FX(motionBlur).
Also easy rigging with free plugin DUIK.


2: If you want a complex animation but interactive and easy to manage (interactive scripting).
Use Spine2D
Hard for performance but it is very easy interactivity to manage and ivan did a very good plugin for the runtime.

The 2 approach requires you to study complex scripting.

for game context i choose option #2 , but for webcontext i choose option #1

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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