Game di html5 android Rusia. Pengembangan game HTML5 untuk Android dari awal hingga rilis

Strategi Brian McHarg untuk berhasil mengembangkan game HTML5 lintas-browser, lintas-platform.

HTML5: pewaris sah takhta game flash. Pengembangan lintas platform yang sesungguhnya memungkinkan Anda menjalankan program yang pernah ditulis di PC, tablet, dan ponsel cerdas, program itu juga akan berfungsi di Smart TV, dan di desktop dan perangkat seluler, termasuk konsol permainan seperti Xbox360 atau PlayStation 3 melalui browser bawaannya. Jelas bahwa ini sangat menarik bagi mereka yang ingin mengembangkan game untuk sebanyak mungkin perangkat dan platform.

Istilah HTML5 itu sendiri, serta spesifikasi yang diwakilinya, memiliki arti yang berbeda tergantung pada siapa yang menggambarkannya. Untuk klien, ini adalah teknologi pengembangan yang menjanjikan cawan suci yang nyata - dan pengembangan lintas platform yang hemat biaya.

Untuk pengembang, ini adalah kata benda kolektif untuk banyak teknologi yang berbeda: JavaScript, WebSockets, WebAudio, Canvas, CSS3, dan WebGL untuk menyebutkan beberapa, masing-masing dengan standarnya sendiri, batasan lemah yang kuat dari platform ke platform.

Dan akhirnya, tampaknya, hal yang paling penting: untuk pengguna! Satu-satunya hal yang penting di sini adalah pengguna ingin mendapatkan kesan dan pengalaman yang sama seperti biasanya. Dan inilah tugas utama para developer, apalagi jika tujuannya adalah untuk memperkenalkan game tersebut ke sebanyak mungkin platform.

PC vs seluler lintas platform

Sekarang, kita semua tahu contoh fantastis game HTML5 yang berjalan di browser PC. Mereka sering dibuat oleh penulis browser untuk mendemonstrasikan kekuatan memiliki perangkat lunak, atau untuk API tertentu yang ingin mereka lihat disahkan dalam spesifikasi HTML5.

Game seperti Cutthe Rope dan Contre Jour untuk Internet Explorer atau beberapa eksperimen luar biasa untuk peramban Chrome seperti Jam atau Racer adalah contoh yang bagus. Jika Anda tertarik dengan potensi masa depan, lihat perpustakaan seperti three.js, Turbulenz open source yang baru-baru ini dirilis, atau Epic HTML5 yang didukung oleh Unreal Engine.

Namun, coba lihat salah satu contoh ini di Android dengan OS2.3 (Gingerbread) terinstal dan Anda akan melihat gambar yang sama sekali berbeda, dan dalam beberapa kasus tidak ada sama sekali. Ya, sistem operasi ini berusia hampir tiga tahun, tetapi masih diinstal pada sepertiga dari semua perangkat Android, dan angka ini bisa lebih tinggi lagi tergantung pada audiens target Anda. Dan ini terjadi tidak hanya di versi lama Android. Anda dapat melihat hal yang sama di Perangkat Apple menjalankan iOS 5 atau perangkat yang kurang kuat seperti Kindle Fire. Faktanya, saat ini Anda tidak akan menemukan perangkat seluler apa pun yang akan menampilkan salah satu program di atas dengan benar.

Seperti disebutkan sebelumnya, sebagian besar pelanggan memilih HTML 5 agar game browser mereka benar-benar lintas platform. Jika Anda mengembangkan game khusus PC, Unity dan Flash adalah opsi yang bagus untuk dilihat. Keduanya memiliki - dukungan yang luar biasa browser dan kemampuan untuk mengekspor ke perangkat sebagai aplikasi individu, berkat itu mereka dapat ditransfer ke ponsel cerdas atau tablet dengan kode yang Anda butuhkan.

Ada dua masalah nyata saat mengembangkan game lintas platform di HTML5. Yang pertama adalah konsekuensi dari sifat kabur dari spesifikasi HTML5, di mana dukungan di masa mendatang tidak dibagi berdasarkan jenis perangkat, tetapi berdasarkan jenis browser pada masing-masing perangkat tersebut. Yang kedua, dan yang paling sulit bagi pengembang, adalah perubahan konstan dalam kemampuan perangkat seluler, yang berarti bahwa bahkan dengan serangkaian fungsi yang sama, game di satu perangkat akan sangat berbeda dari game yang sama yang diinstal di gadget lain.

Untuk mendapatkan gambaran tentang berapa banyak opsi yang ada, jalankan saja salah satu dari banyak pengujian JavaScript untuk menguji kinerja perangkat. Misalnya, melewati 100 bingkai melalui Kanvas akan bermain relatif baik pada 60 bingkai per detik pada perangkat seperti iPhone 4S atau 5, Galaxy S3, Nexus 7, atau Lumia 820. Namun coba kode yang sama pada perangkat lain seperti HTC Desire(19fps) Galaxy Ace(7 fps) atau iPad 1 (9 fps) dan Anda harus bekerja sangat keras untuk mendapatkan game yang layak.

