Slow motion on Android (html5)

#1

Hello everyone. Im make a simple SLOT GAME on html5 target (for example link shown the same https://pixijs.io/examples/#/demos/slots-demo.js) . 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"?>
<project>
	<!-- NMML reference: https://gist.github.com/1763850 -->
	
	<!-- 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" /> -->
	
</project>

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

#2

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?

#3

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);
			symbol.setBlurImage();
		}
		
		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 )))

#4

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.

#5

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