Pocket AniEd - Pocket PC Based Animation Editor

• Download source files - 37.9 KB
• Download demo project - 14.3 KB

Introduction

Pocket AniEd allows anybody to quickly and easily make beautiful and smooth animations without a background in computer animation or any unnecessary complexity. See the ‘Getting Started Animating’ section of the official Pocket AniEd site to see how easy it is to create your own animations. You can even export your animations to SVG (sort of like Flash) which can be posted on the web or included in Word, PowerPoint, or many other document types. Pocket AniEd was written in C# using Microsoft Visual Studio .Net 2003 and the .NET Compact Framework. It was based on my earlier Tablet PC based animation editor Ink AniEd, but the majority of code was rewritten to better suit the Pocket PC environment.

This is also an experiment in pen-based computing and hopes to embody the power of this interface as opposed to more common mouse oriented systems. One of the principals of Pocket PC development is that when it comes to drawing, it is faster to create a new stroke than to correct and old one; and this lies at the heart of Pocket AniEd. Most modern animation systems have you create a static object and then animate it with rotations, scales and other transforms, however, AniEd has you simply recreate the new object at a different time and then interpolates between the shapes for you. Hopefully, this will lead to a more intuitive user interface and one which makes rapid animation prototyping take just as long if not shorter than single frame diagramming. Consider a professor teaching a class, most of the good professors will draw diagrams and explain the process occurring as they draw the diagram. With AniEd, the process of drawing is the same as that of animating, so while the professor loses no time during his talk, at the end, not only has the student seen the process being created, but he can also now see it animating!

Using the code

The Pocket AniEd code has all sorts of little features and tools, but probably the most useful ones relate to using Point[]s as paths. For instance, re-sampling a path so that there is approximately an equal distance between each point (this looses very little quality and also means that you very easily interpolate between paths). Also, stuff like hit detection, interpolation, re-sampling to a different size, etc. Take a look at the InkInterp class in AniEd.cs to see more.

Points of Interest

Pocket AniEd is based on my previous pen-based animation system Ink AniEd. However, Ink AniEd was designed exclusively for the Tablet PC using all its fancy Ink based features, and also so that it could be seamlessly integrated into any Ink based animation without any noticeable changes to the application code (other than that it is now animate able!). When it came time to write the Pocket PC port, the majority of the code had to be changed so that it no longer uses the Tablet PC SDK (which was deeply rooted into Ink AniEd), so that it didn’t require any features unavailable in the .NET Compact Framework, to remove dependence on too much floating point arithmetic, to do general performance optimization, but primarily to redesign the interaction model to better suit Pocket PCs. This section will cover my initial work porting the code base over from Ink AniEd, and then how I worked it into a real Pocket PC app.

First of all, let me say that porting C# between .NET and .NET Compact is a breeze; the only major differences was not having the Tablet SDK and the lack of the full GDI+ commands, namely pens with widths other than 1 would have been really nice, and the ability to draw a Point[] polyline instead of polygon. The main idea to carry away is that you take your normal C# code, you drop it into the Compact Framework, you make a few tiny adjustments, and you're done! I’m sure I’ll be porting most of my .NET apps to the Compact Framework now, because it’s just a matter of drag, drop, and move around the controls, and you’ve just put your code “in the hands of your customers”.

The first major difficulty was getting rid of references to the Ink API, which isn’t nice because it meant I couldn’t even compile for a quite a while, and meant I basically rewrote the majority of the code. But all of that was basically just grunt work, nothing too complex (replacing ink events with mouse events, custom drawing and hit detection code etc.). Seriously though, the Ink API is really nice, its rendering mechanism is unbelievably fast, and produces great quality drawing. I highly recommend you try them out sometime. Once that was done, I had a working (albeit crippled) application to work with, and quite frankly, it is a lot easier to work on a project that is up and running than one which you haven’t even seen in action yet. This I see as one of the major cool factors about porting to the Compact Framework, even if your code doesn’t work quite right, or it runs very slowly at first, IT RUNS which is a lot better than many platforms I have ported to before (consider porting from software rendering to hardware rendering, and how long it is before you actually see anything on the screen).

The next issue was floating point arithmetic which is something to seriously keep in mind when developing an app with the concept of porting to PPC in the back of your mind. Floating point math on the PPC is VERY slow compared to integer math (much slower relatively to floating point versus integer math on a normal CPU), so it should be avoided as much as possible when performance is important. While I didn’t completely remove floating point arithmetic from the system, it was kept only on the higher level architectures so that it was used very infrequently, and my testing of the final architecture seemed to show that none of the bottlenecks were floating point related. However, this isn’t something to really worry about as fixed point math is amazingly powerful and easy to use whenever you really get down to it. If you don’t know about fixed point math, basically, it’s a way to represent numbers with decimals using integers and integer math. Look it up on Google. There were also plenty of other little performance issues I changed to reduce GC time and such, but they aren’t of general interest.

One point that I would like to make concerns using DllImport to make calls to QueryPerformanceCounter. This is an effective technique and is also nice for those of us used to using this in Win32. However, there is a major drawback here because it means that your .NET binary will only run on Pocket PCs and not on normal desktops (actually your app only crashes when you call the method not at load time). It was for this reason that I switched over to Environment.TickCount to do my timing. As far as I can see, the animation quality is not noticeably different, and being able to run on a normal desktop is a major plus and definitely worth it.

User interface design was of course the biggest part of development, considering how heavily this application relies on interaction with the user, and how very different the Pocket PC is to more traditional computer systems. One of the interesting issues I first noticed was the lack of a right mouse button, the Tablet PC even has a button mounted on the side of the pen with is usually used to do right click operations and “selection strokes” around multiple objects. So, I landed up removing features like pressure sensitive animations, and adding features like selecting multiple strokes with single taps instead of key-combinations or complex “lasso selections”. All in all, if you try to approach the Pocket PC from as much of a “fresh” perspective as possible then you will probably find development a lot easier.

All in all Pocket AniEd had an interesting development process and I believe created a well rounded tool which will hopefully help to improve pocket interaction and breath some animated life into the static and uninteresting diagrams we find in our day to day lives.

SVG

One of the cooler features of Pocket AniEd is the ability to export your animations as SVG files. SVG is sort of like Flash, except it’s an XML based W3C standard. Which means it’s a lot easier to edit, move around, and integrate into currently existing systems. The files exported by Pocket AniEd can be viewed as animations by themselves or used in larger presentations or web designs. Because SVG is XML based, you can edit it with any text editor (like Notepad) and customize its appearance to your tastes or needs. Take a look at the Pocket AniEd website to see a few examples.