Jika proyek Anda menargetkan ponsel cerdas atau tablet, dan terutama jika ini termasuk perangkat yang lebih lama atau berdaya rendah, maka sangat penting untuk menguji dan menentukan tolok ukur pada tahap awal. Ini diperlukan untuk memahami batasan jangkauan perangkat dan memutuskan pendekatan teknis dan desain game yang akan Anda kerjakan.

Jika proyek Anda tidak ditujukan untuk ponsel cerdas atau tablet, maka Anda mungkin perlu memikirkan kembali tujuan Anda. Misalnya, hampir sepertiga dari tampilan halaman Inggris Raya ada di ponsel cerdas dan tablet, dan angka ini tumbuh pada tingkat yang akan melampaui tampilan halaman PC pada awal tahun 2014. Sementara perangkat desktop masih mendominasi jam kerja, pagi hari memimpin. perangkat seluler, dan di malam hari - tablet, dan dua periode waktu ini ideal untuk menjelajahi web dan bermain game.

Pilih pertempuran Anda

Chunk telah mengembangkan game lintas platform HTML5 untuk penyiar dan merek selama dua tahun sekarang, dan telah membuat game seluler berbasis browser untuk klien seperti BBC dan Disney yang berjalan di segala hal mulai dari HTC Desire hingga iPad4, Nexus 7 hingga Xbox.360.

Sebagai pengembang, akan sangat bagus bagi mereka untuk memutuskan seberapa dalam mereka harus disematkan dalam proses ini, tetapi ini ditentukan oleh audiens target mereka dan perangkat yang mereka gunakan. Saat mengerjakan merek anak-anak, mereka sering kali harus menemukan diri mereka dalam keterbatasan ponsel lama, atau perangkat murah dan berdaya rendah, tetapi pada saat yang sama merancang dan mengoptimalkan banyak hal dengan hati-hati, itulah sebabnya mereka masih percaya bahwa itu adalah mungkin untuk mengembangkan game yang mengesankan untuk seluler. Internet.

Dan apa yang mereka ambil dari pengalaman ini? Nah, jika Anda harus membuat daftar 10 saran terbaik untuk pengembang game HTML5, tampilannya akan seperti ini:

1. Tentukan audiens

Lihat demografi dan perangkat apa yang digunakan oleh orang yang Anda targetkan. Jika Anda memiliki data, gunakan untuk mengidentifikasi perangkat teratas yang digunakan pengunjung Anda dan mendasarkan keputusan Anda pada perangkat tersebut.

2. Tentukan desain dalam hal teknologi

Ya, ini harus selalu terjadi, tetapi keterbatasan dan fragmentasi di HTML5 membuatnya lebih relevan. WebGL akan memungkinkan Anda untuk membuat penembak orang pertama 3D yang sangat baik, tetapi tidak mungkin (baca: tidak sama sekali) untuk bekerja di tablet jika mereka ada di daftar platform target Anda.

3. Berteman dengan caniuse.com

Ini adalah cara yang bagus untuk menguji dukungan dengan cepat untuk fitur HTML5 apa pun yang ingin Anda gunakan dalam pengembangan Anda—untuk hampir semua browser dan perangkat.

4. Gunakan Perangkat, Bukan Hanya Simulator

Dapatkan tangan Anda sebanyak mungkin berbagai perangkat, jalankan sebanyak mungkin versi sistem operasi yang berbeda. Simulator akan membantu Anda selama pengembangan, tetapi Anda hanya bisa mendapatkan gambaran akurat tentang cara kerja kode Anda di perangkat nyata. Ada banyak sekali lab dengan perangkat uji seperti Open Device Lab yang akan memberi Anda akses ke sejumlah besar perangkat. Jika tidak, cari sumber daya seperti eBay untuk menemukan ponsel lama dan menambahkannya ke lingkungan pengujian Anda.

5. Waspadai perubahan

Spesifikasi HTML5 terus berubah, seperti halnya dukungan perangkat, jadi Anda harus selalu mengikuti perubahan di area ini. Hal ini terutama berlaku di area seperti audio, di mana fitur seperti WebAudio API dapat mengubah pengalaman secara radikal.

6. Bersikaplah fleksibel selama pengembangan

Apa yang berhasil hari ini mungkin tidak berhasil besok. Apa yang tidak tersedia untuk Anda hari ini bisa menjadi tersedia besok. Biarkan diri Anda fleksibel dan beradaptasi dengan perubahan yang terjadi selama Anda bekerja.

7. Fungsi skala

