« Episode 1 - >You Are Here< | Main
Wednesday
Feb092011

Pilot Episode - Painting the Roses Red

Live Wallpapers
Live wallpapers are rich, animated, and interactive backgrounds. You can think of it like an application because it has access to the same resources. That means 2D and 3D graphics, GPS, Accelerometer, and network access/internet. Live Wallpapers are a combination of a Canvas and a Service. A canvas is like a real canvas except you will be drawing on it using bitmaps, colours, paint, and text. A service is a long running operation that happens outside of an application's context, in this case it handles updating our canvas. It should be noted though that Live Wallpapers are only available as of Android 2.1 (Eclair)(90% of Android devices are on 2.1 and above).

Demo Project: https://market.android.com/details?id=ca.mobicartel.valentinelwp
Source Code: http://www.codinggreenrobots.com/downloads/open-source-projects/ValentineLWP.zip

Optimization
Optimize your code and make it lean! Use the least amount of memory possible because the user will not be expecting a wallpaper to slow down their device and drain the battery. For those of you who don’t know how to use less memory, here’s some quick tips:

  • Custom objects are expensive, use them sparingly
  • Do costly tasks in advance and store them in an instance variable
  • Use primitive over wrapped types


Start by creating a project. Feel free to skip creating an activity with it. Create a class that extends WallpaperService. After that you will have to create an Engine that will handle the lifecycle and drawing of the wallpaper. (Engine has to be nested)

Engine

  • onCreate()
    • Get the display size
    • Initialize variables and set up resources needed for scene
  • Initialization of scene
    • set background based on screen size, this helps deal with the HDPI and HDPI854 issue
    • create ArrayList of hearts in advance, so we don’t have to create new bitmaps on the fly
    • Create Cupid and the Paint we will use to draw the text.
  • Visibility Changes
    • We need to make sure that when the wallpaper is not visible that we stop drawing new frames. This will ensure we save on processing power when it is not needed
  • Offset Changes, Scrolling
    • We need to grab the offset changes and apply them to an instance variable to be used later for drawing
  • drawFrame()
    • Get a canvas to draw on from the Wallpaper Engine
    • Update the physics and then draw the scene
    • Start the thread handler, delay it to a reasonable frame rate so that we can give the CPU time to rest before the next frame
  • updatePhsyics()
    • Get the time since the last update so we can move objects at the same velocity every frame
    • Use Iterators instead of For-Each Loops, this way you don’t create copies and you are referencing the actual object in memory
    • We move each heart based on the last update interval
    • Use if statements to run blocks of code when you want them to
    • When the arrow_activated boolean is true, we can move the arrow just like we did with the hearts
    • Make sure you reset objects or get rid of objects when they leave the visible display area.
  • drawScene()
    • Everything in your scene needs to be redrawn with every new frame
    • Make sure you draw things in the order you want them to appear starting with the background moving towards the foreground
    • Draw the background, use the offset as the “x” value so that when the user scrolls the background moves. This is a common thing to do with wallpapers, but if you wish you can also make you background static and just use 0 for x
    • Draw the “i love you” text using the paint created earlier
    • Draw each of the hearts, once again use an iterator
    • Only draw the arrow if its been activated
    • Finally draw cupid
    • If you wish to have images stay with the background and not move on each scroll of the screen, just add the offset to its “x” value
  • String Resources
    • Put your app name and app description in your string resources
  • LWP Configuration File
    • Add pointers to your Live Wallpapers thumbnail and description
  • Android Manifest
    • Add your wallpaper service to the manifest using a “Service” tag
    • Give it an “android.permission.BIND_WALLPAPER” permission
    • Intent Filter, “android.service.wallpaper.WallpaperService”
    • Meta Data, pointer to configuration file
    • Add a “uses live_wallpaper” line so that only live wallpaper compatible devices will see your app in the market.



Using Photoshop CS5 - Designing Graphical Assets

  • Brainstorm LWP Concepts
  • Download graphical ideas - (clipart.com - istockphoto.com)
  • Find digital patterns - textures for backgrounds
  • HDPI - High Density 240dpi - 480 X 800
  • MDPI Medium Desity 160dpi - 320 X 480
  • Multiple Layers - Background - Static Assets
  • Blending Options - Vector Images - Smart Objects
  • Extracting Assets from Demo - Assets - Export
  • Export as .PNG - 24bit - w/ transparency enabled
  • Dropbox - Sync - Explain our workflow - folder structure
  • Demo of all Valentine’s Day Web Market
  • Review all assets upload to Developer publishing account

Reader Comments (1)

I want to make some live wallpaper with my essay service! Your FAQ very and very interesting! I will use it in future!

January 10, 2012 | Unregistered CommenterDembo

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>