Hem › Virus › Utveckling av HTML5-spel för Android från början till release. Utveckling av HTML5-spel för Android från grunden till release Exempel på onlinespel på Android

Utveckling av HTML5-spel för Android från början till release. Utveckling av HTML5-spel för Android från grunden till release Exempel på onlinespel på Android

Istället för en introduktion.
Efter att ha tillbringat flera dagar i rad (utan sömnuppehåll) med att studera HTML5-stödet för alla favoritprylar för Android, bestämde jag mig för att det här ämnet var värt att uppmärksamma. I den här artikeln kommer jag att försöka avslöja steg för steg alla steg (naturligtvis grundläggande/nyckel/huvud) för att skapa en HTML5-spelapplikation för Android från idén till releasen av själva APK-filen.
Jag kanske inte kommer att avslöja något nytt för erfarna utvecklare, men för nybörjare kommer jag att försöka beskriva allt så enkelt som möjligt, med skärmdumpar och förklaringar.

De som vill lära sig mer bjuds in till cat.

Aning
I allmänhet kan mycket sägas om potentialen för Android, utvecklingen av HTML5 och deras interaktion. Jag kommer inte att göra det här. Så låt oss gå direkt till saken.

Tanken på att skapa ett spel för Android finns förmodligen i tankarna hos tiotals hundratals utvecklare, och de som anser sig vara sådana. Jag är inget undantag.

Varför HTML5? - Inföddhet. Du skriver ett spel i JS, och sedan skapar du ett omslag för absolut vilket operativsystem som helst i en bekväm form och på vilket språk som helst.

Hela processen kommer att delas upp i flera steg och den slutliga ansökan kommer att bestå av två delar:
- Wrapper (i det här fallet för Android)
- Ett spel

Steg 1. Att skriva själva spelet
En annan fördel med att skriva ett spel i HTML5 är det faktum att testning inte kräver en massa kör program, IDE, emulatorer och så vidare. Allt du behöver är en webbläsare (i mitt fall är det Chromium) och textredigerare(Blåfisk)

Spelet kommer att vara enkelt: om den blå rektangeln är en grön rektangel. Spelarens uppgift är att dra den blå rektangeln till den gröna, förbi den röda, som rör sig längs spelplanen i valfri riktning.

För att utveckla spelet kommer jag att använda J2ds (spelmotor)

Färdigt spelkod:

index.html

Demospel på J2ds v.0
// Initiera inmatningsenheten initInput("gameBody"); // Skapa en scen scen= createScene("iCanvas", "#aeeaae"); // Börja på fullskärmsläge scene.fullScreen(true); post= createPost(scen); poäng = 5; // Skapa rektanglar blå= createRect(vec2di(100, 100), vec2di(30, 30), "blå"); green= createRect(vec2di(300, 200), vec2di(30, 30), "grön"); grön.dX= -1; grön.dY= 1; red= createRect(vec2di(16, 200), vec2di(30, 30), "röd"); red.dX= 1; red.dY= -1; restart= createRect(vec2di(430, 10), vec2di(60, 60), "#ad21ad"); GameOver= function() ( // Bearbeta beröringen / muspositionen input.upd(scene); // Rita texten scene.drawText(vec2di(5,5), "Score: "+poäng); // Rita texten scene.drawTextOpt (vec2df(140, 100), "Lost!", "bold 40px Courier New", "#326598"); if (input.lClick && input.onNode(restart)) setActivEngine(Game); restart.draw (scen); ) Framgång= function() ( // Bearbeta beröringen / muspositionen input.upd(scene); // Rita texten scene.drawText(vec2di(5,5), "Score: "+poäng); // Rita textscenen .drawTextOpt(vec2df(140, 100), "Victory!", "bold 40px Courier New", "#326598"); if (input.lClick && input.onNode(restart)) setActivEngine(Game) ); restart.draw( scen); ) // Beskriv speltillståndet Game Game= function() ( // Bearbeta beröringen / muspositionen input.upd(scene); // Rita texten scene.drawText(vec2di(5) ,5), "Poäng: "+ poäng); blue.color= input.lClick?"yellow" : "blue"; if (input.lClick) ( red.move(vec2di(red.dX, red.dY)) ; green.move(vec2di(grön. dX, grön.dY)); blue.move(vec2df(blue.getPosition().x > input.pos.x ? -1*poäng/2: 1*poäng/2, blue.getPosition().y > input.pos.y ? -1*poäng/2: 1*poäng/2)) ; if (grön.kollisionScen(scen).x != 0) grön.dX= -grön.dX; if (grön.kollisionScen(scen).y != 0) grön.dY= -grön.dY; if (red.collisionScene(scen).x != 0) red.dX= -red.dX; if (red.collisionScene(scen).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(grön)) ( input.cancel(); score+= 1; setActivEngine(Succes); red.setPosition(vec2df(200, 100)); blue.setPosition(vec2df(50, 50)) ; blue.setPosition(vec2di(Random(0, 450), Random(0, 250))); ) // Rotera rektanglarna blue.turn(1); green.turn(720/blue.getDistance(grön)); red.turn(Random(1, 5)); // Rita objekt green.draw(scene); blue.draw(scen); red.draw(scen); //post.motionBlur(4); ) // Starta spelet med speltillståndet Game och FPS 25 startGame(Spel, 30);

