All posts by Aymeric

About Aymeric

Freelance Interactive & Game Developer.

Monsieur Bear’s ABC and the myth of not being able to run SWF vector graphics on mobile

AIR, Android, AS3, Citrus Engine, Flash, iOS, , ,

I’m glad to present a new application I’ve developed: Monsieur Bear’s ABC. Available for iOS and Android.

Monsieur Bear’s ABC
mb1A funny animated alphabet book designed by the talented Virgo!

Virginie Aracil aka Virgo is back in the app world for a new adventure! Now, she comes with an alphabet book, Monsieur Bear’s ABC! This cute little bear will help your child discover the letters, the sounds and words in an original and acidulous universe. With hilarious animations, cartoon sound effets and a French Touch style, this application will give hours of fun to your child!

– An alphabet book completely animated !
– Cute drawings !
– Discover Monsieur Bear, the bear made by Virgo !
– Original animations and fun sound effets !
– Available in French and English !

Technology?
mb2Like Sophie la Girafe, Monsieur Bear’s ABC is built using AS3/AIR technology with the Citrus Engine framework on top of the display list.
I won’t explain the choice of the display list and the gpu mode, it’s well described in Sophie la girafe’s article (here we have the same problematic).
However behind this catchy title, it reveals a strong reality: no one think we’re able to run correctly swf on mobile. Please have a look on this thread on Starling‘s forum. I know it’s Starling forum, it’s normal that everyone recommend the Starling’s way. But common’ guys, if you tried this app how the hell would you be able to make it running with Starling? The DragonBones framework, would be a way… but it won’t correspond to many animations, and it will be so long to do all the animations for it!
Here no one think it would be possible to make this project on the display list. At first, I tried to just run the swf animations but it was crap then tried using the rasterize process but it wasn’t good too. I was in a blind alley. Then I remember that I’ve already been able to run many SWFs correctly on the display list (again the goal isn’t to target 60 fps with particles, blur etc), so why I’m not able to run correctly this swf? I contacted the graphic designer: each model is made in Illustrator. I grabbed ond of them, it has so many points: 500 000! Everything became obvious… There are optimizations in code, there are also optimizations on graphics!! And obviously it should be done before code optimization 😉

Using directly SWF format, I was able to rescale everything to the perfect screen dimensions and it’s priceless! Also the final weight for all the animations is 7Mo. This is just impossible to achieve using the spritesheet way.

AddFrameScript magic
It’s very a common way to make vectors animation with Flash Pro. For example Tiny Thief is a beautiful game using vector graphics (that’s very easy to rescale everything!!). However they used Scaleform technology to export on mobile, and not Adobe AIR.
With iOS (using AIR) we’re not able to reload SWF which has code in them (a simple stop() on the timeline is considered as ABC code). It means if a SWF has AS3 code, you won’t be able to dispose it and reload it. It will always stay in memory. When you’ve more than 300 SWFs that’s a big deal 😀 So obviously the solution is to not add any code in this SWF, but how are we able to stop animations easily or do other operations? Using the undocumented addFrameScript method:

_currentAnim.addFrameScript(_currentAnim.totalFrames - 1, _animCompleted);
 
function _animCompleted():void {
      _currentAnim.stopAllMovieClips();
}

That was a very simple example. Using this method you’re able to inject code to a specific frame of a MovieClip. And it won’t cause any problem to be unloaded and reloaded! Obviously it is a bit harder to manage because the code isn’t directly in the swf, and so if you change your animations don’t forget to change the addFrameScript code too. But if your code is well organized, it shouldn’t be a big deal!

Rdrct.it
Now let’s follow this link: http://rdrct.it/monsieurbearsabc. Depending on your OS you will be redirected:
– on a website for all the computers.
– on Google Play for Android.
– on the App Store for iOS.

That’s a very convenient way to share a link, isn’t it? There is also a powerful feature, if you open it on your mobile and you already have the application installed, it will open it! Don’t wait anymore, give a try to rdrct.it too!

Resize icons for mobile apps

Mobile, Php

There are things which take times, they could easily be automated but there aren’t. One of this task is to generate all the icons for a mobile application. You have to resize the same image into 10 different sizes, for Android and iOS (29, 36, 48, 50, 57, 58, 72, 100, 114, 512, 1024).

Why Apple doesn’t only require an image size of 1024 and automatically generate the smaller picture when the app is exported for the publication? There may be a good reason for that. Anyway, go to this Github and grab the php script to generate app icons for Android & iOS in all requested resolutions.

Now the quick dev story: at first, I thought it was a good small project to get back into some ruby dev. I didn’t practice it since several years ago. So I started with Sparrow’s samples, but quickly I went into library & version nightmare, and I wasn’t able to remember a single line of ruby! So I get back to php very quickly and discover that we may use it with a CLI (why couldn’t we?). It’s very quick & powerful, be ready for some script for renaming 😀

Edit:
Find some scripts for renaming files and delete others one based on a string name: https://github.com/alamboley/AssetsOperations

Live Coding in AS3 using COLT

