Partage
  • Partager sur Facebook
  • Partager sur Twitter

[javascript/canvas] framework de jeu

17 août 2016 à 23:06:56

Ouaip, c'est correct :) , mais vu que je souhaite que mon moteur marche sur téléphone (du dernier cri à l'entrée de gamme), je préfère faire gaffe aux  problèmes de performance ^^

P-S: tu filme avec quoi pour faire des gifs ?

-
Edité par jerkoco 17 août 2016 à 23:08:58

  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
17 août 2016 à 23:18:35

jerkoco a écrit:

Ouaip, c'est correct :) , mais vu que je souhaite que mon moteur marche sur téléphone (du dernier cri à l'entrée de gamme), je préfère faire gaffe aux  problèmes de performance ^^

P-S: tu filme avec quoi pour faire des gifs ?

-
Edité par jerkoco il y a 9 minutes


Camstudio :) super simple a utiliser
  • Partager sur Facebook
  • Partager sur Twitter
21 août 2016 à 18:48:10

@ Gtibo : Très chouette ton projet ! :)

Sinon, j'ai aussi vu tes dessins sur Tumblr, tu as des anims très sympas, en particulier les animaux. Dis donc, tu sais tout faire : code et graphisme ! J'essaie moi aussi de combiner les deux mais je ne crois pas être aussi douée que toi !

