Pathuku Games

Why we added gsap to Hostile Shapes with examples

Integrating GSAP into a PixiJS project was a seamless process. With GSAP's simple API and PixiJS's flexibility, it was easy to add animations to sprites, UI elements, and transitions between game states.

Why PixiJS and GSAP? PixiJS is renowned for its fast and lightweight 2D rendering capabilities, making it a popular choice for creating browser-based games. On the other hand, GSAP is a robust animation library known for its ease of use and versatility. By combining these two technologies, it has been possible to leverage the strengths of both to create visually stunning and highly interactive games.

gsap

How to make a sprite bounce off the sides with PixiJS and gsap

In this example the code initializes a PixiJS application with a specified width and height, and a background color. It then creates a sprite from a PNG image and centers it on the screen. Using GSAP, it animates the sprite to move horizontally back and forth within the application window infinitely, creating a dynamic visual effect.

How to make a array of sprites bounce between sides using gsap

In this example the code initializes a PixiJS application with a specified width and height, along with a background color. It then creates multiple sprites arranged vertically on the screen, each with a specified position and size. Finally, using GSAP, it animates these sprites to move horizontally back and forth within the application window infinitely, with a stagger effect applied to create a dynamic visual display

How to make a array of sprites slide between sides rotate and fadeout using gsap

In this example snippet we create a PixiJS application with a specified width, height, and background color, appending it to the document body. We then iterate through a loop to create seven sprites from a PNG image, positioning them vertically on the screen with equal spacing. Each sprite is centered, given a fixed size, and placed at calculated positions. Finally, GSAP animates these sprites to move horizontally back and forth, while also rotating and changing opacity in a repeating and staggered manner, creating an animated visual effect.

How to create Dynamic Sprite Grid Animations with GSAP and PixiJS

In this example the code sets up a PixiJS application with a specified width and height, and a background color. It then creates a grid of sprites arranged in rows and columns, each sprite being a copy of an image file. These sprites are centered and sized uniformly within the grid, and then added to the stage. Finally, the GSAP library is used to animate the sprites, gradually rotating them 360 degrees while simultaneously fading them in and out in a repeating pattern. The animation effect is staggered across the grid, starting from the center and following a specified easing function

Submit an idea for an example

We value your creativity and input! Help us shape the future of our PixiJS examples by sharing your ideas with us. Whether it's a specific animation, game mechanic, or visual effect you'd like to see demonstrated, we're all ears! Your ideas fuel our inspiration and drive us to create even more captivating content. Submit your suggestions and let's make magic together!

blogideas@pathuku.com

More Blog Posts:

Hostile Shapes


Pathuku Classic

Blogs