I’m thrilled to share my latest side project with you. I call it aape. It is my version of an Adobe Animate PixiJS exporter.
Here are two demos of exported animations:
How it works:
The project is split into two parts. A JSFL script to export your current Animate timeline and a few JS classes to download and display the animation.
Your animation is build as usual. The only difference being that you have to explicitly tell aape which part of the animation should be exported as Bitmap. This is done by selecting the MovieClip in your Animate library and changing it to a Graphics object.
This workaround allows you to use every filter option of Animates AS3 documents.
MovieClip labels and comments are also exported and can be used by executing the familiar gotoAndStop / gotoAndPlay methods.
After building your scene you execute aape form the toolbar. The export starts with the currently open MovieClip as root element.
A simple export generates three files. A PNG Atlas + JSON file containing image locations and a JSON object that describes the exported timeline (the library).
The files can than be loaded and added to the aape.Timeline object. It’s prototype is the PIXI.DisplayObject. So you can easily add it to your existing display list.
The tool is not yet finished. I’m still working on the Animate user interface with export settings as well as a proper documentation.
What do you think?
Unity and the Asset Store
I am now in the Unity Asset Store.
After four years I finally decided to dust of the good old blog to write about my latest work. The last few years have been exciting.I ditched Flash (we had a good run) and tested the waters of the Objective-C world (which was fun, but short lived).
Game Dev has been the backbone of my work ever since. To cut a long story short, I eventually ended up learning Unity and C#.
But except for the occasional forum post and my usual ramblings on Twitter, I haven’t shared much of my work lately. Enter the Unity Asset Store.
What an amazing outlet for your one-off ideas, partial projects and clever scripts. I started my publisher profile, and uploaded my first projects in no time. And although there were a few gotchas on the way, publishing (and monetizing) my work was dead simple.
As of now I uploaded three different projects to the store.
- dtween, an animation library comparable to TweenMax or Tweener.
- Planet Plane, a pixel art asset set with various animations.
- Two Tone City, a set of pixel art buildings / trees and characters, with the restriction of only using two colors to draw them.
All of them have been a great way to learn more about C#, art and Unity. To keep keep me motivated, I decided to sell them for a few dollars (although that might change in the future).
But mostly I’m trying to improve my work. Engaging with a community is always fun, and I look forward to reading your feedback once again.
Last week my first iPhone app Pixel Painter has finally been approved by Apple and is now available on the App Store.
Pixel Painter is a bare bones drawing application that allows you to create pixel art on the go. It features a 1x1px pen tool, a color picker, an eraser tool, an image position tool and an image lock and zoom tool. Your finished image can than be saved as PNG. If you are into Pixel Art, this app might be for you.
You can download Pixel Painter from the following URL:
Developing the app was a great learning experience and I’m very eager to share some common pitfalls in iOS development. The next few posts might focus on developing for the iOS platform and especially the transition from ActionScript to Objective-C.
These are two iOS Web App clocks.
Both were build using the HTML5 canvas tag and offline caching capabilities. Both are free to download. I hope you enjoy them.
If you own an iOS device you can perform the following steps to add one of the apps to your Home screen:
- Click on the app icon
- Tap the bookmark sign
- Tap “Add to Home screen”
The app icon will be added to your Home screen.
You can also download the source code via GitHub: https://github.com/MRWUT4/canvas-clock
A few simple canvas experiments. Enjoy. Grab the code :).