Au passage, si tu as envie de t'amuser à faire des petits jeux en rapport avec les animaux, je pourrai te mettre en contact par MP avec quelqu'un (que je connais grâce à un autre topic d'Openclassroom) qui collabore à un site sur le sujet.

Si tu souhaites réaliser un vrai jeu à partir de ton moteur, as-tu déjà quelques idées de thème, d'ambiance et de persos qui pourraient nous donner envie de t'aider ? Plutôt que de faire mes trucs à moi dans mon coin, j'aimerais mieux participer à quelque chose de collaboratif et open source, si c'est cette direction que tu désires prendre.

Quelle que soit la réponse, si tu n'es pas à l'aise avec le pixel art ou que tu n'as pas le temps d'en faire beaucoup, est-ce que ça ne vaudrait pas le coup de prendre des graphismes libres sur opengameart ou un site du même genre ou demander à d'autres graphistes plus spécialisés en pixelart de t'aider pour ton futur projet de jeu ?

Il y a pas mal de temps, j'avais collaboré à USF, un jeu en python de plate-formes. Il y avait dans ce jeu en python pas mal de sprites sympas dessinés par Redshrike.  Note : Je fais pas de la pub pour moi mais pour lui, et je ne le connais pas personnellement, je trouve juste son travail très chouette !

J'avais dessiné quelques persos en pixel art aussi, mais c'est galère, je trouve. J'avais testé pixeditor, mais ça fait longtemps que ce n'est plus développé, dommage. J'en avais fait aussi avec Gimp. Qu'est-ce que tu utilises de ton côté ?

Sinon, est-ce que tu veux absolument faire un jeu en pixelart ou est-ce que tu ne peux pas utiliser Inkscape (ou équivalent) qui est facile à utiliser pour faire des poses différentes et pour faire des tuiles ? Ça semble mieux correspondre à ton style graphique.

Ou même Blender (ou d'autres logiciels 3D) pour créer tes persos ? Si tu utilises Blender, tu fais ton perso et tu lui mets une armature, puis tu l'animes et tu récupères les images clés pour faire tes sprites.

Ça paraît un peu long à faire, mais personnellement, j'ai trouvé ça plus facile et amusant que de faire du pixelart... L'avantage, c'est qu'après, tu peux soit faire des vues de profil pour un jeu de plates-formes, soit des vues de dessus pour un futur RPG, par ex.

Pour les décors, dans le jeu en python dont je te parlais, Tshirtman ne faisait pas des tuiles, il utilisait une image de fond et quelques images plus petites pour chaque plate-forme, avec un fichier xml à part contenant leurs coordonnées. Il avait aussi un fichier xml pour gérer les anims et les rectangles de collision des persos (il n'avait pas de spritesheet mais un fichier png par pose, pas très pratique en javascript, je pense).

Je ne sais pas si c'est facile à faire avec du javascript, pour les collisions, mais c'était pratique pour créer facilement des niveaux différents en peu de temps, et le code de ce fichier était compréhensible même pour des graphistes débutants en programmation. Ça pourrait être un fichier json plutôt qu'un xml.

Je vais voir si j'arrive à tester ta démo avec des graphismes persos ou ceux d'USF, c'est très tentant, même si tu sembles ne pas le conseiller...

@jerkoco : Contente de te retrouver sur un autre topic, pour un projet qui a l'air très proche du tien, voire même complémentaire. :)

  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
21 août 2016 à 22:40:59

J'ai déjà un projet ^^ en binôme. 

Absolument en pixel art non , mais j'ai envie de m'améliorer en pixel art plutôt que de faire quelque chose que je sais déjà faire comme du vectoriel etc .

Le pixel art c'est pratique aussi pour réduire la taille des fichiers pour les jeux en lignes . Rien à avoir de trop lourd à télécharger .

Pour le logiciel de pixelart j utilise piskel. Il gère les animations :) 

Mais si t'as des idées de projets cool hésite pas à me contacter 

  • Partager sur Facebook
  • Partager sur Twitter
22 août 2016 à 1:06:59

Ok, je comprends. rien de mieux que d'apprendre de nouvelles choses ! Merci pour le nom du programme de pixelart.  :)

J'ai fait un petit essai avec ton moteur de jeu, avec un perso à moi et un blob de Redshrike (avec le même nombre de frames que toi) + quelques images complémentaires ( branches à la place des tubes, torche comme munitions, et fleur comme soin), ça marche plutôt pas mal. Bravo pour ce beau boulot !

Dans les remarques qui peuvent t'être utiles, je te conseillerais de mettre en variable dès le début du script :

- la taille du canvas
- l'url des images et les tailles (pour les spritesheets, ce serait bien de donner sur un modèle quels mouvements on a besoin et dans quel ordre on doit mettre les frames)
- l'url des sons
- toutes les couleurs utilisées dans le jeu (couleur fond, couleur des plates-formes, barres de vie et de munitions, couleur textes...)
- tous les textes dont on aura besoin

Je voulais transférer le script avec ces petits changements chez mon hébergeur via Filezilla mais ça bugue aujourd'hui. Je ne sais pas si j'ai un autre moyen de t'envoyer le script facilement.

Pour le titre, j'ai rendu transparente ton image et changé les persos et les textes avec Gimp, mais ce serait mieux que s'affiche automatiquement la 1ère image de la spritesheet et qu'on puisse choisir les textes qu'on veut (comme tu l'as fait pour l'écran de fin). Pour ce dernier, ce serait bien d'avoir une autre couleur que celle du fond du jeu, surtout si on décide de les changer par rapport à ce que tu as mis.

Pour le fond et les plates-formes, on ne pourrait pas avoir une tuile texturée qui se répète plutôt qu'une simple couleur ?

Petits bugs :

En agrandissant la taille du canvas dans le script (sans changer la taille des tuiles), ça n'agrandit pas automatiquement l'image de titre ni les plates-formes, donc pour un essai rapide sur ton Codepen, ça donne un effet bizarre avec la couleur du fond qui dépasse sur les bords droits et bas. Pour l'image de titre, il suffirait de l'agrandir mais pour le jeu, c'est plus compliqué, il faudrait forcément changer la map.

Ce serait peut-être plus utile de donner le nombre de colonnes et de lignes de la map plutôt que la taille du canvas, ça éviterait des valeurs qui ne correspondant pas à un nombre précis de tuiles, déjà.

Mon perso étant un peu plus grand que le tien, ses pieds ne sont pas posés sur la plate-forme mais un peu en-dessous, je suppose que ça doit pouvoir se calculer ?

Enfin, je ne suis pas joueuse donc je perds souvent, mais même en essayant de m'appliquer, je ne gagne jamais et mes blobs ne remontent pas beaucoup une fois qu'ils sont descendus. J'arrive à ne pas me faire tuer et à récupérer des soins mais je ne sais pas comment tuer les blobs, vu que l'image des munitions est sur la plate-forme du haut.

  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
22 août 2016 à 10:14:35

C'était une démo de base et ce n'est plus le code final donc Oui ^^ il y à des problemes cette démo est assez vieille et ne correspond plus à ce que j'ai fait au final.

Pour l'affichage des tuiles maintenant c'est réglé si tu regardes le code démo affichage basique tu verras que le code est très réduit :) 

C'est une sorte de framework avec des actions de bases , collision Sprite particule affichage 

Donc il faut modifier le code en fonction du gameplay désiré.

  • Partager sur Facebook
  • Partager sur Twitter
23 août 2016 à 4:29:11

Bonjour,

voilà des années que je cherche à développé un mmorpg et je me suis rendu sur un vieux logiciel en visual basic, j'ai fait tourné mon jeu durant 2 ans avec une moyenne de pop de 50 joueurs pour un amateur fr 2d ^^, j'avais beaucoup travaillé la partie pixel art mais c'étais très compliqué a cause du moteur limité :(

J'apprend le java depuis quelque temps et je trouve ton système magnifique, est-il open source? privé?

Je serais ravie de pouvoir l'utiliser pour créer un mini-RPG pour navigateur internet ^^ 

  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
23 août 2016 à 9:41:14

Pour ton rpg comment gères tu les déplacements ? C'est un rpg dans l'esprit browser quest ?

Il te faudrait un a* algo à implantent pour le déplacement du joueur.

Java ou javascript ?

C'est pas que c'est privé, mais je suis pas un pro, il y a des frameswork beaucoup plus performants et complets donc j'encourage pas trop à l'utiliser.

  • Partager sur Facebook
  • Partager sur Twitter
24 août 2016 à 5:21:50

J'ai voulu essayer la framework browserquest et j'arrive pas a faire tourner le serveur sur ma VMWare Debian =/, mais quand je me pencherais dessus sa devrais le faire, par contre j'ai télécharger le mapeditor qu'ils proposent qui est vraiment superbe si on veux faire un monde ^^

Pour mon RPG les déplacements sont haut-bas-gauche-droite, pas de latéral. J'ai commencé sur RPGMaker y a plus de 15ans et j'ai finis par développer Collapse of Time ( https://youtu.be/su-Fu-_Kk0I ) sur IWC (ImaginaryWorldCreator) de Geo n'aimant pas du tout FRoG Creator. Je ne connaissais rien au code a part au php et sadscript utilisé dans iwc (base visualbasic).

Enfin bref, ta structure m'intéresse car je souhaiterais faire des mini-defi dans mon RPG comme ils ont fait dans Final Fantasy :) et ton système à la pac-man serait vraiment parfait!

  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
24 août 2016 à 11:18:47

Si t'apprends le javascript je te conseil de regarder canvas aussi pour l'affichage.

Le framework ici n'est pas adapté pour un rpg :/ la base oui (lecture des tuiles etc) mais pas le déplacement des entités et la collision.

pour le déplacement faudra changer la structure perso ce que je fais c'est définir une position x,y au joueur genre 1,1 ( en case);

et pour l'affichage tu multiplie cette donnée par la résolution d'une case, quand le perso veut se déplacer à droite  (donc x+1) tu regardes dans ton tableau "terrain", si la tuile x:2,y:1 a une collision: true si oui on se déplace pas, mais si false on deplace le joueur et sa position égale x:2,y:1 maintenant.

  • Partager sur Facebook
  • Partager sur Twitter
25 août 2016 à 19:35:13

Comme dit plus haut ta structure m'intéresse pour intégrer des mini-defi style oldschool (tetris, logic, shooting, snowboard, etc, j'ai déjà toute ma palette graphique qui ressemble trait pour trait a tes sprites ^^)

Mais du coup tu ne le mes pas en téléchargements? Il est donc privé(pour toi uniquement)?

  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
25 août 2016 à 21:20:45

:/ je conseille à personne de l'utiliser, de plus il y a des frameworks bcp plus complets ^^ (pixi js phaser etc) 

-
Edité par Anonyme 27 août 2016 à 12:46:32

  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
27 août 2016 à 12:51:42

Auditek a écrit:

Projet très intéressant.

Je ne peux que te conseiller de poster ça quelque part sur reddit, t'auras pus de réponses et tu pourra peut-être séduire quelqu'un qui fera un jeu complet avec ton moteur et gagner en visibilité !

Bonne continuation

comment ça fonctionne reddit en fait ? on m'a dit aussi de poster sur github mais je comprends pas trop le système, pour du open sources n'importe qui peut modifier et améliorer le code sur github ? car ça m'intéresserait pour un autre projet open source mais je sais pas trop comment faire. tu as besoin du licence pour l'open source ?
  • Partager sur Facebook
  • Partager sur Twitter
2 septembre 2016 à 20:30:03

Pour un projet soi disant fini tu as encore beaucoup de chose à dire lol
  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
2 septembre 2016 à 23:53:12

 _

-
Edité par Anonyme 24 février 2017 à 11:46:49

  • Partager sur Facebook
  • Partager sur Twitter
6 septembre 2016 à 13:27:22

Super cool !!

Quelles sont les technos que tu as utilisé ? Html/Css (canvas) + javascript, mais encore ?

Une question que je me pose, avec ce genre de jeu nous avons accès au code côté client, du coup y'a possibilité de triche ou meme de voir des choses secrètes ? (genre niveau secret etc...).

Pourquoi ne pas mettre ton projet sur github :o

  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
6 septembre 2016 à 21:05:40

bah en tech, html / css et javascript :x j'ai rien de plus pour l'affichage etc 

pour la création des sprites j'ai dessiné sur piskel mais c'est tout en logiciel externe.

pour le github, je comprends pas trop comment ça fonctionne, et j'ai peur de pas faire assez pro en fait :'^)

  • Partager sur Facebook
  • Partager sur Twitter
