Création d’une communauté web scénarisée : le projet
Crealys
Réalisé par le TP 222Enseignant responsable : Mr
Laubin
Introduction Générale
Définition : Qu’est ce qu’un site web scénarisé ?
A quoi servirait un tel projet ?
Pourquoi un projet ?
C’est un espace entre… Un forum, comme par exemple celui de Hardware.fr
Et entre… Un jeu de rôle en ligne, par exemple Grey
Amélioration de l’éditeur de carte
Adaptation du client java en client flash
Développement de l’import/export XML
Nous avons travaillé sur
Serveur java : amélioration de celui d’un ancien projet
Serveur Java
Amélioration de l’éditeur de scénario existant
Éditeur de scénario
Pong 3D
Création de Plugins
Le projet Crealys est notre thème principal mais pas notre objectif premier :
On créé des outils Crealys est un jeu d’essai
But du projet
Conception (environ 1 mois)
Réalisation (environ 1 mois)
Intégration (environ 15 jours)
Selon le modèle présenté par Mr Laubin, chaque étudiant a été répartit dans une partie
Découpage des tâches
Vers la réalisation
Analyse et diégèse finis
Éclatement des équipes
Coordination par Pierrick
Plan général de la soutenance
I – Conception
II – Réalisation
III - Réalisation
I.1 - Analyse des sites web existants
Par M.RAKOTOARISOA
Situation dans le plan
I – Conception I.1 – Analyse des sites web
existants I.2 – Diégèse I.3 – Charte graphique I.4 – Analyse UML
Introduction L’analyse des sites existants :
« Une phase obligatoire est prépondérante à l’élaboration du projet »
En quoi consiste-elle?
Ses objectifs
Plan
I. Les moyens mis en œuvre pour effectuer cette recherche?
II. Les résultats
I. Moyens mis en œuvre
1. Outils2. Analyser des sites variés3. Recherche par thèmes4. La fiche méthode
Nom du site Lien Capture d’écran Points positifs et négatifs du site
Fiche méthodologique
Plan
1. Les moyens mis en œuvre pour effectuer cette recherche?
2. Les résultats
II. Les résultats Deux sites intéressants :
1. Au niveau de l’ambiance : Dofus.org
II. Les résultats Deux sites intéressants :
1. Au niveau de l’ambiance Dofus.org
2. Au niveau du scénario (Jeu en lui-même)
Pepsitown.com
La fiche synthétique Voici les principaux points
développés dans cette fiche synthétique :
1. Au niveau du site2. Au niveau du jeu en lui-même3. Au niveau conception
Conclusion Partie analyse très riche :
1. Au niveau personnel2. Au niveau du groupe
I.3 - Définition de la charte graphique
Par Dieter Gorecki
Situation dans le plan
I – Conception I.1 – Analyse des sites web existants I.2 – Diégèse I.3 – Charte Graphique I.4 – Analyse UML
Introduction
Étape indispensable pour définir l’ambiance générale du site
Permet de « restreindre » la partie de recherche de la partie technique
I. Moyens
Répartition des taches
Étude de l’existant
II. Résultat
Intégration des différents éléments graphiques du site
Définition et répartition des couleurs selon les quartiers
II. Résultat
Création de bâtiments déclinés selon les différentes couleurs
Choix de la police de caractère utilisée pour le jeu :
II. Résultat
II. Résultat
Définition de la palette des couleurs à utiliser pour la création des personnages
III. Utilité
Respect de la charte graphique
Utilisation des éléments
Conclusion
Document a réaliser rapidement
Capacités graphiques / Imagination
I.4 - Partie UML : Modélisation du projet
Par Pierre Collin
Situation dans le plan
I – Conception I.1 – Analyse des sites web
existant I.2 – Diégèse I.3 – Charte Graphique I.4 – Analyse UML
Introduction : Notre réflexion
Ancien projet
Bible
Réadaptation pour notre site
Utilisation de nos connaissances personnelles
Plan
I. La partie Carte
II. La partie Personnage
III. La partie Scénario
I. La partie Carte Le Monde Le Quartier : - capitale
- bâtiment public - bâtiment privé
Les cases : - un terrain - un élément de décor
I. La partie Carte
II. La partie Personnage
Les joueurs
Les Personnages non joueurs
Choix de modélisation :- classe personnage
III. La partie Scénario
Description générale
Amélioration - Passage en UML- Création de la classe Groupe
Conclusion
Difficultés rencontrées
Vérification de la cohérence de la Bible
Création des tables de la bases de données
II.1 - Partie Éditeur de scénario
Par Julien Vielet
Situation dans le plan
II – Réalisation II.1 – Éditeur de Scénario II.2 – Éditeur de Carte II.3 – Serveur Java : Analyse II.4 – Serveur Java :
Programmation II.5 – Flash : Possibilités II.6 – Client Flash : Import XML
Introduction
Le langage Zébra Writer
Étude de l’existant- Le projet PrehistorikQuest
Fonctionnalités ajoutées à l’existant
I. Le Langage Zébra Writer Syntaxe d’un
scénario Fragments Différents
éléments
BEGIN FR n°scénario – Type – Mode d’activation – Nom de fragment[>>canaux de sortie][<<canaux d’entrée]- Groupe de fragment 1 -- Groupe de fragment 2 -…- Groupe de fragment n-1 -- Groupe de fragment n -<? condition d’exécution en fonction du vecteur d’état> Bloc d’instruction conditionné</?> Bloc d’instruction non conditionnéEND
I. Le Langage Zébra Writer Automate
Passage d’un état à un autre
Matrice d’adjacence associée A BA 0 xB 0 0
A B x
II. Étude de l’éditeur préexistant But de l’éditeur
II. Étude de l’éditeur préexistant
Étude syntaxique
Structure du programme (Diagramme de classe)
III. Fonctionnalités ajoutées
Ouvrir un fichier Fermer un ou plusieurs fichiers Enregistrer un fichier Imprimer un document en couleur Lancer un site Internet d’aide en ligne Configurer les fichiers de données
Conclusion
Difficulté à reprendre du code insuffisamment commenté
Ajout de nouvelles fonctionnalités
II.2 - L’éditeur de cartes
Olivier DICK – TP 222
Position au sein du projet
II – Réalisation II.1 – Éditeur de Scénario II.2 – Éditeur de Carte II.3 – Serveur Java : Analyse II.4 – Serveur Java :
Programmation II.5 – Flash : Possibilités II.6 – Client Flash : Import XML
Introduction Qu’est ce qu’un éditeur de carte ?
Permet la génération d’environnement 2D
Assemblage de cases Création d’une nouvelle carte Sauvegarde de la création Reprise de la carte Ajout de textures personnelles
Introduction
Présentation finale de l’éditeur – Carte: Ville.xml créé par Olivier Dick
Introduction
Objectifs :
Reprendre l’éditeur précédentL’améliorer et l’adapter à nos
besoins Le rendre accessible à tous.
Sommaire 1 - Analyse d’un éditeur de carte 2 - Adaptation/Apport 3 - Bilan
1 - Analyse de l’éditeur 1.1 - Nombreux problèmes
Pas de génération de nouvelles cartes Pas de sauvegarde de cartes fonctionnelle Rafraîchissement pénible
1.2 - Pas convivial. Créé pour les développeurs
1.3 - Notion de fichier carte à redéfinir
1 - Analyse de l’éditeur 1.4 - Points positifs
Une structure qui marche
Notion d’explorateur de cases assez performant
1 - Analyse de l’éditeur
Éditeur « Rabbit’s Revenge »
2 - Adaptation/Apport 2.1-Redéfinition du format
d’import/export
Format XML choisit, pour remplacer le système primaire initial
Mise en place de dictionnaires de cases
2 - Adaptation/Apport 2.2 - Structure des fichiers
2 - Adaptation/Apport
2 - Adaptation/Apport
2 - Adaptation/Apport 2.3 – L’ouverture de fichiers
Utilisation du parseur SAX Chargement dynamique des dictionnaires Puis chargement d’une carte (fichier)
2.4 – La génération de nouvelle carte A partir d’un nom et d’une taille
2.5 – La sauvegarde de carte Écriture brute, pas de parseur Formatée en XML, bien sur…
2 - Adaptation/Apport 2.6 – Importation de cases
Terrains et éléments à partir d’un nom et d’une texture
Ajout aux dictionnaires
2.7 – Amélioration de la convivialité Ajout d’explorateur de fichiers Création/Ouverture de cartes dans l’éditeur Rafraîchissement de l’écran
3 - Bilan 3.1 – Actuellement
Logiciel simple, fonctionnel et stable En accord avec la définition d’un éditeur
3.2 – Ce qui peut être fait Suppression de cases des dictionnaires Adaptation WYSIWYG
Conclusion Éditeur = outils indispensable pour
la création d’une communauté…
En accord avec les autres outils, affichage de cartes notamment
II.3 - Serveur Java : Analyse
Par Maxence Barety
Situation dans le plan
II – Réalisation II.1 – Éditeur de Scénario II.2 – Éditeur de Carte II.3 – Serveur Java : Analyse II.4 – Serveur Java :
Programmation II.5 – Flash : Possibilités II.6 – Client Flash : Import XML
Introduction
Étape préliminaire pour la création du serveur utilisé pour notre projet
Étude de 2 projets existants : - le projet PrehistorikQuest - le projet BlablaChat
Plan
I - Etude de PrehistorikQuest
II – Etude de BlablaChat
I. Étude de PrehistorikQuest
1. Description du projet
2. La classe ServeurPrehistorik
3. La classe GestionClient
4. Analyse
II. Etude de BlablaChat
1. Description du projet2. BlablaServ.java3. BlablaThread.java4. Commandes.java5. Analyse
Conclusion
Base pour la création du serveur de notre projet
Cependant, des ajustements sont nécessaires
II.4 - Serveur Java : Programmation
Par Thomas du Boÿs
Situation dans le plan
II – Réalisation II.1 – Éditeur de Scénario II.2 – Éditeur de Carte II.3 – Serveur Java : Analyse II.4 – Serveur Java :
Programmation II.5 – Flash : Possibilités II.6 – Client Flash : Import XML
Introduction
Qu'est-ce qu'un serveur?
Quels tâches lui sont demandées?
Plan I - Ce qui nous était demandé
II - Les choix que l'on a fait
III - Fonctionnement du serveur
IV - Évolutions possibles
I. Ce qui nous était demandé
1. Gestion des clients
2. Fournisseur d'informations
3. Correspondance entre les clients pour le chat pour les déplacements pour le pong
II. Les choix que l'on a fait
1. Utilisation d'un seul port Souci de sécurité
2. Structure en 3 classes “threadées” Gestion aisée et individuelle des clients Gestion de différentes taches de manière
simultanée
3. Optimisation des données transmises Envoi minimum des données de
déplacement
III. Fonctionnement du serveur
1. Une classe gérant la base
2. Un objet par client
3. Un thread pour les commandes
IV. Évolutions possibles1. Facilité d'ajout de commandes
2. Facilité d'ajout de types de messages à gérer
En cas d'ajout d'une fonctionnalité dans le client (exemple du pong)
3. Portabilité du java Sur différentes plateformes Sur différentes bases de données
Conclusion
Serveur facilement utilisable
Serveur facilement adaptable à d'autres projets
Outil simple et pédagogique
Par Gabriel Rosset
II.5 - Flash : Possibilités
Situation dans le plan
II – Réalisation II.1 – Éditeur de Scénario II.2 – Éditeur de Carte II.3 – Serveur Java : Analyse II.4 – Serveur Java :
Programmation II.5 – Flash : Possibilités II.6 – Client Flash : Import XML
Plan
I - Analyse de l’existant
II - Possibilités de Flash Interpolations Transparence, profondeur Création dynamique de clip
III - Élaboration des dictionnaires Dictionnaire des terrains Dictionnaire des éléments
Introduction
Prise en main de Flash
Étude d’un tutorial existant
I. Interpolation de mouvement
Clip constitué d’une suite d’images
Les éléments graphiques
Les symboles
II. Interpolation de forme
Effets indésirables
Nécessité de décomposer la transformation
Outil de sous sélection
III. Profondeur et transparence
Transparence gérée par le format PNG
Espacement des profondeurs indispensable à l’affichage
Attribution dynamique de la profondeur pour le personnage
III. Un exemple simple
IV. Création de clip en dynamique
Solution abandonné à cause d’erreur d’instanciation
Les clips sont inclus statiquement dans le client
V. Établissement des dictionnaires
Utilisation d’un dictionnaire de terrains
Utilisation d’un dictionnaire d’éléments
Précision sur la forme des balises
Exemples de balises
<elements nbelements="30"><element ref="0" bloquant="false" typeelement="vide" img="ELEMENTS\vide.png" />
<typesterrain nbterrain="79"><typeterrain ref="0" nom="terrain" praticable="false" img="CASES\terrain.png"/>
Conclusion
Prise en main rapide grâce à un très bon tutorial
Flash gère les erreurs de code de manière peu efficace
Par Éric Wajcman
II.6 - Client Flash
Situation dans le plan
II – Réalisation II.1 – Éditeur de Scénario II.2 – Éditeur de Carte II.3 – Serveur Java : Analyse II.4 – Serveur Java :
Programmation II.5 – Flash : Possibilités II.6 – Client Flash : Import
XML
Objectifs
Gérer la cohésion des travaux effectués dans le groupe technique
Analyser outils existants des années précédentes
Trouver d'autres outils adaptables à nos besoins
Modifier les outils sélectionnés et les adapter
Étude d’un tutorial existant
I. Travaux préliminaires
Test des Outils existants
Analyse d’un tutorial de déplacement en 2D sous flash
I. Travaux préliminaires : Tutorial
La carte Tableau 2D rempli de 0 et 1(sol et
mur) Des images superposées Profondeur pour chaque duplication
des cases Une case possède toutes les images
possibles des cases
Sol 32Lx24HMur 32Lx32H
I. Travaux préliminaires : Tutorial
Le Personnage Objet contrôlé par le clavier Test de collision Vitesse de déplacement multiple de la
taille des cases
I. Travaux préliminaires : Tutorial
Le Personnage 8 directions 3 positions par direction
I. Travaux préliminaires : Tutorial
Une vraie carte La taille des cartes multiple de la taille d’écran
(16x16) Transitions d’un écran à l’autre lorsqu’on atteint
un bord On calcule la position du personnage avec la
potion de carte affichée
II. Réalisation pour le projet
Le XML Une norme commune pour le stockage des
cartes et des dictionnaires Chargement des dictionnaires Chargement de la carte courante Lors des déplacements des fonctions testent
si les cases « visées » sont praticables
II. Réalisation pour le projet Les Images
But de départ : importation dynamique des images en fonction des besoins
Problème rencontré : impossibilité d’importer les images comme nous le voulions
Solution : importation manuelle des images : Utilisation d’un calque avec un cadre Utilisation des outils de flash pour l’alignement
des images
III. Finalisation et Améliorations
Chargement des fichiers xml, mouvements et animations
Possibilité d’afficher d’autres personnages prévus (pas fini)
Communication avec le serveur pas encore au point
Petit aperçu
III.1 - Présentation du site web
Matthieu VAN ERKELENS
Situation dans le plan
III - Intégration III.1 – Site web III.2 – Pong 3D
Descriptif sur la création du Site Web CREALYS Respect de la norme
http://www.w3.org/1999/xhtml Création de feuille de style Fichier PHP Lien vers une base de donnée
distante pour gérer la communauté
Règlement Intérieur Le site suit 2 principes instaurés
par la Bible :
Règles de gestion à appliquer aux jeux
Règles judiciaires
Formulaire d’inscription
Création du compte dans la base de donnée
Liste des Membres Mise à disposition des informations
des membres inscrit dans la communauté
Connexion à la base de donnée
Identification Connexion à la base de donnée
pour s’authentifier sur le site
Autres fonctions du site Lien vers l’application Flash
Intégration sous peu
Mise à disposition de news pour donner des infos au visiteur du site
III.2 – Pong 3D
Par Delafoy Sylvain
Situation dans le plan
III - Intégration III.1 – Site web III.2 – Pong 3D
Introduction
Pong 3D, Pourquoi?
Avec quoi?
Les origines.
Pong 3D : Plan
Exemple de partie
Le fonctionnement sous jacent L'initialisation Les rôles des deux clients. Les cas spéciaux Les échanges
Exemple de partie Début du jeu
Exemple de partie Point marqué
Exemple de partie
Coté gagnant Coté perdant
Fin de partie
Le fonctionnement sous jacent
L’initialisation Les variables Les graphismes
Le fonctionnement sous jacent
Les rôles des deux clients L 'agresseur La victime
Le fonctionnement sous jacent
Les cas spéciaux L'absence de réseau Le refus de la victime La victime occupée.
Le fonctionnement sous jacent Les échanges
Sockets Format XML Uniquement les données essentielles.
Position de la raquette des joueurs. Balle. Score en cours.
Conclusion
Un excellent moteur graphique.
Une mise en réseau laborieuse.
Par Pierrick Girard
Gestion du Projet
Situation dans le plan
Gestion du Projet Conclusion
Gestion du projet
La méthode PERT Outil de planification et d’optimisation des
tâches Tableau des antériorités Représentation sous forme de Graphe
La lettre définit l’opération codée Le chiffre correspond à sa durée (minute, heure,
jour, mois) La flèche indique le sens de l’exécution (de
gauche à droite habituellement).
Exemple
Gestion du projet
Le diagramme de GANTT Application du réseau PERT Gestion des ressources et coûts
Par Pierrick Girard
Conclusion Générale
Conclusion générale
Suivi grâce au diagramme de GANTT Retard du client flash Avance du serveur java
Objectif initial atteint Base solide
Conclusion générale
Expérience enrichissante pour chacun Travail collectif Problèmes de communication Motivation et capacité d’adaptation
aux contraintes