Slow motion on Android (html5)


Hello everyone. Im make a simple SLOT GAME on html5 target (for example link shown the same . Then test it on Iphone 8, Desktop, and diffrent android (old or new ) devices. Desktop and Iphone show me best perfomance and smooth, but android very slow speed, freezes and so on.
Its my project.xml

<?xml version="1.0" encoding="utf-8"?>
	<!-- NMML reference: -->
	<!-- metadata, make sure 'package' is at least 3 segments (ie. com.mycompany.myproject) -->
	<meta title="BORProject" package="BORProject" version="1.0.0" company="In4core Progressions" />
	<!-- output -->
	<app main="Main" file="BORProject" path="bin" preloader="controllers.CTMPreloader"/>
	<window background="#000000" fps="60" />
	<window width="0" height="0" unless="mobile" />
	<window orientation="landscape" vsync="false" antialiasing="0" if="cpp" />
	<window allow-high-dpi="true" />
	<!-- classpath, haxe libs -->
	<source path="src" />
	<haxelib name="openfl" />
	<haxelib name="actuate" />
	<!-- assets -->
	<icon path="assets/openfl.svg" />
	<assets path="assets/img" rename="img" />
	<assets path="assets/fonts" rename="fonts"/>
	<assets path="assets/preloader" library="preloader" />
	<library name="preloader" id="preloader" embed="true" />
	<!-- optimize output
	<haxeflag name="-dce full" /> -->

Compile under HTML5 no flags, maybe -dDom flag will be faster ???
P.s. game based on ENTER_FRAME, check it on timer also, no changes (good changes)

If it’s small information to answer, i can show the source code of reel animation.

Big thanks


What are you using to animate? Does it use Lib.getTimer to check the amount of time elapsed since the previous frame, to determine the animation, or is it a hard-coded behavior per frame?


hard-coded per frame. But its no smooth problem, its a perfomance problem, after start all actions doing slowly then iphone or desktop. The sample below :

public function startRoll():Void
		if (this._isRunning) return;
		this._isRunning = true;
		this._symbolsCont.y = 0;
		for (i in 0...4) 
			var symbol:SymbolOnGame = cast this._symbolsCont.getChildAt(i);
		addEventListener(Event.ENTER_FRAME, onFrame);

private function onFrame(e:Event):Void 
		this._symbolsCont.y += 80;
		if (this._symbolsCont.y < Config.SYMBOL_HEIGHT) return;
		this._symbolsCont.y = this._symbolsCont.y - Config.SYMBOL_HEIGHT;
		var lastSymbol:SymbolOnGame = cast this._symbolsCont.getChildAt(3);
                this._symbolsCont.addChildAt(lastSymbol, 0);
                lastSymbol.y = -lastSymbol.height;
               for (i in 1...4)  this._symbolsCont.getChildAt(i).y += lastSymbol.height;

and sorry if the code is awful )))


Making your animation time-based will ride out differences in frame rate much, much more. If you can, I’d really recommend using it.

For example:

private var cacheTime = 0;


cacheTime = Lib.getTimer ();
addEventListener (Event.ENTER_FRAME, onFrame);


private function onFrame (e:Event):Void {
    var currentTime = Lib.getTimer ();
    var deltaTime = currentTime - cacheTime;
    cacheTime = currentTime;
    this._symbolsCont.y += 80 * deltaTime * 0.06;

You can fine-tune how you use the deltaTime variable to determine how far to move, generally it would be movement * deltaTime * (fps / 1000) when working with milliseconds.


Big thanks! Some better works, but also some freeze against ios or desktop ((((