Du kan ignorera kvaliteten på spelkoden, eftersom detta inte är syftet med artikeln. Även om du naturligtvis kan optimera hur mycket du vill, är den här processen förmodligen oändlig.

Steg 2. Android Studio. Skapa ett spelomslag
Jag tänker inte jämföra coolheten i den här eller den IDE för Android-utveckling med någon, men jag ska visa dig använda Android Studio som ett exempel. För att arbeta behöver vi:
- Java-maskin (OpenJDK är lämplig för min Linux)
- Distribution av Android Studio.

Ladda ner och installera.
När allt är installerat (dessa två program räcker), starta Android Studio.

Startfönstret öppnas (om detta är den första lanseringen), om inte den första, då öppnas själva IDE, men det ändrar inte essensen, låt oss gå till SDK Manager:

Här måste du kryssa i de rutor du behöver Android-versioner, som du kommer att arbeta med, i mitt fall är det Android 4.4.2, du kan välja allt på en gång.

Det viktigaste är att välja "Verktyg" och "Extras" och klicka på "installera paket".

När du har laddat ner allt kommer IDE att starta med en tråkig grå bakgrund och flera knappar, klicka på den första och skapa ett nytt projekt. Om IDE startade omedelbart i fungerande skick, då: "Arkiv->Nytt->Nytt projekt"

Fyll i de obligatoriska fälten och klicka på Nästa

Välj önskad version av Android och Next

Här väljer vi Blank Activity (tom mall med Hello, World!)

I nästa fönster, fyll i data för att skapa klasser; Jag kommer inte att ändra det för tydlighetens skull:

Vi klickar högtidligt på Finich och väntar tills IDE konfigurerar allt och förbereder det för arbete.

Ett fönster med formulärdesignern öppnas. Det är inte samma sak som i Lazarus eller Delfi, men det finns fortfarande något liknande:

Skynda dig inte att ändra någonting eller klicka på något, installationen är inte klar än.
Öppna "Tulls->Android->AVD Manager" för att konfigurera emulatorn.

Här, om det inte finns något, klicka på "Skapa virtuell enhet"; om det finns en behöver du inte skapa en ny, jag hade redan en, eftersom Jag "stöt" den medan jag klurade på det. Om du behöver skapa en ny emulator är allt enkelt:
1. Välj skärmstorlek och telefonmodell
2. Välj Android-versionen (jag har 4.4.2)
3. Ställ in enheten.

I det tredje steget mer detaljer:

T.K. Vårt spel är utsträckt horisontellt, du måste välja liggande läge.

När alla inställningar har angetts, klicka på den gröna triangeln och starta emulatorn. Efter start, vänta tills enheten startar helt och operativsystemet startar:

Stäng inte det här fönstret, emulering kommer att ske i det. Nu kan du återgå till redigeraren och ändra orienteringen i formulärdesignern:

Du kan starta! Nu är det definitivt möjligt.
Om du blir ombedd att välja en emulator kan du markera rutan nedan:

Grattis! Allt fungerar, testat!

Vi minimerar vår emulator (men stäng den inte!) och går till editorn. Allt är lite mer komplicerat där (lite).
Du måste byta till "Text"-läge. Din activity_main beskriver alla element som finns i formuläret. Inklusive själva formuläret. Och det är inte en form alls =).

Därför att Vi gör ett spel i HTML5, men här har vi bara ett omslag för spelet, vi tar bort all text och sätter in följande:

Nu, om du byter till designen igen, kommer det att se annorlunda ut:

Som du kan se finns det nu istället för "Hello, World" en WebView utsträckt över hela skärmen. Detta objekt är vårt "fönster" in i spelvärlden.

Du kan till och med starta den och se om det finns en vit skärm. Varsågod.

Och sedan måste vi gå till vårt projekt, för att göra detta, öppna fältet "Projekt" till vänster och välj fliken "Android", om det inte är valt:

Den här fliken visar projektstrukturen och alla dess interna filer och resurser.

Spoilertitel

Vi måste hitta filen "manifest" och lägga till följande rad i "applikations"-definitionen:
android:hardwareAccelerated="true"

Det är dags att arbeta med funktionaliteten i vår "webbläsare", för det är vad det är! Öppna klassen "MainActivity.java" och ta bort allt onödigt, lämna bara det viktigaste:

Spoilertitel

Paketet com.soft.scanner.demogamehtml5; importera android.support.v7.app.AppCompatActivity; importera android.os.Bundle; public class MainActivity utökar AppCompatActivity ( @Override protected void onCreate(Bundle savedInstanceState) ( super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ) )

