Share
In deze tutorialserie zullen we ons concentreren op cross-platform game-ontwikkeling voor de iPad en Android-tablets met behulp van het ShiVa3D Suite-framework voor het ontwikkelen van games. Hoewel ShiVa3D Suite voornamelijk voor 3D-spellen is, kan het ook worden gebruikt om 2D-spellen te ontwikkelen. "Puzzle", de game die in deze serie wordt beschreven, is een voorbeeld van een relatief eenvoudig 2D-spel dat snel kan worden gemaakt met ShiVa3D.
Het belangrijkste doel van de puzzel is heel eenvoudig. Wanneer het spel start, worden delen van een afbeelding willekeurig op het scherm geplaatst. Om de puzzel op te lossen, moet de gebruiker die stukjes op de juiste locaties plaatsen. Een timer toont de verstreken tijd sinds het begin van het spel. De timer kan worden gepauzeerd als de gebruiker vrije tijd nodig heeft in het spel. Door op een knop "Oplossen" te drukken, kan het spel automatisch worden opgelost, een functie die handig is als de gebruiker hulp nodig heeft bij het oplossen van het spel..
Deze tutorialserie bestaat uit drie delen. Deel 1 begint met de volgende sectie, genaamd "Beschrijving van het spel", waar we meer details geven over de puzzel, die zijn gedrag beschrijft met behulp van schermafbeeldingen. In de volgende sectie, "Schermafbeeldingen in Android-tablet en iPad 2", bieden wij schermafbeeldingen van het eindproduct in een Android-tablet met Android OS 4.0.3 (Ice Cream Sandwich) en iPad 2 met iOS 4.3. Dit wordt gevolgd door "Ontwikkelingsproces via Shiva3D Suite", waarin we de hoofdcomponenten van de ShiVa3D Suite, de ShiVa-editor en de ShiVa Authoring Tool introduceren en vervolgens een overzicht geven van het proces om de Puzzel op een platformonafhankelijke manier te ontwikkelen met die componenten.
De volgende secties houden zich bezig met de implementatie. Deel 2 begint met "Game Geometry", dat zich richt op de onderliggende geometrische aspecten van het spel en de achtergrond legt voor de ontwikkeling van de code. In "De puzzel in de ShiVa-editor ontwikkelen" introduceren we de belangrijkste constructies van de codebasis die de spelfunctionaliteit implementeren, inclusief de variabelen, functies en gebeurtenishandlers. Dit gedeelte geeft ook stapsgewijze instructies voor het ontwikkelen van het spel met de ShiVa-editor. Hier beschrijven we het maken van het project en het spel en het importeren van texturen, het AI-model en de geluidsbank uit het downloadarchief bij de zelfstudie. Dit concludeert deel 2 van de serie.
Deel 3 van de serie vervolgt de discussie in "De puzzel in de ShiVa-editor ontwikkelen". We beschrijven het importeren van de HUD-componenten en maken de laatste aanpassingen aan het ontwikkelde spel tot nu toe. Vervolgens concluderen we "Het ontwikkelen van de puzzel in ShiVa-editor" via een unit-test. In het gedeelte "Authoring Tool" laten we zien hoe je de ShiVa Authoring Tool gebruikt om de puzzel in twee verschillende applicaties om te zetten, een voor Android OS en een voor de iPad. We sluiten het artikel af met "Conclusies", waar verschillende slotopmerkingen worden gegeven.
Een deel van het referentiemateriaal in dit artikel is overgenomen van de officiële ShiVa3D-productwebsite.
De geluidsbestanden die in de toepassing worden gebruikt, zijn overgenomen uit de voorbeeldset die wordt geïnstalleerd met de ShiVa-editor (Stonetrip \ ShiVa Editor PLE \ Data \ Samples \ Resources \ Geluiden map).
De codebasis voor het roteren van het kijkvenster, zodat de werkbalk bovenaan blijft staan terwijl het apparaat wordt geroteerd door de gebruiker, is gebaseerd op een andere ShiVa 3D-zelfstudie
(Http://www.stonetrip.com/developer/1704-rotate-the-viewport-according-to-the-device-rotation).
De codebase voor multi-touch management neemt ideeën van een andere ShiVa 3D-tutorial (http://www.stonetrip.com/developer/1046-multitouch-management).
De auteur heeft enorm geprofiteerd van een boek over ShiVa3D, getiteld Introduction to 3D Programming with ShiVa.
Ten slotte zijn de video's in deze zelfstudie gemaakt met behulp van open source FreeStudio Video naar Flash Converter en CamStudio-tools.
In deze sectie zullen we het puzzelspel beschrijven. De applicatie start met het volgende splash-scherm.
Nadat het opstartscherm wordt weergegeven, gaat het spel naar de status "Geïnitialiseerd". Deze toestand begint met puzzelstukjes die hun oorsprong vinden in de linkerbenedenhoek van het scherm en zich verplaatsen naar willekeurige locaties in het speelgebied. Terwijl ze bewegen, draait de helft van de delen met de klok mee en de andere helft naar links (een momentopname is hieronder te zien).
De korte video hieronder toont het spel terwijl het wordt geïnitialiseerd.
Zodra alle stukjes hun willekeurige posities hebben ingenomen, worden de knoppen Start en Solve ingeschakeld in de werkbalk bovenaan, zoals in de onderstaande afbeelding. Er zijn in totaal 54 puzzelstukjes geplaatst in 9 rijen en 6 kolommen. Zoals we later zullen zien, kan de applicatiecode eenvoudig worden uitgebreid om rekening te houden met een willekeurig aantal rijen en kolommen. Het doel van het spel is om de stukjes zo te positioneren dat ze het puzzelbeeld in de kortst mogelijke tijd correct construeren. Als een stuk op de juiste locatie staat, zijn de randen groen gemarkeerd. Zie bijvoorbeeld het derde stuk in de laatste rij hieronder.
Het spel start wanneer op de startknop wordt gedrukt. Hierdoor komt het spel in de staat "Started".
In deze status verandert de knop Start in een knop Pauzeren en worden de knoppen Nieuw en Oplossen uitgeschakeld. De timer begint te tellen. Wanneer de gebruiker een stuk naar een andere positie verplaatst, laten we zeggen stuk A, beweegt het stuk dat het vervangt automatisch naar de oorspronkelijke positie van stuk A. Dit wordt in de onderstaande afbeelding getoond. De gebruiker heeft het stuk in de linkerbovenhoek verplaatst naar de rechter benedenhoek (beweging aangegeven door de groene lijn). Het vervangen puzzelstuk verplaatst zich naar de linkerbovenhoek om de lege locatie in te vullen (stuk aangegeven door de rode pijl). Het duurt ongeveer 3 seconden om de automatische beweging van het stuk te voltooien. Hoewel niet weergegeven in de bovenstaande snapshots, roteert het automatisch bewegende stuk met de klok mee of tegen de klok in terwijl het reist. De beslissing met de klok mee of tegen de klok in is afhankelijk van de kolom en rij-index van het stuk.
De onderstaande video toont de gebruiker die op de Start-knop drukt en vervolgens een stuk van de ene naar de andere locatie verplaatst, waarbij een ander stuk wordt vervangen.
Zoals eerder vermeld, zijn er 54 puzzelstukjes. Deze worden op vaste posities geplaatst, bestaande uit 9 rijen en 6 kolommen, zoals weergegeven in de onderstaande afbeelding. Centra van de puzzelstukjes vallen samen met de vaste posities.
Om een stuk te verplaatsen, drukt de gebruiker met een vinger op het stuk en verplaatst het naar wens. Wanneer de doelpositie is bereikt, laat de gebruiker zijn vinger los. Als de afstand tussen de dichtstbijzijnde vaste positie en het midden van het puzzelstuk minder is dan een vooraf opgegeven tolerantie (een parameter in de toepassingscode), dan springt het stuk automatisch in de vaste positie. Anders gaat het stuk automatisch terug naar zijn oorspronkelijke positie.
Wanneer het door de gebruiker bewogen stuk in een positie klikt, verplaatst het stuk dat het vervangt zich naar de oorspronkelijke positie van het stuk dat door de gebruiker is verplaatst. Als het stuk dat door de gebruiker wordt bewogen niet in een nieuwe positie klikt, keert het terug naar zijn oorspronkelijke positie. In beide gevallen wordt de beweging automatisch uitgevoerd door de toepassing. Wanneer die beweging begint, gaat het spel naar een nieuwe staat genaamd "Vervangen".
Dit is een toestand waarbij een puzzelstuk automatisch beweegt, met de klok mee of tegen de klok in roterend tijdens het reizen, en uiteindelijk een doellocatie bereikt. Beweging van het puzzelstukje wordt bestuurd door de toepassing. Wanneer de beweging voltooid is, met andere woorden wanneer het stuk zijn positie bereikt, gaat het spel terug naar de "Gestart" -status.
Als een puzzelstukje in de juiste positie wordt geplaatst, worden de randen groen gemarkeerd. In het voorbeeldscherm hieronder staan de stukken met groene randen op de juiste posities. Degenen die geen groene randen hebben, bevinden zich niet in de juiste posities.
Als een gebruiker op de knop Pauzeren drukt, wordt de status "Gepauzeerd" geactiveerd.
In de gepauzeerde toestand is de timer onderbroken. De knop Pauze wordt de Start-knop en de knoppen Nieuw en Oplossen worden ingeschakeld, zoals hieronder wordt weergegeven.
In de pauzestand kunnen puzzelstukjes niet worden verplaatst.
Als de gebruiker in de gepauzeerde staat op de knop Nieuw drukt, wordt het spel beëindigd en wordt de toepassing opnieuw gestart. Het spel gaat naar de status "Geïnitialiseerd" (zie hierboven). De puzzelstukjes vinden hun oorsprong in de linkerbenedenhoek van het scherm en verplaatsen zich naar willekeurige locaties in het speelgebied.
Ook in de gepauzeerde toestand, als de gebruiker op de startknop drukt, gaat het spel terug naar de startstatus.
Als de gebruiker in de gepauzeerde toestand op de knop Solve drukt, wordt het spel beëindigd door het automatisch op te lossen. Het op deze manier oplossen van het spel is handig als de gebruiker heeft opgegeven het spel zelfstandig op te lossen. De stukjes verplaatsen zich van hun huidige locaties naar de juiste locaties om het puzzelbeeld te construeren (zie de afbeelding hieronder). Het spel gaat in de staat "Opgelost".
De onderstaande video toont het spel wanneer de gebruiker op de knop Solve drukt.
In de opgeloste staat is de puzzelafbeelding geconstrueerd. Zie in de meest rechtse afbeelding in figuur 9 hierboven dat de puzzelstukjes allemaal groene randen hebben omdat ze allemaal in de juiste positie staan.
In de Opgeloste staat is alleen de knop Nieuw ingeschakeld. De gebruiker kan op de knop Nieuw drukken om het spel opnieuw te starten. Dit brengt het spel in de status Geïnitaliseerd. Zoals eerder beschreven, komen puzzelstukjes uit de linkerbenedenhoek van het scherm en gaan ze naar willekeurige locaties.
Het volgende diagram toont de statusovergangen die de bovenstaande bespreking samenvatten.
De volgende afbeeldingen tonen het puzzelspel op een Android OS 4.0.3-tablet tijdens de initialisatie. Een nieuw spel begint aan de linkerkant en net nadat alle puzzelstukjes hun willekeurige locaties hebben bereikt, aan de rechterkant.
De volgende afbeeldingen tonen het puzzelspel op een Android OS 4.0.3-tablet, net nadat de gebruiker op de knop Solve heeft gedrukt, aan de linkerkant en nadat het spel is opgelost, aan de rechterkant.
De volgende afbeelding toont het startpictogram van het puzzelspel op een Android OS 4.0.3-tablet.
De volgende afbeeldingen tonen het puzzelspel op iPad 2 tijdens de status Geïnitialiseerd. Een nieuw spel begint, aan de linkerkant, en dan net nadat alle puzzelstukjes hun willekeurige locaties hebben bereikt, aan de rechterkant.
De volgende afbeeldingen tonen het puzzelspel op iPad 2, net nadat de gebruiker op de knop Solve klikte, aan de linkerkant en daarna nadat de game daadwerkelijk is opgelost, aan de rechterkant.
De volgende afbeelding toont het startpictogram van het puzzelspel op iPad 2.
In deze sectie bespreken we verschillende concepten van game-ontwikkeling met ShiVa3D. Het grootste deel van de discussie hier is ontleend aan de originele ShiVa3D-documentatie. Voor meer informatie, zie http://www.stonetrip.com/developer/doc/ en de gebruikershandleiding die bij ShiVa-editor wordt geleverd.
Merk op dat ShiVa3D voornamelijk een framework voor 3D-spelontwikkeling is. Onze game heeft echter geen 3D-functies en is een voorbeeld van hoe ShiVa3D kan worden gebruikt om ook 2D-spellen te ontwikkelen.
Spel staat voor een spel, de belangrijkste entiteit van de applicatie. Het omvat al het andere in de toepassing, zoals camera's, scènes enz. Een game is een zelfstandige implementatie-eenheid.
AIModel impliceert 'kunstmatige intelligentie' en vertegenwoordigt gedrag. Een AIModel kan functies, handlers, toestanden en variabelen bevatten. In de Puzzel zullen we een enkel AIModel gebruiken om de functionaliteit van het spel te definiëren.
Script bevat de code in een AIModel, bijvoorbeeld code voor een functie of handler. De scripttaal in ShiVa3D is Lua.
HUD staat voor "head-up display" en is een term om verschillende widgets voor gebruikersinterfaces weer te geven, zoals knop, label, lijst, schuifregelaar, enz. waardoor de gebruiker kan communiceren met het spel.
Om de puzzelgame te ontwikkelen, gebruiken we de gratis versie van ShiVa3D Suite (http://www.stonetrip.com/download.html), die ShiVa Editor PLE (persoonlijke leereditie) en ShiVa Authoring Tool bevat. Het onderstaande schema geeft een overzicht van het ontwikkelingsproces dat we met deze hulpmiddelen hebben gebruikt.
Laten we de afzonderlijke stappen van dat proces bespreken.
De ShiVa-editor heeft verschillende modules om een 2D- of 3D-applicatie, meestal een game, vanaf de grond op te bouwen en te testen. Een belangrijk kenmerk van de ShiVa-editor is dat een met die tool ontwikkelde toepassing kan worden geïmplementeerd (na authoring in ShiVa Authoring Tool) in verschillende apparaten met verschillende besturingssystemen, b.v. een pc met Windows OS, een mobiele telefoon met Android-besturingssysteem, iPhone / iPod Touch, iPad enz. Enkele basisacties die u met de ShiVa-editor kunt uitvoeren, zijn als volgt.
Ontwikkelen:
Test: U kunt een eerste test van de 2D- of 3D-toepassing in de ontwikkelomgeving uitvoeren voordat u deze in een doelapparaat implementeert. Testen wordt uitgevoerd via de Animate- of Preview-functie van de ShiVa-editor. Tijdens het testen kunt u instellingen voor de schermgrootte wijzigen om te zien hoe de toepassing wordt weergegeven in het werkelijke doelapparaat. In de puzzel hebben we muisklikken gebruikt om knopgebeurtenissen te testen. Om aanraakgebeurtenissen te testen, gebruikten we drag-and-drop met de muis.
Exporteren: Nadat het testen is voltooid, exporteert u de toepassing. Dit genereert een bestand met een STK-extensie. De geëxporteerde applicatie wordt gebruikt door de ShiVa Authoring tool, die hierna wordt besproken.
Het belangrijkste doel van de ShiVa Authoring-tool is om een applicatie, gecreëerd via de ShiVa-editor, om te zetten in een platformspecifieke applicatie die kan worden ingezet in een bepaald apparaat, bijvoorbeeld iPad of Android-tablet. Bepaalde beperkingen zijn van toepassing op het besturingssysteem van de machine waarop de ShiVa Authoring-tool draait en het doelapparaat voor conversie. De ShiVa Authoring-tool die op een Windows-computer draait, kan bijvoorbeeld geen iPad- of iPhone-applicatie genereren. Bij het ontwikkelen van de puzzel hebben we een Windows-machine voor The ShiVa Editor gebruikt. Om de Android Puzzle-applicatie te maken, hebben we ook een Windows-machine gebruikt om de ShiVa Authoring Tool uit te voeren. Aan de andere kant, om de iOS Puzzle-applicatie voor iPad te maken, gebruikten we een Mac OS-machine om de ShiVa Authoring Tool te gebruiken.
Enkele van de basisacties die u met de ShiVa Authoring-tool kunt uitvoeren, zijn de volgende.
Selecteer Authoring Platform: Voor de doeleinden van deze reeks zijn de platformopties waarin wij geïnteresseerd zijn iPad en Android. Merk op dat je voor de iPad de ShiVa Authoring Tool op een Mac OS-machine moet hebben.
Importeren: Importeer de applicatie (een bestand met stk extensie) die geëxporteerd werd via de ShiVa Editor.
Bouwen: Bij het ontwerpen voor Android, zullen we de ShiVa Authoring Tool configureren om een Android APK-bestand te genereren dat direct kan worden geïmplementeerd op een compatibel Android-apparaat. Bij het ontwerpen voor iPad, zullen we de ShiVa Authoring Tool configureren om een Xcode-project voor iPad-ontwikkeling te genereren. Vervolgens kan men het project in Xcode bouwen en het uitvoerbare bestand op een verbonden apparaat implementeren (het project in Xcode bouwen en het resulterende uitvoerbare bestand op een verbonden apparaat implementeren valt niet onder deze reeks).
Voor elk platform biedt de ShiVa Authoring Tool enigszins verschillende opties om zijn eindproduct te genereren. Als u bijvoorbeeld ontwerpt voor Android, kunt u een Eclipse-project genereren in plaats van een Android-uitvoerbaar bestand. Zoals hierboven vermeld, hebben we ervoor gekozen om een Android-uitvoerbaar bestand in deze serie te genereren.
Op dezelfde manier kan voor iPad een uitvoerbaar bestand voor distributie worden gegenereerd in plaats van een Xcode-project te genereren. Zoals eerder vermeld, hebben we ervoor gekozen om in deze serie Xcode-projecten te genereren. Raadpleeg de gebruikershandleiding van de ShiVa Authoring Tool voor meer informatie.
Het volgende is een lijst met configuraties die we hebben gebruikt tijdens het ontwikkelen van het puzzelspel. Raadpleeg de Shiva3D-documentatie die wordt beschreven in http://www.stonetrip.com/developer/doc/editor/information/hardware en http://www.stonetrip.com/developer/doc/authoringtool/installation voor aanvullende vereisten en vereisten..
OS van ontwikkelmachine: Windows 7
In deel 1 van deze tutorial hebben we onze game geïntroduceerd en de details ervan beschreven. We hebben ook het cross-platform game-ontwikkelingsproces samengevat via Shiva3D Suite. kunst 2 begint met "Game Geometry", die zich richt op de onderliggende geometrische aspecten van het spel en de achtergrond legt voor de ontwikkeling van de code. In "De puzzel in ShiVa-editor ontwikkelen" introduceren we hoofdconstructies van de codebasis die de spelfunctionaliteit implementeren, inclusief de variabelen, functies en gebeurtenishandlers. In deze sectie worden ook stapsgewijze instructies gegeven voor het ontwikkelen van de game in de ShiVa-editor. Hier beschrijven we het maken van het project en het spel en importeren we texturen, AI-modellen en de geluidsbank uit het downloadarchief bij de zelfstudie.
Accentsconagua