Html5 Rusça android oyunlar. Sıfırdan piyasaya sürülmeye kadar Android için HTML5 oyunlarının geliştirilmesi

Brian McHarg'ın tarayıcılar arası, platformlar arası HTML5 oyunlarını başarılı bir şekilde geliştirme stratejisi.

HTML5: flash oyunların tahtının gerçek varisi. Gerçekten çapraz platform geliştirme, bir kez yazılan programın bir PC, tablet ve akıllı telefonda çalışmasına izin verir, ayrıca Smart TV'de ve aşağıdakiler dahil masaüstü ve mobil cihazlarda da çalışır: oyun konsolları Xbox360 veya PlayStation 3 gibi yerleşik tarayıcıları aracılığıyla. Bunun mümkün olduğu kadar çok cihaz ve platform için oyun geliştirmek isteyenler için çok çekici olduğu açık.

HTML5 teriminin kendisi ve temsil ettiği özellikler, onu kimin tanımladığına bağlı olarak farklı anlamlara sahiptir. Müşteriler için bu, gerçek bir Kutsal Kase ve uygun maliyetli çapraz platform geliştirme vaat eden bir geliştirme teknolojisidir.

Geliştiriciler için, birçok farklı teknolojinin ortak adıdır: JavaScript, WebSockets, WebAudio, Canvas, CSS3 ve WebGL bunlardan sadece birkaçıdır, her birinin kendi standartları, güçlü ve zayıf platformlar arası kısıtlamaları vardır.

Ve son olarak, en önemli şey gibi görünüyor: kullanıcılar için! Burada önemli olan tek şey, kullanıcıların alışık oldukları deneyim ve deneyimin aynısını istemeleridir. Ve bu, özellikle hedefleri oyunu mümkün olduğunca çok platformda uygulamaksa, geliştiriciler için ana zorluktur.

PC'ye karşı mobil q çapraz platform

Artık hepimiz PC tarayıcılarında çalışan harika HTML5 oyun örneklerini biliyoruz. Özellikle göstermek için genellikle tarayıcı yazarları tarafından oluşturulurlar. güçlü sahip olmak yazılım veya HTML5 spesifikasyonunda onaylanmasını istedikleri belirli API'ler için.

Cutthe Rope ve Internet Explorer için Contre Jour gibi oyunlar veya Jam veya Racer gibi bazı mükemmel Chrome deneyleri harika örneklerdir. Gelecekteki potansiyel için, üç.js, yakın zamanda piyasaya sürülen açık kaynak Turbulenz veya Unreal Engine tarafından desteklenen Epic HTML5 gibi kitaplıklara göz atın.

Ancak, OS2.3 (Gingerbread) yüklü Android'de bu örneklerden birine bakmayı deneyin ve tamamen farklı bir resim göreceksiniz ve bazı durumlarda hiçbir şey görmeyeceksiniz. Evet, bu işletim sistemi neredeyse üç yaşında ama hala tüm Android cihazların üçte birinde kurulu ve hedef kitlenize bağlı olarak bu rakam daha da yüksek olabilir. Ve bu sadece eski versiyon Android. aynısını şuradan görebilirsin elma cihazları Kindle Fire gibi iOS 5 veya daha az güçlü cihazları çalıştıran. Aslında, yukarıdaki programlardan herhangi birinin doğru şekilde görüntüleneceği tek bir mobil cihaz bulamayacaksınız.

Daha önce de belirtildiği gibi, çoğu müşteri tarayıcı oyunlarının gerçekten çapraz platform olması için HTML 5'i seçer. Yalnızca PC için oyun geliştiriyorsanız, Unity ve Flash, dikkat etmeniz gereken harika seçeneklerdir. Her ikisi de mükemmel tarayıcı desteğine ve cihazlara ayrı uygulamalar olarak dışa aktarma yeteneğine sahiptir, böylece tam olarak ihtiyacınız olan kodla bir akıllı telefona veya tablete taşınabilirler.

HTML5'te bir platformlar arası oyun geliştirirken iki belirgin sorun vardır. İlki, HTML5 belirtiminin belirsiz doğasının bir sonucudur ve gelecekteki desteğin cihaz türüne göre değil, bu cihazların her birindeki tarayıcı türüne göre ayrılması sonucunu doğurur. Geliştiriciler için ikincisi ve en zoru, mobil cihazların yeteneklerindeki sürekli değişikliktir; bu, aynı işlevler kümesiyle bile, bir cihazdaki oyunun, başka bir cihaza yüklenen aynı oyundan çok farklı olacağı anlamına gelir.

Kaç seçenek olduğu hakkında bir fikir edinmek için, cihaz performansını test etmek için birçok JavaScript karşılaştırmasından birini çalıştırmanız yeterlidir. Örneğin, Canvas üzerinden 100 kare göndermek iPhone 4S veya 5, Galaxy S3, Nexus 7 veya Lumia 820 gibi cihazlarda saniyede 60 kare hızında nispeten iyi oynatacaktır. Ancak aynı kodu aşağıdaki gibi diğer cihazlarda deneyin: HTC Arzu(19 kare/saniye), galaksi ası(7 kare) veya iPad 1 (9 fps) ve en azından uygulanabilir bir oyun gibi bir şey elde etmek için çok çalışmanız gerekiyor.