Mendahulukan seluler berguna untuk lebih dari sekadar desain web tradisional. Lihat bagaimana Anda dapat membuat sesuatu yang bagus untuk ponsel cerdas, lalu putuskan fungsionalitas dan kinerjanya di platform lain, jika mereka mengizinkannya. Bekerja untuk perangkat yang menggunakan agen pengguna atau perangkat media dan terapkan pengalaman Anda dengan mereka.

8. Ciuman (Tetap Sederhana, Bodoh)

Dengan segala cara cobalah untuk menentukan batasan dan memperluas kemungkinan, tetapi ingat bahwa Anda bekerja dengan teknologi yang masih dalam tahap awal, peningkatan kompleksitas atau ambisi proyek yang terlalu tinggi hanya akan memperburuk situasi Anda.

9. Tentukan umur desain Anda

Kemampuan berubah sepanjang waktu, dan konten Anda bisa menjadi usang terlalu cepat dengan fitur baru yang tersedia di perangkat. Jika game Anda harus bertahan cukup lama, luangkan waktu untuk memperbaiki bug dan memperbarui versi game.

Oh ya. Periksa game Anda untuk semua orang perangkat yang tersedia sesering mungkin!

Gladiator, Anda naik sinyal kedua saya

HTML5 tampaknya menjadi teknologi inti tidak resmi untuk pengembangan game lintas-browser lintas platform, tidak ada keraguan sedikit pun tentang itu. PADA saat ini bukan ruang yang paling dapat diandalkan, tetapi itu normal untuk teknologi dalam masa pertumbuhan. Untuk memeriksa kemampuan browser, Anda harus membiasakan diri dengan situs seperti caniuse.com. Periksa game Anda secara teratur sebanyak mungkin lagi perangkat yang tersedia untuk Anda, dan bersikap pragmatis dengan desain game. Ini akan membantu Anda menghindari masalah tidak hanya sekarang, tetapi juga berada dalam posisi yang lebih baik ketika dukungan perangkat meningkat, yang tidak dapat dihindari.

Permainan gratis di Android. Dibuat dalam html5, sehingga dapat dimainkan di ponsel dan tablet Anda. Selain sistem Android, perangkat seluler Windows, Linux, Mac, dan Apple didukung. Yang utama adalah browsernya modern dan sistemnya baru. Kontrol mouse atau layar sentuh.

Game Android sempurna. Mereka dapat dimainkan di PC dan telepon. Mereka dapat diunduh (diinstal) untuk akses cepat.

Cara mengunduh game HTML5 di ponsel Anda

Buka halaman permainan di situs web kami. Buka game dalam layar penuh di browser modern seperti Chrome. Klik di browser pada tombol dengan tiga titik, yang menyembunyikan perintah menu untuk bekerja dengan halaman. Gulir ke bawah daftar dan pilih "Tambahkan game ke layar utama” (Tambahkan ke Layar Utama - jika Anda tidak memiliki Chrome Russified). Setelah itu, game akan muncul di layar ponsel Anda dan Anda dapat meluncurkannya secara langsung, tanpa meluncurkan browser.

Operasi ini tersedia untuk ponsel dan tablet android dan Apple, tetapi untuk yang terakhir, perintahnya mungkin terletak di tempat lain - di menu bawah Safari.

Gim ini mungkin memerlukan internet untuk berfungsi (atau mungkin tidak, tergantung pada spesifikasi gim tertentu - sejumlah gim tersedia untuk offline, tetapi ini harus diperiksa sekarang.) Gim ini secara otomatis diunduh dan disimpan di ponsel Anda, tetapi koneksi mungkin diperlukan untuk mengunduh papan peringkat online atau fitur lainnya.

Instal sebagai game Android biasa

Hampir setiap game HTML5 memiliki versi di bawah sistem operasi Android atau iOS. Jika memasang game HTML5 di layar beranda tidak cocok untuk Anda - katakanlah Anda ingin bermain sepanjang waktu, dan bukan hanya saat ada Internet - maka cari ikon di intro game Google Play dan AppStore. Meskipun game lebih jarang dirilis untuk perangkat apple, dan lebih sering Anda hanya dapat melihat tombol android, seperti ini:

Tombol instal - cari di game

Dalam gim itu sendiri, tombolnya jauh lebih kecil, ini diperbesar sehingga Anda mengingatnya. Perhatikan tangkapan layar game di bawah ini - coba temukan tombol ini di sana. Mereka mengarah ke Google Play resmi, tempat Anda dapat mengunduh versi gratis game dengan fitur-fitur canggih - seperti kemampuan untuk bermain offline.

Didedikasikan untuk penggemar game di Android ...

Ketika mereka pertama kali memberi tahu saya bahwa hal seperti itu ada, saya tidak terlalu memperhatikan, karena saya umumnya bukan penggemar berat semua tren bermodel baru ini. Namun, kemudian saya menyadari bahwa game Android adalah sesuatu seperti mainan "platform" - saya langsung ingin mencoba apa itu. Saya masih ingat betapa menariknya permainan untuk awalan "delapan bit" Dendy atau Sega bagi saya. Dan di sini peradaban telah sampai pada apa - pikirkan saja, telepon tanpa tombol dan dengan fungsi yang memungkinkan Anda bermain game. Ini menggoda, jangan katakan apa-apa!