Om du inte har glömt, la vi till en WebView i filen activity_main, var uppmärksam på raden i fet stil:

Vi måste deklarera ett objekt av klassen WebView.

För att göra detta, lägg till i listan över importer:

Importera android.webkit.WebView;

Och sedan deklarerar vi vårt myWeb-objekt i MainActivity-klassen:

Skyddad WebView myWeb;

Nu, efter raden setContentView(R.layout.activity_main); sätt in följande kod:

/* Hitta vår webbläsare */ myWeb= (WebView) findViewById(R.id.webView); /* Konfigurera vår webbläsare */ myWeb.getSettings().setUseWideViewPort(true); myWeb.setInitialScale(1); myWeb.getSettings().setJavaScriptEnabled(true); /* Ladda sidan */ myWeb.loadUrl("file:///android_asset/index.html");

Detta är vad jag fick i editorn:

Och här är vad som finns i emulatorn:

Om samma sak gäller för dig är vi på rätt väg!

Det är bara en liten sak kvar:
Där vi laddar sidan till vår webbläsare ser sökvägen till filen ut så här: "file:///android_asset/index.html"
Det bör noteras att vi kan lagra alla filer i vårt spel och ha tillgång till dem.

I vårt fall är nyckelmappen: "android_asset", låt oss skapa den (ja, den finns inte i projektet som standard):
"File -> New -> Folder -> Assets folder", ett fönster öppnas där du bara behöver godkänna IDE.
Märkte du? En ny mapp har dykt upp i projektet:

Högerklicka på den -> "Visa i filer", systemutforskaren öppnas (i mitt fall Nautilus), var uppmärksam på sökvägen till mappen. Tänk också på att mappen kallas "tillgångar", men den nås via "android_asset".

Då är allt ganska enkelt - kopiera vårt spel till tillgångsmappen:

Filen index.html är samma index från början av den här artikeln. Nåväl, låt oss försöka starta den!

Ett litet råd: det är bäst att testa på en riktig enhet via USB, så att testresultaten blir tydligare, och att styra musen är inte det bekvämaste alternativet, för att inte tala om flera klick.

Steg 3. Android Studio. Bygger ansökan och signerar den

När du har felsökt spelet helt (i webbläsaren eller på en emulator), omslaget är helt klart och alla utvecklingsstadier ligger bakom dig, du kan sätta ihop applikationen. Android Studio låter dig samla in applikationer och signera dem med dina nycklar.

För att skapa nycklar har denna IDE ett speciellt verktyg "KeyTool".

Låt oss gå vidare till att skapa den körbara programfilen ("Bygg -> Generera signerad APK"):

Om du inte har skapat nycklar och alias tidigare, klicka på "Skapa nytt"
Du kan fylla i fälten efter eget gottfinnande; noggrannheten av uppgifterna vilar helt på dig.

Det första fältet är sökvägen till mappen där nyckeln kommer att sparas.
Efter att ha klickat på OK kommer formuläret att fyllas i automatiskt:

Det är inte nödvändigt att skapa nya nycklar för efterföljande applikationer; du kan signera andra applikationer med din nyckel, det är därför det finns en "Välj befintlig"-knapp
I nästa steg kommer IDE att be dig ange ditt lösenord igen och sedan ange en mapp för att spara APK-filen.
admin i kategorin Okategoriserade. Lägg till i bokmärken.

Den underliggande tekniken som gör HTML5-spel möjliga är en kombination av HTML och JavaScript. Hypertext Markup Language (HTML) var en del av den tidiga internetmotorvägen som de kallade den då och har fortsatt att användas för att betjäna alla webbplatser idag. JavaScript-kod lades till i andra versionen av webbläsare som Netscape 2.0 1995 och har utvecklats under åren till att bli trevligare att läsa och skriva. I början kallades det DHTML eller dynamisk HTML eftersom det var tillåtet för interaktivt innehåll utan att sidan uppdateras. Det var dock svårt att lära sig och använda i den tidiga webbtiden. Med tiden, Javascript med hjälp av Google Chrome utvecklare blev ett av de snabbaste skriptspråken. Det har också fler fritt tillgängliga moduler, bibliotek och skript än något annat kodningsspråk.

De tidiga DHTML-spelen var väldigt enkla. Några exempel på spelen då var Tic-Tac-Toe och . Eftersom spel tillverkade med denna teknik använder den öppna standarden HTML5, är dessa relativt uråldriga spel fortfarande spelbara idag i en modern webbläsare. Dessa tekniker har flyttat till framkanten av webbläsarspel eftersom de inte kräver plugins och är säkrare att spela än äldre tekniker. HTML5-spel stöder också och förmågan har förbättrats för att stödja komplex 2D och

I detta material kommer vi att beröra ljudet av spel och applikationer som är byggda på HTML-teknik för Android. Det här ämnet är mycket kontroversiellt och mycket kontroversiellt, och i den här artikeln kommer vi att prata om subtiliteterna i att överföra ljud i HTML i ditt spel eller din applikation.