Projeniz bir akıllı telefon veya tablete yönelikse ve özellikle eski veya düşük güçlü cihazları içeriyorsa, test yapmak ve standartları erken bir aşamada belirlemek çok önemlidir. Bu, cihaz yelpazesinin sınırlarını anlamak ve üzerinde çalışacağınız oyunun hem teknik yaklaşımını hem de tasarımını belirlemek için gereklidir.

Projeniz akıllı telefonlara veya tabletlere yönelik değilse, muhtemelen hedeflerinizi yeniden gözden geçirmelisiniz. Örneğin, akıllı telefonlar ve tabletler, Birleşik Krallık'taki sayfa görüntülemelerinin neredeyse üçte birini oluşturuyor ve bu rakam, 2014'te PC görüntülemelerini geçecek bir oranda büyüyor. Masaüstü cihazların çalışma saatlerinde hala baskın olmasına rağmen, sabahları önde gidiyorlar. mobil cihazlar ve akşamları tabletler, bu iki saat internette gezinmek ve oyun oynamak için idealdir.

Savaşlarını seç

Chunk, iki yıldır yayıncılar ve markalar için platformlar arası HTML5 oyunları geliştiriyor ve BBC ve Disney gibi müşteriler için HTC Desire'dan iPad4'e, Nexus 7'den Xbox'a kadar tüm cihazlarda çalışan tarayıcı tabanlı mobil oyunlar yarattı. 360.

Geliştiriciler olarak, bu sürece ne kadar derinlemesine ineceklerine karar vermeleri harika olurdu, ancak bu, hedef kitleleri ve kullandıkları cihazlar tarafından belirlenir. Çocuklar için markalar üzerinde çalışırken, kendilerini genellikle eski telefonların veya düşük maliyetli, düşük güçlü cihazların kısıtlamaları altında buldular, ancak diğer birçok şeyi dikkatlice tasarlayıp optimize ettiler, bu yüzden hala çocuklar için etkileyici oyunlar geliştirmenin mümkün olduğuna inanıyorlar. mobil. internet.

Ve bu deneyimden ne öğrendiler? HTML5 oyun geliştiricileri için en iyi 10 ipucunun bir listesini derleyecek olsaydınız, şöyle görünürdü:

1. Hedef kitlenize karar verin

Demografiye ve tasarımlarınızın tasarlandığı kişiler tarafından hangi cihazların kullanıldığına bakın. Verilere sahip olduğunuzda, ziyaretçilerinizin kullandığı ana cihaz aralığını belirlemek için kullanın ve kararlarınızda bu cihazları hedefleyin.

2. Tasarıma teknoloji açısından karar verin

Evet, her zaman böyle olmalıdır, ancak HTML5'teki sınırlamalar ve parçalanma bunu daha da alakalı kılıyor. WebGL, mükemmel bir 3D birinci şahıs nişancı yapmanıza izin verecektir, ancak hedef platformlar listenizdeyseler, tabletlerde çalışması pek olası değildir (okunur - hiç de değil).

3. caniuse.com ile arkadaş olun

Bu, geliştirmenizde kullanmak istediğiniz herhangi bir HTML5 özelliğinin desteğini hızlı bir şekilde kontrol etmenin harika bir yoludur - neredeyse tüm tarayıcılar ve cihazlar için.

4. Sadece simülatörleri değil, cihazları da kullanın

Mümkün olduğunca elinize alın çeşitli cihazlar, mümkün olduğunca çok sayıda farklı işletim sistemi sürümünü çalıştırın. Simülatörler geliştirme sırasında size yardımcı olacaktır, ancak yalnızca kodunuzun gerçek bir cihazda nasıl çalışacağına dair doğru bir resim elde edebilirsiniz. Açık Cihaz Laboratuvarı gibi çok sayıda cihaza erişmenizi sağlayacak test cihazlarının bulunduğu çok sayıda laboratuvar vardır. Aksi takdirde, eski telefonları bulmak ve bunları test ortamınıza tanıtmak için eBay gibi kaynakları araştırın.

5. Değişikliklerin farkında olun

HTML5 spesifikasyonu ve cihaz desteği sürekli olarak değişmektedir, bu nedenle bu alanlardaki değişikliklerden haberdar olmanız gerekir. Bu, özellikle WebAudio API gibi işlevlerin yetenekleri kökten değiştirebildiği ses gibi alanlarda geçerlidir.

6. Geliştirme boyunca esnek olun.

Bugün işe yarayan yarın çalışmayabilir. Bugün sizin için erişilemeyen şey yarın kullanılabilir hale gelebilir. Esnek olmanıza ve işiniz sırasında meydana gelen değişikliklere uyum sağlamanıza izin verin.

7. Ölçek işlevselliği

Mobili ilk sıraya koymak, geleneksel web tasarımından daha fazlası için faydalıdır. Akıllı telefonlar için nasıl iyi bir şey yaratabileceğinize bakın ve ardından izin veriyorlarsa diğer platformlarda işlevsellik ve performansa karar verin. Kullanıcı aracıları veya medya cihazları kullanan cihazlar için çalışın ve deneyiminizi onlara uygulayın.