AIR, AS3, Citrus Engine, Flash, Programming, ,

Hey guys,

I hope many of you have seen this amazing video made by Bret Victor: Inventing on Principle. This is one of the best introduction to live coding if you never heard about it.

Recently, Code Orchestra, released an amazing tool named COLT. It enables live coding in AS3, you will find many great video examples on their page. You can use the tool with a free trial during 15 days, don’t hesitate! It comes with many examples to help you understand the basis, oh and there is one running with the Citrus Engine 😉

Continue reading Live Coding in AS3 using COLT →

Alef is out!

AIR, AS3, Citrus Engine, Flash, Games, Nape, Physics, Starling, , , ,

Hey there,

It has been a long time since I wrote my first game, Kinessia, with the Citrus Engine (and start contributing), one and a half year. Less than one year ago, I made an other one, Tribus, using a Citrus Engine’s port in Objective-C. That was my first project in Objective-C so the source code of the port shall not be very clean, that’s why I’ve never released it officially.

We all know the problem making a framework / library and never use in real context project. That’s why I started my carreer as a freelancer 4 months ago, to be able to make applications / games for companies and show what can be done with the Citrus Engine. And now I’m proud to add a new reference to the engine: Alef.

Continue reading Alef is out! →

AIR and iOS app options (cutsom url scheme, hidden)

AIR, AS3,

Each day we discover new options and features giving the developer life more exciting!

Today I’m sharing some options for iOS development. Let say you have a main application including links to several games. You don’t want to include all this games into the main application because there are more like independant mini-games, or you don’t want to clean everything as it should when you leave your game (the lazy way), or there are several developers involved in this different games and they don’t use the same technology!

Anyway, you want to create a main application able to navigate to an other one. In other terms: communicate with other apps (Apple references check Communicating with Other Apps part and below).

Continue reading AIR and iOS app options (cutsom url scheme, hidden) →

Unity and its asset store

Unity

This last weeks, I played a lot with Unity. Thanks to its Editor it’s very easy to set up a scene in no time!
Also one of its strongest features is its Asset Store. You can find excellent stuff (assets, code, utilities…), however you’ll have probably to pay for that.

Unity has succeeded to create a market around its product and make its own product even better. Imagine if Greensock/TweenMax or even the Citrus Engine were able to be included into your project in one click. People looking for game engine will see the different ones and reviews. By promoting its asset store, Unity promotes its technology and people which are using it. Developers are highlighted and they gain some profits for their hard work (Unity too it’s a 70% – 30% deal). How many Flash developers earn money thanks their libraries? Certainly less than Unity developers and there are more (were?) Flash developers.

It seems that Unity users don’t hesitate to give money for what they want, whereas Flash users pay more attention. The Citrus Engine wouldn’t be popular and used if it wasn’t free.

Well I could write a long blog post, comparing Unity and Flash frameworks/libraries management but that’s definitely not my goal. I just would like to say that if you pay $15 for this awesome component, you will be able to make a FPS in no time.
Like I did in 15 minutes. Demo.

I wish I could make this in Flash in less than 15 minutes, and I don’t care about the price (if it worths it and is reasonable).

Android 4.2.2. resolve problem with AIR mobile deployment

AIR, Android, AS3, Flash, , ,

Google has recently pushed a new Android version: 4.2.2. Concerning the new features, this update brings about a new security feature in regards to USB debugging: now there is a gatekeeper on your phone! You will have to accept the RSA key before being able to deploy on your device. More information concerning this update there.

If you have made this update on your device, you won’t be able to deploy your application, even if you’ve accepted the RSA key. Your IDE won’t success to connect to the device and push on it.
When I tried to resolve the problem, it quickly appears it wasn’t related to the IDE but directly from the AIR SDK. Then I tried to deploy on my tablet with a Unity project: same problem. Using Unity, you work directly with the Android SDK. I just needed to download its latest version and replace the previous one, and it works!

Concerning AIR, we also use the Android SDK but not with its original structure. You need to replace some files on this folder: YourSDK/lib/android/bin. Replace those files: aapt, adb and dx.jar with files coming from the latest Android SDK: sdk/platform-tools aapt, adb and its lib folder with the dx.jar file. Using Windows you will also need to replace the dll files.

That was easy! I hope Adobe will quickly deploy an AIR SDK update for everyone.

First month as a freelancer completed!

Profile

Hey guys,

This month was simply awesome! I’ve worked on some cool exciting projects using mostly AS3 with Starling, and the new ones in the pipeline are even better 🙂 I wish I could clone myself to work on all of them! I’d time to improve the Citrus Engine, give a first try to Cocos2D (loved to redo some Objective-C, but I’ll stay on Sparrow, a project using it is coming!) and started to learn Unity3D (you can make quickly some 2D games using Orthello framework). Learning Unity is very exciting, it’s definitely one of future tool I will mostly used in the future.

During this month there was the Global Game Jam. With some great guys, we made a game which won the local jury award using the Citrus Engine:

First achievements are unlocked 😉

See you later!