Tagga ljud

Ljudtaggen, precis som videotaggen, stöds av Android såväl som de flesta HTML 5-funktioner. Och kvaliteten och stabiliteten på arbetet bör inte orsaka några motsägelser... Det verkar...

Det verkar som att HTML5 och allt borde finnas och fungera stabilt, men tyvärr implementerades HTML 5-ljud och -video något snett i Androids WebView.

Faktum är att dessa två HTML5-taggar fungerar felfritt med raderad data. Till exempel:

Men så snart vi pratar om att använda lokal data, det är det, det är okänt av vilka skäl, men data från HTML-sidan i ljud- och videotaggarna upptäcks inte på den lokala enheten. Med andra ord, om du placerade sidan i tillgångsmappen för ditt projekt och bredvid den ljud-mp3-filen, då följande kod:

Det kommer inte att fungera. Det är problemet med relativa vägar. Vilken ska jag sätta för att allt ska återgå till det normala, jag vet inte själv vad och hur jag ska göra det, men tyvärr var det inte möjligt att lansera lokalt ljud på inbyggt HTML.

Det är också värt att notera att autostart ljud på Android inte heller fungerar.

Så vitt jag vet fungerar inte inbäddning och objekt med ljud i Android heller.

Men oroa dig inte, det finns alternativa sätt att starta ljud från din HTML5-applikation.

Tumult

1. Använda en base64-kodad ljudfil.

Om någon inte visste det, stödjer webbläsare, inklusive mobila (och WebView), användningen av en base64-kodad sträng som innehåller innehållet i själva ljudet.

Här är ett exempel på kod där du kan generera en våg med JavaScript och omedelbart spela upp den som en sträng med kodad data. Genom att inspektera elementet i webbläsaren kommer du att vara övertygad om att den slutliga HTML-ljudkoden ser ut så här:

Grovt sett ger vi helt enkelt data till webbläsarhanteraren i en lite annorlunda form. Alla parametrar fungerar naturligtvis också. Du kan skapa en fil med JavaScript och ta bort den när du är klar:

var Ljud = (funktion () (
var df = document.createDocumentFragment();
returfunktion Sound(src) (
var snd = new Audio(src);
df.appendChild(snd); // behåll i fragment tills du är klar med spelningen
snd.addEventListener("avslutad", funktion () (df.removeChild(snd);));
snd.play();
returnera snd;
}
}());
// Använda sig av
var snd = Sound("data:audio/wav;base64," + base64string);

vw.setWebViewClient(new WebViewClient() (
offentlig MediaPlayer mp;
@Åsidosätta
public boolean shouldOverrideUrlLoading(WebView view, String url) (
if(url.endsWith(".mp3"))(
//url = url.replace("file:///android_asset/webpages/";, "");
Prova (
AssetFileDescriptor afd = getAssets().openFd(url);
mp = new MediaPlayer();
mp.setDataSource(afd.getFileDescriptor(), afd.getStartOffset(), afd.getLength());
afd.close();
mp.prepare();
mp.start();
) catch (IllegalArgumentException e) (
e.printStackTrace();
) catch (IllegalStateException e) (
// TODO Autogenererat fångstblock
e.printStackTrace();
) catch (IOException e) (
// TODO Autogenererat fångstblock
e.printStackTrace();
}
}
else if (url.indexOf("tel:") > -1) (
startActivity(new Intent(Intent.ACTION_DIAL, Uri.parse(url)));
) annat (
view.loadUrl(url);
}
returnera sant;
}
});

Du kan också läsa kommentarerna till denna fråga.

Webview-metoden hjälper också vissa människor loadDataWithBaseURL(). Det är möjligt att ange basadressen. Jag kunde inte tillämpa det i detta avseende. Den som lyckas, skriv i kommentarerna.

Hur tråkigt det än är så har jag hittat den enda hittills bra sätt spela upp ljud från WebView - Javascript bridge.

Java-Javascript-brygga

Vi har redan skrivit om att skapa en bro i, så låt oss gå direkt till saken:

Vi betecknar variabeln:

MediaPlayer mp = new MediaPlayer();

Och så skriver vi funktionen:

@JavascriptInterface
public void playBeep(String url) (
Prova (
if (mp.isPlaying()) (
mp.stop();
mp.release();
mp = new MediaPlayer();
}
annan(
AssetFileDescriptor descriptor = mContext.getAssets().openFd(url);
mp.setDataSource(descriptor.getFileDescriptor(), descriptor.getStartOffset(), descriptor.getLength());
descriptor.close();
mp.prepare();
mp.setVolume(1f, 1f);
mp.setLooping(true);
mp.start();
}
) fånga (Undantag e) (
e.printStackTrace();
}
}

Nu behöver du bara fästa den i ditt projekt och allt kommer att bli bra.

Om du har något att tillägga, se till att skriva i kommentarerna.

Brian McHargs strategi för att framgångsrikt utveckla spel över webbläsare, plattformsoberoende i HTML5.

