👩🏼‍⚕️ 🚡 😧 Android向けのHTML5ゲーム開発をゼロからリリースまで 🏂🏽 💅🏾 💅🏽

参加する代わりに

お気に入りのAndroidガジェットすべてでHTML5のサポートを研究するために（夢のような休憩なしで）数日続けて過ごしたので、このトピックに注意を払う必要があると判断しました。記事では、Android向けHTML5ゲームアプリケーションを作成するアイデアからAPKファイル自体のリリースまでのすべての段階（もちろん、基本/キー/基本）を段階的に明らかにしようとします。おそらく私は、由緒ある開発者にとって新しいことは何も公開しませんが、初心者の場合は、スクリーンショットと説明を使用して、すべてをできるだけ簡単に説明しようとします。

猫の下でもっと知りたい人を招待します。

アイデア

一般に、Androidの可能性、HTML5の開発、およびそれらの相互作用について多くのことが言えます。私はこれをしません。だから、ポイントに右。

Android向けのゲームを作成するというアイデアは、数万人の開発者と、自分自身をそのように考えている開発者の頭の中に確かに収まっています。私も例外ではありません。

プロセス全体はいくつかのステップに分割され、最終的なアプリケーションは2つの部分で構成されます。
-ラッパー（この場合はAndroid用）
-ゲーム

ステップ1.ゲーム自体を書く

HTML5でゲームを書くことのもう1つの利点は、テストに多数の実行プログラム、IDE、エミュレータなどが必要ないという事実です。必要なのはブラウザ（私の場合はChromium）とテキストエディタ（BlueFish）だけです。

ゲームはシンプルになります。青い長方形と緑の長方形があります。プレーヤーのタスクは、青い長方形を緑の長方形にドラッグし、赤い長方形をバイパスすることです。赤い長方形は、競技場に沿って任意の方向に移動します。

ゲームを開発するには、J2ds（ゲームエンジン）を使用します。

終了したゲームのコード：

index.html

<!DOCTYPE html> <html> <head> <script type="text/javascript" src="j2ds/engineMath.js"></script> <script type="text/javascript" src="j2ds/engineKey.js"></script> <script type="text/javascript" src="j2ds/engineDOM.js"></script> <script type="text/javascript" src="j2ds/engine2D.js"></script> <script type="text/javascript" src="j2ds/engineNet.js"></script> <script type="text/javascript" src="j2ds/engineParticles.js"></script> <script type="text/javascript" src="j2ds/enginePE.js"></script> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width,user-scalable=no" /> <title>Demo Game on J2ds v.0</title> </head> <body id="gameBody"> <canvas id="iCanvas" width="500" height="280"></canvas> <br> <div id="hint"></div> <script type="text/javascript"> //    initInput('gameBody'); //   scene= createScene('iCanvas', '#aeeaae'); //     scene.fullScreen(true); post= createPost(scene); score= 5; //   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() { //    /  input.upd(scene); //   scene.drawText(vec2di(5,5), 'Score: '+score); //   scene.drawTextOpt(vec2df(140, 100), '!', 'bold 40px Courier New', '#326598'); if (input.lClick && input.onNode(restart)) setActivEngine(Game); restart.draw(scene); } Success= function() { //    /  input.upd(scene); //   scene.drawText(vec2di(5,5), 'Score: '+score); //   scene.drawTextOpt(vec2df(140, 100), '!', 'bold 40px Courier New', '#326598'); if (input.lClick && input.onNode(restart)) setActivEngine(Game); restart.draw(scene); } //    Game Game= function() { //    /  input.upd(scene); //   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))); } //   blue.turn(1); green.turn(720/blue.getDistance(green)); red.turn(Random(1, 5)); //   green.draw(scene); blue.draw(scene); red.draw(scene); //post.motionBlur(4); } //      Game  FPS 25 startGame(Game, 25); </script> </body> </html>

これは記事の目的ではないため、ゲームコードの品質に注意を払うことはできません。もちろん、好きなだけ最適化することができますが、このプロセスは一般に無限です。

ステップ2. Android Studio。ゲームのラッパーを作成する

これや、Android開発用のIDEのクールさを誰とでも測定するつもりはありませんが、例としてAndroid Studioを使用して示します。動作するには、次のものが必要です。
-Javaマシン（OpenJDKは私のLinuxに適しています）;
-Android Studioディストリビューション。

ダウンロード、インストール。

すべてがインストールされたら（これら2つのプログラムで十分です）、Android Studioを起動します。

開始ウィンドウが開きます（最初の開始の場合）、最初ではない場合、IDE自体は開きますが、本質は変わりません。SDKマネージャーに行きましょう：

ここでは、使用するAndroidの必要なバージョンを選択する必要があります。私の場合はAndroid 4.4.2です。少なくとも一度にすべてを選択できます。

主なもの-「ツール」と「エクストラ」を選択し、「パッケージのインストール」をクリックしてください。

すべてがダウンロードされると、IDEは鈍い灰色の背景といくつかのボタンで起動し、最初のボタンをクリックして新しいプロジェクトを作成します。 IDEがすぐに正常に動作する場合、「ファイル->新規->新規プロジェクト」

必須フィールドに入力して、「次へ」をクリックします

