Fast & customizable loading animations written in TypeScript for Phaser 3.

Make an impressive first impression

Give players fun animations to look at while your game is loading!

You've worked tirelessly on your game. Spent weeks or months on it.

Now, it is almost time to share it with the world! 🎉

You just need to test it on a real web server and make sure everything works as it does on your local development environment.

So you make a production build and then upload the files to a web server.

Once the upload is done, you visit the URL and notice a delay before your game starts. 🤔

Then it hits you that this must be from loading the game's assets!

Makes sense. 💡 Atlases, sound effects, and music files are going to take time to load.

But a blank screen is not very user friendly. Players with a slower connection may think it is broken. 😟

A loading animation would make the experience much better! 🤗 Especially an interesting one that can keep people's attention for several seconds.

They'll be so memerized by the animation that they'll actually enjoy the time it took to load the assets.

The best part is that you can add one of these snazzy loading animations in just a few minutes for less than $3 per animation!

Keep reading to learn more about these loading animations and see them all in action. 👇

Native Loading Animations

The loading animations here are written in TypeScript using Phaser 3 GameObjects and Tweens.

This means they can be displayed normally with other GameObjects and behave like everything else within Phaser.

This is unlike CSS versions where you have DOM elements that have to be rendered above Phaser GameObjects.

These animations can be used with UI elements like buttons or in-game elements like doors and everything will be layered properly!

You'll also be able to deal with code that is familiar and uses Phaser 3 concepts you already know. This lets you easily adjust everything about the animations without having to learn the secrets of CSS art or animations.

Every loading animation is created using Shapes or Curves drawn to a Graphics object. There are zero additional assets that need to be downloaded.

They are built to be fast and efficient. Every loading animation is being rendered on this page so that you can see the performance with your own eyes! 👀

Customizable

These animations will look sharp & crisp no matter what size or resolution combination because they are drawn dynamically.

A width and height or radius can be provided when creating a new loading animation. Everything is then laid out proportionally.

You can adjust properties like line or stroke width, colors, and more to get the exact look you want.

Animations in the Plus and Premium tiers are designed to easily work with multiple colors. Examples below are using the many colors of the rainbow 🌈 to show how animations can intelligently cycle through colors where appropriate.

Simple to Use API

Each animation class is designed to use a minimal number of dependencies.

Some Premium animations will depend on single-color versions in a lower tier. Others use a bezier curve easing library to get just the right feel.

Other than that all you need is Phaser 3.

Animations also come with convenience methods to let you quickly make customization using a readable and fluent API. This will let you quickly drop an animation into your project and use it without reading through the more complex drawing and animation code..

For example, here's what you can customize about the Clock animation right out of the box 👇

Easily Add to a Container

Every animation has a method that will attach itself to a given Phaser 3 Container.

This adds the flexibility to let you easily move the animation as a single unit or add additional animations by using a Tween or Timeline to modify position, scale, and other properties of the Container.

Check out the Premium examples to see how we used Containers for a paginated display that slides animations on and off screen.

Lifetime Updates

Every package includes free updates to ensure compatibility with Phaser 3 changes as necessary.

We'll also be adding more animations to different packages over time and you'll get those for free as well!

Buy today to lock-in future savings! 😎

👾 👾 👾

🤖 Basic

Simple and Versatile

Three simple and versatile loading animations that are commonly used and easily recognizable for just $3 each.

🕹 Plus

Make it Colorful

Everything in Basic plus multi-color variants of them. An additional three single-color loading animations are also included. That's 9 loading animatons for just $2.33 each!

🚀 Premium

Playful and Colorful

Everything in Plus & Basic along with 21 additional loading animations with multi-color options. That's 30 loading animations for just $1.50 each.

Make sure you don't miss the second page! Hit the 👇 More button.

Basic

  • ✅ 3 versatile animations
  • ✅ TypeScript & JavaScript
  • ✅ Custom Sizes
  • ✅ Custom Single Color
  • ✅ Easily add to a Container
  • ✅ 1 Example Scene
  • 💰 just $3 each
Buy for $9

Premium 55% off

  • ✅ 33 playful animations
  • ✅ TypeScript & JavaScript
  • ✅ Custom Sizes
  • ✅ Custom Single Color
  • ✅ Custom Multi-Color
  • ✅ Easily add to a Container
  • ✅ 3 Example Scenes
  • 💰 just $1.36 each
Buy for $45

Plus 22% off

  • ✅ 9 colorful animations
  • ✅ TypeScript & JavaScript
  • ✅ Custom Sizes
  • ✅ 3 Custom Single Color
  • ✅ 3 Custom Multi-Color
  • ✅ Easily add to a Container
  • ✅ 2 Example Scenes
  • 💰 just $2.33 each
  • Buy for $21

👾 👾 👾

Frequently Asked Questions

Does this work with Phaser 3.24?

Yes, Phaser 3's Graphics API has not changed from 3.24 to 3.50 so everything will work fine.

Can I use this without TypeScript?

Yes! The source code is written in TypeScript but you can generate ES5 or ES6 JavaScript versions using the included NPM scripts.

You'll find more information on this in the readme.md file.

How do Multi-Color variants work?

Multi-Color variants will take in any number of colors and then rotate through them as appropriate for the specific animation.

For example, Roller Dots Colors will set each dot to a color depending on how many were given and then loop back around to the first provided color if there are more dots than colors.

Other animations like Dual Ring Colors, Hourglass Colors, or Dual Gears only support 2 colors because they only have 2 parts.

You'll get the complete source code so you are also free to add more color options by mixing code from different animations.

Can animations be moved around?

Yes! See the Premium demo to see how they slide in and out.

The recommended way to move these loading animations around is to use the addToContainer() method but most also come with the ability to adjust x and y values.

What configuration options are available?

We tried to expose common options like speed and duration but there are probably configurations that we haven't thought of.

But you'll be able to easily adjust the code for your specific needs.

Each loading animation class is designed to work by itself or with a similarly named base class. This means you can just make a copy of the animation you want and change the values as you see fit.

What is Ourcade?

Glad you asked! Ourcade is a playful game development community for open-mined and optimistic learners and developers. We have tons of content for making games with Phaser 3.

Learn more here!

14 Day Money Back Guarantee

If you find that you actually hate these loading animations then just let us know within 14 days and we'll give you a full refund. No questions asked.