Optimization of wrapTick method

Why

The wrapTick method is taking a significant amount of time to execute with respect to the amount of effective work it is doing. The problem is that all the views are being iterated and checked for the existence of a "tick" method at every frame. The idea is to make sure that only the views that "tick" (and directly/indirectly attached to the root) are being iterated at every frame.

How

Simply by implementing a system where a list of ticking subviews (directly or indirectly) are maintained on each view.

Result

Chrome (macbook) profiling

Before

After

The wrapTick method in itself went from number 1 to number 6 in the ranking of most consuming methods.

Safari (iPhone 7) profiling

Before

After

The wrapTick method in itself went from number 1 to number 10.

Chrome (macbook) measure

Therefore I used performance.measure() in order to get a "second opinion" in chrome. The following images show the average execution duration of one tick of the Engine at given time intervals on the landing screen in Everwing. Before

After

Note: I place the measurement around the call to the tick function of the engine. Therefore not all the execution time is being accounted for. Event callbacks are probably missing as well as (program) execution time.

Perf improvement when combined with https://github.com/gameclosure/timestep/pull/123

By combining the changes from https://github.com/gameclosure/timestep/pull/123 I could see a clear improvement: Before

After

Also, I could see a clear improvement of the FPS in gameplay phase on Xperia Z3: went from ~40 to ~50.

It looks like this brings down CPU usage by ~10% during Everwing's gameplay phase with non-idle time of 13.5% (on my machine) in testing condition similar to https://github.com/gameclosure/timestep/pull/123 (down from 15.3%)

play-co / timestep