6 septembre 2016 à 21:49:23

Pour le github, pas besoin de prétention ou de te faire passer pour quelque chose de spécial, tu donne un nom au projet, tu créer une nouvelle page et même pas besoin de connaître git tu peut juste glisser tes fichiers sur le site.

Pas forcément besoin de plus, tu peut donner le code source sans proposer de contribuer à ton projet.

Tu peut, pourquoi pas expliquer un peu comment utiliser ton moteur, et c'est bon. :)

  • Partager sur Facebook
  • Partager sur Twitter
6 septembre 2016 à 22:04:44

ne t'inquiete pas pour github, on t'aidera au besoin ;)
  • Partager sur Facebook
  • Partager sur Twitter

https://github.com/Drulac/markdown-math-editor

7 septembre 2016 à 0:40:46

C'est important d'avoir un dépôt git/svn en plus... Ça permet de journaliser le code en plus de servir de backup...
  • Partager sur Facebook
  • Partager sur Twitter
L'être humain, contrairement aux geeks qui ne sont de toute façon pas des êtres humains, est un animal social taillé pour vivre en "meute".
14 septembre 2016 à 10:48:25

ça nous permet aussi de pouvoir reporter des bugs, proposer des améliorations, donner des avis, te faire connaitre, nous tenir au courant de ton avancée... la liste d'avantage est longue :)
  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
