Comment minimiser votre jeu HTML5 pour le concours Js13kGames

Ce que vous allez créer

Comme vous le savez peut-être, la troisième édition du concours js13kGames est arrivée: le départ officiel est prévu pour le 13 août à 13h00. Js13kGames est un concours pour les développeurs de jeux HTML5 où la partie amusante et stimulante de la composition maintient votre jeu entier sous 13 Ko..

Cet article devrait constituer un excellent point de départ si vous souhaitez apprendre à générer les actifs, ainsi qu’à réduire et à comprimer le code, afin de répondre aux exigences de la concurrence. Je vous fournirai également des outils qui peuvent vous aider dans vos projets quotidiens si vous avez besoin de ressources limitées..

En quoi consiste exactement le concours js13kGames?

Le concours js13kGames est destiné aux développeurs de jeux HTML5 et aux programmeurs JavaScript qui souhaitent mettre leurs compétences à l'épreuve et se mesurer aux autres développeurs, respecter les règles, respecter les délais et gagner des prix. Le concours se déroule du 13 août au 13 septembre. Vous avez le mois entier pour coder et soumettre votre candidature. Aucune bibliothèque ou ressource externe telle que Google Fonts n'est autorisée. tout ce que vous voulez utiliser dans votre jeu doit tenir dans 13 kilo-octets d'un paquet ZIP. La compétition est gratuite pour tous, mais le code source doit être hébergé sur GitHub pour que les autres puissent en tirer des leçons à l'avenir.. 

La limite de 13 kilo-octets est très restrictive, mais les limitations engendrent souvent de la créativité: vous devez réfléchir attentivement à la manière de mettre en œuvre vos idées, car chaque octet compte vraiment..

Pourquoi prendre part?

Le but principal de la compo est amusant. La date limite aide à garder le plaisir, parce que vous devez mettre fin au projet à un moment donné et vous ne pouvez pas continuer à l'asservir pour toujours. 

Participer au concours améliore vos compétences, vous aide à gérer votre temps consacré au projet et vous offre la possibilité de coopérer avec la communauté. De plus, il est possible de gagner beaucoup de prix intéressants, de devenir bien connus et éventuellement de gagner beaucoup d'argent en tant que développeur de jeux. De quoi d'autres avez-vous besoin?

Trucs et astuces

Passons en revue les trucs et astuces spécifiques que vous pouvez utiliser pour réduire le code source de votre jeu et tous les actifs utilisés, de la minification JavaScript à la réduction de la taille des images, au niveau procédural et à la génération audio..

Conseils généraux

Vous avez un mois entier pour coder votre jeu, vous n'avez donc pas à passer de nuits blanches pendant le week-end à boire du café et des boissons énergisantes pour rivaliser avec les autres. Vous pouvez travailler à votre rythme, quand vous en avez le temps et quand vous en avez envie.

En raison des restrictions strictes sur la taille du package final, il est presque impossible d'utiliser un cadre quelconque. Bien sûr, si vous pouvez préparer un petit ensemble de fonctions d’aide qui cadreront avec la limite de 13 kilo-octets, vous êtes le bienvenu.. 

Il en va de même pour les images - les captures d'écran des jeux sont souvent plus grandes que les jeux eux-mêmes, vous devez donc être intelligent. De toute façon, vous allez probablement tout générer vous-même ou utiliser de très petits actifs compressés; c'est la meilleure façon d'adapter tout le jeu dans la limite de taille.

Minification du code JavaScript

Le code source constitue le noyau principal de votre jeu JavaScript. Vous pouvez peut-être générer absolument tout, sans utiliser d'autres ressources telles que des images ou des sons. Il est donc primordial d'optimiser ce code.. 

La chose la plus simple à faire est de réduire le code au minimum, ce qui signifie qu'il sera débarrassé des espaces (espaces de tabulation, espaces, nouvelles lignes, etc.), sans modification du code..

Vous pouvez aller plus loin en utilisant d'autres outils qui modifieront votre code source d'origine afin de compresser sa taille autant que possible, en utilisant des noms de variable plus courts et d'autres astuces similaires. Comme un effet secondaire, ces outils vont également cacher le code source et le rendre illisible - appelé obscurcissement. L’une des principales règles de la concurrence est que vous devez de toute façon disposer d’une version lisible de votre soumission sur GitHub. Il est donc parfaitement correct de coder chaque octet en rendant illisible le code contenu dans le fichier compressé..

Des outils tels que Google Closure Compiler, YUI Compressor ou UglifyJS, ainsi que des services en ligne tels que Compressor Rater, JSMini ou JSObfuscate peuvent vous aider à compresser votre code autant que possible. Utilisez les à votre avantage.

Compression d'image

Il n’y aura pas beaucoup de fichiers d’image dans votre jeu si vous voulez l’ajuster dans 13 kilo-octets, mais si vous voulez utiliser une image, vous devez la compresser autant que possible. Il existe des outils en ligne tels que TinyPNG et Optimizilla, des applications installables telles que ImageOptim, des outils de ligne de commande et des scripts de génération pour le faire, afin que vous puissiez trouver quelque chose à adapter à votre flux de travail. 

Vous pouvez également coder votre jeu en basse résolution avec de petites images, puis tout redimensionner, ou jeter toutes les images et tout générer à partir de zéro sur la toile..

Génération de niveau procédural

Étant donné le peu d'espace disponible, il serait sage de penser à randomiser les niveaux de votre jeu. Le meilleur moyen de conserver la valeur de relecture élevée de votre jeu est de générer vos niveaux de manière procédurale, de sorte que, au lieu d'avoir un ou deux niveaux fixes, vous puissiez offrir une expérience différente à chaque lecture du jeu..

