OpenFL on screen JoyStick created in AnimateCC

Categories AnimateCC, game development, HTML5, OpenFL

I am hard at work on the next game for, and I need a screen JoyStick. After taking a look around, I found that you can use the Point.interpolate method to restrict the joystick to a certain radius.

Here is a quick look on the results:



And here is a quick view of the the setup inside AnimateCC:

The haxe code:


  1. package com.cosmindolha.recessmaster.controlls;
  2. import flash.display.MovieClip;
  3. import flash.display.Sprite;
  4. import openfl.display.Stage;
  5. import openfl.geom.Point;
  6. import openfl.utils.Assets;
  7. import openfl.display.Bitmap;
  8. import openfl.display.BitmapData;
  9. import com.cosmindolha.recessmaster.Disp;
  10. import;
  11. import;
  12. import motion.Actuate;
  13. /**
  14. * ...
  15. * @author Cosmin Dolha
  16. */
  17. class JoyStick
  18. {
  19. var joyStick:MovingJoystick;
  20. var _stage:Stage;
  22. public function new(mc:CpFlag)
  23. {
  25. joyStick = mc.joystick.joyButton;
  26. joyStick.mouseEnabled = true;
  27. joyStick.buttonMode = true;
  29. _stage = mc.stage;
  31. joyStick.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
  34. }
  36. function onUp(e:MouseEvent):Void
  37. {
  39. joyStick.x = 0;
  40. joyStick.y = 0;
  42. _stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMove);
  43. _stage.removeEventListener(MouseEvent.MOUSE_UP, onUp);
  44. }
  46. function onDown(e:MouseEvent):Void
  47. {
  49. doMove();
  51. _stage.addEventListener(MouseEvent.MOUSE_MOVE, onMove);
  52. _stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
  53. }
  55. function onMove(e:MouseEvent):Void
  56. {
  57. doMove();
  58. }
  59. function doMove():Void
  60. {
  61. var centerPoint:Point = new Point(0, 0);
  62. var newPoint:Point = new Point(joyStick.parent.mouseX, joyStick.parent.mouseY);
  64. var distance = Point.distance(centerPoint, newPoint);
  66. joyStick.x = newPoint.x;
  67. joyStick.y = newPoint.y;
  69. if (distance > 50)
  70. {
  71. var newI:Float = 50/distance ;
  73. var newP:Point = Point.interpolate(newPoint, centerPoint, newI);
  74. joyStick.x = newP.x;
  75. joyStick.y = newP.y;
  76. }
  78. }
  79. }

The next on my list is to fire events based on the joystick position.

Happy Coding 🙂

Share this

Steps for accessing your AnimateCC textfield in OpenFL

Categories AnimateCC, game development, games, HTML5, OpenFL
  1. I am using the OpenFL extension for AnimateCC (the one found here).
  2. I embedded the font in AnimateCC *
  3. In the project.xml file I have added “<assets path=”Assets/fonts” rename=”fonts” include=”*.ttf” /> “
  4. If the textfield is in another MovieClip, you need to export this one as a class for ActionScript too.
  5. In the Assets/fonts folder I have added the .ttf font file used in AnimateCC.

That’s it, you can now do the layout and animation in AnimateCC, including the dynamic textfield.

In case you need to know how to use you Layouts/Animation from AnimateCC, here is the other part:

Any MovieClip that you want to use in OpenFL, you need to export it as a class for ActionScript. For example in my setup, I have a main MovieClip with my game background, then I have multiple MC that contains the textfield I want to be able to change in Haxe. Each MC with the text is the same symbol, so I only copy what I need, arrange it around the stage area and give each one a different name.

For example my main MC, is exported as a class for actionscript with the name EqMc, to access it, I create a new instance in Haxe using var eq:EqMc = new EqMc();

Inside the main MC, there are smaller MCs with the text, that are named eq0, eq1 etc. Inside them is a the textfield I want to control, named tf. So to change the text in one I only have to do = “my text”;

You could do this in code, but having the AnimateCC for the visual design cuts the development time. Not to mention all the nice effects you can now do.

Happy OpenFL developing 🙂

*it appears to work even without this step.

Share this

Experimenting with OpenFL, DragonBones and Animate CC – simple Mobile browser game

Categories games, HTML5, OpenFL, Starling

This is what I ended up doing, and here it is on GiHub.

I am on a quest to find out how to build a mobile browser game as fast as I can, while also keeping the quality in check. For this I need an efficient production process, and if possible, I would like to keep using the tools and techniques that I am familiar with.

Quick background and current stats: I have been using Flash (now Animate CC) since the Macromedia era and Flash 5, that is more or less 14 years of flash dev. I do the code and the artwork/animation and I am currently studding how to draw better (in self thought way) at, they are awesome, while also experimenting with Haxe (also in self thought way). But most of my time it is spent raising my son, which is the most amassing adventure ever 🙂.