23 janvier 2017 à 11:57:19

Coucou j'ai plus fait grand chose depuis la rentrée scolaire, je viens de faire un petit jeu d'adresse avec 9 niveaux pour le fun, je le mets ici car le code utilise la même structure que ce projet ^^' donc je viens le partager par la http://codepen.io/Gthibaud/full/zNwgmZ/
cf : les contrôles sont sensibles.
  • Partager sur Facebook
  • Partager sur Twitter
23 février 2017 à 11:35:15

Top ton petit jeu !

Je suis également sur la création d'un petit jeu de platforme multijoueur en javascript.

Par contre je suis passé par Three.js (webGL)

Et là je suis en train de mettre en place socket.io pour gérer le multi (ça commence à marche).

Ton jeu semble bien structuré. Je me demande même si au final, passer par un moteur comme Three.js est nécessaire vu le résultat de ce que tu viens de faire.

Si tu as besoin d'aide sur socket.io je peux essayer de t'aider.

Bravo en tout cas.

  • Partager sur Facebook
  • Partager sur Twitter

Agence Web SO'Website, spécialiste communication digitale et Création de site internet à Grenoble .

Un site de qualité pour grimper jusqu'au sommet !

23 février 2017 à 17:23:54

jerkoco a écrit:

Ok :) Je pense pas que ce soit optimal au niveau performance, si jamais tu as un grand monde avec beaucoup d'objets.