Faktanya, sebuah game diinstal di ponsel Anda (atau proses game dilakukan secara eksklusif melalui browser - opsi ini juga sedang dipertimbangkan), dengan memperhatikan bahwa Anda dapat bersaing tidak hanya dengan kecerdasan buatan (artinya Komputer pribadi), tetapi juga dengan peserta lain (seluruh proses berlangsung online).

Manfaat Jelas dari HTML5

Bukan rahasia lagi bahwa HTML5 menggantikan Flash dan merupakan dasar dari Web modern. Karena alasan inilah game yang dibuat atas dasarnya mulai berfungsi di Internet - apalagi, saat ini game yang memungkinkan untuk bersaing dengan pengguna lain semakin memberikan minat kepada pelanggan (terutama jika tidak perlu mengunduh dan menginstal di komputer Anda ). Fitur ini, pada gilirannya, membantu menyingkirkan banyak perangkat lunak perusak, yang tidak memungkinkan Anda untuk bekerja pada PC Anda.

Semua game Android dan PC ini dibuat di bawah browser modern dan mereka hanya membutuhkan JavaScript, Canvas, dan HTML5 agar berfungsi dengan sukses. Bergantung pada tugas apa yang perlu dilakukan selama permainan ini, beberapa varietas biasanya dibedakan:

Arkade
asah otak
Strategi
Penerbangan
Petualangan
Balapan
Dapat diunduh
Peramban

Contoh game online untuk Android

Sebelumnya, saya sama sekali tidak tertarik bermain game di ponsel, tetapi semuanya berubah setelah saya masuk ke situs situs. Di sana saya berkenalan dengan apa itu game online di Android, saya mencoba sejumlah besar "mainan" yang berbeda. Adapun saya, game terbaik untuk Android, disajikan di situs ini (dan tidak hanya di situs ini) - mahjong dan.

Kenapa saya bilang begitu? Semuanya sangat sederhana. Sepanjang hidup saya, saya lebih suka game dengan bias strategis, dan dengan semburat tema abad pertengahan yang jelas, serta fantasi. Jadi saya dapat mengatakan bahwa saya benar-benar menemukan apa yang saya sukai. Tapi bukan itu intinya.

Yang paling saya sukai dari situs ini adalah yang paling banyak berisi jenis yang berbeda game online, dan selain itu - memang, semuanya membutuhkan perangkat lunak yang sangat sedikit (sungguh, selain JavaScript, Canvas, dan HTML5, tidak ada yang diperlukan untuk pekerjaan mereka).

Game gratis untuk Android

Berkat model Free2Play, semua game Android yang disajikan di situs ini gratis. Mereka dapat dimainkan dalam layar penuh di PC dan tablet. Namun hal utama yang membedakannya dengan game flash adalah akhirnya bisa dimainkan di ponsel.

Teknologi dasar yang memungkinkan game HTML5 adalah kombinasi HTML dan JavaScript. Hypertext Markup Language (HTML) adalah bagian dari jalan raya Internet awal seperti yang mereka sebut saat itu dan terus digunakan untuk melayani setiap situs web saat ini. Kode JavaScript ditambahkan ke browser versi kedua seperti Netscape 2.0 pada tahun 1995 dan telah berkembang selama bertahun-tahun menjadi lebih menyenangkan untuk dibaca dan ditulis. Pada hari-hari awal, itu disebut sebagai DHTML atau HTML dinamis karena diizinkan untuk konten interaktif tanpa penyegaran halaman. Namun, sulit untuk dipelajari dan digunakan di era web awal. Seiring waktu Javascript dengan bantuan Google Chrome pengembang menjadi salah satu bahasa scripting tercepat. Ini juga memiliki lebih banyak modul, perpustakaan, dan skrip yang tersedia secara bebas daripada bahasa pengkodean lainnya.

Game DHTML awal sangat sederhana. Beberapa contoh game saat itu adalah Tic-Tac-Toe dan . Karena game yang dibuat dengan teknologi ini menggunakan standar terbuka HTML5, game yang relatif kuno ini masih dapat dimainkan hingga sekarang di browser web modern. Teknologi ini telah menjadi yang terdepan dalam game browser karena tidak memerlukan plugin dan lebih aman untuk dimainkan daripada teknologi lama. Game HTML5 juga mendukung dan kemampuannya telah ditingkatkan untuk mendukung 2D dan