HTML5: den rättmätiga arvtagaren till flashspelens tron. Verkligt plattformsoberoende utveckling gör att ett program, när det väl har skrivits, kan köras på en PC, surfplatta eller smartphone; det kommer också att fungera på Smart TV, stationära och mobila enheter, inklusive spelkonsoler som Xbox360 eller PlayStation 3 via deras inbyggda webbläsare . Det är klart att detta är väldigt attraktivt för den som vill utveckla spel för så många enheter och plattformar som möjligt.

Termen HTML5 i sig, liksom de specifikationer som den representerar, har olika betydelser beroende på vem som beskriver den. För kunderna är detta en utvecklingsteknik som lovar den sanna heliga gralen av kostnadseffektiv plattformsoberoende utveckling.

För utvecklare är det ett samlingssubstantiv för många olika teknologier: JavaScript, WebSockets, WebAudio, Canvas, CSS3 och WebGL är bara några, alla med sina egna standarder, starka och svaga begränsningar från plattform till plattform.

Och till sist, det som verkar vara det viktigaste: för användarna! Allt som betyder något här är att användarna vill ha samma intryck och upplevelser som de är vana vid. Och detta är huvuduppgiften för utvecklare, speciellt om deras mål är att introducera spelet till så många plattformar som möjligt.

PC vs mobil plattformsoberoende

Nu vet vi alla fantastiska exempel på HTML5-spel som körs i PC-webbläsare. De skapas ofta av webbläsarförfattare för att visa de särskilda styrkorna hos sin egen webbläsare. programvara, eller för specifika API:er som de skulle vilja se ratificerade i HTML5-specifikationen.

Spel som Cutthe Rope och Contre Jour för Internet Explorer eller några av de utmärkta experimenten för Chrome webbläsare, som Jam eller Racer, är bra exempel på detta. Om du är intresserad av framtida potential, kolla in bibliotek som three.js, den nyligen släppta open source Turbulenz eller Epic HTML5 som drivs av Unreal Engine.

Testa dock att titta på ett av dessa exempel på Android som kör OS2.3 (Gingerbread) så ser du en helt annan bild, och i vissa fall ingenting alls. Ja, det här operativsystemet är nästan tre år gammalt, men det är fortfarande installerat på en tredjedel av alla Android-enheter, och denna siffra kan vara ännu högre beroende på din målgrupp. Och detta händer inte bara gammal version Android. Du kan se samma sak på Apple-enheter som kör iOS 5 eller på mindre kraftfulla enheter som Kindle Fire. Faktum är att du nu inte hittar en enda mobil enhet som visar något av de ovan nämnda programmen korrekt.

Som nämnts tidigare väljer de flesta klienter HTML 5 för att göra deras webbläsarspel verkligen plattformsoberoende. Om du bara utvecklar spel för PC är Unity och Flash bra alternativ att överväga. Båda har utmärkt webbläsarstöd och möjlighet att exportera till enheter som separata applikationer, så att de kan överföras till en smartphone eller surfplatta med den exakta koden du behöver.

Det finns två uppenbara utmaningar när man utvecklar ett plattformsoberoende spel i HTML5. Den första är en konsekvens av HTML5-specifikationens vaga karaktär, vilket resulterar i att framtida stöd inte delas upp efter enhetstyp, utan efter typen av webbläsare på var och en av dessa enheter. Den andra, och svåraste för utvecklare, är den ständiga förändringen av mobila enheters kapacitet, vilket innebär att även med samma uppsättning funktioner kommer ett spel på en enhet att skilja sig mycket från samma spel installerat på en annan gadget.

För att få en uppfattning om hur många alternativ det finns, kör helt enkelt ett av de många JavaScript-testerna för att testa enhetens prestanda. Till exempel kommer att passera 100 bilder genom Canvas spela relativt bra med 60 bilder per sekund på enheter som iPhone 4S eller 5, Galaxy S3, Nexus 7 eller Lumia 820. Men prova samma kod på andra enheter som HTC Desire(19 fps), Galaxy Ace (7 fps) eller iPad 1 (9 fps), och du måste arbeta hårt för att få något som liknar ett livskraftigt spel.

Om ditt projekt var inriktat på en smartphone eller surfplatta, och särskilt om dessa inkluderade äldre eller lågeffektsenheter, är det mycket viktigt att testa och besluta om riktmärken tidigt. Detta är nödvändigt för att förstå begränsningarna i enhetsutbudet och bestämma både det tekniska tillvägagångssättet och utformningen av spelet du ska arbeta med.

Om ditt projekt inte var inriktat på smartphones eller surfplattor bör du förmodligen ompröva dina mål. Till exempel kommer nästan en tredjedel av sidvisningarna i Storbritannien från smartphones och surfplattor, och denna siffra växer i en sådan takt att den kommer att gå om skrivbordsvisningarna 2014. Även om stationära enheter fortfarande dominerar under arbetstid, leder de fortfarande vägen på morgonen. Mobil enheter, och på kvällarna - surfplattor, och dessa två tidsperioder är idealiska för att surfa på nätet och spela spel.

