Introduction
Dans ce cours on va étudier les technologies Web front end (HTML5/CSS3/JS) en vue du concours de jeux vidéo 3D (utilisant la librairie babylonJS). On se focalisera donc dans un premier temps sur une introduction assez poussée à JavaScript et aux techniques d'interaction/animation.
Obligatoire : vous inscrire aux MOOCS suivants sur la plateforme edX :
Ces cours sont fait par le W3C (organisme qui fait les standards du Web), Michel Buffa est l'auteur de trois d'entre eux. Ils sont 100% gratuits à moins que vous ne vouliez afficher un certificat sur votre profil LinkedIn.
Séance 1 : quelques rappels HTML/CSS/JS, présentation d'outils de développement
On va faire des petits rappels HTML/CSS/JS aujourd'hui. Je ne sais pas encore à l'avance ce que l'on va faire exactement, mais l'objectif est de monter en compétence sur les technos Web de base (notamment JavaScript), sur l'utilisation de GIT, sur la manière dont on gère un projet open source quand on travaille à plusieurs. Nous allons commencer par des choses amusantes ayant trait aux graphiques et à l'animation.
Live coding fait en classe:
Ces exemples servent de point de départ pour l'exemple jsbin à rendre pour la prochaine séance (noté).
LISEZ BIEN LA FIN DE CETTE PARTIE, IL Y A DEUX CHOSES A RENDRE NOTEES :
- Répondre aux quizzes d'un MOOC sur canvas/graphiques
- Me rendre un jsbin avec des chars d'assauts animés.
A FAIRE POUR LA PROCHAINE SEANCE:
- Vous inscrire aux quatre MOOCs (voir début de page)
- Vous inscrire sur github
- Regardez tout ce qui concerne la librairie graphique babylonJS : tutoriaux, visitez le baylonjs playground, etc.
- Contrôle continu (noté): suivre la semaines 3 du MOOC HTML5 coding essentials and best practices et répondre aux quizzes à la fin de la semaines 3 , vous serez noté sur les résultats. RETARD = 0 au CC !!!
- Vous me donnerez lors de la prochaine séance le mail que vous avez utilisé pour vous inscrire sur edx. Je pourrai voir vos résultats et ça fera une note de contrôle continu.
- A RENDRE (noté): un exemple sur jsbin.com qui
-
- A l'aide de rectangles, cercles, demi-cercles, polygones, dessine en 2D un ou deux chars d'assauts ou véhicules armés divers
- Si ils sont gros, augmentez la taille du canvas
- Ils seront codés à l'aide de classe JavaScript et chaque char sera une instance, comme dans le dernier exemple de live coding que nous avons fait
- Des propriétés seront utilisées pour la position x, y, optionnellement l'angle, la couleur, la vitesse min, max, la taille, etc.
- Ils ne pourront pas sortir de l'écran (tests de collisions avec les murs
- Ils se déplaceront aléatoirement ou selon des trajectoires prédéfinies (bonus si ça a l'air réaliste)
- Optionnel : ils pourront tirer à des instants aléatoires, les tirs partiront dans leur direction
- Optionnel : vous avez le droit de rajouter un fond d'écran, d'autres choses, etc. si vous êtes bons, ou avez déjà des connaissances en JS, impressionnez-moi!
- Ajoutez ce que vous voulez en plus (mais fait par vous ou du moins, que vous comprenez bien)
- Vous poserez le HTML/CSS/JS sur jsbin.com et me rendrez l'URL jsbin.com par mail.
Séance 2: debriefing sur les TPs rendus, gestion des événements en JavaScript, utilisation d'élements <input> HTML pour contrôler vos animations
A FAIRE DE SUITE :
Exemples JsBin faits en cours:
- Exemple d'utilisation de ctx.save() et ctx.restore() et utilisation des transformations géométriques transalte, rotate, scale... https://jsbin.com/libupik/edit?js,output
- Exemple avec collisions et gestions d'évenements click boutons et souris : https://jsbin.com/fonoyaq/edit?js,output
A faire pour la prochaine séance !
- Former des groupes de 2 personnes (3 autorisés exceptionnellement)
- S'assurer que vous avez bien tous des comptes GitHub
- Sur un des comptes vous allez créer un repository pour votre projet
- Tous les membres seront contributeurs
- Moi aussi ! (mon nom GiutHub : micbuffa@gmail.com / micbuffa)
- Vous ferez au moins un README lisible dans GitHub et vous rédigerez une première idée du projet que vous voulez réaliser. A priori un jeu... Pas besoin de détailler trop, mais vous devrez commencer par décrire les modules qui devront être développés. Ex: je fais un jeu de plateformes, il faudra un module "jeu principal", un module pour gérer les évenements clavier/souris/gamepad, un module qui permettra de gérer les niveaux, un module de sauvegarde des scores, etc....
- Finir de remplir le Google Spreadsheet avec mail utilisé sur les Moocs edX : https://docs.google.com/spreadsheets...it?usp=sharing
Séance 3 : JS Objet rappels, diriger un char à la souris + tir, démarrage des projets...
Exemples vus en cours:
Travail à faire :
- Créer un repository github pour votre projet
- Faire un README qui contient :
- nom de votre projet,
- noms des participants
- commencer à poser des issues pour les taches à réaliser les plus simples (ex: deplacer le joueur)
Séance 4 : point sur les projets, initiation à git
On va faire le point sur les projets, sur les besoins, je donne des conseils sur les points à étudier, les choses à faire dans la partie "projet"...
Vous n'êtes pas connecté. Connexion 