Alih-alih sebuah intro.
Setelah menghabiskan beberapa hari berturut-turut (tanpa istirahat untuk tidur) mempelajari dukungan HTML5 untuk semua gadget Android favorit saya, saya memutuskan bahwa topik ini layak untuk diperhatikan. Dalam artikel ini saya akan mencoba mengungkapkan langkah demi langkah semua tahapan (tentu saja, dasar / kunci / utama) membuat HTML5 aplikasi game untuk Android dari ide hingga rilis berkas APK.
Mungkin saya tidak akan mengungkapkan sesuatu yang baru kepada pengembang yang terhormat, tetapi untuk pemula saya akan mencoba menggambarkan semuanya sesederhana mungkin, dengan tangkapan layar dan penjelasan.

Bagi yang ingin mempelajari lebih lanjut, saya undang di bawah cat.

Ide
Secara umum, banyak yang bisa dikatakan tentang potensi Android, tentang perkembangan HTML5 dan tentang interaksinya. Aku tidak akan melakukannya. Jadi, langsung ke intinya.

Ide membuat game untuk Android mungkin ada di benak puluhan ratusan pengembang, dan mereka yang menganggap diri mereka seperti itu. Saya bukan pengecualian.

Mengapa HTML5? - Kelahiran. Anda menulis game di JS, dan kemudian untuk OS apa pun Anda membuat pembungkus dalam bentuk yang nyaman dan dalam Bahasa apa pun.

Seluruh proses akan dibagi menjadi beberapa langkah dan aplikasi akhir akan terdiri dari dua bagian:
- Bungkus (dalam kasus ini untuk Android)
- Permainan

Langkah 1. Menulis game itu sendiri
Manfaat lain dari menulis game di HTML5 adalah fakta bahwa itu tidak memerlukan banyak menjalankan program, IDE, emulator, dan sebagainya. Yang Anda butuhkan hanyalah browser (Chromium dalam kasus saya) dan editor teks(ikan biru)

Permainannya akan sederhana: jika ada persegi panjang biru dan ada persegi panjang hijau. Tugas pemain adalah menyeret persegi panjang biru ke persegi hijau, melewati yang merah, yang bergerak melintasi lapangan bermain ke arah yang sewenang-wenang.

Untuk pengembangan game saya akan menggunakan J2ds (game engine)

Kode permainan yang sudah selesai:

index.html

Demo Game di J2ds v.0

Anda dapat mengabaikan kualitas kode game, karena ini bukan tujuan artikel. Meskipun, tentu saja, Anda dapat mengoptimalkan sebanyak yang Anda suka, proses ini umumnya mungkin tidak ada habisnya.

Langkah 2 studio android. Membuat pembungkus untuk game
Saya tidak akan mengukur kesejukan IDE ini atau itu untuk pengembangan Android dengan siapa pun, tetapi saya akan menunjukkannya kepada Anda di Contoh Android studio. Untuk pekerjaan kita membutuhkan:
- Mesin Java (OpenJDK cocok untuk Linux saya)
- Distribusi Android Studio.

Unduh, instal.
Setelah semuanya terinstal (Dua program ini sudah cukup), luncurkan Android Studio.

Jendela mulai akan terbuka (jika itu adalah peluncuran pertama), jika bukan yang pertama, maka IDE itu sendiri akan terbuka, tetapi tidak mengubah esensi, mari kita pergi ke SDK Manager:

Di sini Anda perlu mencentang kotak yang Anda butuhkan versi android, dengan mana Anda akan bekerja, dalam kasus saya ini adalah Android 4.4.2, Anda dapat memilih setidaknya sekaligus.

Hal utama - pastikan untuk memilih "Alat" dan "Ekstra" dan klik "instal paket".

Segera setelah semuanya diunduh, IDE akan mulai dengan membosankan latar belakang abu-abu dan beberapa tombol, tekan yang pertama dan buat proyek baru. Jika IDE segera mulai dalam kondisi kerja, maka: "File-> New-> New Project"

Isi bidang yang diperlukan dan klik Berikutnya

Pilih versi android yang diinginkan dan Berikutnya

Di sini kita memilih Blank Activity (template kosong dengan Hello, World!)

Di jendela berikutnya, isi data untuk membuat kelas, saya tidak akan mengubah untuk kejelasan:

Kami dengan sungguh-sungguh menekan Finich dan menunggu hingga IDE mengonfigurasi dan menyiapkan semuanya untuk bekerja.

Jendela perancang formulir akan terbuka. Ini tidak sama dengan di Lazarus, Delphi, tetapi masih ada yang serupa:

Jangan terburu-buru untuk mengubah apa pun atau mengklik sesuatu, pengaturannya belum selesai.
Buka "Tolls->Android->AVD Manager" untuk mengonfigurasi emulator.

Di sini kalau tidak ada, klik "Buat Virtual Device", jika ada, Anda tidak dapat membuat yang baru, saya sudah memilikinya, karena Saya "tersandung" ketika saya menemukan jawabannya. Jika Anda perlu membuat emulator baru, maka semuanya sederhana di sana:
1. Pilih ukuran layar dan model ponsel
2. Pilih versi android (saya punya 4.4.2)
3. Siapkan perangkat.