Välj dina strider

Chunk har utvecklat plattformsoberoende HTML5-spel för TV-bolag och varumärken i två år nu och skapat dem baserat på webbläsaren mobilspel för kunder som BBC och Disney, som körs på allt från HTC Desire till iPad4, Nexus 7 till Xbox 360.

Som utvecklare skulle det vara bra för dem att bestämma hur djupt de ska gå in i denna process, men detta bestäms av deras målgrupp och de enheter de använder. När de arbetade med barnmärken befann de sig ofta inom gränserna för gamla telefoner, eller lågkostnadsenheter med låg effekt, men också noggrant designade och optimerade många andra aspekter, vilket är anledningen till att de fortfarande tror att det är möjligt att utveckla imponerande spel för mobilt internet.

Och vad tog de med sig från denna upplevelse? Tja, om jag var tvungen att göra en lista över de 10 bästa tipsen för HTML5-spelutvecklare, skulle det se ut så här:

1. Bestäm din publik

Titta på demografi och vilka enheter som används av dem du riktar dig mot. Om du har data, använd den för att fastställa kärnan av enheter som dina besökare använder och rikta dina beslut till dessa enheter.

2. Definiera din design i termer av teknik.

Ja, det borde alltid vara fallet, men begränsningarna och fragmenteringen i HTML5 gör det ännu mer relevant. WebGL låter dig göra en utmärkt 3D-firstpersonsskjutare, men det är osannolikt (läs: inte alls) att det fungerar på surfplattor om de finns på din lista över målplattformar.

3. Bli vän med caniuse.com

Det här är ett utmärkt sätt att snabbt testa stöd för alla HTML5-funktioner som du vill använda i din utveckling – i praktiskt taget alla webbläsare och enheter.

4. Använd enheter, inte bara simulatorer

Lägg vantarna på så många olika enheter som möjligt, kör så många olika versioner som möjligt operativsystem. Simulatorer kan hjälpa dig under utvecklingen, men du kan bara få en korrekt bild av hur din kod kommer att fungera på en riktig enhet. Det finns ett stort antal laboratorier med testenheter som Open Device Lab, som ger dig tillgång till ett stort antal enheter. Annars kan du titta på platser som eBay där du kan hitta gamla telefoner och lägga till dem i din testmiljö.

5. Håll dig uppdaterad med ändringar

HTML5-specifikationen förändras ständigt, liksom enhetsstöd, så du måste hålla dig uppdaterad med ändringar inom dessa områden. Detta gäller särskilt inom områden som ljud, där funktioner som WebAudio API radikalt kan förändra kapaciteten.

6. Var flexibel genom hela utvecklingen

Det som fungerar idag kanske inte fungerar i morgon. Det som inte är tillgängligt för dig idag kan bli tillgängligt imorgon. Tillåt dig själv att vara flexibel och anpassa dig till förändringar som sker under ditt arbete.

7. Skalfunktionalitet

Att sätta mobilen först är inte bara användbart i traditionell webbdesign. Titta på hur du kan skapa något bra för smartphones, och överväg sedan funktionalitet och prestanda på andra plattformar om de tillåter det. Arbeta för de enheter som använder användaragenter eller mediaenheter och använd din erfarenhet av dem.

8. KISS (Keep It Simple, Stupid) – Komplicera inte ditt liv, dum

Försök för all del att definiera gränser och utöka kapaciteten, men kom ihåg att du arbetar med teknik som är i sin linda, ökad komplexitet eller uppblåsta projektambitioner kommer bara att förvärra din situation.

9. Bestäm livslängden på dina mönster

Funktioner förändras hela tiden, och ditt innehåll kan bli föråldrat för snabbt med nya funktioner tillgängliga på enheter. Om ditt spel förväntas pågå tillräckligt länge, ta dig tid att fixa buggar och uppdatera spelversionen.

Åh ja. Kontrollera dina spel på alla tillgängliga enheter så ofta som möjligt!

Gladiator, du kommer att gå på min andra signal

HTML5 ser ut att vara den inofficiella kärntekniken för plattformsspelutveckling över webbläsare, det råder ingen tvekan om det. För tillfället är detta inte det mest pålitliga utrymmet, men detta är normalt för teknologier i sin linda. För att kontrollera webbläsarnas funktioner är det värt att kolla in sajter som caniuse.com. Testa dina spel regelbundet på så många enheter som möjligt och var pragmatisk med speldesign. Detta kommer inte bara att hjälpa dig att undvika problem nu, utan också sätta dig i en bättre position när enhetsstödet förbättras, vilket är oundvikligt.

