Phaser 2.4 - Dynamic adding background animation

Recommended Posts

Hi all, I have this problem.


I have to create a background animation using about 40 jpg. (backgroun1,jpg.....background40.jpg).

Each background image is large like a stage, so about 840 px.


I tried drawing on BitmapData but the size grows too much.


What is the correct way to create a standard animation adding each single frame after loading all images (back1...back40.jpg)?



for (var i=0; i< LOOP_FRAME_COUNT; i++){
  game.load.image(, path + "loop/" +;


Thanks in advance.

Share this post

Link to post
Share on other sites

is there no way you can simplify your backgrounds to use reusable elements eg Tiles, TileSprites, repeated symbols etc? 40 full sized images sounds like a lot to be throwing about. 


when you say animation do you mean the background is static but the frames change? you can try loadTexture but i don't know how fast it will be . does not sound like a good idea 

Calling this method causes a WebGL texture update, so use sparingly or in low-intensity portions of your game, or if you know the new texture is already on the GPU.

have you thought about using video?

Share this post

Link to post
Share on other sites

* have simpler assets for mobile

* construct a scene out of smaller moving parts

* I think you can safely use a 2048x2048 texture ... that would presumably let you use 32 frames of  512x256 image without having to switch texture on the gpu.

* potentially use scanline overlay to compensate for using a lower resolution


the best solution depends on your design and target platforms


have a look here

Share this post

Link to post
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.