Making things move – Vector animations in AnimateCC working in OpenFL using Bitmap draw

Categories games

The setup is like this, I make the running cycles in Poser, render the animation frame by frame to a png sequence, import it in AnimateCC where I have installed the OpenFL plugin and code the web game using  OpenFL (I am back using HaxeDevelop).

I observed that you can get a decent performance if you use only bitmaps on you timeline animation in AnimateCC. And I would have stooped there, but there will be quite a few animations. I want each character to be slightly different, and at 31 fps running cycle, and with a few cycles that will turn a few degrees, it adds up really really fast and the resulting game would take forever to load. I have also observed that the vector graphics, remained in vector format after you use them in OpenFL. This reduces the size of the game by a huge amount. Even in local testing this was quite obvious.  So I have redrawn the rendering in vector format, this would also allow me to make the small customization that I want for each character. Test it some more, and saw that it work well on my laptop (which is a bit powerful) and on my Android Phone (also a bit powerful). I consulted with Greg about this, and together we decided to go with the vector format so we can keep the size in check.

But then…

I have added another slightly different character (change only the color and the head design) and the performance took a bit hit. This was not good, I thought that the result from my previous test was solid and I could go ahead using this method. Well… nope.

Then I remember about this optimizations stuff we sometimes did in the flash environment by drawing a vector to bitmap at runtime, wich kept the size small but also improved the performance quite a bit. So after a look around the web to see what can be done about it I have found TileMap. Unfortunately I could not figure it out how to make it work with my problem, so after a couple of hours of trying to make  it work, I decided to switch course and just try to remake the vector animation using a rougher approach.

The idea is pretty simple, take the MovieClip frames, draw them into separate bitmaps, put the bitmaps into an array, and display one bitmap every other frame on an enter frame event.

Here is the code:


  1. package com.cosmindolha.recessmaster;
  2. import openfl.display.Sprite;
  3. import openfl.display.MovieClip;
  4. import openfl.display.Bitmap;
  5. import openfl.display.BitmapData;
  6. import;
  7. import openfl.Lib;
  8. /**
  9. * ...
  10. * @author Cosmin Dolha
  11. */
  12. class Runner extends Sprite
  13. {
  14. var mcFramesArray:Array;
  15. var allFrames:Int;
  16. var everyOtherFrame:Bool=false;
  17. var runnerType:Int;
  18. public function new(type:Int)
  19. {
  20. super();
  21. runnerType = type;
  22. init();
  23. }
  24. function init()
  25. {
  26. mcFramesArray = new Array();
  27. var dmc:MovieClip = new MovieClip();
  28. switch(runnerType)
  29. {
  30. case 0:
  31. dmc = new RunnerTemplate();
  32. case 1:
  33. dmc = new RunnerTemplateB();
  34. case 2:
  35. dmc = new RunnerTemplate();
  36. case 3:
  37. dmc = new RunnerTemplateB();
  38. case 4:
  39. dmc = new RunnerTemplate();
  41. }
  42. var nw:Int =;
  43. var nh:Int =;
  45. allFrames = dmc.totalFrames;
  46. var bitmapData:BitmapData;
  48. for (i in 0...allFrames)
  49. {
  51. dmc.gotoAndStop(i);
  53. bitmapData = null;
  55. bitmapData = new BitmapData(nw, nh+5, true, 0x000000);
  56. bitmapData.draw(dmc, true);
  58. var bmp:Bitmap = new Bitmap(bitmapData);
  60. bmp.smoothing = true;
  61. mcFramesArray.push(bmp);
  63. }
  65. addEventListener(Event.ENTER_FRAME, onEveryFrame);
  66. }
  67. function updateFrame():Void
  68. {
  69. removeChildren();
  71. addChild(mcFramesArray[currentFrame]);
  73. currentFrame++;
  74. if (currentFrame == allFrames)
  75. {
  76. currentFrame = 0;
  77. }
  78. }
  79. function onEveryFrame(e:Event):Void
  80. {
  81. if (everyOtherFrame)
  82. {
  83. updateFrame();
  84. }
  85. everyOtherFrame = !everyOtherFrame;
  87. }
  89. }

I am pretty sure the TileMap would work better, and I will probably give it another try at some point, but for now this solution works good and I can move on to the other parts of the game.

Christmas is almost here, hmm I wonder what I want for this Christmas. Books are always nice 🙂 especially those with “The Art Of” in the tittle.

Share this

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *