Forums Développement Multimédia

Aller au contenu

- - - - -

[HTML5/JS] Jeux à base de tuiles [2]

Dessiner avec Canvas Découvrir CreateJS TUTO

15 réponses à ce sujet

#1 nicolas.gauville

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 238 messages

Posté 27 July 2012 - 13:04 PM

Bonjour à tous,
Comme attendu, voici la deuxième partie du tuto sur les jeux isos en HTML/JS ! Chapitre 2.


Dans ce second chapitre, je parle des fonctions de base pour dessiner dans un Canvas (le minimum à connaitre, je pense), et j'introduit la suite du cours, notamment sur l'utilisation de CreateJS, comme je l'ai expliqué précédemment.

Ce chapitre fait très "catalogue", mais je pense que c'est nécessaire pour bien poser les bases, l'objectif étant de faire un gros tuto en deux parties : la première en "pas à pas" (pour débutants), la seconde partie composée d'annexes indépendantes sur des points précis (pour les plus expérimentés, qui veulent apprendre ce qu'ils recherchent, sans tout revoir).

Les prochains chapitre (3,4,5) mettrons certainement un certain temps à arriver, dans la mesure ou je vais probablement les rédiger ensembles, pour éviter les incohérences (comme cela m'étais parfois arrivé sur le tuto pour la réalisation d'un "Pacman", et c'est assez difficile de corriger "après coup").

J'espère que sa vous plaira, bonne lecture.

#2 Kosic

    Ceinture Noire

  • Community Manager
  • PipPipPipPipPipPipPip
  • 390 messages

Posté 27 July 2012 - 13:23 PM

Heureux de voir la suite !

Pour le pur vectoriel, si j'ai des questions tu pourras me dire quand les poser pour pas te retarder ?
"La beauté est dans dans l'œil comme le doigt du sage qui montre la lune de l'idiot qui regarde."
J'me comprends…

Illustrator and I

#3 nicolas.gauville

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 238 messages

Posté 27 July 2012 - 14:06 PM

Comment ça ? (pour les question)

#4 Kosic

    Ceinture Noire

  • Community Manager
  • PipPipPipPipPipPipPip
  • 390 messages

Posté 27 July 2012 - 16:28 PM

S'il est possible d'avoir des variantes aléatoires pour les tuiles, par exemple. Mais là c'est hors sujet, donc je préfère attendre d'avoir tout suivi pour demander ce genre de choses.
"La beauté est dans dans l'œil comme le doigt du sage qui montre la lune de l'idiot qui regarde."
J'me comprends…

Illustrator and I

#5 nicolas.gauville

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 238 messages

Posté 28 July 2012 - 00:10 AM

D'accord ;)

Pour le cas dont tu parle (tuile aléatoire), je pense que oui ce ne sera pas un problème avec la façon dont je vais organiser le cours.
Je pense utiliser la POO, je suis entrain de faire pas mal d'essais pour trouver un moyen a la fois simple, complet et surtout flexible à proposer. L'idée étant bien entendu de faire quelque chose qui soit bien compréhensible par les débutants, mais aussi flexible de façon a permettre ensuite d'aller plus loin (à la fois dans les annexes et pour les utilisateurs, qu'ils puissent l'améliorer sans être restreint par des mauvais choix du tuto).

Bref, j'essaie de prévoir le maximum de cas possible pour bien prévoir tout sa :). Je suis pas fan des introductions et débuts de tutos, mais pour la suite, je pense que sa pourra être vraiment intéressant ! ;)

Merci du soutient en tout cas et bonne soirée.

#6 nicolas.gauville

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 238 messages

Posté 30 July 2012 - 17:46 PM

Bon, j'ai passé ces derniers jours à voir comment je pourrais faire. Normalement, on devrait arriver à un résultat comme celui-ci à la fin du chapitre 5 : http://virtualsociet...com/stk/tiles3/ (le joueur est controlable au clavier ici).
Le chapitre 6 reprendra ces bases pour en fait un jeu jouable, puis viendrons les annexes qui se baseront toutes sur le résultat du chapitre 5.
J'ai testé avec la génération de tuiles aléatoires, sa marche très bien.

#7 Kosic

    Ceinture Noire

  • Community Manager
  • PipPipPipPipPipPipPip
  • 390 messages

Posté 30 July 2012 - 20:16 PM

Cool ! Ce bloc me donne une idée de jeu. Le contraire de ce qu'on fait d'habitude.
Faire bouger les décors plutot que le perso…
"La beauté est dans dans l'œil comme le doigt du sage qui montre la lune de l'idiot qui regarde."
J'me comprends…

Illustrator and I

#8 çayjb

    dadaaaa

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 2770 messages

Posté 09 August 2012 - 04:37 AM

ça ne revient pas à simplement inverser le sens des fleches ? ;p
Bon vieux principe sinon ;) :

Image IPB


petit taunt pretexte pour féliciter nicolas pour ce super tuto lol ;)

#9 nicolas.gauville

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 238 messages

Posté 11 August 2012 - 16:20 PM

Bon, bah comme promis, les cours suivants sont là !
J'ai pas encore eu le temps d'aborder la classe Player, mais le chapitre 6 le fera très prochainement. (oui, j'ai du changer la découpe des chapitres en cours de route, je me suis aperçu que ce n'était pas assez clair).

Mais bon, on a déjà on bon début !

Chapitre 3 : La classe Tile