Efter att ha tillbringat flera dagar i rad (utan sömnuppehåll) med att studera HTML5-stödet för alla favoritprylar för Android, bestämde jag mig för att det här ämnet var värt att uppmärksamma. I den här artikeln kommer jag att försöka avslöja steg för steg alla steg (naturligtvis grundläggande/nyckel/huvud) för att skapa en HTML5-spelapplikation för Android från idén till releasen av själva APK-filen. Jag kanske inte kommer att avslöja något nytt för erfarna utvecklare, men för nybörjare kommer jag att försöka beskriva allt så enkelt som möjligt, med skärmdumpar och förklaringar.

De som vill lära sig mer bjuds in till cat.

Idé Generellt sett kan mycket sägas om potentialen hos Android, utvecklingen av HTML5 och deras interaktion. Jag kommer inte att göra det här. Så låt oss gå direkt till saken.

Tanken på att skapa ett spel för Android finns förmodligen i tankarna hos tiotals hundratals utvecklare, och de som anser sig vara sådana. Jag är inget undantag.

Hela processen kommer att delas upp i flera steg och den slutliga ansökan kommer att bestå av två delar:
- Wrapper (i det här fallet för Android)
- Ett spel

Steg 1. Att skriva själva spelet En annan fördel med att skriva ett spel i HTML5 är det faktum att testning inte kräver ett gäng körande program, IDE, emulatorer och så vidare. Allt du behöver är en webbläsare (i mitt fall är det Chromium) och en textredigerare (BlueFish)

Spelet kommer inte att vara svårt: det finns en blå rektangel och det finns en grön rektangel. Spelarens uppgift är att dra den blå rektangeln till den gröna, förbi den röda, som rör sig längs spelplanen i valfri riktning.

För att utveckla spelet kommer jag att använda J2ds (spelmotor).

Färdigt spelkod:

index.html

Demospel på J2ds v.0
// Initiera inmatningsenheten initInput("gameBody"); // Skapa en scen scen= createScene("iCanvas", "#aeeaae"); // Starta i helskärmsläge scene.fullScreen(true); post= createPost(scen); poäng = 5; // Skapa rektanglar blå= createRect(vec2di(100, 100), vec2di(30, 30), "blå"); green= createRect(vec2di(300, 200), vec2di(30, 30), "grön"); grön.dX= -1; grön.dY= 1; red= createRect(vec2di(16, 200), vec2di(30, 30), "röd"); red.dX= 1; red.dY= -1; restart= createRect(vec2di(430, 10), vec2di(60, 60), "#ad21ad"); GameOver= function() ( // Bearbeta beröringen / muspositionen input.upd(scene); // Rita texten scene.drawText(vec2di(5,5), "Score: "+poäng); // Rita texten scene.drawTextOpt (vec2df(140, 100), "Lost!", "bold 40px Courier New", "#326598"); if (input.lClick && input.onNode(restart)) setActivEngine(Game); restart.draw (scen); ) Framgång= function() ( // Bearbeta beröringen / muspositionen input.upd(scene); // Rita texten scene.drawText(vec2di(5,5), "Score: "+poäng); // Rita textscenen .drawTextOpt(vec2df(140, 100), "Victory!", "bold 40px Courier New", "#326598"); if (input.lClick && input.onNode(restart)) setActivEngine(Game) ); restart.draw( scen); ) // Beskriv speltillståndet Game Game= function() ( // Bearbeta beröringen / muspositionen input.upd(scene); // Rita texten scene.drawText(vec2di(5) ,5), "Poäng: "+ poäng); blue.color= input.lClick?"yellow" : "blue"; if (input.lClick) ( red.move(vec2di(red.dX, red.dY)) ; green.move(vec2di(grön. dX, grön.dY)); blue.move(vec2df(blue.getPosition().x > input.pos.x ? -1*score/2: 1*score/2, blue.getPosition().y > input.pos.y ? -1* poäng/2: 1*poäng/2)); if (grön.kollisionScen(scen).x != 0) grön.dX= -grön.dX; if (grön.kollisionScen(scen).y != 0) grön.dY= -grön.dY; if (red.collisionScene(scen).x != 0) red.dX= -red.dX; if (red.collisionScene(scen).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(grön)) ( input.cancel(); score+= 1; setActivEngine(Succes); red.setPosition(vec2df(200, 100)); blue.setPosition(vec2df(50, 50)) ; blue.setPosition(vec2di(Random(0, 450), Random(0, 250))); ) // Rotera rektanglarna blue.turn(1); green.turn(720/blue.getDistance(grön)); red.turn(Random(1, 5)); // Rita objekt green.draw(scene); blue.draw(scen); red.draw(scen); //post.motionBlur(4); ) // Starta spelet med speltillståndet Game och FPS 25 startGame(Spel, 25);

Du kan ignorera kvaliteten på spelkoden, eftersom detta inte är syftet med artikeln. Även om du naturligtvis kan optimera hur mycket du vill, är denna process förmodligen oändlig Steg 2. Android Studio. Att skapa ett omslag för ett spel Jag tänker inte jämföra coolheten i den eller den IDE för Android-utveckling med någon, men jag ska visa dig använda Android Studio som ett exempel. För att arbeta behöver vi:
- Java-maskin (OpenJDK är lämplig för min Linux);
- Distribution av Android Studio.