Pada langkah ketiga secara lebih rinci:

T.K. permainan diregangkan secara horizontal, Anda harus memilih mode lansekap.

Ketika semua pengaturan dimasukkan, klik pada segitiga hijau dan mulai emulator. Setelah memulai, kami menunggu hingga perangkat terisi penuh dan OS dimulai:

Jangan tutup jendela ini, emulasi akan berlangsung di dalamnya. Sekarang Anda dapat kembali ke editor dan mengubah orientasi di desainer formulir:

Anda bisa lari! Sekarang itu pasti mungkin.
Jika Anda diminta untuk memilih emulator, Anda dapat mencentang kotak di bawah ini:

Ucapan selamatku! Semuanya bekerja, diperiksa!

Minimalkan emulator kami (Tapi jangan tutup!) dan pergi ke editor. Semuanya sedikit lebih rumit (sedikit) di sana.
Anda perlu beralih ke mode "Teks". Di activity_main Anda, semua elemen yang ada di formulir dijelaskan. Termasuk bentuk itu sendiri. Dan itu sama sekali bukan bentuk =).

Karena kami membuat game dalam HTML5, dan di sini kami hanya memiliki pembungkus untuk game, kami menghapus semua teks dan menempelkan yang berikut ini:

Sekarang, jika Anda beralih kembali ke desain, itu akan terlihat berbeda:

Seperti yang Anda lihat, sekarang alih-alih "Halo, Dunia", WebView membentang ke layar penuh memamerkan secara penuh. Objek ini adalah "jendela" kita ke dunia game.

Anda bahkan dapat berlari, lihat apakah itu akan Layar putih. Pindah.

Dan kemudian kita harus pergi ke proyek kita, untuk ini kita buka bidang "Proyek" di sebelah kiri dan pilih tab "Android", jika tidak dipilih:

Tab ini menunjukkan struktur proyek dan semua file dan sumber daya internalnya.

judul spoiler

Kita perlu menemukan file "manifes" dan menambahkan "aplikasi" ke definisi baris berikutnya:
android:hardwareaccelerated="benar"

Saatnya mengerjakan fungsionalitas "browser" kami, karena ini dia! Buka kelas "MainActivity.java" dan hapus semua yang tidak perlu, hanya menyisakan yang utama:

judul spoiler

Paket com.soft.scanner.demogamehtml5; impor android.support.v7.app.AppCompatActivity; impor android.os.Bundle; MainActivity kelas publik memperluas AppCompatActivity ( @Override protected void onCreate(Bundle storedInstanceState) ( super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ) )

Jika Anda tidak lupa, kami menambahkan WebView di file activity_main, perhatikan garis tebal:
android:layout_width="isi_induk"
android:layout_height="isi_induk"
android:id="@+id/webView"
android: dapat diklik = "benar"
android:scrollbars="none" />

Kita perlu mendeklarasikan objek dari kelas WebView.

Untuk melakukan ini, tambahkan ke daftar impor:

Impor android.webkit.WebView;

Dan kemudian kami mendeklarasikan objek myWeb kami di dalam kelas MainActivity:

Web yang DilindungiLihat myWeb;

Sekarang, setelah garis setContentView(R.layout.activity_main); rekatkan kode berikut:

/* Temukan browser kami */ myWeb= (WebView) findViewById(R.id.webView); /* Siapkan browser kita */ myWeb.getSettings().setUseWideViewPort(true); myWeb.setInitialScale(1); myWeb.getSettings().setJavaScriptEnabled(true); /* Muat halaman */ myWeb.loadUrl("file:///android_asset/index.html");

Inilah yang saya dapatkan di editor:

Dan inilah yang ada di emulator:

Jika Anda merasakan hal yang sama, kami berada di jalur yang benar!

Ada sedikit yang tersisa untuk dilakukan:
Di mana kami memuat halaman di browser kami, jalur ke file terlihat seperti ini: "file:///android_asset/index.html"
Perlu dicatat bahwa kami dapat menyimpan file apa pun di dalam game kami, memiliki akses ke sana.

Dalam kasus kami, folder kuncinya adalah "android_asset", mari kita buat (ya, itu tidak ada dalam proyek secara default):
“File -> New -> Folder -> Assets folder”, sebuah jendela akan terbuka di mana Anda hanya perlu menyetujui IDE.
diperhatikan? Proyek ini memiliki folder baru:

Klik kanan padanya -> "Show in Files", penjelajah sistem akan terbuka (dalam kasus saya, Nautilus), perhatikan jalur ke folder. Perlu diingat bahwa folder tersebut disebut "assets" tetapi diakses melalui "android_asset".

Maka semuanya cukup sederhana - salin game kami ke folder aset:

File index.html adalah indeks yang sama dari awal artikel ini. Nah, mari kita coba lari!