8. KISS (Basit Tut, Aptal) - Hayatınızı zorlaştırmayın, sizi aptallar

Sınırları tanımlamaya ve fırsatları her şekilde genişletmeye çalışın, ancak henüz emekleme aşamasında olan bir teknoloji ile çalıştığınızı, artan karmaşıklığı veya fazla tahmin edilen proje hırslarını yalnızca durumunuzu daha da kötüleştireceğini unutmayın.

9. Tasarımlarınızın kullanım ömrüne karar verin

Özellikler sürekli değişir ve cihazlarda bulunan yeni özellikler sayesinde içeriğiniz çok hızlı bir şekilde güncelliğini yitirebilir. Oyununuzun yeterince uzun sürmesi gerekiyorsa, hataları düzeltmek ve oyunu güncellemek için zaman ayırın.

Oh evet. Oyunlarınızı herkes için kontrol edin kullanılabilir cihazlar mümkün olduğu kadar sık!

Gladyatör, ikinci sinyalime biniyorsun

HTML5, farklı tarayıcılar için platformlar arası oyunlar geliştirmek için resmi olmayan ana teknoloji gibi görünüyor, buna hiç şüphe yok. Şu anda en güvenli yer değil, ancak emekleme dönemindeki teknoloji için sorun değil. Tarayıcıların yeteneklerini kontrol etmek için caniuse.com gibi sitelere göz atmaya değer. Oyunlarınızı düzenli olarak kontrol edin. daha fazla Kullanabileceğiniz cihazlar ve oyun tasarımı ile pragmatik olun. Bu, yalnızca şimdi sorunlardan kaçınmanıza değil, aynı zamanda cihaz desteği geliştiğinde daha iyi bir konumda olmanıza yardımcı olacaktır ki bu kaçınılmazdır.

Ücretsiz oyunlar Android'de. Html5'te yapılmıştır, böylece telefonunuzda ve tabletinizde oynayabilirsiniz. Android sistemine ek olarak, Windows, Linux, Mac ve Apple'dan mobil cihazlar desteklenmektedir. Ana şey, tarayıcının modern ve sistemin yeni olmasıdır. Fare veya dokunmatik ekran kontrolü.

Android'deki oyunlar idealdir. Bilgisayarınızda ve telefonunuzda oynayabilirsiniz. Hızlı erişim için indirilebilir (kurulabilir).

Telefonunuza bir HTML5 oyunu nasıl indirilir