Chapitre 4 : La classe Map

Chapitre 5 : Dessinons quelques tuiles

On arrive au bout du chapitre 5 avec un petit aperçu graphique. Le chapitre suivant abordera la classe Player et son utilisation (le rendre contrôlable, gérer les collisions, etc.).

Enfin, le chapitre 7 sera (si tout se passe bien) consacré à la réalisation d'un petit jeu avec le moteur réalisé tout au long du tutoriel. Ce sera également la fin du tutoriel "étape par étape", les suites éventuelles seront indépendantes les unes des autres, pour faciliter l'apprentissage d'un point précis.

#10 orel26ad

    Ceinture Blanche

  • Members
  • Pip
  • 6 messages

Posté 15 August 2012 - 02:31 AM

Mais ou est la suite, ou est la suite????

Excellent tuto, excellent travail.

J'ai rarement eu l'occasion de voir un tuto si bien fait !

Les gros atouts :
- Francais (et pourtant je suis anglophone)
- Clair !
- Complet (tout du moins dans les points abordés, aucune impression de manque)
- Des schémas propres et intelligibles
- FONCTIONNEL RAPIDEMENT ! (combien de tutos sont incomplets, ou approximatifs sur internet)
- Avec pas mal d'infos sur les apports extérieurs (tel que les conversions flash vers html5)

Nan vraiment un vrai plaisir. Ma seule déception : ne pas avoir la suite^^.

Juste une petite chose : n'hésite pas a faire une partie sur le scrolling, j'ai vu que tu parlais d'en faire peut-être un chapitre dessus : surtout n'hésite plus !!

Merci à toi, et surtout continue!!

#11 orel26ad

    Ceinture Blanche

  • Members
  • Pip
  • 6 messages

Posté 15 August 2012 - 02:31 AM

Ah si une question : des shapes/tiles seront proposées en annexes?

#12 nicolas.gauville

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 238 messages

Posté 15 August 2012 - 20:03 PM

Salut ;) !

Merci pour le message, ça fait vraiment plaisir de voir que c'est utile, et que ça plait !
Pour la suite, j'y travaille, mais je prends souvent beaucoup de temps pour revoir le code (difficile de trouver un bon équilibre, entre simplicité, clarté, et permettre de faire quelque chose qui puisse être utilisé dans de vrais jeux quand même).

Pour le scrolling, oui, si tout se passe bien je le ferai (je ne peu pas dire quand par contre). Si le sujet intéresse du monde (les jeux isométriques en HTML5/JS), je ferai probablement une petite série d'annexes sur des points divers (pathfinding, scrolling, c'est pas les difficultés qui manquent en Isométrie, en général).

Par contre, j'ai pas compris la question .. :s (bon, je suis un peu fatigué, mais si tu peu m'expliquer ce que tu veux dire ... ^^)
Bonne soirée ;)

#13 orel26ad

    Ceinture Blanche

  • Members
  • Pip
  • 6 messages

Posté 22 August 2012 - 23:35 PM

Je confirme ton travail est utile et surtout intéressant ;)

Pour les sujets d'annexes c'est vrai que le pahtfinding est aussi une excellente idée.

Pour la question : je me demandé si tu connaissais des shapes pré-construites, ou des banques de sprites.

Encore merci à toi.

#14 nicolas.gauville

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 238 messages

Posté 23 August 2012 - 01:38 AM

Non, j'ai l'habitude de dessiner tous mes sprites, dans la mesure ou, pour moi, créer un jeu c'est avant tout créer un univers, et donc j'aime le faire entier, du gameplay au scénario, des graphismes, animations a la musique.

Après, cela dépend de ce que tu veux en faire. Dans certains cas, je pourrais t'en fournir (après le nombre de jeux et débuts de jeux en iso, j'ai une belle banque de tuiles en tout genre), mais cela dépend de l'utilisation ...

#15 Kosic

    Ceinture Noire

  • Community Manager
  • PipPipPipPipPipPipPip
  • 390 messages

Posté 23 August 2012 - 08:08 AM

Au sujet de ces fameux tiles, une petite question me taraude. Je vais sans doute réinventer l'eau tiède mais qu'à cela ne tienne…

Un tile est de base un losange circonscrit dans un rectangle d'espace pour son placement (A)

Le système de recouvrement se fait par lignes de profondeurs (B) ; Désolé si mes valeurs z sont incorrectes, trop feignasse pour vérifier ;)

Donc la partie visible est le losange plus les deux triangle du haut (C1)
Ce qui signifie que si on place quelques pixels décoratifs dans ces deux triangles (C2) on les verra sur la ligne supérieure apparaitre au dessus des tiles (D) ce qui donnera un effet supplémentaire afin d'éviter le sentiment de répétition lorsqu'on travaille avec des tiles en aléatoire au sein d'un groupe.

Cela pose-t-il un problème technique ?

Fichier joint  tilesrecouvrants.png   19.81 Ko   8 téléchargement(s)
"La beauté est dans dans l'œil comme le doigt du sage qui montre la lune de l'idiot qui regarde."
J'me comprends…

Illustrator and I

#16 nicolas.gauville

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 238 messages

Posté 23 August 2012 - 11:52 AM

Non, c'est même courant de depasser pour faire ce genre d'effets, pour de l'herbe par exemple, ou pleins d'autres choses. Personellement, je l'ai fait souvent selon le style de tuiles.



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP