Being a freelancer is awesome. You’re free to work for everyone, from everywhere, on a huge variety of project!
Today I’m glad to share a new one: an iOS Application for the famous Sophie la Girafe! It has been made with love using the Citrus Engine.
Sophie la Girafe
French icon and true friend of babies for more than 50 years, the very famous Sophie la girafe is now coming on your iPad and iPhone with a brand new edutaining app that will get you to her mythical world.
Sophie la girafe and her friends Lazare the cat, Margot the turtle, Gabin the bear, Joséphine the mouse and Kiwi the bird will stimulate the five senses of your child thanks to lots of entertaining, funny and educational games. The different stories will help him/her to enter the famous world of Sophie. In addition, soft and catchy melodies complete the application.
-Stimulation of the five senses of your child thanks to ten games
-Several difficulty levels to adapt to your child’s needs and desires
-A imagination oriented app thanks to beautiful visual effects and catchy melodies
-Switch from English to French! Have fun spotting the differences, and have your child accustomed to a foreign language
-A super-easy gameplay, accessible to young kids.
When launching the app, did you see there is a very short loading time compared to many applications? Does there are other loading time inside some part of the app? No, there isn’t. We used Flash technology with GPU mode and the traditional display list!
Nowadays many people are thinking that applications should be made using strong libraries dealing with the GPU using OpenGL. In the Flash community, Starling has the wind in its sails. It’s an excellent framework, giving awesome performances: a 2D shooter games with particle effects, many missiles and enemies will run at 60FPS! But for an app like Sophie la Girafe, it would failed. Why?
Animations are the key of every application! Let’s take a look on them, they are huge (big animations and very long). Don’t forget that using an OpenGL based framework, you will be limited to use SpriteSheet (4096 * 4096 PNG for iPad retina) or video. Video are very heavy, and it isn’t always easy to add some interaction. For example, if you’ve some layer management, it’ll be a nightmare. Obviously you can combine SpriteSheets together but don’t forget that PNG needs to be uploaded on the GPU, and its long process! Also RAM memory is not the same than GPU memory, this last one is much more limited. Making this application with Starling meant to upload new SpriteSheets before each long animaiton and then dispose them. This would result into a waste of time for the final user.
Also using Vector graphic saves lots of application weight compared to PNGs. Ok, so why we shoulnd’t always use Vector animation? Because it’s very heavy to be rendered. If you plan to target a game at 60 FPS with many objects, forget it. In Sophie la Girafe, we targeted 25 FPS, we really didn’t need more, so vector are ok, even on low devices. However if you plan to make faster animations with more objects, rasterization would be a very benificial process! And keep Blitting technical somewhere in your mind!
Why using the Citrus Engine?
As the lead developer of the CE, I knew why I should use it and how to make this app quickly and easily. The CE is positioned as a game engine, but don’t forget that a Rich Mobile Application has many features shared with a game! Let see what was beneficial using the Citrus Engine in this app:
– state management: in this application we often change part of the application. Moving from one state to an other one. You’ve to be sure that everything will be cleaned and destroyed before moving to an other state, or you will have some memory leak. Thanks to its structure and state management, the CE helps you to avoid this! Also if you combine the app navigation with an external xml, you’re on the good road 😉
– sounds: playing music is much more needed in an app, it’s crucial to control every sounds and be able to loop them, apply tween, dispatch Signal when a specific sound is completed, etc. By its built-in classes, the CE provides a very elegant sound manager.
– scrolling camera: when you need some scrolling content, it’s important to have an easy to set up camera with parallax effect. The Citrus Engine will provide many options for a camera: a target, zoom, rotation, parallax objects, etc.
– also don’t forget the physics part!
Give a try to Sophie la Girafe and the Citrus Engine!
10 thoughts on “Meet Sophie la Girafe”
Fulltime freelancer can do more rnd and work on own product. gonna to miss my time as a fulltime freelancer. Next monday reporting to new company. 🙁 = need to wakeup early.. traffic jam..
I have a question for you. I am developing a game for IOS. But at the same time for web. this is my first app for mobile. My problem is same with your problem. “Huge graphics and animation”.
But, my graphics are not vector. They are bitmap. As you know, limited to use SpriteSheet and i have too many SpriteSheet.
I decided to use your method.(BlittingView) But, I don’t know,
– how to create “blitting art” from my MovieClip? (- any sample code or tutorial)
– how to manage my assets for IOS? (- any sample code or tutorial)
I’m sorry for my english.
Please help me. Thanks.
Hey, how are managed your animations ? Via SWF or SpriteSheets ? If it’s via SWFs it will be complicated to use Blitting.
You will find informations/examples on Blitting there: link1 & link2.
Hope that help 😉
Hi, SpriteSheets are very very big size. My character’s size 360x880px and size of one. There are many characters like this. I think so, i need to use SWF. i don’t know still how can i solve this problem.
Did you consider to use DragonBones, it may save you!
yes, actually i’am using dragon bones currently. Game consist of 5 mini games. Only, there are 9 characters for first game. But, the game need to be compatible for iPad Retina. Therefore, character’s bones are very big size and there are many spritesheet for first game.
ahead of I’am afraid due to performance of the game.
Export with .dbswf format! It will save you! You will be able to scale without limit.
how to use .dbswf format with “factory.scaleForTexture” ?
Have a look there.