Sedikit saran: yang terbaik adalah menguji pada perangkat nyata melalui USB, sehingga hasil pengujian akan lebih jelas, dan kontrol mouse bukanlah pilihan yang paling nyaman, belum lagi beberapa klik.

Langkah 3Android Studio Membangun aplikasi dan menandatanganinya

Saat game sepenuhnya di-debug oleh Anda (di browser atau emulator), pembungkusnya benar-benar siap dan semua tahap pengembangan selesai, Anda dapat membangun aplikasi. Android Studio memungkinkan Anda membuat aplikasi dan menandatanganinya dengan kunci Anda.

Untuk membuat kunci di IDE ini ada utilitas khusus alat kunci.

Mari kita beralih ke membuat file aplikasi yang dapat dieksekusi ("Build -> Generate Signed APK"):

Jika Anda belum pernah membuat kunci dan alias sebelumnya, klik "Buat Baru"
Anda dapat mengisi bidang sesuai kebijaksanaan Anda, keakuratan data sepenuhnya ada pada Anda.

Bidang pertama adalah jalur ke folder tempat kunci akan disimpan.
Setelah mengklik Ok, formulir akan terisi secara otomatis:

Untuk aplikasi selanjutnya, tidak perlu membuat kunci baru, Anda dapat menandatangani aplikasi lain dengan kunci Anda, inilah gunanya tombol "Pilih yang Ada"
Pada langkah selanjutnya, IDE akan meminta Anda untuk memasukkan kata sandi lagi, lalu tentukan folder untuk menyimpan file APK.
admin dalam kategori Uncategorized. Tambahkan ke bookmark.

Setelah menghabiskan beberapa hari berturut-turut (tanpa istirahat untuk tidur) mempelajari dukungan HTML5 untuk semua gadget Android favorit saya, saya memutuskan bahwa topik ini layak untuk diperhatikan. Dalam artikel ini saya akan mencoba membahas semua langkah (tentu saja, dasar / kunci / utama) membuat aplikasi Game HTML5 untuk Android dari ide hingga rilis file APK itu sendiri. Mungkin saya tidak akan mengungkapkan sesuatu yang baru kepada pengembang yang terhormat, tetapi untuk pemula saya akan mencoba menggambarkan semuanya sesederhana mungkin, dengan tangkapan layar dan penjelasan.

Bagi yang ingin mempelajari lebih lanjut, saya undang di bawah cat.

Ide

Secara umum, banyak yang bisa dikatakan tentang potensi Android, tentang perkembangan HTML5 dan tentang interaksinya. Aku tidak akan melakukannya. Jadi, langsung ke intinya.

Ide membuat game untuk Android mungkin ada di benak puluhan ratusan pengembang, dan mereka yang menganggap diri mereka seperti itu. Saya bukan pengecualian.

Seluruh proses akan dibagi menjadi beberapa langkah dan aplikasi akhir akan terdiri dari dua bagian:
- Pembungkus (dalam hal ini untuk Android)
- Permainan

Langkah 1. Menulis game itu sendiri

Keuntungan lain dari menulis game di HTML5 adalah kenyataan bahwa pengujian tidak memerlukan banyak program yang sedang berjalan, IDE, emulator, dan sebagainya. Yang Anda butuhkan hanyalah browser (Chromium dalam kasus saya) dan editor teks (BlueFish)

Permainannya akan sederhana: ada persegi panjang biru dan ada persegi panjang hijau. Tugas pemain adalah menyeret persegi panjang biru ke persegi hijau, melewati yang merah, yang bergerak melintasi lapangan bermain ke arah yang sewenang-wenang.

Untuk pengembangan game saya akan menggunakan J2ds (game engine).

Kode permainan yang sudah selesai:

index.html

Demo Game di J2ds v.0

Anda dapat mengabaikan kualitas kode game, karena ini bukan tujuan artikel. Meskipun, tentu saja, Anda dapat mengoptimalkan sebanyak yang Anda suka, proses ini umumnya mungkin tidak ada habisnya.

Langkah 2Android Studio Membuat pembungkus untuk game

Saya tidak akan mengukur kesejukan IDE ini atau itu untuk pengembangan Android dengan siapa pun, tetapi saya akan menunjukkan kepada Anda contoh Android Studio. Untuk pekerjaan kita membutuhkan:
- Mesin Java (OpenJDK cocok untuk Linux saya);
- Distribusi Android Studio.

Unduh, instal.

Setelah semuanya terinstal (Dua program ini sudah cukup), luncurkan Android Studio.

Jendela mulai akan terbuka (jika itu adalah peluncuran pertama), jika bukan yang pertama, maka IDE itu sendiri akan terbuka, tetapi tidak mengubah esensi, mari kita pergi ke SDK Manager:

Di sini Anda perlu mencentang versi Android yang Anda butuhkan untuk bekerja, dalam kasus saya ini adalah Android 4.4.2, Anda dapat memilih setidaknya sekaligus.