Ladda ner och installera.

När allt är installerat (dessa två program räcker), starta Android Studio.

Startfönstret öppnas (om detta är den första lanseringen), om inte den första, då öppnas själva IDE, men det ändrar inte essensen, låt oss gå till SDK Manager:

Här behöver du bocka av vilka versioner av Android som du ska arbeta med, i mitt fall är det Android 4.4.2, du kan välja alla på en gång.

Det viktigaste är att välja "Verktyg" och "Extras" och klicka på "installera paket".

Fyll i de obligatoriska fälten och klicka på Nästa

Välj önskad version av Android och Next

Här väljer vi Blank Activity (tom mall med Hello, World!)

I nästa fönster, fyll i data för att skapa klasser; Jag kommer inte att ändra det för tydlighetens skull:

Vi klickar högtidligt på Finich och väntar tills IDE konfigurerar allt och förbereder det för arbete.

Ett fönster med formulärdesignern öppnas. Det är inte samma sak som i Lazarus eller Delfi, men det finns fortfarande något liknande:

Skynda dig inte att ändra någonting eller klicka på något, installationen är inte klar än. Öppna "Tulls->Android->AVD Manager" för att konfigurera emulatorn.

I det tredje steget mer detaljer:

T.K. Vårt spel är utsträckt horisontellt, du måste välja liggande läge.

När alla inställningar har angetts, klicka på den gröna triangeln och starta emulatorn. Efter start, vänta tills enheten startar helt och operativsystemet startar:

Stäng inte det här fönstret, emulering kommer att ske i det. Nu kan du återgå till redigeraren och ändra orienteringen i formulärdesignern:

Du kan starta! Nu är det definitivt möjligt.

Om du blir ombedd att välja en emulator kan du markera rutan nedan:

Grattis! Allt fungerar, testat!

Därför att Vi gör ett spel i HTML5, men här har vi bara ett omslag för spelet, vi tar bort all text och sätter in följande:

Nu, om du byter till designen igen, kommer det att se annorlunda ut:

Som du kan se finns det nu istället för "Hello, World" en WebView utsträckt över hela skärmen. Detta objekt är vårt "fönster" in i spelvärlden.

Du kan till och med starta den och se om det finns en vit skärm. Varsågod.

Den här fliken visar projektstrukturen och alla dess interna filer och resurser.

Förklaring

Vi måste hitta filen "manifest" och lägga till följande rad i "applikations"-definitionen:
android:hardwareAccelerated="true"

Det är dags att arbeta med funktionaliteten i vår "webbläsare", för det är vad det är! Öppna klassen "MainActivity.java" och ta bort allt onödigt, lämna bara det viktigaste:

Förklaring

paket com.soft.scanner.demogamehtml5; importera android.support.v7.app.AppCompatActivity; importera android.os.Bundle; public class MainActivity utökar AppCompatActivity ( @Override protected void onCreate(Bundle savedInstanceState) ( super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ) )

Om du inte har glömt, la vi till en WebView i filen activity_main, var uppmärksam på raden i fet stil:

Vi måste deklarera ett objekt av klassen WebView.

För att göra detta, lägg till i listan över importer:

Importera android.webkit.WebView;
Och sedan deklarerar vi vårt myWeb-objekt i MainActivity-klassen:

Skyddad WebView myWeb;
Nu, efter raden setContentView(R.layout.activity_main); sätt in följande kod:

Detta är vad jag fick i editorn:

Och här är vad som finns i emulatorn:

Om samma sak gäller för dig är vi på rätt väg!

Filen index.html är samma index från början av den här artikeln. Nåväl, låt oss försöka starta den!

Steg 3. Android Studio. Bygga applikationen och signera den När du har felsökt spelet helt (i webbläsaren eller på emulatorn), omslaget är helt klart och alla utvecklingsstadier ligger bakom dig, kan du sätta ihop applikationen. Android Studio låter dig samla in applikationer och signera dem med dina nycklar.

För att skapa nycklar har denna IDE ett speciellt verktyg "KeyTool".

Låt oss gå vidare till att skapa den körbara programfilen ("Bygg -> Generera signerad APK"):

Om du inte har skapat nycklar och alias tidigare, klicka på "Skapa nytt". Du kan fylla i fälten efter eget gottfinnande; noggrannheten av uppgifterna vilar helt på dig.

Det första fältet är sökvägen till mappen där nyckeln kommer att sparas. Efter att ha klickat på OK kommer formuläret att fyllas i automatiskt:

Det är inte nödvändigt att skapa nya nycklar för efterföljande applikationer; du kan signera andra applikationer med din nyckel; det är precis vad knappen "Välj existerande" är till för.

I nästa steg kommer IDE att be dig ange ditt lösenord igen och sedan ange en mapp för att spara APK-filen.