Créer une agriculture HTML5 jeu mobile - Tutorial
Ne pas oublier de vérifier mon cours en ligne HTML5 mobile Game Development pour les débutants. Obtenez 90% OFF !. Seulement jusqu'à la fin du mois.
Au cours des dernières années, HTML5 est venu comme une excellente alternative pour développer l'application multi-plateforme en utilisant une seule base de code. Une application HTML5 peut fonctionner sur iOS, Android, Windows Mobile, Blackberry. et bien sûr bon vieux bureau.
Dans ce tutoriel, vous apprendrez les notions de base sur la façon de créer un jeu simple agricole qui émule les grands succès que vous avez joué sur Facebook. Nous allons utiliser un cadre de jeu HTML5 open source dev appelé LimeJS.
Tutoriel exigences
Jeux agriculture?
jeux agricoles sont un grand phénomène qui ne connaît pas de limites en ce qui concerne les nationalités et générations. Fortunes ont été faites autour d'eux et les gens ont créé des variations du concept original. Ce n'est pas étrange de trouver médiévale, tropical, futuriste, même thème zombie jeux agricoles dans les différents magasins d'applications là-bas.
Quelle est la raison de ce succès? ne nous manque labourer la terre avec les mains nues sur dans cette civilisation urbaine post-moderne? Est-ce lié aux gens fermes urbaines se développent maintenant sur leurs balcons? Eh bien, qui sait.
Je ne vais pas vous dire quelles sont les raisons de leur succès (pas que je les connais de toute façon), mais je suis, d'autre part, va vous apprendre comment faire un simple jeu d'agriculture en utilisant HTML5 et un cadre JS open source appelé LimeJS.
Vous pouvez télécharger LimeJS de leur page d'accueil. Les instructions d'installation et une bonne introduction se trouvent dans le Guide de démarrage.
Si vous voulez étape par étape, des instructions sur vidéo sur la façon d'installer ce cadre sous Mac, Windows ou Ubuntu et obtenir une bonne tenue des bases se sentent libres de vérifier mon cours en ligne, ce qui vous enseigne toutes les bases du développement du jeu à l'aide LimeJS et d'autres outils gratuits.
Les éléments de jeu
Notre jeu aura les éléments suivants:
- Terre
- Labourer la terre
- Une boutique pour obtenir des cultures
- cultures de plantation
- Les plantes qui poussent
- Récolte!
Dans ce tutoriel, nous ne préciserons pas en fait social ou omniprésent, mais il pourrait être à l'horizon pour les futurs tutoriels :)
Univers du jeu
Il est temps de cesser de parler et de plonger nos mains dans le code. Oh oui. En supposant que vous avez téléchargé et installé LimeJS (vous devriez être en mesure d'exécuter les exemples qui vont avec), nous allons créer un nouveau projet:
Cela va créer un dossier appelé « agriculture » à l'intérieur du dossier dans lequel LimeJS a été installé. Si vous avez installé LimeJS correctement, vous devriez être en mesure de trouver un fichier appelé « farming.html ». Ouvrez le fichier et ajoutez ce qui suit en dessous de la balise de script:
Tout cela fait est la mise en l'arrière-plan noir et l'application d'un petit hack pour un bug connu sur certains appareils. Maintenant farming.js ouvert et remplacer son contenu avec le code suivant:
C'est juste un passe-partout de base (si vous ouvrez farming.html vous devriez voir un écran noir). Tout d'abord, nous fournissons l'espace de noms « agriculture » qui est tenu de le faire lorsque vous travaillez dans LimeJS. Nous sommes alors inclurons modules cadres pertinents. Notre farming.start () est la première chose qui est exécuté lorsque le chargement du jeu (voir comment cela est appelé à farming.html).
Nous pouvons définir un objet appelé gameObj (ou comme vous voulez) pour stocker des variables de niveau de jeu. Nous passerons cet objet autour de nos éléments de jeu pour que ces propriétés sont accessibles de partout.
Dans les blocs suivants nous defininig notre objet « directeur », qui fait un rôle similaire à celui directiors de la vie réelle: définir les scènes jouent, etc. Notre jeu aura deux couches (qui sont des zones où le contenu sera placé). landLayer accueillera la terre et les cultures. controlsLayer aura la zone d'état et les options pour l'utilisateur, qui dans ce cas est le bouton pour entrer dans la boutique.
zone Contrôles
Incluons un autre fichier qui fournit un bouton rapide:
Nous pouvons ajouter d'autres propriétés à notre gameObj qui contiendra certaines dimensions. Il est recommandé de le faire de cette façon au lieu de mettre des « nombres magiques » dans le code. Certaines des propriétés que je ajoute maintenant n'a de sens plus tard dans le tutoriel, alors ne vous inquiétez pas si vous ne les voyez pas dans le code tout de suite:
En plus de notre objet de jeu, nous voulons aussi créer un objet pour le joueur (juste un choix de conception). L'objet va stocker l'argent et la culture actuellement sélectionnée (ce sera logique plus tard). Ajouter ce qui suit après la création d'objets de jeu:
Maintenant, ajoutez le code suivant ci-dessous "gameScene.appendChild (controlsLayer);":
Ce que nous venons de faire est d'ajouter un conteneur gris sur le fond, un bouton qui dit « Shop » et une étiquette de texte montrant l'argent actuel du joueur. Vous devriez voir ce qui suit:
Carreaux de jeu
Les tuiles utilisées dans ce jeu ont été adaptés de l'oeuvre de Daneeklu qui a été publié sous la licence CC-BY-SA, ce qui nous permet de l'utiliser à cette fin.
Vous pouvez télécharger tous les fichiers de jeu de ce lien.
Retour au travail. Pour représenter une unité de terrain, nous allons créer un nouveau fichier appelé « land.js » et lui donne le code suivant:
Ce que nous faisons ici est de créer un nouveau type d'objet selon les spécifications de LimeJS. Cet objet « hérite » de l'objet lime.Sprite, de sorte qu'il se comporte comme un sprite de toutes les façons. Voyez comment nous fournissons l'espace de noms comme nous l'avons fait avant. Nous passons le jeu et les objets du joueur dans le constructeur, et nous installons des propriétés de base afin que nous ne devons pas les saisir à chaque fois que nous créons un objet farming.Land.
Chaque fois que vous ajoutez un nouveau fichier au projet vous devez exécuter cette commande pour le cadre de garder tout enregistré:
Dans farming.js ajouter ce qui suit à la section « de besoin »:
Maintenant, nous voulons peupler la couche de terre que nous avons créé précédemment avec nos terrains. Nous allons le faire avec une itération et certaines des propriétés de l'objet de jeu qui ont été mis en place. Ajoutez ce qui suit dans la définition de l'indicateur de l'argent:
Si vous rajoutez farming.html sur votre navigateur, vous devriez obtenir ce (à condition que vous avez téléchargé les images):
Etats fonciers
La première chose que vous faites dans un jeu d'élevage est de labourer la terre pour qu'il soit prêt à recevoir les graines. Une fois que vous plantez les graines, ils poussent jusqu'à maturité. Nous avons donc un total de 4 états possibles pour un lot de terrain (vide, labouré, croissance et maturité). Représentons qu'en ajoutant ces états dans notre fichier land.js juste après la partie « goog.inherits ».
Et cette ligne après « this.setFill » (à l'intérieur farming.Land) pour définir l'état par défaut:
Chaque fois que le joueur clique sur un élément de la terre, nous voulons qu'il soit labouré (à condition que la terre est « vide » et l'utilisateur a assez d'argent pour payer). Ajoutons un écouteur d'événement dans la fonction farming.Land:
Que cela ne s'attache les événements « mousedown » et « touchstart » aux instructions contenues dans l'auditeur. Voyez comment facilement LimeJS nous permet de créer quelque chose qui fonctionne dans les deux appareils tactiles et non tactiles dès le premier jour.
Nous vérifions ensuite l'argent du joueur. Si le « montrez-moi l'argent » est tout bon, nous allons labourer la terre, changer son état et de l'image. L'argent est pris dans les poches du joueur et nous mettre à jour le statut de l'argent, pour lequel nous devons ajouter ce qui suit dans farming.js, juste après la définition moneyLabel:
Vous devriez maintenant être en mesure de labourer la terre et dépenser de l'argent:
Ok le labourage des terres peut être amusant, mais pour vraiment comme un agriculteur dont vous avez besoin d'acheter des semences et développer vos affaires. Commençons par mettre toutes les cultures dans notre objet de jeu. Ajouter ce qui suit dans farming.js après la définition de l'objet lecteur. Voyez comment vous pouvez facilement changer les paramètres et modifier comme vous le voulez.
Chaque type de culture a alors un nom, un coût, un chiffre d'affaires qui apporte lors de la récolte, le temps qu'il faut pour être prêt (en secondes), le temps qu'il faut pour mourir après il est mûr (en seconde), et un fichier image.
Nous allons mettre en œuvre la boutique comme une nouvelle « scène » (pensez à l'analogie des scènes de films). Ajouter ce qui suit après la director.replace partie (.):
Cela crée une nouvelle scène pour la boutique, liens notre bouton « Shop » à l'ouverture de cette nouvelle scène. Il ajoute également un bouton « Fermer » à la boutique. Vous devriez maintenant être en mesure d'ouvrir et de fermer boutique et vide.
Le code suivant (qui va juste après ce que nous venons d'ajouter) affiche les cultures dans notre boutique, et permettre au joueur de choisir un (qui sera stocké en tant que propriété du joueur).
Maintenant que nous avons choisi une culture, il est temps de planter. Revenons à land.js et ajoutez l'instruction suivante à l'écouteur d'événement que nous utilisons pour les labours:
Nous vérifions que la terre a été labourée et le joueur a assez d'argent. Si oui, nous plantons nos graines, changer l'état de l'élément terrestre, le stockage des moments pertinents (en millisecondes) et mettre à jour l'argent. Vous pouvez commencer à placage maintenant!
Plantes croissance et la mort
Chaque culture a son propre temps jusqu'à l'échéance et le temps à la mort. Nous voulons vérifier que et remplacer les images et les états des éléments terrestres lorsque ces temps sont atteints. Lorsque la récolte est prête pour la récolte, nous voulons que c'est l'image d'être celle de la culture. Quand une culture meurt, la terre est remis à vide.
LimeJS est livré avec un assistant de planification qui nous permet de vérifier les événements chaque X nombre de millisecondes. Le code suivant se chargera de la croissance et la mort des plantes, ajouter après l'écouteur d'événement dans land.js.
Vous êtes maintenant en mesure de planter. mais vous ne pouvez pas encore récolter.
Ajout de la partie de la récolte est très facile :) il suffit d'ajouter ce qui suit le notre écouteur d'événement dans land.js:
Le jeu complet
Vous pouvez télécharger le jeu complet du ce lien.
Qu'est-ce que » next
J'espère que vous avez apprécié faire ce simple jeu de l'agriculture. Les choses qui peuvent être ajoutés pour étendre davantage les progrès sont l'épargne, pour lesquels vous pouvez utiliser quelque chose d'aussi simple que le stockage local, et bien sûr l'intégration sociale, afin que vous puissiez partager votre ferme sur Facebook ou Twitter.
Je voudrais vous encourager à continuer à apprendre le développement de jeux HTML5 et de vérifier mon jeu cours de dev, qui sont conçus pour les débutants et vous épargnera des heures d'apprentissage sur votre propre.
HTML5 jeu mobile de développement pour les débutants
J'ai préparé un cours en ligne complet qui vous guidera à travers la création de jeux HTML5 en utilisant CrossPlatform cadre de développement de jeux LimeJS. Le cours est une vidéo 100% sur la base de sorte que vous pouvez voir en temps réel comment les jeux sont créés à partir de zéro. Chaque leçon est livré avec son propre fichier zip avec tout le code afin que vous puissiez avoir un jeu avec les exemples et les ont utilisés comme entrées pour vos propres jeux.
Beaucoup de sujets supplémentaires sont couverts dans ce cours, comme l'ajout d'animations, du son, de la physique en 2D, en utilisant des cartes à base de tuiles et de transformer votre jeu HTML5 dans une application native afin que vous puissiez gagner de l'argent avec elle.
Créer un jeu HTML5 à partir de zéro
Ce cours est de faire une démonstration de jeu de style Zelda qui tire les mauvais esprits dans une forêt glauque. Créée en collaboration avec Jacob Deichert, ce cours est un bon début en utilisant le canevas pour faire des jeux de navigateur.
P pjakobs il y a 4 ans Salut, Merci pour ce tutoriel. Passons à ma question (que vous avez pu voir avant édita). Je résolus moi-même le problème. Exécution d'un autre bin / lime.py mise à jour résout pour moi. Je suis toujours curieux de savoir la version compilée dans vos fichiers. Est-ce que pour accélérer le jeu?
C chuls il y a 4 ans, je vais juste ce tutoriel. Merci pour ça! Juste une question: Dans la section de création de la terre, est le droit d'image par exemple? Nous sommes censés voir la terre nue ici, non? J'ai aussi remarqué que dans votre tutoriel JRPG un certain nombre de liens (le lien qui est censé conduire à l'image de héros par exemple) conduire à l'image de monstre. Est-ce quelque chose se passe sur la page pour la cause?
F frakli il y a 4 ans Salut! C'est un excellent tutoriel pour les débutants. Maintenant, je faisais face à un problème étrange. Tout fonctionnait bien jusqu'à ce que je devais faire le fichier appelé land.js. J'ai couru la commande « bin / mise à jour lime.py » après avoir fait le nouvel objet héritant. Si je me réfère maintenant à cet objet Land en farming.js, le jeu va juste noir, la couche boutique disparaît. Quelque chose ne va pas, mais je ne vois pas quoi. J'ai vérifié tout pour les fautes de frappe. Merci.
PN Pablo Farias Navarro il y a 4 ans Salut Frakli, Je suis heureux de vous entendre comme le tutoriel. Essayez de télécharger les fichiers à partir du lien dans le tutoriel. Celles-ci devraient fonctionner correctement! Si vous trouvez une erreur dans le tutoriel laissez-moi savoir et fixer Ill il.
PN Pablo Farias Navarro il y a 5 ans Merci Lisa ils ont résolu le problème maintenant :)
S Seamus il y a 5 ans j'ai pu mettre le bouton Landlayer pour tester les choses, qui devrait continuer travailler pour l'instant, mais toujours aimerait savoir pourquoi le shoplayer ne semble pas. pas de précipitation. juste que j'ai ce que je dois maintenant continuer.
S Seamus il y a 5 ans Pablo, j'ai copié tout le code exactement et quand je clique sur le bouton boutique je reçois un écran vide? J'ai lu sur Google c'était un bug avant, donc je mets la couche: shopLayer.setDirty (255) Ce qui ne fonctionne toujours pas? Des idées?
PN Pablo Farias Navarro il y a 5 ans si vous téléchargez le code il devrait fonctionner au moins dans Chrome. À votre santé
S Seamus il y a 5 ans j'ai téléchargé le code et tout a fonctionné, merci!
BC Ben Carter il y a 5 ans Dans le code exemple, changez cette ligne: shopLayer.appendChild (shopScene); à ceci: shopScene.appendChild (shopLayer);
S Seamus il y a 5 ans Bonjour! Bon tutoriel! Serait-il possible d'ajouter dans la façon d'enregistrer votre ferme sur un serveur? J'étudie Node.js / MongoDB en ce moment et je serais prêt à aider. Seamus
L Luki R il y a 5 ans Bonjour :) Je suis un peu confus avec cette partie du code, pourriez-vous me donner une petite explication s'il vous plaît. // ramasser la culture (fonction (point, i) < goog.events.listen(item,['mousedown', 'touchstart'], function(e) < playerObj.currentCrop = i; director.replaceScene(gameScene); >); >) (Point, i); > Regards, Luki R Rompis