Les meilleurs exemples de cette catégorie sont les roguelikes qui utilisent des labyrinthes et des donjons pour leurs niveaux. Vous pouvez générer un vaste monde à partir de quelques éléments seulement, et il peut être différent à chaque démarrage du jeu. Grâce à cette approche, vos joueurs ne s'ennuieront pas trop vite.

Génération audio

Ajouter de l'audio à votre jeu améliore l'expérience globale, mais avec des chansons pesant généralement 5 Mo ou plus, comment pouvez-vous en insérer dans votre entrée js13k? Jsfxr à la rescousse!

Au lieu de réduire un MP3, vous pouvez générer votre propre musique et vos effets sonores. Jsfxr est un portage JavaScript de la bibliothèque sfxr. Il a été largement utilisé par les participants au concours de l'année dernière, ce qui signifie qu'il est testé et donne d'excellents résultats..

Système de construction

Outre les outils déjà mentionnés, vous pouvez vous aider en automatisant certaines de vos tâches. construire des systèmes tels que Grunt ou Gulp peut faciliter la préparation de tous vos actifs. 

Si vous êtes un fan de Gulp, vous avez le choix entre plusieurs tâches de construction: Jack Rugile suggère un combo Gulp de gulp-uglify + gulp-htmlmin + gulp-zip + gulp-filesize tandis que Csaba Csecskedi ajoute gulp-imagemin à cette collection. Vous n'êtes pas obligé de l'utiliser si vous n'êtes pas à l'aise avec Gulp ou si vous voulez simplement travailler à l'ancienne, mais cet ensemble peut considérablement améliorer votre flux de travail global pour votre entrée js13kGames..

Code de la chaudière

La seule exigence structurelle à part la taille limite est que vous devez avoir le index.html fichier dans le répertoire principal du paquet - tout le reste est optionnel. Vous pouvez structurer votre code comme bon vous semble, inclure des dossiers pour JavaScript, CSS et des fichiers image séparément, ou tout simplement mettre tout dans le fichier HTML et oublier tout le reste. Vous pouvez tout faire à la main, utiliser browserify, améliorer votre CSS avec LESS ou SASS, ou même lint votre code avec ESLint. (C'est ce que Florent Cailhol a préparé dans son référentiel expérimental js13k sur GitHub.) Encore une fois: tout cela pourrait vous aider, mais rien de tout cela n'est nécessaire..

Choisissez le bon type de jeu

Cela peut sembler évident, mais n'oubliez pas de choisir avec soin un type de jeu adapté à une taille de 13 kilo-octets, car certains jeux sont plus difficiles à créer (et à conserver) que d'autres. Je ne dis pas que vous ne pouvez pas créer un jeu de tir à la première personne en 3D, une stratégie en temps réel, un simulateur de ville, un jeu de course en 3D, un gestionnaire de feux de circulation, ou même un jeu de blocs jaunes nus comme certains développeurs fous l'ont fait ces dernières années. la majorité des entrées concernent des jeux simples avec une mécanique de base, des images générées et parfois un son simple.

Rappelez-vous que terminer quelque chose est préférable à un projet énorme et inachevé que les gens ne verront jamais. Suivez l’initiative Un match par mois, respectez les délais et essayez de terminer votre participation à temps. Gardez-le petit dans la portée aussi bien que la taille; Si vous êtes satisfait du prototype en fonctionnement et que vous disposez d'un espace libre, vous pourrez toujours ajouter de nouvelles fonctionnalités au jeu ultérieurement. Polissez votre projet autant que possible et vous pourrez gagner le concours en construisant des jeux comme SpacePi ou Radius Raid.

Apprendre des autres

Voici les conseils et techniques de base qui peuvent vous aider à coder votre jeu pour la compétition js13kGames, mais vous n’avez pas à les utiliser. Il existe de nombreux outils que vous pouvez utiliser dans votre jeu pour le maintenir dans la limite de taille. cela dépend de vos préférences. Cependant, si vous n’avez aucune expérience, la meilleure chose à faire est d’apprendre des autres.

Vous pouvez vérifier le code source des entrées des années précédentes, jouer aux jeux et voir ce qui est possible dans la limite, parcourir les billets de blog expliquant les expériences des gens, lire leur code source et en tirer des leçons. Posez des questions via les médias sociaux, discutez de vos idées et de vos problèmes avec d'autres. C'est la beauté d'une compétition-vous n'êtes pas seul; vous pouvez coopérer avec d'autres, former des équipes et améliorer vos compétences en un rien de temps.

Résumé

Tous les outils et services énumérés dans cet article devraient vous aider à vous préparer au concours js13kGames. Il est important de ne pas attirer votre attention uniquement sur les outils. vous devriez également regarder ce que font les autres, apprendre de leurs expériences et faire partie de la communauté. 

Si vous avez différentes façons de vous préparer au concours, partagez-les dans les commentaires! Profitons tous, apprenons et aidons-nous. Après tout, la compétition a commencé à être amusante et divertissante, avec un peu d’apprentissage en cours de route..

Ressources

Découvrez ces ressources supplémentaires pour le concours:

  • 13 étapes simples pour créer des diapositives composites à partir de onGameStart 2012
  • Arcade Audio pour js13kGames par Jack Rugile
  • Triskaidekaphobia, un jeu créé pour promouvoir js13kGames
  • Règles et exigences officielles
  • Liste des juges et des prix de cette année
  • Entrées de 2012 et 2013
  • Bulletin hebdomadaire Gamedev.js avec mises à jour de la compo
  • Hashtags Twitter: # js13k ou # js13kGames
  • Autres initiatives à noter: js1k, Ludum Dare, 1GAM
  • Trouvez des jams et des compétitions: compohub.net, indiegamejams.com