Erstellen eines Mobile HTML5 Farming Game - Tutorial
Vergessen Sie nicht, meinen Online-Kurs HTML5 Mobile-Game Development für Anfänger zu überprüfen. Erhalten Sie 90% Rabatt auf !. Nur bis zum Ende des Monats.
In den letzten Jahren hat sich HTML5 als große Alternative kommen zu entwickeln Cross-Plattform-Anwendung, um eine einheitliche Codebasis verwenden. Ein HTML5 App kann auf iOS, Android, Windows Mobile, Blackberry laufen. und natürlich guter alter Desktop aus.
In diesem Tutorial werden Sie die Grundlagen lernen, wie man ein einfaches Landwirtschaft Spiel erstellen, die diese großen Hits Sie auf Facebook gespielt haben emuliert. Wir werden mit einem Open-Source-HTML5-Spiel dev Rahmen LimeJS genannt werden.
Tutorial Anforderungen
Landwirtschaft Spiele?
Farming-Spiele sind ein großen Phänomene, die keine Grenzen kennen, wenn es um Nationalitäten und Generationen kommen. Fortunes wurde um sie herum gemacht und die Menschen haben Abweichungen vom ursprünglichen Konzept erstellt. Es ist nicht verwunderlich, mittelalterlich zu finden, tropisch, futuristisch, auch Zombie-Themen Landwirtschaft Spiele in den verschiedenen App-Stores gibt.
Was ist der Grund für diesen Erfolg? Sie vermissen wir Pflügen das Land mit bloßen Händen aus in diesem postmodernen urbanen Zivilisation? ist diese Menschen jetzt auf ihren Balkonen wachsen in die städtischen Betriebe zu tun? Nun, wer weiß.
Ich werde Ihnen nicht sagen, was die Gründe für ihren Erfolg sind (nicht, dass ich kenne sie sowieso), aber ich bin auf der anderen Seite, geht zu lehren, wie man ein einfaches Landwirtschaft Spiel machen mit HTML5 und einen Open-Source-JS-Framework aufgerufen LimeJS.
Sie können LimeJS von ihrer Homepage dowload. Montageanleitung und eine gute Einführung in Erste Schritte Guide.
Wenn Sie Schritt für Schritt will, Video-basierte Anweisungen, wie dieses Framework in Mac, Windows oder Ubuntu zu installieren und einen guten Halt bekommt die Grundlagen meinen Online-Kurs fühlen sich frei, um zu überprüfen, was Ihnen alle Grundlagen der Spielentwicklung lehrt LimeJS mit und andere kostenlose Tools.
Spielelemente
Unser Spiel wird die folgenden Elemente:
- Land
- Pflügen das Land
- Ein Geschäft Kulturpflanzen zu erhalten
- Anbau von Pflanzen
- Pflanzen wachsen
- Ernte!
In diesem Tutorial werden wir nicht bekommen, in sie soziale oder Pervasive machen, aber es könnte für zukünftige Übungen am Horizont sein :)
Spielewelt
Zeit aufhören zu reden und unsere Hände in den Code einzutauchen. Oh ja. Angenommen, Sie haben erfolgreich heruntergeladen und installiert LimeJS (sollten Sie in der Lage sein, die Beispiele auszuführen, die mit ihm kommen) werden wir ein neues Projekt erstellen:
Dadurch wird ein Ordner namens „Landwirtschaft“ innerhalb des Ordners erstellen, in dem LimeJS installiert wurde. Wenn Sie LimeJS korrekt installiert sollten Sie in der Lage sein, eine Datei zu finden genannt „farming.html“. Öffnen Sie die Datei und fügen Sie den folgenden unter dem Skript-Tag:
All dies tut, ist der Hintergrund schwarz Einstellung und ein wenig Hack für einen bekannten Fehler auf einigen Geräten Anwendung. Jetzt offen farming.js und ersetzen Sie es seinen Inhalt mit dem folgenden Code:
Das ist nur ein grundlegender Text (wenn Sie öffnen farming.html Sie sollten einen schwarzen Bildschirm sehen). Zum einen bieten wir den Namespace „Landwirtschaft“, die zu tun ist erforderlich, wenn in LimeJS arbeiten. Wir werden mit dann entsprechender Rahmenmodule. Unsere farming.start () ist die erste Sache, die ausgeführt wird, wenn das Spiel wird geladen (wie dies in farming.html genannt wird).
Wir können ein Objekt definieren genannt gameObj (oder wie Sie wollen) einige Spiel-Level-Variablen zu speichern. Wir werden diese Aufgabe werden, das um unsere Spielelemente so, dass diese Eigenschaften können von überall her zugegriffen werden.
In den nächsten Blöcken defininig wir unser „Direktor“ Objekt, das eine ähnliche Rolle wie die wirkliche Leben directiors tut: definieren, welche Szenen spielen, etc. Unser Spiel zwei Schichten (die Bereiche, in denen Inhalte platziert werden). landLayer werden das Land und die Pflanzen beherbergen. controlsLayer den Statusbereich hat und die Optionen für den Benutzer, die in diesem Fall die Taste, um den Laden zu betreten.
Kontrollen Bereich
Lassen Sie uns eine andere Datei enthalten, die eine Schnellzugriffstaste bietet:
Wir können mehr Eigenschaften unserer gameObj hinzufügen, dass einige Dimensionen enthalten. Es wird empfohlen, es auf diese Weise anstatt, „magische Zahlen“ im Code zu tun. Einige der Eigenschaften, ich bin jetzt das Hinzufügen werden nur dann Sinn, später im Tutorial machen also keine Sorge, wenn Sie sie im Code nicht sofort sehen:
Neben unserem Spielobjekt, wollen wir auch ein Objekt für den Spieler (nur eine Design-Wahl) erstellen. Das Objekt speichert das Geld und die aktuell ausgewählte Ernte (dies wird später sinnvoll). Fügen Sie die folgende nach dem Spiel Objekterstellung:
Nun fügen Sie den folgenden Code unter "gameScene.appendChild (controlsLayer);":
Was wir gerade haben einen grauen Container auf dem Boden Hinzufügen einer Taste, die „Shop“ und eine Textbeschriftung sagt zeigt den aktuelle Geld des Spielers. Sie sollten folgendes sehen werden:
Spiel-Fliesen
Die Fliesen in diesem Spiel verwendet wurden, von Daneeklu der Grafik angepasst, die unter der CC-BY-SA-Lizenz veröffentlicht wurden, so dass wir es für diesen Zweck verwenden.
Sie können alle Spieldateien von diesem Link herunterladen.
Zurück an die Arbeit. Um eine Einheit von Land repräsentieren wir eine neue Datei erstellen werden „land.js“ und geben ihm den folgenden Code:
Was wir hier tun, ist eine neue Art von Objekt zu erzeugen gemäß den LimeJS Spezifikationen. Dieses Objekt „erbt“ aus dem lime.Sprite Objekt, so verhält es sich wie ein Sprit in jeder Hinsicht. Sehen Sie, wie wir den Namensraum bieten, wie wir zuvor. Wir geben das Spiel und die Spieler Objekte im Konstruktor, und wir werden einige grundlegende Eigenschaften einrichten, damit wir sie nicht jedes Mal neu eingeben müssen wir ein farming.Land-Objekt erstellen.
Jedes Mal, wenn Sie eine neue Datei zum Projekt hinzufügen müssen Sie diesen Befehl ausführen für das Framework alles registriert zu halten:
In farming.js fügen Sie Folgendes zum Abschnitt „des erfordern“:
Jetzt wollen wir das Land Schicht wir geschaffen zuvor mit unserem Land viel füllen. Wir werden tun, dass mit einer Iteration und einige der Spielobjekteigenschaften, die eingerichtet wurden. Fügen Sie den folgenden unter dem Geld Indikator Definition:
Wenn Sie farming.html in Ihrem Browser neu laden, sollten Sie diese bekommen (vorausgesetzt heruntergeladen Sie die Bilder):
Land Staaten
Das erste, was Sie in einem Bauernhof-Spiel zu tun ist, das Land zu pflügen, so dass es bereit ist, die Samen zu erhalten. Nachdem Sie die Samen pflanzen, wachsen sie, bis sie reif. Wir haben dann insgesamt 4 möglichen Zustände für viel Land (leer, gepflügt, wachsen und reifen). Lassen Sie uns das vertreten durch diese Zustände Zugabe in unserem land.js direkt nach dem „goog.inherits“ Teil-Datei.
Und diese Zeile nach „this.setFill“ (innen farming.Land) den Standardstatus zu definieren:
Jedes Mal, wenn der Spieler auf einem Grundstück Elemente klickt, wollen wir es gepflügt werden (vorausgesetzt, das Land ist „leer“ und der Benutzer hat genug Geld dafür zu bezahlen). Lassen Sie uns einen Ereignis-Listener in der farming.Land Funktion hinzu:
Was dies bedeutet ist, die Ereignisse „mousedown-“ und „Berührungsstart“ auf die Aussagen im Inneren des Hörers befestigen. Sehen Sie, wie leicht LimeJS uns etwas zu schaffen, ermöglicht es, dass man in beiden berühren und nicht-Touch-Geräte von Tag arbeitet.
Wir prüfen dann das Geld des Spielers. Wenn die „Zeigen Sie mir das Geld“ alles gut ist, werden wir das Land pflügen, ändern Sie es Zustand und Bild. Der Cash wird aus dem Spieler Tasche genommen und wir das Geld Status aktualisieren, für die wir die folgend in farming.js, direkt nach der moneyLabel Definition hinzufügen müssen:
Sie sollten nun in der Lage sein Land zu pflügen und Geld ausgeben:
Ok Pflügen Land kann Spaß machen, aber um wirklich als Landwirt, die Sie brauchen Samen zu kaufen und Ihre Sachen zu wachsen. Ermöglicht indem alle Kulturen in unserem Spiel-Objekt zu starten. Fügen Sie die folgende in farming.js, nachdem der Spieler Objektdefinition. Sehen Sie, wie Sie einfach die Parameter ändern können und es zwicken, wie Sie wollen.
Jede Art von Kultur hat dann einen Namen, ein Kosten, eine Einnahme, die in bringt, wenn geerntet, die Zeit, die es bereit (in Sekunden) zu sein braucht, die Zeit, die es, nachdem es zu sterben nimmt, ist reif (in Sekunden), und eine Bilddatei.
Wir werden das Geschäft als eine neue „Szene“ (man denke an die Analogie von Filmszenen) umzusetzen. Fügen Sie die folgende nach dem director.replace Teil (.):
Dadurch wird eine neue Szene für den Shop, verbindet unsere „Shop“ -Taste, um die Eröffnung dieser neuen Szene. Es fügt auch eine Schaltfläche „Schließen“ zum Shop. Sie sollten nun in der Lage sein, zu öffnen und zu schließen und leeren Laden.
Der folgende Code (das Recht geht nach dem, was wir gerade hinzugefügt haben) werden die Pflanzen in unserem Shop anzuzeigen, und erlauben dem Spieler, eine auswählen (das wird als Eigenschaft des Spielers gespeichert werden).
Nun, da wir eine Ernte gepflückt haben, ist es Zeit, es zu pflanzen. Lässt zu land.js gehen Sie zurück und fügen Sie die folgende Anweisung an den Ereignis-Listener, die wir für Pflügen verwenden:
Wir überprüfen, dass das Land gepflügt wurde und der Spieler hat genug Geld. Wenn ja, pflanzen wir unsere Samen, den Zustand des Landes Elementwechsel, die entsprechenden Zeiten zu speichern (in Millisekunden) und die Aktualisierung des Geldes. Sie können Plattierung nun!
Pflanzen Wachstum und Tod
Jede Ernte hat ihre eigene Zeit bis zur Reife und Zeit bis zum Tod. Wir möchten, dass überprüfen und die Bilder und Zustände der Landes Elemente zu ersetzen, wenn diese Zeiten erreicht werden. Wenn die Ernte für Ernte bereit ist, wollen wir es Bild ist, dass die Ernte zu sein. Wenn eine Ernte stirbt, wird das Land leer zurückwerfen.
LimeJS kommt mit einem Scheduler Helfer, die uns für Veranstaltungen jeder X Anzahl von Millisekunden prüfen können. Der folgende Code kümmert sich um das Wachstum und Absterben der Pflanzen, fügen Sie es nach dem Ereignis Zuhörer in land.js.
Sie sind nun in der Lage zu pflanzen. aber man kann noch nicht ernten.
Hinzufügen des Ernte Teil ist sehr einfach :) fügen Sie einfach den Anschluss an die unser Event-Listener in land.js:
Das komplette Spiel
Sie können das komplette Spiel aus dem diesem Link herunterladen.
Was als nächstes
Ich hoffe, Sie haben machen diese einfache Landwirtschaft Spiel genossen. Dinge, die sie erweitern hinzugefügt werden können, weiter sind Fortschritte zu speichern, für die Sie etwas so einfach wie lokale Speicherung verwenden können, und natürlich soziale Integration, so dass Sie Ihre Farm auf Facebook oder Twitter zu teilen.
Ich möchte Sie ermutigen, auf das Lernen HTML5-Spiele-Entwicklung zu halten und mein Spiel dev Kurse zu überprüfen, die für Anfänger konzipiert und werden Ihnen Stunden des Lernens auf eigene Faust speichern.
HTML5 Mobile-Game Development für Anfänger
Ich habe einen umfassenden Online-Kurs vorbereitet, die Sie durch die Erstellung von HTML5 Cross-Plattform-Spielen mit LimeJS Spiel-Entwicklungs-Framework führen werden. Der Kurs ist 100% Video basiert, so dass Sie in Echtzeit sehen können, wie Spiele von Grund auf neu erstellt werden. Jede Lektion wird mit einer eigenen Zip-Datei mit allen Code, so dass Sie ein Spiel mit den Beispielen haben können und sie als Starter für Ihre eigenen Spiele.
Viele zusätzliche Themen werden in diesem Kurs, wie das Hinzufügen von Animationen, Sound, 2D-Physik, mit Kachel-basierte Karten bedeckt und HTML5-Spiel in eine native App verwandeln, so dass Sie Geld verdienen können.
Erstellen Sie ein HTML5-Spiel von Grund auf neu
Dieser Kurs ist über eine Zelda-Stil Spiel Demo machen, die bösen Geister in einem gruseligen Wald schießt. Erstellt in Zusammenarbeit mit Jacob Deichert, ist dieser Kurs ein guter Start in die Leinwand mit zu Browsergames zu machen.
P pjakobs vor 4 Jahren Hallo, vielen Dank für dieses Tutorial. Vergiss es auf meine Frage (die Sie gesehen haben, bevor ich es bearbeitet). Ich nahm mir vor, das Problem selbst. Laufen andere bin / lime.py Update gelöst es für mich. Ich bin immer noch neugierig über die kompilierte Version in Ihren Dateien. Ist das das Spiel zu beschleunigen?
C chuls vor 4 Jahren bin ich nur dieses Tutorial gehen. Dank dafür! Nur eine Frage: Im Land Abschnitt zu schaffen, ist das Beispiel Bild rechts? Wir sollen hier das Brachland sehen, nicht wahr? Ich habe auch bemerkt, dass in Ihrer jrpg eine Reihe von Links Tutorial (den Link, der angeblich ist zum Beispiel des Helden Bild führen), um das Monsters Bild führen. Geschieht etwas auf der Seite, dies zu bewirken?
F frakli vor 4 Jahren Hallo! Dies ist ein großes Tutorial für Anfänger. Jetzt stand ich ein seltsames Problem. Alles funktionierte gut, bis ich die Datei mit dem Namen land.js. machen musste Ich lief den Befehl ‚ist / lime.py update‘, nachdem ich das neue inheriting Objekt gemacht hatte. Wenn ich jetzt in farming.js dieses Land Objekt bezieht, nur das Spiel schwarz geht, verschwindet die Shop-Schicht. Da stimmt etwas nicht, aber ich kann nicht sehen, was passiert. Ich habe alles für Tippfehler. Vielen Dank.
PN Pablo Farias Navarro vor 4 Jahren Hallo Frakli, Gut, dass Sie wie das Tutorial zu hören. Versuchen Sie, die Dateien aus dem Link in dem Tutorial herunterzuladen. Diese sollten gut funktionieren! Wenn Sie einen Fehler im Tutorial finden lassen Sie mich wissen und Ill fix it.
PN Pablo Farias Navarro vor 5 Jahren Dank Lisa sie habe das Problem nun behoben :)
S Seamus vor 5 Jahren konnte ich die Taste in Landlayer setzen Dinge zu testen, dass es jetzt weiter arbeiten sollte, aber dennoch würde gerne wissen, warum die shoplayer nicht angezeigt. keine Eile. nur sagen, ich habe, was ich jetzt fortsetzen müssen.
S Seamus vor 5 Jahren Pablo, ich kopiert den gesamten Code genau und wenn ich auf den Shop klicken bekomme ich einen leeren Bildschirm? Ich las auf Google dies ein Fehler war, bevor, so dass ich die Ebene: shopLayer.setDirty (255) Diese noch nicht funktioniert hat? Irgendwelche Ideen?
PN Pablo Farias Navarro vor 5 Jahren, wenn Sie den Code herunterladen sollte es zumindest in Chrome arbeiten. Prost
S Seamus vor 5 Jahren habe ich heruntergeladen den Code und alles hat funktioniert, danke!
BC Ben Carter vor 5 Jahren Im Beispielcode, ändern Sie diese Zeile: shopLayer.appendChild (shopScene); auf diese: shopScene.appendChild (shopLayer);
S Seamus vor 5 Jahren Hallo! Große Tutorial! Wäre es möglich, in hinzufügen, wie Sie Ihre Farm auf einem Server speichern? Ich studiere node.js / mongodb jetzt und wäre bereit, zu helfen. Seamus
L Luki R 5 Jahren Hallo :) Ich bin ein wenig mit diesem Teil des Codes verwirrt, könnten Sie mir eine kleine Erklärung geben Sie bitte. Pick Ernte (function (item //, i) < goog.events.listen(item,['mousedown', 'touchstart'], function(e) < playerObj.currentCrop = i; director.replaceScene(gameScene); >); >) (Punkt, i); > Grüße, Luki R Rompis