Hal utama - pastikan untuk memilih "Alat" dan "Ekstra" dan klik "instal paket".

Segera setelah semuanya diunduh, IDE akan mulai dengan latar belakang abu-abu kusam dan beberapa tombol, klik yang pertama dan buat proyek baru. Jika IDE segera mulai dalam kondisi kerja, maka: "File-> New-> New Project"

Isi bidang yang diperlukan dan klik Berikutnya

Pilih versi android yang diinginkan dan Berikutnya

Di sini kita memilih Blank Activity (template kosong dengan Hello, World!)

Di jendela berikutnya, isi data untuk membuat kelas, saya tidak akan mengubah untuk kejelasan:

Kami dengan sungguh-sungguh menekan Finich dan menunggu hingga IDE mengonfigurasi dan menyiapkan semuanya untuk bekerja.

Jendela perancang formulir akan terbuka. Ini tidak sama dengan di Lazarus, Delphi, tetapi masih ada yang serupa:

Jangan terburu-buru untuk mengubah apa pun atau mengklik sesuatu, pengaturannya belum selesai. Buka "Tolls->Android->AVD Manager" untuk mengonfigurasi emulator.

Pada langkah ketiga secara lebih rinci:

T.K. permainan diregangkan secara horizontal, Anda harus memilih mode lansekap.

Ketika semua pengaturan dimasukkan, klik pada segitiga hijau dan mulai emulator. Setelah memulai, kami menunggu hingga perangkat terisi penuh dan OS dimulai:

Jangan tutup jendela ini, emulasi akan berlangsung di dalamnya. Sekarang Anda dapat kembali ke editor dan mengubah orientasi di desainer formulir:

Anda bisa lari! Sekarang itu pasti mungkin.

Jika Anda diminta untuk memilih emulator, Anda dapat mencentang kotak di bawah ini:

Ucapan selamatku! Semuanya bekerja, diperiksa!

Karena kami membuat game dalam HTML5, dan di sini kami hanya memiliki pembungkus untuk game, kami menghapus semua teks dan menempelkan yang berikut ini:

Sekarang, jika Anda beralih kembali ke desain, itu akan terlihat berbeda:

Seperti yang Anda lihat, sekarang alih-alih "Halo, Dunia", WebView membentang ke layar penuh memamerkan secara penuh. Objek ini adalah "jendela" kita ke dunia game.

Anda bahkan dapat berlari, lihat apakah akan ada layar putih. Pindah.

Tab ini menunjukkan struktur proyek dan semua file dan sumber daya internalnya.

Penjelasan

Kita perlu menemukan file "manifes" dan menambahkan baris berikut ke definisi "aplikasi":
android:hardwareaccelerated="benar"

Saatnya mengerjakan fungsionalitas "browser" kami, karena ini dia! Buka kelas "MainActivity.java" dan hapus semua yang tidak perlu, hanya menyisakan yang utama:

Penjelasan

paket com.soft.scanner.demogamehtml5; impor android.support.v7.app.AppCompatActivity; impor android.os.Bundle; MainActivity kelas publik memperluas AppCompatActivity ( @Override protected void onCreate(Bundle storedInstanceState) ( super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ) )

Kita perlu mendeklarasikan objek dari kelas WebView.

Untuk melakukan ini, tambahkan ke daftar impor:

Impor android.webkit.WebView;
Dan kemudian kami mendeklarasikan objek myWeb kami di dalam kelas MainActivity:

Web yang DilindungiLihat myWeb;
Sekarang, setelah garis setContentView(R.layout.activity_main); rekatkan kode berikut:

Inilah yang saya dapatkan di editor:

Dan inilah yang ada di emulator:

Jika Anda merasakan hal yang sama, kami berada di jalur yang benar!

File index.html adalah indeks yang sama dari awal artikel ini. Nah, mari kita coba lari!

Langkah 3Android Studio Membangun aplikasi dan menandatanganinya

Untuk membuat kunci di IDE ini ada utilitas khusus "KeyTool".

Mari kita beralih ke membuat file aplikasi yang dapat dieksekusi ("Build -> Generate Signed APK"):

Jika Anda belum pernah membuat kunci dan alias sebelumnya, klik "Buat Baru". Anda dapat mengisi bidang sesuai kebijaksanaan Anda, keakuratan data sepenuhnya ada pada Anda.

Bidang pertama adalah jalur ke folder tempat kunci akan disimpan. Setelah mengklik Ok, formulir akan terisi secara otomatis:

Untuk aplikasi selanjutnya, tidak perlu membuat kunci baru, Anda dapat menandatangani aplikasi lain dengan kunci Anda, untuk itulah tombol "Pilih yang Ada".

Pada langkah selanjutnya, IDE akan meminta Anda untuk memasukkan kata sandi lagi, lalu tentukan folder untuk menyimpan file APK.