Partage

[big-tuto] Créer un RPG avec HTML5

Qui voudrais compléter le tutoriel existant ?

13 décembre 2013 à 13:56:35

Pour l'autre tuto, j'ai trouvé la solution en changeant l'ordre des lignes de référence au scripts. Si je les mets dans le head comme d'habitude, ça ne fonctionne pas, et la classeTileset.js doit être avant le fichier rpg.js.

<!DOCTYPE html>
<html>
    <head>
        <title>Mini-RPG</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />

    </head>
    <body>
    	<canvas id="canvas">Votre navigateur ne supporte pas HTML5, veuillez le mettre à jour pour jouer.</canvas>    
	<!--[if lt IE 9]><script type="text/javascript" src="js/excanvas.compiled.js"></script><![endif]-->
	<script type="text/javascript" src="js/classes/Tileset.js"></script>
	<script type="text/javascript" src="js/rpg.js"></script>

    </body>
</html>


Je reviendrai vers le topic pour donner un coup de main quand j'aurai déjà réussi l'autre topic et lu pas mal sur javascript. Pour l'instant, je suis encore un peu trop débutante pour aider, à part pour le graphisme.

@jam-jam68140 : j'ai pas compris ce que tu dis : "Pour les gmail, ça se passe par MP". Ca doit être rigolo vu l'émoticône, mais ça ne me dit pas comment on fait...
14 décembre 2013 à 12:11:02

@doudoulolita : MP = message privé.

Si tu ne veux pas que ton adresse mail soit mis en publique sur les forums, tu peux m'envoyer un message privé avec ton adresse mail et je te rentre dans le groupe :)

16 décembre 2013 à 18:44:00

@jam-jam68140 : je t'ai laissé un MP.
21 décembre 2013 à 11:40:34

ok :) jusqu'ici, j'ai ajouter tous ceux qui mon envoyé leur mail par MP. :)
25 décembre 2013 à 19:34:51

1ère partie sur le shoot' em up terminé (en attente de relecture pour critique car je ne suis pas satisfais de mon boulot mais ne sais pas trop où dire quoi de plus...)

Egalement en attente de réunion (brève) afin de rediscuter des tâches assignées à chacun. :)

-
Edité par jam-jam68140 25 décembre 2013 à 19:35:52

2 janvier 2014 à 17:53:26

@jam-jam68140 : je t'ai laissé moi aussi un MP.
2 janvier 2014 à 18:28:43

ok j'ai répondu :)

Je précise pour les prochain(e)s : le mail, c'est un gmail qui est attendu (on travail sur google doc) :) voilà. :D

2 janvier 2014 à 18:31:00

Salut,

je me permet de te contredire jam-jam, TOUTES les adresses mail sont compatibles avec google docs, ce n'est pas parce que c'est google qu'on prend que du google :D ! Un petit exemple ? Regarde mon adresse mail ;)

15 janvier 2014 à 16:24:56

Moi j'aimerais bien suivre ce cours aussi :) je te laisse un MP
15 janvier 2014 à 18:21:02

@doocly14 : je viens de voir ta réponse... je ne savais pas que le drive prenait toute les adresses désolé ^^ @anthonyflet, ok je vais voir ça de suite :)
27 janvier 2014 à 13:47:51

2ème version beaucoup plus rigolote (en partant d'une spirale)

paresseux rigolo

27 janvier 2014 à 15:12:29

3 poses pour le paresseux rigolo:

  • endormi (il sera accroché à la branche)
  • debout (peut-être à revoir avec les bras tout en haut pour le saut)
  • tombé par terre.
pareseux endormi

paresseux deboutparesseux par terre

-
Edité par doudoulolita 27 janvier 2014 à 15:17:57

27 janvier 2014 à 20:06:01

Parfais! :D

Tu peux me faire un truc maintenant pour que la succession des images me fasse une petite animation -> quand il s'accroche pour dormir et quand il tombe... ?

Sinon, c'est plutôt pas mal :D

28 janvier 2014 à 12:21:39

paresseux accroupiparesseux sautantEncore 2 positions, en vue d'une animation pour le saut (la position debout montrée dans le post précédent pourrait être en 2ème frame, faut que je teste)

-
Edité par doudoulolita 28 janvier 2014 à 12:23:00

28 janvier 2014 à 13:04:50

paresseux rigolo positionsVoici toutes les positions réunies et les animations :

29 janvier 2014 à 12:05:11

hey! tu me fais un excellent job là! :D

si t'arrive à me faire quelques frame intermédiaires, histoire que ce soit un peu plus fluide, je commencerais à coder un truc. :)

29 janvier 2014 à 17:51:45

OK, dès que j'ai un moment, je m'en occupe.

Pour les branches, ma première idée était de m'inspirer de la peinture chinoise car je prends des cours en ce moment, mais je ne sais pas si ça va rendre bien avec le style comic du paresseux.

As-tu une idée de nom pour ce perso ? Pour l'instant, rien ne me vient en tête.

29 janvier 2014 à 20:03:47

"roupionce" ? ^^ (roupiller+pioncer)

Aha :p non je n'ai pas d'idée. ^^ à méditer là dessus je vais n’employer. ;)

