Games on html5 Russian android. Development of HTML5 games for Android from scratch to release
The underlying technology that makes HTML5 games possible is a combination of HTML and JavaScript. Hypertext Markup Language (HTML) was part of the early Internet superhighway as they called it back then and has continued to be used to serve every website today. JavaScript code was added to second version browsers like Netscape 2.0 in 1995 and has evolved over the years to become more pleasant to read and write. In the early days, it was referred to as DHTML or dynamic HTML because it was allowed for interactive content without a page refresh. However, it was difficult to learn and use in the early web era. Over time, Javascript with the help of the Google Chrome developers became one of the fastest scripting languages. It also has more freely available modules, libraries, and scripts than any other coding language.
The early DHTML games were very simple. Some examples of the games back then were Tic-Tac-Toe and . As games made with this technology use the open standard of HTML5, these relatively ancient games are still playable today in a modern web browser. These technologies have moved to the forefront of browser games because they don"t require plugins and are safer to play than older technologies. HTML5 games also support and the capability has improved to support complex 2D and
Brian McHarg's strategy for successfully developing cross-browser, cross-platform games in HTML5.
HTML5: the rightful heir to the throne of flash games. Truly cross-platform development allows a program, once written, to run on a PC, tablet or smartphone; it will also work on Smart TV, desktop and mobile devices, including game consoles such as Xbox360 or PlayStation 3 through their built-in browsers. It is clear that this is very attractive for those who want to develop games for as many devices and platforms as possible.
The term HTML5 itself, as well as the specifications it represents, has different meanings depending on who is describing it. For customers, this is a development technology that promises the true Holy Grail of cost-effective cross-platform development.
For developers, it's a collective noun for many different technologies: JavaScript, WebSockets, WebAudio, Canvas, CSS3, and WebGL are just a few, each with their own standards, strong and weak restrictions from platform to platform.
And finally, what seems to be the most important thing: for the users! All that matters here is that users want the same impressions and experiences they are used to. And that's the point the main task for developers, especially if their goal is to introduce the game to as many platforms as possible.
PC vs mobile cross-platformNow we all know fantastic examples of HTML5 games that run in PC browsers. They are often created by browser authors to demonstrate especially strengths own software, or for specific APIs that they would like to see ratified in the HTML5 specification.
Games like Cutthe Rope and Contre Jour for Internet Explorer or some of the excellent experiments for Chrome browser, like Jam or Racer, are great examples of this. If you're interested in future potential, check out libraries like three.js, the recently released open source Turbulenz, or Epic HTML5 powered by the Unreal Engine.
However, try looking at one of these examples on Android running OS2.3 (Gingerbread) and you'll see a completely different picture, and in some cases, nothing at all. Yes, this operating system is almost three years old, but it is still installed on a third of all devices on Android based, and this figure could be even higher depending on your target audience. And this happens not only old version Android. You can see the same thing on Apple devices, working with iOS system 5, or on less powerful devices like the Kindle Fire. In fact, now you will not find a single mobile device that will display any of the above-mentioned programs correctly.
As mentioned earlier, most clients choose HTML 5 to make their browser game truly cross-platform. If you're only developing games for PC, then Unity and Flash are great options to consider. Both have great support browsers and the ability to export to devices as individual applications, thanks to which they can be transferred to a smartphone or tablet with the same code that you need.
There are two obvious challenges when developing a cross-platform game in HTML5. The first is a consequence of the vague nature of the HTML5 specification, which results in future support being divided not by device type, but by the type of browser on each of those devices. The second, and most difficult for developers, is the constant change in the capabilities of mobile devices, which means that even with the same set of functions, a game on one device will be very different from the same game installed on another gadget.
To get an idea of how many options there are, simply run one of the many JavaScript tests to test device performance. For example, passing 100 frames through Canvas will play relatively well at 60 frames per second on devices like the iPhone 4S or 5, Galaxy S3, Nexus 7 or Lumia 820. But try the same code on other devices like HTC Desire(19 fps), Galaxy Ace(7 frames) or iPad 1 (9 fps), and you'll have to work really hard to get anything resembling a viable game.
If your project was aimed at a smartphone or tablet, and especially if these included older or low-power devices, then it is very important to test and decide on benchmarks early on. This is necessary in order to understand the limitations of the device range and decide on both the technical approach and the design of the game you will work on.
If your project was not aimed at smartphones or tablets, then you should probably reconsider your goals. For example, almost a third of page views in the UK come from smartphones and tablets, and this figure is growing at such a rate that it will overtake desktop views in 2014. Although desktop devices still dominate during work hours, they still lead the way in the morning. mobile devices, and in the evenings - tablets, and these two time periods are ideal for browsing the web and playing games.
Choose your battlesChunk has been developing cross-platform HTML5 games for broadcasters and brands for two years now, and created them based on the browser mobile games for clients like BBC and Disney, which run on everything from HTC Desire to iPad4, Nexus 7 to Xbox 360. 
As developers, it would be great for them to decide how deeply to go into this process, but this is determined by their target audience and the devices they use. While working on children's brands, they often found themselves within the limitations of old phones, or low-cost, low-power devices, but also carefully designed and optimized many other aspects, which is why they still believe that it is possible to develop impressive games for mobile Internet.
And what did they take away from this experience? Well, if I had to make a list of 10 best advice For HTML5 game developers, it would look like this:
1. Decide on your audienceLook at demographics and what devices are used by those you target. If you have the data, use it to determine the core range of devices your visitors use and target your decisions to those devices.
2. Define your design in terms of technology.Yes, this should always be the case, but the limitations and fragmentation in HTML5 make it even more relevant. WebGL will allow you to make an excellent 3D first-person shooter, but it is unlikely (read: not at all) to work on tablets if they are on your list of target platforms.
3. Make friends with caniuse.comThis is a great way to quickly test support for any HTML5 feature you'd like to use in your development—on virtually all browsers and devices.
4. Use devices, not just simulatorsTake control of as much as possible various devices, run as many as possible different versions operating systems. Simulators can help you during development, but you can only get an accurate picture of how your code will work. real device. There are a huge number of laboratories with testing devices such as Open Device Lab, which will give you access to a huge number of devices. IN otherwise, explore places like eBay where you can find old phones and add them to your test environment.
5. Stay up to date with changesThe HTML5 specification is constantly changing, as is device support, so you need to stay up to date with changes in these areas. This is especially true in areas such as audio, where features like the WebAudio API can radically change capabilities.
6. Be flexible throughout developmentWhat works today may not work tomorrow. What is unavailable to you today may become available tomorrow. Allow yourself to be flexible and adapt to changes that occur during your work.
7. Scale functionalityPutting mobile first isn't just useful in traditional web design. Look at how you can create something good for smartphones, and then consider functionality and performance on other platforms if they allow it. Work for those devices that use user agents or media devices and apply your experience regarding them.
8. KISS (Keep It Simple, Stupid) – Don’t complicate your life, stupidBy all means, try to define boundaries and expand capabilities, but remember that you are working with technology that is in its infancy, increased complexity or inflated project ambitions will only worsen your situation.
9. Decide on the lifespan of your designsFeatures change all the time, and your content may become outdated too quickly with new features available on devices. If your game is expected to last long enough, take the time to fix bugs and update the game version.
Oh yes. Check your games on all available devices as often as possible!
Gladiator, you will go on my second signalHTML5 looks set to be the unofficial core technology for cross-platform game development for different browsers, there is not the slightest doubt about it. IN this moment– this is not the most reliable space, but this is normal for technologies in their infancy. To check the capabilities of browsers, it is worth checking out sites like caniuse.com. Regularly check your games to ensure they are as good as possible. more devices available to you, and be pragmatic with game design. This will not only help you avoid problems now, but also put you in a better position when device support improves, which is inevitable.
Having spent several days in a row (without a break for sleep) studying the HTML5 support of all the favorite Android gadgets, I decided that this topic was worth paying attention to. In this article I will try to reveal step by step all the stages (of course basic/key/main) of creating an HTML5 Gaming application for Android from the idea to the release itself APK file. Perhaps I won’t reveal anything new to seasoned developers, but for beginners I will try to describe everything as simply as possible, with screenshots and explanations.Those wishing to learn more are invited to cat.
Idea In general, a lot can be said about the potential of Android, the development of HTML5 and their interaction. I won't do this. So, let's get straight to the point.The idea of creating a game for Android is probably in the minds of tens of hundreds of developers, and those who consider themselves such. I'm not an exception.
The whole process will be divided into several steps and the final application will consist of two parts:
- Wrapper (in this case for Android)
- A game
The game will not be difficult: there is a blue rectangle and there is a green rectangle. The player's task is to drag the blue rectangle onto the green one, bypassing the red one, which moves along the playing field in any direction.
To develop the game I will use J2ds (game engine).
Finished game code:
index.html
Demo Game on J2ds v.0
// Initialize the input device initInput("gameBody"); // Create a scene scene= createScene("iCanvas", "#aeeaae"); // Start at full screen mode scene.fullScreen(true); post= createPost(scene); score= 5; // Create rectangles blue= createRect(vec2di(100, 100), vec2di(30, 30), "blue"); green= createRect(vec2di(300, 200), vec2di(30, 30), "green"); green.dX= -1; green.dY= 1; red= createRect(vec2di(16, 200), vec2di(30, 30), "red"); red.dX= 1; red.dY= -1; restart= createRect(vec2di(430, 10), vec2di(60, 60), "#ad21ad"); GameOver= function() ( // Process the touch / mouse position input.upd(scene); // Draw the text scene.drawText(vec2di(5,5), "Score: "+score); // Draw the text scene.drawTextOpt (vec2df(140, 100), "Lost!", "bold 40px Courier New", "#326598"); if (input.lClick && input.onNode(restart)) setActivEngine(Game); restart.draw(scene) ; ) Success= function() ( // Process the touch / mouse position input.upd(scene); // Draw the text scene.drawText(vec2di(5,5), "Score: "+score); // Draw the text scene .drawTextOpt(vec2df(140, 100), "Victory!", "bold 40px Courier New", "#326598"); if (input.lClick && input.onNode(restart)) setActivEngine(Game); restart.draw( scene); ) // Describe the game state Game Game= function() ( // Process the touch / mouse position input.upd(scene); // Draw the text scene.drawText(vec2di(5,5), "Score: "+ score); blue.color= input.lClick?"yellow" : "blue"; if (input.lClick) ( red.move(vec2di(red.dX, red.dY)); green.move(vec2di(green. dX, green.dY)); blue.move(vec2df(blue.getPosition().x > input.pos.x ? -1*score/2: 1*score/2, blue.getPosition().y > input.pos.y ? -1* score/2: 1*score/2)) ; if (green.collisionScene(scene).x != 0) green.dX= -green.dX; if (green.collisionScene(scene).y != 0) green.dY= -green.dY; if (red.collisionScene(scene).x != 0) red.dX= -red.dX; if (red.collisionScene(scene).y != 0) red.dY= -red.dY; ) if (blue.collision(red)) ( input.cancel(); score-= 1; setActivEngine(GameOver); red.setPosition(vec2df(200, 100)); blue.setPosition(vec2df(50, 50)) ; ) if (blue.collision(green)) ( input.cancel(); score+= 1; setActivEngine(Success); red.setPosition(vec2df(200, 100)); blue.setPosition(vec2df(50, 50)) ; blue.setPosition(vec2di(Random(0, 450), Random(0, 250))); ) // Rotate the rectangles blue.turn(1); green.turn(720/blue.getDistance(green)); red.turn(Random(1, 5)); // Draw objects green.draw(scene); blue.draw(scene); red.draw(scene); //post.motionBlur(4); ) // Start the game with the game state Game and FPS 25 startGame(Game, 25);
You can ignore the quality of the game code, because this is not the purpose of the article. Although, of course, you can optimize as much as you like, this process is probably endless. Step 2. Android Studio. Creating a wrapper for a game I'm not going to compare the coolness of this or that IDE for Android development with anyone, but I'll show you Android example Studio. To work we will need:
- Java machine (OpenJDK is suitable for my Linux);
- Android Studio distribution.
Download and install.
Once everything is installed (These two programs are enough), launch Android Studio.
The start window will open (if this is the first launch), if not the first, then the IDE itself will open, but it doesn’t change the essence, let’s go to the SDK Manager:
Here you need to tick the boxes you need Android versions, with which you will work, in my case it is Android 4.4.2, you can choose all at once.
The main thing is to select “Tools” and “Extras” and click “install packages”.
Once you have everything downloaded, the IDE will launch with a dull gray background and several buttons, click the first one and create a new project. If the IDE started immediately in working condition, then: “File->New->New Project”
Fill in the required fields and click Next
Choose the required version Android and Next
Here we select Blank Activity (empty template with Hello, World!)
In the next window, fill in the data to create classes; I won’t change it for clarity:
We solemnly click Finich and wait until the IDE configures everything and prepares it for work.
A window with the form designer will open. It is not the same as in Lazarus or Delphi, but there is still something similar:
Don’t rush to change anything or click anything, the setup is not finished yet. Open “Tolls->Android->AVD Manager” to configure the emulator.
Here, if there is nothing, click “Create Virtual Device”; if there is one, you don’t have to create a new one, I already had one, because I “bumped” it while I was figuring it out. If you need to create a new emulator, then everything is simple:
1. Select the screen size and phone model
2. Select the Android version (I have 4.4.2)
3. Set up the device.
In the third step more details:
T.K. Our game is stretched horizontally, you need to select landscape mode.
When all the settings have been entered, click on the green triangle and launch the emulator. After startup, wait until the device boots completely and the OS starts:
Do not close this window, emulation will take place in it. Now you can return to the editor and change the orientation in the form designer:
You can launch! Now it’s definitely possible.
If you are asked to select an emulator, you can check the box below:
Congratulations! Everything works, tested!
We minimize our emulator (But don’t close it!) and go to the editor. Everything is a little more complicated there (a little bit).
You need to switch to “Text” mode. Your activity_main describes all the elements that are on the form. Including the form itself. And it’s not a form at all.
Because We are making a game in HTML5, but here we only have a wrapper for the game, we remove all the text and insert the following:
Now, if you switch to the design again, it will look different: 
As you can see, now instead of “Hello, World” there is a WebView stretched across the entire screen. This object is our “window” into the game world.
You can even run it and see if it works White screen. Go ahead.
This tab presents the project structure and all its internal files and resources.
Explanation
We need to find the “manifest” file and add the following line to the “application” definition:
android:hardwareAccelerated="true"
It's time to work on the functionality of our “browser”, because that’s what it is! Open the class “MainActivity.java” and remove everything unnecessary, leaving only the main thing:
Explanation
package com.soft.scanner.demogamehtml5; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; public class MainActivity extends AppCompatActivity ( @Override protected void onCreate(Bundle savedInstanceState) ( super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ) )
If you haven't forgotten, we added a WebView in the activity_main file, pay attention to the line in bold:
We need to declare an object of the WebView class.
To do this, add to the list of imports:
Import android.webkit.WebView;
And then we declare our myWeb object inside the MainActivity class:
Protected WebView myWeb;
Now, after the line setContentView(R.layout.activity_main); insert following code:
/* Find our browser */ myWeb= (WebView) findViewById(R.id.webView); /* Configure our browser */ myWeb.getSettings().setUseWideViewPort(true); myWeb.setInitialScale(1); myWeb.getSettings().setJavaScriptEnabled(true); /* Load the page */ myWeb.loadUrl("file:///android_asset/index.html");
This is what I got in the editor:
And here's what's in the emulator:
If the same is true for you, we are on the right track!
There is only a small matter left:
Where we load the page to our browser, the path to the file looks like this: “file:///android_asset/index.html”
It should be noted that we can store any files inside our game and have access to them.
In our case, the key folder is: “android_asset”, let’s create it (yes, it is not in the project by default):
“File -> New -> Folder -> Assets folder”, a window will open where you just need to agree with the IDE.
Did you notice? A new folder has appeared in the project:
Right-click on it -> “Show in Files”, it will open system explorer(in my case Nautilus), pay attention to the folder path. Also keep in mind that the folder is called “assets”, but it is accessed through “android_asset”.
The index.html file is the same index from the beginning of this article. Well, let's try to launch it!
A little advice: it is best to test on a real device via USB, so the test results will be clearer, and controlling the mouse is not the most convenient option, not to mention multiple clicks.
Step 3. Android Studio. Building the application and signing it When you have fully debugged the game (in the browser or on the emulator), the wrapper is completely ready and all stages of development are behind you, you can assemble the application. Android Studio allows you to collect applications and sign them with your keys.To create keys in this IDE there is special utility"KeyTool".
Let's move on to creation executable file applications (“Build -> Generate Signed APK”):
If you have not created keys and aliases before, click “Create New”. You can fill in the fields at your discretion; the accuracy of the data rests entirely with you.
The first field is the path to the folder where the key will be saved. After clicking Ok, the form will be filled out automatically:
It is not necessary to create new keys for subsequent applications; you can sign other applications with your key; this is precisely what the “Choose Existing” button is for.
In the next step, the IDE will ask you to enter your password again and then specify a folder to save the APK file.
Now you can relax and drink, for example, coffee. The system has started compiling, the result is in the status bar:
After the compilation is completed, the system will notify you about it.
Now you just need to move the file to your phone/tablet and install it like a regular application.
Result:
PM for an example, if necessary.
Instead of an introduction.
Having spent several days in a row (without a break for sleep) studying the HTML5 support of all the favorite Android gadgets, I decided that this topic was worth paying attention to. In this article I will try to reveal step by step all the stages (of course basic/key/main) of creating an HTML5 Game application for Android from the idea to the release of the APK file itself.
Perhaps I won’t reveal anything new to seasoned developers, but for beginners I will try to describe everything as simply as possible, with screenshots and explanations.
Those wishing to learn more are invited to cat.
Idea
In general, a lot can be said about the potential of Android, the development of HTML5 and their interaction. I won't do this. So, let's get straight to the point.
The idea of creating a game for Android is probably in the minds of tens of hundreds of developers, and those who consider themselves such. I'm not an exception.
Why HTML5? - Nativeness. You write a game in JS, and then for absolutely any OS you create a wrapper in a convenient form and in any language.
The whole process will be divided into several steps and the final application will consist of two parts:
- Wrapper (in this case for Android)
- A game
Step 1. Writing the game itself
Another advantage of writing a game in HTML5 is the fact that testing does not require a bunch of running programs, IDEs, emulators, and so on. All you need is a browser (in my case it's Chromium) and a text editor (BlueFish)
The game will be simple: if the blue rectangle is a green rectangle. The player's task is to drag the blue rectangle onto the green one, bypassing the red one, which moves along the playing field in any direction.
To develop the game I will use J2ds (game engine)
Finished game code:
index.html
Demo Game on J2ds v.0
// Initialize the input device initInput("gameBody"); // Create a scene scene= createScene("iCanvas", "#aeeaae"); // Start in full screen mode scene.fullScreen(true); post= createPost(scene); score= 5; // Create rectangles blue= createRect(vec2di(100, 100), vec2di(30, 30), "blue"); green= createRect(vec2di(300, 200), vec2di(30, 30), "green"); green.dX= -1; green.dY= 1; red= createRect(vec2di(16, 200), vec2di(30, 30), "red"); red.dX= 1; red.dY= -1; restart= createRect(vec2di(430, 10), vec2di(60, 60), "#ad21ad"); GameOver= function() ( // Process the touch / mouse position input.upd(scene); // Draw the text scene.drawText(vec2di(5,5), "Score: "+score); // Draw the text scene.drawTextOpt (vec2df(140, 100), "Lost!", "bold 40px Courier New", "#326598"); if (input.lClick && input.onNode(restart)) setActivEngine(Game); restart.draw(scene) ; ) Success= function() ( // Process the touch / mouse position input.upd(scene); // Draw the text scene.drawText(vec2di(5,5), "Score: "+score); // Draw the text scene .drawTextOpt(vec2df(140, 100), "Victory!", "bold 40px Courier New", "#326598"); if (input.lClick && input.onNode(restart)) setActivEngine(Game); restart.draw( scene); ) // Describe the game state Game Game= function() ( // Process the touch / mouse position input.upd(scene); // Draw the text scene.drawText(vec2di(5,5), "Score: "+ score); blue.color= input.lClick?"yellow" : "blue"; if (input.lClick) ( red.move(vec2di(red.dX, red.dY)); green.move(vec2di(green. dX, green.dY)); blue.move(vec2df(blue.getPosition().x > input.pos.x ? -1*score/2: 1*score/2, blue.getPosition().y > input.pos.y ? -1*score/2: 1*score/2)) ; if (green.collisionScene(scene).x != 0) green.dX= -green.dX; if (green.collisionScene(scene).y != 0) green.dY= -green.dY; if (red.collisionScene(scene).x != 0) red.dX= -red.dX; if (red.collisionScene(scene).y != 0) red.dY= -red.dY; ) if (blue.collision(red)) ( input.cancel(); score-= 1; setActivEngine(GameOver); red.setPosition(vec2df(200, 100)); blue.setPosition(vec2df(50, 50)) ; ) if (blue.collision(green)) ( input.cancel(); score+= 1; setActivEngine(Success); red.setPosition(vec2df(200, 100)); blue.setPosition(vec2df(50, 50)) ; blue.setPosition(vec2di(Random(0, 450), Random(0, 250))); ) // Rotate the rectangles blue.turn(1); green.turn(720/blue.getDistance(green)); red.turn(Random(1, 5)); // Draw objects green.draw(scene); blue.draw(scene); red.draw(scene); //post.motionBlur(4); ) // Start the game with the game state Game and FPS 25 startGame(Game, 30);
You can ignore the quality of the game code, because this is not the purpose of the article. Although, of course, you can optimize as much as you like, this process is probably endless.
Step 2. Android Studio. Creating a game wrapper
I’m not going to compare the coolness of this or that IDE for Android development with anyone, but I’ll show you using Android Studio as an example. To work we will need:
- Java machine (OpenJDK is suitable for my Linux)
- Android Studio distribution.
Download and install.
Once everything is installed (These two programs are enough), launch Android Studio.
The start window will open (if this is the first launch), if not the first, then the IDE itself will open, but it doesn’t change the essence, let’s go to the SDK Manager:
Here you need to tick off the required versions of Android that you will work with, in my case it is Android 4.4.2, you can select all of them at once.
The main thing is to select “Tools” and “Extras” and click “install packages”.
Once you have everything downloaded, the IDE will launch with a dull gray background and several buttons, click the first one and create a new project. If the IDE started immediately in working condition, then: “File->New->New Project”
Fill in the required fields and click Next
Select the desired version of Android and Next
Here we select Blank Activity (empty template with Hello, World!)
In the next window, fill in the data to create classes; I won’t change it for clarity:
We solemnly click Finich and wait until the IDE configures everything and prepares it for work.
A window with the form designer will open. It is not the same as in Lazarus or Delphi, but there is still something similar:
Don’t rush to change anything or click anything, the setup is not finished yet.
Open “Tolls->Android->AVD Manager” to configure the emulator.
Here, if there is nothing, click “Cereate Virtual Device”; if there is one, you don’t have to create a new one, I already had one, because I “bumped” it while I was figuring it out. If you need to create a new emulator, then everything is simple:
1. Select the screen size and phone model
2. Select the Android version (I have 4.4.2)
3. Set up the device.
In the third step more details:
T.K. Our game is stretched horizontally, you need to select landscape mode.
When all the settings have been entered, click on the green triangle and launch the emulator. After startup, wait until the device boots completely and the OS starts:
Do not close this window, emulation will take place in it. Now you can return to the editor and change the orientation in the form designer:
You can launch! Now it’s definitely possible.
If you are asked to select an emulator, you can check the box below:
Congratulations! Everything works, tested!
We minimize our emulator (But don’t close it!) and go to the editor. Everything is a little more complicated there (a little bit).
You need to switch to “Text” mode. Your activity_main describes all the elements that are on the form. Including the form itself. And it’s not a form at all =).
Because We are making a game in HTML5, but here we only have a wrapper for the game, we remove all the text and insert the following:
Now, if you switch to the design again, it will look different:
As you can see, now instead of “Hello, World” there is a WebView stretched across the entire screen. This object is our “window” into the game world.
You can even launch it and see if there is a white screen. Go ahead.
And then we need to go to our project, to do this, open the “Project” field on the left and select the “Android” tab, if not selected:
This tab shows the project structure and all its internal files and resources.
Spoiler title
We need to find the “manifest” file and add the following line to the “application” definition:
android:hardwareAccelerated="true"
It's time to work on the functionality of our “browser”, because that’s what it is! Open the class “MainActivity.java” and remove everything unnecessary, leaving only the main thing:
Spoiler title
Package com.soft.scanner.demogamehtml5; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; public class MainActivity extends AppCompatActivity ( @Override protected void onCreate(Bundle savedInstanceState) ( super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ) )
If you haven't forgotten, we added a WebView in the activity_main file, pay attention to the line in bold:
We need to declare an object of the WebView class.
To do this, add to the list of imports:
Import android.webkit.WebView;
And then we declare our myWeb object inside the MainActivity class:
Protected WebView myWeb;
Now, after the line setContentView(R.layout.activity_main); insert the following code:
/* Find our browser */ myWeb= (WebView) findViewById(R.id.webView); /* Configure our browser */ myWeb.getSettings().setUseWideViewPort(true); myWeb.setInitialScale(1); myWeb.getSettings().setJavaScriptEnabled(true); /* Load the page */ myWeb.loadUrl("file:///android_asset/index.html");
This is what I got in the editor:
And here's what's in the emulator:
If the same is true for you, we are on the right track!
There is only a small matter left:
Where we load the page to our browser, the path to the file looks like this: “file:///android_asset/index.html”
It should be noted that we can store any files inside our game and have access to them.
In our case, the key folder is: “android_asset”, let’s create it (yes, it is not in the project by default):
“File -> New -> Folder -> Assets folder”, a window will open where you just need to agree with the IDE.
Did you notice? A new folder has appeared in the project:
Right-click on it -> “Show in Files”, the system explorer will open (in my case Nautilus), pay attention to the path to the folder. Also keep in mind that the folder is called “assets”, but it is accessed through “android_asset”.
Then everything is quite simple - copy our game to the assets folder:
The index.html file is the same index from the beginning of this article. Well, let's try to launch it!
A little advice: it is best to test on a real device via USB, so the test results will be clearer, and controlling the mouse is not the most convenient option, not to mention multiple clicks.
Step 3. Android Studio. Building the application and signing it
When you have fully debugged the game (in the browser or on an emulator), the wrapper is completely ready and all stages of development are behind you, you can assemble the application. Android Studio allows you to collect applications and sign them with your keys.
To create keys, this IDE has a special utility “KeyTool”.
Let's move on to creating the executable application file (“Build -> Generate Signed APK”):
If you have not created keys and aliases before, click “Create New”
You can fill in the fields at your discretion; the accuracy of the data rests entirely with you.
The first field is the path to the folder where the key will be saved.
After clicking Ok, the form will be filled out automatically:
It is not necessary to create new keys for subsequent applications; you can sign other applications with your key, that is why there is a “Choose Existing” button
In the next step, the IDE will ask you to enter your password again and then specify a folder to save the APK file.
admin in the category Uncategorized. Add to bookmarks.