Androidの目的のバージョンを選択し、[次へ

ここでは、空のアクティビティ（Hello、World！を含む空のテンプレート）を選択します

次のウィンドウで、クラスを作成するためのデータを入力します。わかりやすくするために変更しません。

敬意を表してFinichをクリックし、IDEがすべての作業を構成および準備するのを待ちます。

フォームデザイナのあるウィンドウが開きます。 DelphiのLazarusとは異なりますが、同様のことがまだ存在します。

急いで何かを変更したり、何かをクリックしたりしないでください。設定はまだ完了していません。「Tolls-> Android-> AVD Manager」を開いて、エミュレーターを構成します。

ここで、何もない場合は「仮想デバイスの作成」をクリックします。ある場合、新しいデバイスを作成することはできません。私は理解している間に「つまずいた」。新しいエミュレータを作成する必要がある場合、すべてが簡単です。
1.画面サイズと電話モデルを選択します
2. Androidのバージョンを選択します（4.4.2があります）
3.デバイスをセットアップします。

3番目のステップでは、詳細を以下に示します。

T.K. ゲームは水平方向に引き伸ばされるため、横向きモードを選択する必要があります。

すべての設定を入力したら、緑色の三角形をクリックしてエミュレーターを起動します。起動後、デバイスが完全にロードされ、OSが起動するまで待機します。

このウィンドウは閉じないでください。エミュレートされます。これで、エディターに戻り、フォームデザイナで方向を変更できます。

走れます！今では間違いなく可能です。

エミュレータを選択するように求められたら、以下のボックスをチェックできます。

おめでとうございます！動作確認済み！

エミュレーターをオフにします（ただし、閉じないでください！）エディターに移動します。すべてが少し複雑です（少し）。
「テキスト」モードに切り替える必要があります。 activity_mainで説明されているフォームにあるすべての要素があります。フォーム自体を含む。そして、それはまったく形ではありません。

なぜなら HTML5でゲームを作成し、ここにはゲームのラッパーのみがあります。すべてのテキストを削除して、次を貼り付けます。

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" tools:context=".MainActivity"> <WebView android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/webView" android:clickable="true" android:scrollbars="none" /> </RelativeLayout>

ここで、設計に戻った場合、外観が異なります。

ご覧のとおり、「Hello、World」の代わりに、フルスクリーンはWebViewです。このオブジェクトは、ゲームの世界への「窓」です。

実行して、白い画面があるかどうかを確認することもできます。どうぞ

次に、プロジェクトに移動する必要があります。そのためには、左側の[プロジェクト]フィールドを開き、選択されていない場合は[Android]タブを選択します。

このタブには、プロジェクトの構造と、そのすべての内部ファイルとリソースが表示されます。

解説

マニフェストファイルを見つけて、アプリケーションの定義に次の行を追加する必要があります。

android:hardwareAccelerated="true"

それは彼だからです。私たちの「ブラウザ」の機能に取り掛かる時です！クラス「MainActivity.java」を開き、不要なものをすべて削除し、メインのみを残します。

解説

 package com.soft.skaner.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); } }

忘れていない場合は、activity_mainファイルにWebViewを追加しました。太字の行に注意してください。
<Webview
android：layout_width = "fill_parent"
android：layout_height = "fill_parent"
android：id = "@ + id / webView"
android：clickable = "true"
android：scrollbars = "none" />

WebViewクラスのオブジェクトを宣言する必要があります。

これを行うには、インポートのリストに追加します。

 import android.webkit.WebView;

そして、MainActivityクラス内でmyWebオブジェクトを宣言します。

 protected WebView myWeb;

次に、行setContentView（R.layout.activity_main）の後; 次のコードを挿入します。

  /*    */ myWeb= (WebView) findViewById(R.id.webView); /*    */ myWeb.getSettings().setUseWideViewPort(true); myWeb.setInitialScale(1); myWeb.getSettings().setJavaScriptEnabled(true); /*   */ myWeb.loadUrl("file:///android_asset/index.html");

ここに私がエディターで得たものがあります：

そして、これがエミュレータの内容です。

あなたが同じなら-私たちは正しい軌道に乗っています！

少しやることが残っています。
ブラウザでページを読み込むと、ファイルへのパスは次のようになります： "file：///android_asset/index.html"
ゲーム内に任意のファイルを保存し、それらにアクセスできることに注意してください。

この場合、キーフォルダーは「android_asset」です。作成してみましょう（はい、デフォルトではプロジェクトにありません）。
「ファイル->新規->フォルダー->アセットフォルダー」を選択すると、IDEを受け入れるのが非常に簡単なウィンドウが開きます。
気づいた？プロジェクトに新しいフォルダーが表示されました。

それを右クリックし、「ファイルに表示」を選択すると、システムエクスプローラー（私の場合はNautilus）が開き、フォルダーへのパスに注意してください。フォルダーは「アセット」と呼ばれますが、「android_asset」経由でアクセスすることに注意してください。

その後、すべてが非常に簡単です-ゲームをアセットフォルダーにコピーします。

index.htmlファイルは、この記事の最初からの同じインデックスです。さて、実行してみてください！

ちょっとしたヒント：USBを介して実際のデバイスでテストするのが最善です。テスト結果はより視覚的になり、マウスの制御は複数のクリックは言うまでもなく最も便利なオプションではありません。

ステップ3. Android Studio。アプリケーションを構築して署名する

ゲームが（ブラウザまたはエミュレータで）完全にデバッグされると、ラッパーは完全に準備が整い、すべての開発段階が遅れて、アプリケーションをビルドできます。 Android Studioを使用すると、アプリケーションを収集して、キーで署名できます。

キーを作成するために、このIDEにはKeyToolと呼ばれる特別なユーティリティがあります。

アプリケーションの実行可能ファイルの作成に進みます（「ビルド->署名済みAPKの生成」）：