Et pourquoi pas les arbres chinois si c'est bien fais ça peut être chouette :p

30 janvier 2014 à 10:33:36

Mes collègues me proposent le nom "Sid" comme dans l'Age de glace mais j'aime bien Roupionce, c'est plus original.
30 janvier 2014 à 12:45:55

ouai Side c'est pas très original ... ^^

Mais roupionce c'était un nom comme ça au hasard hein :p

11 février 2014 à 19:34:36

Voici enfin un essai d'une branche réalisée au pinceau et à l'encre de chine puis scannée. Les pattes en arrière-plan devraient être sur une autre couche, si c'est possible, pour reproduire ce que je propose ici.

Voici mon fichier inkscape.

J'ai peint plusieurs branches, deux d'après un modèle peint pour moi par ma prof de peinture chinoise (1A et 1B) et deux d'après des modèles d'arbres qu'elle m'avait fournis auparavant.

Avec le paresseux, j'ai utilisé le modèle 1A, c'est celui que je préfère. Le placement du paresseux est très précis pour paraître naturel, je ne sais pas si c'est possible à reproduire en javascript. Avec Inkscape, j'ai rempli l'arbre de blanc, le reste est transparent.

Est-ce que le tronc est utile ou dois-je le supprimer et ne garder que la branche ? La longueur de la branche est-elle OK ?

Ça pourrait être joli de faire des montagnes avec de l'encre de chine diluée pour le fond. On aurait donc un fond de nuances de gris et de blanc (ou bleuté, ou verdâtre si je mélange avec de la peinture chinoise), et le paresseux ressortirait en couleurs.

Le seul hic, c'est que je crois que pour les jeux en javascript, on utilise des carrés d'une taille précise pour les décors, et que avec mon idée, ça ne collerait pas trop. Je vais réfléchir à d'autres idées au besoin.

Les mouvements du paresseux (que je n'ai pas encore eu le temps de retravailler) ne rentrent pas non plus dans une taille de sprite toujours identique, ça complique la programmation, j'imagine. Quelle taille est prévue pour le personnage ? Faut-il que je revoie les mouvements pour rentrer dans un rectangle ou un carré de taille précise ?

-
Edité par doudoulolita 11 février 2014 à 19:38:26

11 février 2014 à 20:36:37

Très réussis !

doudoulolita a écrit:

Le seul hic, c'est que je crois que pour les jeux en javascript, on utilise des carrés d'une taille précise pour les décors, et que avec mon idée, ça ne collerait pas trop. Je vais réfléchir à d'autres idées au besoin.

Je ne vois pas ce que tu veux dire par des carrés du taille précise ? Si c'est seulement pour le background (les montages), je pense que ça serait une des choses les plus faciles à développer.
Je vous ai aidé ? Appuyez sur le bouton "Ce message est utile", avec le pouce levé vers le haut !  (en bas à gauche de mon message)
13 février 2014 à 13:14:38

Dans http://fr.openclassrooms.com/informatique/cours/creer-un-mini-rpg-en-javascript-avec-canvas/decoupage-et-utilisation, c'est expliqué comment composer une carte avec des carrés, je pensais qu'il n'y avait que cette technique de possible et qu'on ne pouvait pas afficher une image entière si on voulait pouvoir définir les coordonnées des blocs "branches" correctement.

De même, dans http://fr.openclassrooms.com/informatique/cours/creer-un-mini-rpg-en-javascript-avec-canvas/choix-et-rendu-des-sprites, les sprites ont quasiment tous la même taille sur la spritesheet. Comment gère-t-on un perso qui est tantôt horizontal, tantôt vertical comme le paresseux ?

13 février 2014 à 16:38:08

salut salut :D

c'est un excellent boulot!!! :D

Pour ce qui est des images, peut importe la dimension, un bon programmeur saura comment se démerder. :p C'est facile de gérer tous ça ne t'en fait pas. :)