J'essaie moi d'améliorer mon système, je cherche donc un algorithme rapide pour pouvoir gérer de grands monde.

Merci encore :) et bonne chance pour la suite. Juste pour savoir, est-ce que ton moteur utilise le delta time ?

-
Edité par jerkoco 17 août 2016 à 22:49:27

J'imagine qu'il est aussi possible de séprarer son affichage en 2 - 3 couches -> background , couche passive ( tiles ) , couche active ( perso , ennemi , projectiles ) .. ainsi dans les differents etapes ( par exemple lors d'un deplacement ) il est possible d'iterer que sur les images sur la couche passive puis lors du lancement d'un projectile tu itere sur les entité présent dans la couche active : ca evite des calculs inutiles.

  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
24 février 2017 à 1:33:06

sornico a écrit:

Top ton petit jeu !

Je suis également sur la création d'un petit jeu de platforme multijoueur en javascript.

Par contre je suis passé par Three.js (webGL)

Et là je suis en train de mettre en place socket.io pour gérer le multi (ça commence à marche).

Ton jeu semble bien structuré. Je me demande même si au final, passer par un moteur comme Three.js est nécessaire vu le résultat de ce que tu viens de faire.

Si tu as besoin d'aide sur socket.io je peux essayer de t'aider.

Bravo en tout cas.

Coucou, pour un jeu de plateforme (2d?) three.js c'est peut être un peu trop, sauf si tu veux vraiment tout optimiser au maximum, mais oui je pense que tu peux avoir un bon résultat avec canvas classique. personnellement j'arrive à afficher pas mal d'éléments sans que ça rame. bon après je reste dans un style rétro pas trop gourmand.

pour socket io, en ce moment je reprends les bases de node.js pour commencer car j'avais vraiment du mal avec socket et j'avais envie de comprendre node en soi :) mais si je galère, j'hésiterais pas à t'envoyer un mp.

je rajoute un autre petit jeu sur ce topic que j'ai fait il y a un petit moment >

http://codepen.io/Gthibaud/full/MJqgzv/

-
Edité par Anonyme 24 février 2017 à 1:48:53

  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
30 mars 2017 à 17:04:15

petit jeu de cette semaine > 

Copycat :)

lien: http://codepen.io/Gthibaud/full/ryQRYP/

  • Partager sur Facebook
  • Partager sur Twitter
31 mars 2017 à 6:59:42

Bonjour,

Je viens de tomber sur ton projet et il est vraiment cool !

Petit post d'encouragement ^^

Bonne continuation ;)

  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
5 mai 2017 à 22:42:52

petit jeu d'aujourd'hui 

c'est un clone du jeu, don't touch the spikes / j'ai rien inventé niveau game play ^^'

lien : http://codepen.io/Gthibaud/full/aWLjKL

  • Partager sur Facebook
  • Partager sur Twitter
14 juillet 2017 à 22:02:45

Wow, je ne viens plus très souvent ici mais je vois que tu fais plein de choses , bravo ! continues comme ça ! :)
  • Partager sur Facebook
  • Partager sur Twitter