Web sitemizdeki oyun sayfasına gidin. Oyunu Chrome gibi modern bir tarayıcıda tam ekran olarak açın. Tarayıcınızda, sayfayla çalışmak için menü komutlarını gizleyen üç noktalı düğmeyi tıklayın. Listeyi aşağı kaydırın ve “Ana ekrana oyun ekle”yi seçin (Ruslaştırılmamış bir Chrome'unuz varsa). Bundan sonra, oyun telefonunuzun ekranında görünecek ve tarayıcıyı başlatmadan doğrudan başlatma ile başlatmak mümkün olacaktır.

Bu işlem telefonlar ve Android tabletler ve Apple, ancak ikincisi başka bir yerde bir komuta sahip olabilir - Safari'nin alt menüsünde.

Oyun İnternet'in çalışmasını gerektirebilir (veya belirli bir oyunun özelliklerine bağlı olarak gerekli olmayabilir - bir dizi oyun çevrimdışı olarak kullanılabilir, ancak şimdi kontrol etmeniz gerekiyor.) Oyun otomatik olarak indirilir ve kaydedilir. ancak çevrimiçi skor tablolarını veya diğer işlevleri indirmek için bir bağlantı gerekebilir.

Normal bir Android oyunu olarak yükleyin

Hemen hemen her HTML5 oyununun bir sürümü vardır. işletim sistemi Android veya iOS. Ana ekrana bir HTML5 oyunu yüklemek size uymuyorsa - diyelim ki, yalnızca İnternet varken değil, sürekli oynamak istiyorsunuz - o zaman oyunların ekran koruyucularında simgeyi arayın Google Oyun ve AppStore. Apple cihazları için oyunlar daha az sıklıkta ve daha sık olarak piyasaya sürülmesine rağmen, bunun gibi yalnızca android düğmelerini görebilirsiniz:

Yükle düğmesi - oyunlarda arayın

Oyunların kendisinde, düğme çok daha küçüktür, burada hatırlamanız için büyütülür. Aşağıdaki oyunun ekran görüntüsüne bir göz atın - orada o düğmeyi bulmaya çalışın. İndirebileceğiniz resmi Google Play'e yönlendirirler. ücretsiz sürüm gelişmiş özelliklere sahip oyunlar - İnternet olmadan oynama yeteneği gibi.

Android'de oyunun hayranlarına adanmış ...

Bana böyle bir şeyin var olduğu söylendiğinde, tüm bu yeni çıkan trendlerin büyük bir hayranı olmadığım için fazla dikkat etmedim. Ancak daha sonra Android'deki oyunların "platform" oyuncakları gibi bir şey olduğunu fark ettim - hemen ne olduğunu denemek istedim. "Sekiz bitlik" konsol Dandy veya Sega için oyunların bana ne kadar büyüleyici göründüğünü hala hatırlıyorum. Ve burada medeniyet neye battı - sadece düşünün, düğmeleri olmayan ve oyun oynamanıza izin veren bir işleve sahip bir telefon. Cazip, hiçbir şey söylemeyeceksin!

Aslında, telefonunuza bir oyun yüklenmiştir (veya oyun süreci münhasıran tarayıcı aracılığıyla gerçekleştirilir - bu seçenek de dikkate alınır), yalnızca yapay zeka ile rekabet edebileceğinize (yani Kişisel bilgisayar), aynı zamanda diğer katılımcılarla (tüm süreç çevrimiçi olarak gerçekleşir).

HTML5'in bariz faydaları

HTML5'in Flash'ın yerini aldığı ve modern Web'in temel dayanağı olduğu kimse için bir sır değil. Bu nedenle, temelinde oluşturulan oyunlar İnternet'te çalışmaya başladı - dahası, bugün diğer kullanıcılarla rekabet etmeyi mümkün kılan oyunlar, müşterilerin giderek daha fazla ilgisini çekiyor (özellikle gerekli değilse bilgisayarınıza indirip yükleyin. ). Bu özellik, sırayla, birçok kişiden kurtulmanıza yardımcı olur. kötü amaçlı yazılım PC'nizde çalışmanızı engelleyen

Android ve PC'deki tüm bu oyunlar, modern tarayıcılar ve başarılı bir şekilde çalışması için yalnızca JavaScript, Canvas ve HTML5 gerekir. Bu oyun sırasında hangi görevlerin yapılması gerektiğine bağlı olarak, bazı çeşitleri ayırt etmek gelenekseldir:

Oyun makinesi
zeka oyunu
stratejiler
Uçan
maceralar
Yarış
indirilebilir
Tarayıcı

Android için çevrimiçi oyun örnekleri

Daha önce telefondaki oyunlarla hiç ilgilenmiyordum ama siteye girdikten sonra her şey değişti. Orada Android için çevrimiçi oyunların ne olduğunu öğrendim, çok sayıda farklı "oyuncak" denedim. Bana gelince, bu sitede sunulan en iyi Android oyunları (ve sadece bunda değil) mahjong ve.

Bunu neden söylüyorum? Her şey çok basit. Hayatım boyunca, stratejik bir önyargıya sahip ve net bir ortaçağ temalarının yanı sıra fanteziye sahip oyunları tercih ettim. Yani gerçekten sevdiğimi buldum diyebiliriz. Ama mesele bu bile değil.

En çok bu siteyi en çok içerdiği gerçeğinden dolayı sevdim. farklı şekillerçevrimiçi oyunlar ve ayrıca - aslında, hepsi yazılım açısından çok az şey gerektirir (gerçekte, JavaScript, Canvas ve HTML5 dışında, bunların çalışması için hiçbir şey gerekmez).

Android için ücretsiz oyunlar

Free2Play modeli sayesinde bu sitede sunulan tüm Android oyunları ücretsizdir. Hem bilgisayarda hem de tablette tam ekran olarak oynatılabilirler. Ancak onları flash oyunlardan ayıran en önemli şey, sonunda telefonda oynanabiliyor olmaları.

HTML5 oyunlarını mümkün kılan temel teknoloji, HTML ve JavaScript'in bir kombinasyonudur. Köprü Metni İşaretleme Dili (HTML), o zamanlar adlandırdıkları şekliyle erken İnternet otoyolunun bir parçasıydı ve bugün her web sitesine hizmet vermek için kullanılmaya devam etti. JavaScript kodu, 1995 yılında Netscape 2.0 gibi ikinci sürüm tarayıcılara eklendi ve yıllar içinde okuması ve yazması daha keyifli hale gelecek şekilde gelişti. İlk günlerde, sayfa yenileme olmadan etkileşimli içeriğe izin verdiği için DHTML veya dinamik HTML olarak adlandırılıyordu. Ancak, erken web çağında öğrenmek ve kullanmak zordu. Zamanla Javascript yardımı ile Google Chrome geliştiriciler en hızlı komut dosyası dillerinden biri haline geldi. Ayrıca, diğer tüm kodlama dillerinden daha özgürce kullanılabilen modüllere, kitaplıklara ve komut dosyalarına sahiptir.

İlk DHTML oyunları çok basitti. O zamanki oyunların bazı örnekleri Tic-Tac-Toe ve idi. Bu teknolojiyle yapılan oyunlar HTML5'in açık standardını kullandığından, bu nispeten eski oyunlar bugün hala modern bir web tarayıcısında oynanabilir. Bu teknolojiler, eklenti gerektirmedikleri ve eski teknolojilerden daha güvenli oldukları için tarayıcı oyunlarında ön plana çıkmıştır. HTML5 oyunları da destekler ve karmaşık 2D ve

Bir tanıtım yerine.
Birkaç gün üst üste (uykuya ara vermeden) en sevdiğim Android gadget'larının HTML5 desteğini inceledikten sonra, bu konuya dikkat edilmesi gerektiğine karar verdim. Makalede, Android için bir HTML5 Oyun uygulaması oluşturmanın fikirden kendini serbest bırakmaya kadar tüm aşamalarını (tabii ki temel / anahtar / ana) adım adım ortaya koymaya çalışacağım. APK dosyası.
Belki de saygıdeğer geliştiricilere yeni bir şey açmayacağım, ancak yeni başlayanlar için her şeyi ekran görüntüleri ve açıklamalarla mümkün olduğunca basit bir şekilde açıklamaya çalışacağım.

Daha fazlasını öğrenmek isteyenleri cat altına davet ediyorum.

Fikir
Genel olarak, Android'in potansiyeli, HTML5'in gelişimi ve etkileşimleri hakkında çok şey konuşabilirsiniz. Bunu yapmayacağım. Yani, doğrudan konuya.

Android için bir oyun oluşturma fikri muhtemelen onlarca yüzlerce geliştiricinin ve kendilerini böyle düşünenlerin kafasında oturuyor. Ben bir istisna değilim.

Neden HTML5? - Yerlilik. JS'de bir oyun yazarsınız ve ardından kesinlikle herhangi bir işletim sistemi için uygun bir biçimde ve herhangi bir dilde bir sarmalayıcı oluşturursunuz.

Tüm süreç birkaç adıma bölünecek ve son uygulama iki bölümden oluşacaktır:
- Sarın (içine bu durum Android için)
- Oyun

Adım 1. Oyunun kendisini yazmak
HTML5'te oyun yazmanın bir başka artısı, bir sürü oyun gerektirmemesidir. çalışan programlar, IDE, emülatörler vb. Tek ihtiyacınız olan bir tarayıcı (benim durumumda bu Chromium) ve Metin düzeltici(Lüfer)

Oyun basit olacak: mavi dikdörtgen yeşil dikdörtgen ise. Oyuncunun görevi, oyun alanı boyunca rastgele bir yönde hareket eden kırmızı dikdörtgeni atlayarak mavi dikdörtgeni yeşil olanın üzerine sürüklemektir.

Oyunun gelişimi için J2ds (oyun motoru) kullanacağım.

Bitmiş oyun kodu:

index.html

J2ds v.0'da Demo Oyun

Oyun kodunun kalitesini görmezden gelebilirsiniz, çünkü bu makalenin amacı değildir. Elbette istediğiniz kadar optimize edebilirsiniz, ancak bu süreç muhtemelen genel olarak sonsuzdur.

Adım 2. Android Stüdyosu... Oyun için bir sarmalayıcı oluşturma
Android geliştirme için şu veya bu IDE'nin havalılığını kimseyle ölçmeyeceğim, ancak size Android örneği Stüdyo. İş için ihtiyacımız var:
- Java makinesi (OpenJDK, Linux'um için uygundur)
- Android Studio dağıtım kiti.

Indirin ve yükle.
Her şey yüklendikten sonra (Bu iki program yeterlidir), Android Studio'yu başlatın.

Başlat penceresi açılacak (ilk başlatma ise), ilk değilse, IDE'nin kendisi açılacak, ancak özü değiştirmiyor, hadi SDK Yöneticisine gidelim:

Burada çalışacağınız Android sürümlerini işaretlemeniz gerekiyor, benim durumumda Android 4.4.2, en azından hepsini bir kerede seçebilirsiniz.

Ana şey, "Araçlar" ve "Ekstralar" ı seçip "paketleri yükle"yi tıklamanız gerektiğidir.

Her şeyi indirir indirmez, IDE donuk gri bir arka plan ve birkaç düğme ile başlayacak, ilkine basın ve yeni bir proje oluşturun. IDE hemen çalışır durumda başladıysa, o zaman: "Dosya-> Yeni-> Yeni Proje"

Gerekli alanları doldurun ve İleri'ye tıklayın

İstediğiniz android sürümünü seçin ve İleri

Burada Boş Etkinlik seçiyoruz (Merhaba, Dünya! ile boş şablon!)

Bir sonraki pencerede, sınıf oluşturmak için verileri doldurun, netlik için değişmeyeceğim:

Finich'e ciddi bir şekilde basıyoruz ve IDE her şeyi iş için yapılandırıp hazırlarken bekliyoruz.

Form tasarımcısı olan bir pencere açılacaktır. Lazarus, Delphi'deki ile aynı değil, ancak benzer bir şey hala mevcut:

Hiçbir şeyi değiştirmek veya bir şeye tıklamak için acele etmeyin, kurulum henüz bitmedi.
Öykünücüyü yapılandırmak için "Ücretler-> Android-> AVD Yöneticisi"ni açın.

Burada, hiçbir şey yoksa, "Sanal Aygıt Oluştur" a tıklayın, varsa, yeni bir tane oluşturamazsınız, zaten vardı, çünkü Çözerken "tökezledim". Yeni bir emülatör oluşturmanız gerekiyorsa, orada her şey basittir:
1. Ekran boyutunu ve telefon modelini seçin
2. Android sürümünü seçin (4.4.2'ye sahibim)
3. Aygıtın yapılandırılması.

Üçüncü adımda, daha ayrıntılı olarak:

T.K. oyun yatay olarak uzanıyor, manzara modunu seçmeniz gerekiyor.

Tüm ayarlar girildiğinde, yeşil üçgene tıklayın ve öykünücüyü başlatın. Başladıktan sonra, cihazın tamamen önyükleme yapmasını ve işletim sistemini başlatmasını bekliyoruz:

Bu pencereyi kapatmayın, öykünme içinde gerçekleşecektir. Şimdi editöre geri dönebilir ve form tasarımcısında yönlendirmeyi değiştirebilirsiniz:

Koşabilirsin! Şimdi kesinlikle mümkün.
Bir öykünücü seçmeniz istenirse, aşağıdaki kutuyu işaretleyebilirsiniz:

Tebrikler! Her şey çalışıyor, kontrol edildi!

Emülatörümüzü küçültüyoruz (ama kapatmıyoruz!) Ve editöre gidiyoruz, orada her şey biraz daha karmaşık (biraz).
"Metin" moduna geçmeniz gerekir. Activity_main'inizde, formdaki tüm öğeler açıklanmıştır. Formun kendisi dahil. Ve bu bir form değil =).

Çünkü HTML5'te bir oyun yapıyoruz ve burada sadece oyun için bir sarmalayıcımız var, tüm metni silin ve aşağıdakileri ekleyin:

Şimdi tasarıma geri dönerseniz, farklı görünecektir:

Gördüğünüz gibi, şimdi "Merhaba, Dünya" yerine, tam ekrana uzatılmış bir - WebView - tam olarak gösteriş yapıyor. Bu nesne oyun dünyasına açılan "penceremiz"dir.

Hatta koşabilir, beyaz bir ekran olup olmayacağını görebilirsiniz. Devam et.

Ardından projemize gitmemiz gerekiyor, bunun için soldaki "Proje" alanını açın ve seçili değilse "Android" sekmesini seçin:

Bu sekme, projenin yapısını ve tüm dahili dosyalarını ve kaynaklarını gösterir.

spoiler başlığı

"manifest" dosyasını bulmamız ve tanıma "application" eklememiz gerekiyor. Sonraki satır:
android: HardwareAccelerated = "true"

"Tarayıcımızın" işlevselliği üzerinde çalışma zamanı, çünkü bu kadar! "MainActivity.java" sınıfını açın ve yalnızca ana olanları bırakarak tüm gereksiz şeyleri kaldırın:

spoiler başlığı

Paket com.soft.skaner.demogamehtml5; android.support.v7.app.AppCompatActivity'yi içe aktarın; android.os.Bundle'ı içe aktar; public class MainActivity, AppCompatActivity'yi genişletir (@Override protected void onCreate (Bundle saveInstanceState) (super.onCreate (savedInstanceState); setContentView (R.layout.activity_main);))

Unutmadıysanız, Activity_main dosyasına bir WebView ekledik, kalın harflerle vurgulanan satıra dikkat edin:
android: layout_width = "fill_parent"
android: layout_height = "fill_parent"
android: id = "@ + id / webView"
android: tıklanabilir = "doğru"
android: kaydırma çubukları = "yok" />

WebView sınıfının bir nesnesini bildirmemiz gerekiyor.

Bunu yapmak için, ithalat listesine ekleyin:

android.webkit.WebView'ü içe aktarın;

Ve sonra MainActivity sınıfı içinde myWeb nesnemizi ilan ediyoruz:

Korumalı WebView myWeb;

Şimdi, çizgiden sonra setContentView (R.layout.activity_main); aşağıdaki kodu girin:

/ * Tarayıcımızı bulun * / myWeb = (WebView) findViewById (R.id.webView); / * Tarayıcımızı kurun * / myWeb.getSettings () SetUseWideViewPort (true); myWeb.setInitialScale (1); myWeb.getSettings () setJavaScriptEnabled (true); / * Sayfayı yükle * / myWeb.loadUrl ("dosya: ///android_asset/index.html");

İşte editörde bulduklarım:

Ve işte öykünücünün içinde ne var:

Aynısını yaparsanız - doğru yoldayız!

Yapacak çok az şey kaldı:
Sayfayı tarayıcımıza yüklediğimiz yerde dosya yolu şöyle görünür: "file: ///android_asset/index.html"
Unutulmamalıdır ki, oyunumuzun içindeki herhangi bir dosyayı, bunlara erişerek saklayabiliriz.

Bizim durumumuzda, anahtar klasör: "android_asset", onu oluşturalım (evet, varsayılan olarak projede değil):
"Dosya -> Yeni -> Klasör -> Varlıklar klasörü", IDE ile anlaşmanız gereken bir pencere açılacaktır.
Fark ettin mi? Projede yeni bir klasör belirdi:

Üzerine farenin sağ tuşuyla tıklayın -> "Dosyalarda Göster", sistem gezgini açılacak (benim durumumda Nautilus), klasörün yoluna dikkat edin. Ayrıca klasörün "varlıklar" olarak adlandırıldığını ancak "android_asset" aracılığıyla erişildiğini unutmayın.

O zaman her şey oldukça basit - oyunumuzu varlıklar klasörüne kopyalayın:

index.html dosyası, bu makalenin başından itibaren aynı dizindir. Peki, çalıştırmayı deneyelim!

Küçük bir ipucu: USB üzerinden gerçek bir cihazda test etmek en iyisidir, bu nedenle test sonuçları daha net olacaktır ve fareyi kontrol etmek, bırakın birden çok tıklamayı en uygun seçenek değildir.

Adım 3. Android Stüdyosu. Uygulamayı oluşturun ve imzalayın

Oyun sizin tarafınızdan tamamen hata ayıklandığında (tarayıcıda veya emülatörde), wrapper tamamen hazır ve geliştirmenin tüm aşamaları bittiğinde, uygulamayı oluşturabilirsiniz. Android Studio, uygulamalar oluşturmanıza ve bunları anahtarlarınızla imzalamanıza olanak tanır.

Anahtar oluşturmak için bu IDE'de özel yardımcı program"Önemli araç".

Uygulama yürütülebilir dosyasının oluşturulmasına geçelim ("Yap -> İmzalı APK Oluştur"):

Daha önce anahtarlar ve takma adlar oluşturmadıysanız, "Yeni Oluştur" u tıklayın.
Alanları kendi takdirinize göre doldurabilirsiniz, verilerin doğruluğu tamamen size aittir.

İlk alan, anahtarın kaydedileceği klasörün yoludur.
Tamam'a tıkladıktan sonra form otomatik olarak doldurulacaktır:

Sonraki uygulamalar için yeni anahtarlar oluşturmanıza gerek yoktur, anahtarınızla diğer uygulamaları imzalayabilirsiniz, "Mevcut olanı Seç" düğmesi tam olarak bunun içindir.
Bir sonraki adımda, IDE sizden şifreyi tekrar girmenizi isteyecek ve ardından APK dosyasının kaydedileceği klasörü belirtecektir.
admin Kategorilenmemiş başlığında. Yer imi.

Birkaç gün üst üste (uykuya ara vermeden) en sevdiğim Android gadget'larının HTML5 desteğini inceledikten sonra, bu konuya dikkat edilmesi gerektiğine karar verdim. Makalede, fikir aşamasından APK dosyasının kendisinin yayınlanmasına kadar Android için bir HTML5 Oyun uygulaması oluşturmanın tüm aşamalarını (tabii ki temel / anahtar / ana) adım adım açıklamaya çalışacağım. Belki de saygıdeğer geliştiricilere yeni bir şey açmayacağım, ancak yeni başlayanlar için her şeyi ekran görüntüleri ve açıklamalarla mümkün olduğunca basit bir şekilde açıklamaya çalışacağım.

Daha fazlasını öğrenmek isteyenleri cat altına davet ediyorum.

Fikir

Genel olarak, Android'in potansiyeli, HTML5'in gelişimi ve etkileşimleri hakkında çok şey konuşabilirsiniz. Bunu yapmayacağım. Yani, doğrudan konuya.

Android için bir oyun oluşturma fikri muhtemelen onlarca yüzlerce geliştiricinin ve kendilerini böyle düşünenlerin kafasında oturuyor. Ben bir istisna değilim.

Tüm süreç birkaç adıma bölünecek ve son uygulama iki bölümden oluşacaktır:
- Sarıcı (bu durumda Android için)
- Oyun

Adım 1. Oyunun kendisini yazmak

HTML5'te oyun yazmanın bir başka artısı, test etmenin bir sürü çalışan program, IDE, öykünücü vb. gerektirmemesidir. Tek ihtiyacınız olan bir tarayıcı (benim durumumda Chromium) ve bir metin düzenleyici (BlueFish)

Oyun zor olmayacak: mavi bir dikdörtgen var ve yeşil bir dikdörtgen var. Oyuncunun görevi, oyun alanı boyunca rastgele bir yönde hareket eden kırmızı dikdörtgeni atlayarak mavi dikdörtgeni yeşil olanın üzerine sürüklemektir.

Oyunun gelişimi için J2ds (oyun motoru) kullanacağım.

Bitmiş oyun kodu:

index.html

J2ds v.0'da Demo Oyun

Oyun kodunun kalitesini görmezden gelebilirsiniz, çünkü bu makalenin amacı değildir. Elbette istediğiniz kadar optimize edebilirsiniz, ancak bu süreç muhtemelen genel olarak sonsuzdur.

Adım 2. Android Stüdyosu. Oyun için bir sarmalayıcı oluşturma

Android geliştirme için şu veya bu IDE'nin havalılığını kimseyle ölçmeyeceğim, ancak örnek olarak Android Studio'yu kullanarak göstereceğim. İş için ihtiyacımız var:
- Java makinesi (OpenJDK, Linux'um için uygundur);
- Android Studio dağıtım kiti.

Indirin ve yükle.

Her şey yüklendikten sonra (Bu iki program yeterlidir), Android Studio'yu başlatın.

Başlat penceresi açılacak (ilk başlatma ise), ilk değilse, IDE'nin kendisi açılacak, ancak özü değiştirmiyor, hadi SDK Yöneticisine gidelim:

Burada çalışacağınız Android sürümlerini işaretlemeniz gerekiyor, benim durumumda Android 4.4.2, en azından hepsini bir kerede seçebilirsiniz.

Ana şey, "Araçlar" ve "Ekstralar" ı seçip "paketleri yükle"yi tıklamanız gerektiğidir.

Gerekli alanları doldurun ve İleri'ye tıklayın

İstediğiniz android sürümünü seçin ve İleri

Burada Boş Etkinlik seçiyoruz (Merhaba, Dünya! ile boş şablon!)

Bir sonraki pencerede, sınıf oluşturmak için verileri doldurun, netlik için değişmeyeceğim:

Finich'e ciddi bir şekilde basıyoruz ve IDE her şeyi iş için yapılandırıp hazırlarken bekliyoruz.

Form tasarımcısı olan bir pencere açılacaktır. Lazarus, Delphi'deki ile aynı değil, ancak benzer bir şey hala mevcut:

Hiçbir şeyi değiştirmek veya bir şeye tıklamak için acele etmeyin, kurulum henüz bitmedi. Öykünücüyü yapılandırmak için "Ücretler-> Android-> AVD Yöneticisi"ni açın.

Burada hiçbir şey yoksa "Sanal Cihaz Oluştur" u tıklayın, varsa yeni bir tane oluşturamazsınız, bende zaten vardı çünkü Çözerken "tökezledim". Yeni bir emülatör oluşturmanız gerekiyorsa, orada her şey basittir:
1. Ekran boyutunu ve telefon modelini seçin
2. Android sürümünü seçin (4.4.2'ye sahibim)
3. Aygıtın yapılandırılması.

Üçüncü adımda, daha ayrıntılı olarak:

T.K. oyun yatay olarak uzanıyor, manzara modunu seçmeniz gerekiyor.

Tüm ayarlar girildiğinde, yeşil üçgene tıklayın ve öykünücüyü başlatın. Başladıktan sonra, cihazın tamamen önyükleme yapmasını ve işletim sistemini başlatmasını bekliyoruz:

Bu pencereyi kapatmayın, öykünme içinde gerçekleşecektir. Şimdi editöre geri dönebilir ve form tasarımcısında yönlendirmeyi değiştirebilirsiniz:

Koşabilirsin! Şimdi kesinlikle mümkün.

Bir öykünücü seçmeniz istenirse, aşağıdaki kutuyu işaretleyebilirsiniz:

Tebrikler! Her şey çalışıyor, kontrol edildi!

Çünkü HTML5'te bir oyun yapıyoruz ve burada sadece oyun için bir sarmalayıcımız var, tüm metni silin ve aşağıdakileri ekleyin:

Şimdi tasarıma geri dönerseniz, farklı görünecektir:

Gördüğünüz gibi, şimdi "Merhaba, Dünya" yerine, tam ekrana uzatılmış bir - WebView - tam olarak gösteriş yapıyor. Bu nesne oyun dünyasına açılan "penceremiz"dir.

Hatta koşabilir, beyaz bir ekran olup olmayacağını görebilirsiniz. Devam et.

Bu sekme, projenin yapısını ve tüm dahili dosyalarını ve kaynaklarını gösterir.

Açıklama

"manifest" dosyasını bulmamız ve "application" tanımına aşağıdaki satırı eklememiz gerekiyor:
android: HardwareAccelerated = "true"

"Tarayıcımızın" işlevselliği üzerinde çalışma zamanı, çünkü bu kadar! "MainActivity.java" sınıfını açın ve yalnızca ana olanları bırakarak tüm gereksiz şeyleri kaldırın:

Açıklama

paket com.soft.skaner.demogamehtml5; android.support.v7.app.AppCompatActivity'yi içe aktarın; android.os.Bundle'ı içe aktar; public class MainActivity, AppCompatActivity'yi genişletir (@Override protected void onCreate (Bundle saveInstanceState) (super.onCreate (savedInstanceState); setContentView (R.layout.activity_main);))

WebView sınıfının bir nesnesini bildirmemiz gerekiyor.

Bunu yapmak için, ithalat listesine ekleyin:

android.webkit.WebView'ü içe aktarın;
Ve sonra MainActivity sınıfı içinde myWeb nesnemizi ilan ediyoruz:

Korumalı WebView myWeb;
Şimdi, çizgiden sonra setContentView (R.layout.activity_main); aşağıdaki kodu girin:

İşte editörde bulduklarım:

Ve işte öykünücünün içinde ne var:

Aynısını yaparsanız - doğru yoldayız!

index.html dosyası, bu makalenin başından itibaren aynı dizindir. Peki, çalıştırmayı deneyelim!

Adım 3. Android Stüdyosu. Uygulamayı oluşturun ve imzalayın

Bu IDE'de anahtar oluşturmak için özel bir "KeyTool" yardımcı programı vardır.

Uygulama yürütülebilir dosyasının oluşturulmasına geçelim ("Yap -> İmzalı APK Oluştur"):

Daha önce herhangi bir anahtar veya takma ad oluşturmadıysanız, “Yeni Oluştur”a tıklayın. Alanları kendi takdirinize göre doldurabilirsiniz, verilerin doğruluğu tamamen size aittir.

İlk alan, anahtarın kaydedileceği klasörün yoludur. Tamam'a tıkladıktan sonra form otomatik olarak doldurulacaktır:

Sonraki uygulamalar için yeni anahtar oluşturmanıza gerek yoktur, anahtarınızla diğer uygulamaları da imzalayabilirsiniz, bu nedenle "Mevcut Seç" düğmesi vardır.

Bir sonraki adımda, IDE sizden şifreyi tekrar girmenizi isteyecek ve ardından APK dosyasının kaydedileceği klasörü belirtecektir.