Je te laisse carte blanche... fais ce que tu veux et tu me diras quoi faire... :) je peux faire à peut près tout ce que tu as envie (c'est la magie de la programmation!). :p

17 février 2014 à 22:30:33

J'ai peint à l'encre de Chine les montagnes et un arbre, les ai photographiés et les ai colorés avec Gimp :

fond de montagnes (en grand format) - Le fond très haut et peu large permet de scroller du haut vers le bas.

les arbres et le paresseux sur le fond de montagnes - Il faudrait que je fasse quelques arbres différents pour que ce soit moins monotone mais c'est assez long à réaliser. J'ai un peu baissé l'opacité du fond.

arbre (format moyen) : c'est le format et la nuance utilisés dans l'image précédente

arbre (grand format) : l'arbre est au format où je l'ai photographié et il est plus clair que le précédent.

-
Edité par doudoulolita 17 février 2014 à 23:05:18

17 février 2014 à 22:55:50

poses-paresseux en SVG - spritesheet

Les 2 animations ci-contre utilisent un peu plus de poses que les premières. Celle où il tombe me semble meilleure, pour l'autre, je ne suis pas sûre.

Peut-être qu'il faut 3 animations: tomber, sauter (en position debout), s'accrocher.

-
Edité par doudoulolita 17 février 2014 à 22:57:24

27 février 2014 à 19:13:15

Il est en effet dommage que le tuto ce soit arrêté en pleine écriture :/ , sinon , j'aime bien l'animation des paresseux :p
28 février 2014 à 16:01:02

oui, les paresseux sont géniaux!!! :D

Pour le tuto, je suis d'accord... mais l'équipe que j'ai essayer de monter pour m'aider à rédiger tous ça n'est soit pas très sérieuse, soit pas très motivé... :/ et tout seul, c'est plus possible pour moi de continuer un tel travail... :( (en plus j'ai le bac bientôt donc voilà... ^^ )

8 mars 2014 à 12:04:51

Merci pour vos compliments sur mon paresseux. J'espère qu'on utilisera mes dessins un jour, je vais les mettre sur opengameart !

Pas facile de réaliser des jeux et des tutos quand on manque de temps. Je connais le problème pour les graphismes aussi. J'ai un des bâtiments en 3D à faire pour un autre jeu et je n'avance pas vite.

Selon moi, le mieux serait de juste reprendre et compléter Créer un mini-RPV en javascript  sans chercher à tout refaire.

Ou juste donner des conseils ponctuels sur ce topic pour ceux qui, comme moi, ont des difficultés à coder, même des petits jeux de plate-forme tout bêtes.

Pour l'instant, je me base sur le livre développer des jeux en HTML5 & javascript de Samuel Ronce pour refaire mon jeu de plate-forme wardance-USF à partir de 0 (dans ce lien, je me suis basée sur un autre jeu et ai juste changé les graphismes, pour l'instant) mais je ne parviens pas à réussir le code présenté dans le chapitre 2, même la partie sans framework. Il s'agit pourtant juste d'afficher 2 images, mais en utilisant une classe.

Ce qui me pose problème, c'est de comprendre comment faire une classe pour mes images, vu que Image est déjà une classe. Les sites sur les classes en javascript ne sont pas très explicites. Souvent, on apprend à faire un bête Hello world ou alors c'est carrément le contraire, c'est tellement complexe qu'on n'y comprend plus rien.

J'ai réussi à faire une classe qui fonctionne pour l'image 1 mais quand je fais l'image 2, je dois redéfinir tout à chaque fois sans pouvoir utiliser mes tableaux vu qu'ils sont dans la fonction, c'est nul.

Voila ma page d'index et mon script. Merci d'avance de vos conseils avisés ! Mais révise ton bac d'abord, jam-jam68140 !

[big-tuto] Créer un RPG avec HTML5

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown