0

I am developing a mobile app for android and ios in the ionic framework which contains a game element which is animated. Currently I am using Adobe After Effects to animate a character which forms part of a game.

I export a PNG sequence from After Effects and embed it in my Ionic app as a sequence of background images that make up the animation. I'm using TexturePacker to create sprite sheets and GSAP TweenMax to run the animation in javascript inside an angular controller.

I'm targeting ios and android so I need to make the animation look good on a wide variety of device screens and resolutions. When the app enters the "game" mode the images need to take up the full screen.

What's the best way to ensure that the game animation looks good on the many different device sizes and resolutions that are out there?

Currently I am creating specifically sized background images for each device and using media queries which seems very tedious and feels like there must be a better approach.

I could just about manage to create these to cover all apple devices, but to cover all android devices is much harder.

user3391835
  • 305
  • 1
  • 3
  • 14

1 Answers1

0

You need to make the image 'fit' your div containing your background-image. This is done by using the background-size property. Just add this line to your CSS:

background-size: 100%;
Mitch
  • 581
  • 5
  • 8
  • Hi Mitch, I have tried this, but it seems to only scale the width to fit the screen, and part of the height of the image is then off the screen. Is there any way to get around that? – user3391835 Nov 23 '15 at 12:11
  • Well, you could try to use this: `background-size: cover;` But it's also probable that you'll run into sizing problems. – Mitch Nov 23 '15 at 12:22
  • Indeed, tried that too - how do people get around this? – user3391835 Nov 23 '15 at 12:38
  • I think your only option is indeed to find 2 or 3 aspect ratios that will cover most of the devices dimensions and user `background-size: cover;`. – Mitch Nov 23 '15 at 13:10
  • Thanks for your input. I honestly through I was doing something wrong and there way a much easier way that I didn't know about... – user3391835 Nov 23 '15 at 13:50