Tutoriel Comment construire HTML5 jeu multijoueur Fondation, PubNub
Ceci est un tutoriel de base de jeu multi-joueurs HTML5. Cette page est la base pour créer vos propres monetizable jeux HTML5 et des applications avec le streaming de données en temps réel. Vous apprendrez à créer un jeu et gagner de l'argent des joueurs de jeux Internet. Utilisez PubNub pour engager vos joueurs avec HTML5 jeux multijoueurs et flash. Le jeu PubNub ci-dessous est un jeu rempli démontrant la puissance des jeux HTML5 PubNub et la monétisation.
Découvrez le nouveau Corona multijoueur en réseau SDK pour construire des jeux en temps réel sur les téléphones mobiles iPhone.
Si vous êtes ici pour apprendre comment faire une base de jeu multijoueur, continuer à lire! Les informations ci-dessous explique comment créer vos propres jeux multijoueurs HTML5 et gagner de l'argent des joueurs.
La base du jeu multijoueur HTML5 est le mieux joué sur Google Chrome, 4 FireFox, Safari et Safari Mobile. Autre navigateur fonctionnera, mais les animations CSS3 ne rendront pas. Une simple interface utilisateur sera affiché si vous n'êtes pas en cours d'exécution d'un navigateur HTML5.
Voici une capture d'écran du produit fini:
Crédits PubNub message
Les crédits de message sont gagnés pendant que vous jouez le jeu multijoueur HTML5. Ce sont des crédits Freebee que vous payez normalement en permettant la facturation sur votre compte. PubNub est un service hébergé Cloud pour HTML5 données Streaming, et bien plus encore. Vous pouvez utiliser votre message Crédits du service hébergé nuage PubNub. Crédits de messages sont utilisés pour diffuser des données à vos joueurs.
Le jeu multijoueur HTML5 est lié ci-dessus à votre compte PubNub. Lorsque vous gagnez des crédits dans le jeu, vous incrémentez le solde de votre compte! Utilisez vos crédits vers le service hébergé nuage PubNub pour les données en temps réel en continu alimentant les jeux multi-joueurs que vous construisez. Pour vous assurer que votre compte est facturables et reste actif au-delà du quota libre et au-delà des crédits que vous avez gagné en jouant le jeu HTML5, vous devez activer la facturation sur votre compte.
Alors, comment ça marche? Lorsqu'un joueur clique sur le bouton de lecture, un message est envoyé au PubNub Cloud. Ce message est destiné à être diffusé à tout le monde joue le jeu multijoueur HTML5. PubNub fournit ce lien vital communautaire. En savoir plus sur le service hébergé nuage PubNub pour en temps réel des données en streaming et de diffusion ici.
Les paiements d'affichage Ticker
Améliorer le sens de la communauté en affichant la contribution totale en dollars fournie par du joueur. Ceci est démontré dans le jeu multijoueur HTML5 ci-dessus où le montant en dollars est en vert. Offrant ces informations offre un divertissement et engage les joueurs sur un niveau d'analyse. Vous pouvez penser à ces chiffres comme Analytics en temps réel.
PubNub fournit des données de diffusion en direct qui permet aux applications telles que Google Analytics en temps réel. La première étape dans la création d'un Live Data Stream est de configurer un canal PUBNUB.subscribe () sur le téléphone mobile ou un navigateur Web.
Le code ci-dessus montre la simplicité de l'API de données en continu PubNub Cloud. Appel PUBNUB.subscribe () est la première étape de deux. La fonction S'abonner attendra et un message pour la liste à envoyer Accros du réseau. Un message est envoyé en appelant la fonction de publication. L'étape suivante appelle à envoyer des messages aux abonnés PUBNUB.publish ().
Si vous avez du mal à commencer, visitez les forums PubNub au Centre d'émission GitHub. Recherche pour vous répondre d'abord, si vous ne trouvez pas soumettre une nouvelle question.
Modèle de paiement
Animations CSS3 avec HTML5
Si votre navigateur ne supporte pas les animations CSS3, le div basculera sans transition. Toutefois, si vous utilisez Chrome, Safari, Safari Mobile, FireFox 4 ou Opera, vous verrez une transition en douceur des couleurs. Vous devez faire ce qui suit pour obtenir CSS3 Transitions:
Animations indique que cela se produise se passe dans le jeu et offre un moment de temps pour le joueur de réagir. mouvements animés lisses sont détectables et intrigant à l'œil humain. Utilisez des animations CSS3 pour engager vos utilisateurs de jouer à vos jeux et à l'aide de votre application. Animations améliorent l'expérience de chaque interface utilisateur, y compris les jeux Analytics, messagerie et plus encore.
Demande JSONP Jeu Fondation
JSONP fonctionne partout. A partir de ce point, utilisez uniquement JSONP. Laissez tomber AJAX XHR (XML de requête HTTP). Il n'y a aucune limite à JSONP et est donc recommandé que votre choix de transport de données. JSONP est simple à mettre en œuvre et son poids léger avec de nombreux avantages invisibles qui rendent le développement d'applications grand. Le code suivant est la fonction d'émettre une demande JSONP:
Le jeu multijoueur PubNub HTML5 utilise JSONP pour appeler Google App Engine à l'activité des joueurs de communication. JSONP est compatible avec tous les serveurs d'applications, y compris Apache, Nginx, Tomcat et plus encore. Dans le jeu multijoueur HTML5, la fonction de demande JSONP est appelée lorsque vous cliquez sur le bouton « Play! ».
Le code ci-dessus est appelé lorsque vous cliquez sur le bouton « Play! ». Lorsque cela se produit la fonction demande () émet une demande à l'adresse suivante:
Cela peut être fait avec chaque serveur Web. Python est utilisé ici pour la simplicité. Des détails importants pour le serveur sont:
C'est tout! Vous avez maintenant la recette pour créer des demandes JSONP.
Streaming chat Keystroke
Dépasser les attentes de vos joueurs en leur offrant une expérience PubNub instantanée Keystroke Chat. livrer rapidement l'expérience à vos joueurs fournissant « Gratification instantanée ». Depuis le bouton « Play! » A une minuterie qui lui est associée, vous devez garder vos joueurs actifs en offrant une interface de chat communautaire.
PubNub rend les données de streaming facile et instantanée. crochets en streaming sur le chat Keystroke Keydown événement. Lorsque vous appuyez sur une touche de votre clavier, un événement est déclenché. Un crochet est placé dans cet événement et combinaison de touches utilisé pour publier un message du texte tapé. Pour éviter une surcharge de données sur le flux client, vous devez envelopper l'événement dans une séquence de touches de rappel différé. Cela offre une meilleure expérience de la facilité d'utilisation pour les utilisateurs finaux que l'interface utilisateur est redessinée avec verrouillage. Le code suivant fournit la base pour la création d'un flux de données basées sur des événements clavier (et événements du clavier virtuel sur les téléphones mobiles / tablettes).
Pour éviter le blocage de l'interface utilisateur, vous devez noter combinaison de touches limite publie à 3 ou 4 par seconde. Sinon, l'interface se bloque provoquant des expériences désagréables de frappe. Aussi nous vous recommandons de noter limiter la distribution des messages pour éviter la fuite rapide du crédit PubNub message.
Implémentation de la sécurité
La sécurité des applications est disponible en plusieurs couches: Logic Client, Serveur logique, Transport encodage, cryptage SSL, message Niveaux de signature et d'accès. Le HTML5 multijoueur jeu utilise Logic Client et serveur pour fournir une couche de sécurité autour du suivi des données pour les crédits et les jetons. Par exemple, vous devez vous connecter avec votre compte Google pour envoyer des demandes authentifiées; comme le bouton « Play! ». Ces demandes concernent des interactions liées aux jetons et monnaie de crédit.
D'autres couches de sécurité sont disponibles avec le service hébergé nuage PubNub. Le cryptage SSL est une norme de l'industrie pour garder le secret des messages. En raison du coût élevé du processeur, des messages chiffrés sont plus chers, et totalement facultatif. PubNub compte SSL messages cryptés en double. En savoir plus sur PubNub prix ici.
Signature du message est un processus d'inclure une valeur de hachage avec le message publié. La valeur est calculée par hashed les caractères de somme de la chaîne de demande avec l'ajout de Secrète clé de votre compte. Vous pouvez trouver votre clé secrète ici. Signature du message fournit une assurance supplémentaire confirmant l'origine du message authentique.
En cachant la clé de publier, vous empêchez tout le monde d'envoyer des messages, sauf vous. Cela signifie que la fonction PUBNUB.publish () ne fonctionnera plus. Maintenant, vous devez utiliser l'une des API de serveur situés ici pour envoyer vos messages en toute sécurité.
monétisation
Il y a des consommateurs qui soutiendront gracieux vos applications et jeux thru achats. Cependant, vous devez leur offrir un moyen de vous donner de l'argent! Vous devez configurer une interface qui accepte plusieurs options de paiement. Cela a été traditionnellement beaucoup de temps à installer. Plus maintenant! Utilisez PlaySpan ou Gamer Live pour configurer rapidement votre passerelle de paiement. Offre toutes les options de paiement pour permettre aux joueurs de vous donner de l'argent. Vous devez fournir un moyen pour vos joueurs de soumettre des paiements.
Compatibilité HTML5 Jeu
Cette page est totalement compatible avec tous les navigateurs web, téléphone mobile et tablette. iPhone, iPad, Android, Samsung Galaxy, Android, FireFox, Google Chrome, Internet Explorer, Safari, Safari Mobile et plus encore!
Nous. Les développeurs
Nous aimons les développeurs. Voici les ressources pour vous, le développeur, pour vous permettre de construire des jeux et applications multijoueurs HTML5 étonnantes:
Commencer
Inscrivez-vous gratuitement et utiliser PubNub au pouvoir des jeux multijoueurs