Optimize HTML5 Games for Android
Today we will talk again about the element CANVAS, as well as a little about the optimization of the games themselves in HTML5.
In modern browsers, the graphics card power is used to render to canvas, but, not always, they are included by default. You can get into the browser settings and check. In order for the element to cause such processing, you can add elements of the 3D transformation of the object to the HTML. A great way to accelerate can (but not a fact) serve as such a modification of canvas:
I consider everything from the point of view of development using some framework, you can work with something else, but pay attention to these simple parameters, if your engine does not specify them, then you can assign them to the canvas element through CSS, as a class, and inline method, well, or through JS.
')
Optimize your JS code. Avoid frequent reference to the DOM of your application. Again, using the engine, there should be no DOM calls at all.
Do not use setInterval / setTimeout / while (1) {}.
For animation in HTML5, requestAnimationFrame was entered, it was introduced specifically for animation, so it is optimized for this. Notice how your engine uses frame updates, whether it takes into account fps, and how it handles deltaTime.
deltaTime is a time factor that is a variable of the time elapsed since the last frame. Again, since the standard WebView in Android is not too fast (unlike WebView + from Chromium), it’s better to limit FPS in the game from 25 to 40 frames per second. The game will work stably, and for a mobile game it is quite normal.
Also, in the last article (which was removed because of advertising, namely, links to the test application) I paid attention to creating a wrapper for your game in Android Studio, and, without departing from this approach, consider the option of creating just such an application.
Here, with the optimization, everything is a bit simpler, you don’t need to go into the algorithms, and the job comes down to the fact that we just add some parameters for the Android application.
In the game manifest, add the following flag:
This will connect the video card (if any) to handle everything happening on the screen, but before including it in the release, first test it well, for some applications it can only make it worse if the hardware is not suitable.
The next thing you can do is turn off acceleration in the WebView element itself:
To work correctly, you need to add the View to the list of imports.
Such simple optimization tools I dug up. That's all for now.
PS: I will not give references to examples anymore, if they are needed by someone, write to PM. There is also a large database of examples of using engines in JS.
HTML part
In modern browsers, the graphics card power is used to render to canvas, but, not always, they are included by default. You can get into the browser settings and check. In order for the element to cause such processing, you can add elements of the 3D transformation of the object to the HTML. A great way to accelerate can (but not a fact) serve as such a modification of canvas:
canvas.style.WebkitTransform= 'translate3d(0,0,0)'; ... canvas.style.transform= 'translate3d(0,0,0)'; I consider everything from the point of view of development using some framework, you can work with something else, but pay attention to these simple parameters, if your engine does not specify them, then you can assign them to the canvas element through CSS, as a class, and inline method, well, or through JS.
')
Optimize your JS code. Avoid frequent reference to the DOM of your application. Again, using the engine, there should be no DOM calls at all.
Do not use setInterval / setTimeout / while (1) {}.
For animation in HTML5, requestAnimationFrame was entered, it was introduced specifically for animation, so it is optimized for this. Notice how your engine uses frame updates, whether it takes into account fps, and how it handles deltaTime.
deltaTime is a time factor that is a variable of the time elapsed since the last frame. Again, since the standard WebView in Android is not too fast (unlike WebView + from Chromium), it’s better to limit FPS in the game from 25 to 40 frames per second. The game will work stably, and for a mobile game it is quite normal.
Android part
Also, in the last article (which was removed because of advertising, namely, links to the test application) I paid attention to creating a wrapper for your game in Android Studio, and, without departing from this approach, consider the option of creating just such an application.
Here, with the optimization, everything is a bit simpler, you don’t need to go into the algorithms, and the job comes down to the fact that we just add some parameters for the Android application.
In the game manifest, add the following flag:
android:hardwareAccelerated="true" This will connect the video card (if any) to handle everything happening on the screen, but before including it in the release, first test it well, for some applications it can only make it worse if the hardware is not suitable.
The next thing you can do is turn off acceleration in the WebView element itself:
webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null); To work correctly, you need to add the View to the list of imports.
Such simple optimization tools I dug up. That's all for now.
Opinion of the author at the expense of the whole idea
In general, HTML5 for Android is very raw, in all senses, and if in browsers its use is still justified, then in mobile phones it is not. For this, it is best to use standard Android tools. They also have CANVAS, Bitmap, Paint, and a bunch of drawing methods, building a simple class based on them and using it for drawing is very simple and (importantly) very productive. In addition, through WebView there is a problem with working with sound. She is simply not there. That is, it is there if you open the game like a normal page, for example, in a browser on some site, but through WebView it does not exist.
The topic of using HTML5 in Android is more relevant for simple applications that have a beautiful interface, which is not so easy to implement using Android tools as compared to HTML / CSS, but it is too early for games to use it, but it’s quite realistic.
I am sure that in the future the situation will be overhauled towards the normal operation of WebView, or it will offer an alternative.
The topic of using HTML5 in Android is more relevant for simple applications that have a beautiful interface, which is not so easy to implement using Android tools as compared to HTML / CSS, but it is too early for games to use it, but it’s quite realistic.
I am sure that in the future the situation will be overhauled towards the normal operation of WebView, or it will offer an alternative.
PS: I will not give references to examples anymore, if they are needed by someone, write to PM. There is also a large database of examples of using engines in JS.
Source: https://habr.com/ru/post/278333/
All Articles