Back to work. In order to keep game production costs as low as possible, in my pipeline I need to:

  1. Be able to create 2D Animations fast, visually.
  2. Build UI visually.
  3. When there is a need to make small adjustments in UI or in the Animation, the update process should be seamless and fast.
  4. Code in a similar ActionScript 3 way, using events, objects, etc..
  5. Be able to prepare the code in such a way that modifications during the production are relatively easy to do, because you will always need to accommodate something unexpected.
  6. The code should also be scalable, so new levels or functionality are possible without breaking the entire app.
  7. The browser game (or app) should run on a mobile device, in the browser obviously.

I found Haxe to be the perfect match for my needs, while building Mr Nussbaum Boardwalk Challenge. Unfortunately Flambe was hard to bend to my will, so I am now investing my (extremely limited) energy into OpenFL.

OpenFL has a lot in common with ActionScript 3, so at times it doesn’t feel like I switched to a new language at all.

For the IDE, I used HaxeDevelop for a while, even gave Visual Studio IDE a try, but now I am back to FlashDevelop, because during my coding in HaxeDevelop there were a lot of times when the code would not compile at the first try, and only after about 3 to 5 times, without me touching the code. This obviously makes the development process extremely difficult because you never know if the fault is in your code, or the IDE is misbehaving again. So now I have switched back to FlashDevelop, and I will see if I the issues persists.

Here are the tools I use:

  1. Haxe 3.4.3, with the libs dragonbones: 5.0.0, openfl: 6.2.0, starling: 1.8.11
  2. Animate CC 2017.5 with the OpenFL Plugin 1.0.0
  3. DragonBones Pro 5.5
  4. FlashDevelop

The idea was to build a fun crossbow toy, that shoots cute arrows into bubbles of soap. From this, I will probably expand and build some simple educational game, but for production pipeline and tech testing, the simple prototype is enough. The idea to start with a toy (something fun) and build on top of that, came from reading “The Art of Game Design” by Jesse Schell, an eye opening book on how to make games.


After I was happy with the crossbow design, I started to test different animation editors, and decided to remain with Dragon Pro, in part because it had support for OpenFL, but also because it worked with AS3 and Starling, so in the case I wanted to develop the project in AS3, I would be able to reuse the artwork.

After a bit of trial and error and some YouTube watching, I was able to accomplish exactly what I wanted with the corners of the crossbow turning inside when you pull it back. So this is how the crossbow armature looks like in DragonBones, and if you want to check it out even more, you can find all the DragonBones files on GitHub.

Now we move to integrating the animation with OpenFL, and unfortunately things started to break, one after another:

First attempt, render the animation with Startling 1.8, which didn’t work. After some digging around the web, I find that in Starling 1.8 the mesh animation is not supported.

Second attempt, using the OpenFL render, it only showed parts of the animation with the mesh deformation, also on Samsung Tab A (some old version), it crashed the Chrome browser. I tried different export data options from DragonBones, neither of them worked.

But, the examples seemed to work fine, so maybe they are made with an earlier version of DragonBones and there is something funny in the newer data format. Who knows?

Third attempt, build the animation în DragonBones, export it as frame sequence (alpha png). Create a new OpenFL project in Animate CC, import the image sequence inside an MovieClip (that you export it for ActionScript), and just like that, it all worked.

This way also lets me augment the animation inside Animate CC, and also lets me build the UI in a visual way. It is kind of the perfect combination.

Here is the catch, the performance is not great, it works fine on medium to higher end mobile devices using Chrome, but Firefox won’t play nice.

So I tested on some more browsers:

  • On Chrome it works fine, but no fullscreen from the compiled project (might have to check the html file).
  • Firefox – low fps, and breaks after a while.
  • Firefox Focus – won’t show the hole app.
  • Opera – works perfectly, even the full screen
  • Opera mini – works, no fullscreen
  • Dolphin – seems to work really well, but no fullscreen
  • Cm Browser – works, but no fullscreen
  • Via Browser – works, but no fullscreen

So it seems that only Firefox causes problems

Devices tested:

  • iPhone 6s, it works perfectly
  • iPad 2, not usable, it has very low fps
  • Samsung Tab A, not usable very low fps (CPU 1.2 GHz)
  • Huawei nova (CPU 2 GHz), works great (except Firefox)

Other issues and limitations:

Animation on the timeline that use masks, wont show the right way in OpenFL, so don’t use mask in animations. Another big issue will be memory footprint and file size when you use a lot of animations. Probably a better way would be to build UI, and simple animations in Animate CC, and use DragonBones animations without the mesh editor for characters. Hopefully Starling 2 will be ported to OpenFL soon, and we will be able to use DragonBones without a problem with OpenFL and Starling, while keeping Animate CC for UI and other simple animations.

In conclusion, if you (or the client) are OK with the limitations, you can build a browser game or app, quite fast when you use OpenFL in combination with Animate CC and DragonBones, and because the community is really getting into it, I am pretty sure the tools will evolve fast and the remaining obstacles will fall away soon enough.

If anyone else has tried different things on Animate CC, OpenFL Dragon Bones do share with links in the comments.



I am taking on new projects, (I will be opening new projects spots in March 2018) let’s talk


Share this