Aller au contenu | Aller au menu | Aller à la recherche

SUPINFO : TP Création du jeu vidéo Frogger avec XNA (Dev: DotNet)


Comme je vous l’ai dis il y a quelques mois sur le billet : "Vos idées de jeux vidéo 2D m’intéressent.", je devais me préparer à la création d’un jeu vidéo 2D avec le Framework Microsoft XNA.

J’avais choisi au départ la création d’un mini megaman, mais l’école nous avait fournis un sujet de TP avec un jeu obligatoire. Le jeu à développer était Frogger !

Au revoir Megaman, Bonjour Frogger

Tout le monde connais Megaman, mais connaissez vous Frogger ? A la première lecture du TP je ne connaissais pas du tout Frogger, et je pense que certain d’entre vous sont dans le même cas que moi.

D’après Wikipedia le but du jeu de Frogger est : "de diriger des grenouilles jusqu'à leurs maisons. Pour cela, le joueur doit d'abord traverser une route en évitant les voitures puis une rivière en passant d'objets en objets".

Donc un frogger c’est un personnage qui est à un bout de l’écran et qui doit passer une route rempli de voiture, passer a travers une riverai sans toucher l’eau pour arrive a l’autre bout de l’écran chez lui.

Pour plus d’information sur le jeu je vous invite voir la page d’Arcade History

Au final j’ai du dire au revoir à mon Megaman (Dommage je mettais bien amusé à faire le graphisme du jeu) pour le remplacer par un Frogger.

Les contraintes du jeu

Comme dans tout projet ce TP avait des contraintes à respecter.

  • Tout d’abord le jeu devait être développait en C# en utilisant le Framework Microsoft XNA (1.0 Refresh, ou 2.0).
  • Il devait rester dans l’esprit du jeu original, c'est-à-dire un personnage qui doit passer, route et rivière pour aller à l’autre bout de l’écran.
  • Avoir 5 niveaux de difficultés
  • Ajouter un nouvel ennemi
  • Mémoriser le meilleur score
  • Permettre de jouer à deux joueurs (optionnel)

Enfin nous encouragé de laisser libre court à notre créativité : "Les ressources graphiques que vous utiliserez pourront être librement choisies ou tirées du jeu original : l’univers présenté tourne autour de la grenouille mais vous êtes libre d’utiliser l’univers de votre choix (une poule rentrant au poulailler et évitant des renards par exemple…)".

Le rendu du projet devait être au 30 avril 2008. Un jeu, qui se customise !

Comme vous l’avez compris nous avions un esprit de jeu à respecter mais aucune limite dans ca conception graphique, audio.

Bien que le graphisme ne soit pas notre domaine de compétence, (dans ce TP le but était surtout d’évaluer notre niveau et la qualité de nos développement dans le langage C#) j’ai pu voir différentes version du Frogger. Du design simple et original du jeu en passant par une version modernisé (Zelda Frogger), jusqu'à même des versions totalement customisé tel que la version « Homer va chercher des bières » ou vous incarnez Homer Simpson et votre but est de ramener des bières à la maison, un « Prison Break Frogger » ou vous êtes un prisonnier qui doit s’évader en échappant au tireur d’élite et aux voitures de polices.

Pour ma part ça était un SUPINFrogger ! Vous êtes étudiants SUPINFO et vous devez aller chercher vos 5 années SUPINFO pour obtenir votre diplôme. Mais attention aux voitures, à la rivière et aux voitures de polices (Je tiens à remercier les Fan de GTA chez qui j’ai pu récupérer des images).


Voici une vidéo de démo de mon SUPINFrogger :

Pour finir voici une petite galerie photo de Frogger Customiser développés à SUPINFO Toulouse.

Un Frogger proche de l'original

Un Zelda Frogger

Un Space Frogger

Le fameux Homer va chercher des bières

Et le code source dans tout ca ?

Je mettrais le code source du jeu ainsi que la démo installable une fois le TP corrigé et noté par l’école.

OVH : faire passer son hébergement PHP4 en PHP5 (Admin reseau - Serveurs)

Pour ceux qui sont chez l’hébergeur OVH, vous avez du vous rendre compte que votre hébergement supporte le PHP4 et le PHP5.
Cependant pour exécuter un script en PHP5 il faudrait que vos scripts soient nommés .php5, difficile à faire lorsque toute votre application est déjà codée avec des pages nommées .php


La solution pour faire passer tous vos scripts par l’interpréteur PHP5 au lieu de PHP4 est très simple :

  1. Créer un fichier .htaccess à la racine du site (dans le dossier "www ")
  2. Ajouter la ligne suivant au fichier .htaccess

    # Passage des pages .php (PHP4) sur l'interpréteur PHP5
    SetEnv PHP_VER 5

Et voila maintenant vos scripts seront interprété par PHP5.

SUPINFO : Les metiers-du-numerique.fr le site pour ceux des métiers du numériques (SUPINFO)

Voici une nouvelle fraiche, SUPINFO vient de lancer un nouveau site intitulé Les métiers du numérique (les-metiers-du-numérique.fr).

Ce site servira à aider les lycéens, étudiants, diplômés, professionnels et demandeurs d'emplois à s'orienter vers les formations et les métiers du numérique.

Je remarque cependant que la présence de SUPINFO « Ecole leader mondial » est trop présente sur le site
Tout d’abord avec la charte graphique qui est une copie conforme du site de SUPINFO, ainsi que des propos ramenant tout de façon directe ou indirecte à l’école.

Bien entendu ce nouveau site ne se fera pas sans le lancement d’une campagne de publicité sur la chaine TF1.

Espérons que le site les-metiers-du-numerique.fr ne soit pas une coquille vide, mais qu'elle aura un réel intérêt pour les étudiants en recherche d’informations à ce sujet.

Javascript : Faites clignoter un élément (Dev: xHTML / CSS / Javascript)

Une demande qui m’a été faite, était de faire clignoter un élément sur une page web.

Bien entendu la balise <blink> existe mais elle n’est pas prise en compte par tous les navigateurs. Je me suis donc penché sur une fonction Javascript utilisant les effets visuels de script.aculo.us.

Je vous présente ma fonction Blink() qui permet de faire clignoter presque n’importe quel élément sur votre page ;)

Par défaut elle s’applique sur les balises : <div>, <p>, <a>, mais fonctionne aussi sur tous les autres éléments HTML présents sur une page (Modification de la fonction Blink() obligatoire).

Démo

Voici un exemple de la fonction sur un bloc DIV.

Utilisation

  1. Téléchargez l’archive contenant la fonction Blink, Prototype, Scrip.aculo.us
  2. Placez les fichiers dans un dossier de votre site (par exemple : /js/)
  3. Insérez les balises suivantes dans le Head de votre page.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/blink.js"></script>

Maintenant ajoutez l’attribut rel=’’blink’’ aux éléments à faire clignoter

<div rel="blink">
<h1>Texte qui clignote</h1>
<img src="blink.jpg" alt="Image qui clignote" title="Image qui clignote" />
</div>

Pour ceux qui le remarqueront l’utilisation de l’attribut rel sur des balises comme DIV, P, … n'est pas reconnu comme valide.

Aussi si vous avez une solution je suis preneur et je modifierais ce script.

Joyeux Noël (Divers)

Je vous souhaite un très joyeux noël 2008, qu'il vous apporte  joie et bonheur.
Passez de très bonnes fêtes.


Sortie officielle de XNA 2.0 (Dev: DotNet)



C'est annoncé XNA 2.0 est sortie officiellement ce matin. Michael Klucher nous informe de la sortie de la version officielle XNA 2.0

Quelles sont les nouveautés ?

  • Comptabilité avec toutes les versions Visual Studio 2005.
    Par contre nous n'avons aucune information sur son fonctionnement sur Visual 2008 (J’attends de récupère ma version de Visual Studio 2008 pour vous tenir au courant).
  • La prise en charge du réseau, ce qui vous permettra désormais de faire des jeux multi-joueurs en réseau pour PC ou XBOX 360.


Pour les plus passionnés d'entre vous je vous propose le concours Dream-Build Play 2008, qui va s'ouvrir très bientôt.

Formation : Java (SUPINFO IS2) (SUPINFO)

Voici le programme Java suivit lors de mon année SUPINFO IS2 (2007 / 2008) :

Lire la suite...

Intégration du formulaire de paiement Paypal (Dev: xHTML / CSS / Javascript)

FreelanceSwitch nous propose un petit tutoriel (en anglais) pour intégrer le formulaire de paiement de Paypal.

Le formulaire de paypal n’est vraiment pas compliqué à mettre en place sur un site Internet.
Vous pouvez suivre ce tutoriel en anglais, que je trouve simple et bien détaillé (J’essayerai de vous en faire un en français).

Pour plus d’informations sur intégration de Paypal sur votre site web, je vous recommande vivement de lire les documentations de Paypal.

N’hésitez pas à vous créer un compte sur Sandbox Paypal pour tester le fonctionnement de votre script.

Vos idées de jeux vidéo 2D m’intéressent. (Dev: DotNet)

Depuis quelques semaines je me prépare à mes cours sur XNA (Framework C# pour la réalisation de jeux vidéo 2D/3D).

Mes cours sur ce Framework approchent à grand pas (début du cours Mercredi 12 Décembre), notre formateur nous a demandé de venir avec une idée de jeu vidéo 2D.

Quoi de mieux que vous laissez m’inspirer par vos idées de jeux vidéo 2D. Je choisirai un jeu que je développerai d’après vos idées.

Envoyez-moi vos suggestions via les commentaires du blog, ou notre formulaire de contact (Plus vos idées seront précisent, plus vous aurez de chance de voir la voir se réaliser).

Le TOP 10 des Gadgets Windows Vista (Divers)

Dans le style article qui sert à rien ou presque. Je vous propose un TOP 10 des gadgets Vista que j'utilise.

Pour ceux qui me connaissent bien, j'ai mis longtemps à adopter Windows Vista. Maintenant que je suis dessus il faut bien que je profite de ses nouvelles fonctionnalités.

Les gadgets ne sont pas si mauvais que ca ! Et pour preuve voici les  gadgets que j'utilise quotidiennement :

  1. IStat Wireless : un gadget bien pratique pour savoir sur quel réseau Wifi vous êtes connecté. Il affichera la force du signal, votre IP Privé et Publique.

     
  2. MultiMeter : un gadget qui affichera l'état de votre CPU, et de votre RAM. Plusieurs versions existent en fonction de vos CPU.
  3. Multi HDD Meter : Monitorez l'espace de vos disques durs.

     
  4. Some Life : Monitorez la batterie de votre PC Portable.

     
  5. Sidebar Outlook : Ce gadget permet de gérer les mails reçus avec Outlook depuis le vliet Windows. Sidebar Outlook permet de créer de nouveaux messages, de répondre aux mails, d’effacer vos mails.

     
  6. Calendrier Outlook : Gadget pour Outlook 2007, il affichera vos prochains rendez vous.

     
  7. Gadget Google Adsense : Idéal pour connaître le montant des gains de votre compte Google Adsense.

     
  8. The HotSpot Locator : Idéale pour chercher des HotSpot Wifi à un endroit précis (utile lors de vos déplacements).

     
  9. Twadget : Gadget pour Twitter.

     
  10. Systran Translator : Traducteur Anglais / Français.

Je vous invite à aller plus loin, en créant vous meme vos propres Gadget windows Vista grâce à l'article de MORAND Louis-Guillaume : Création d'un gadget pour la Windows Sidebar.

N’hésitez pas à me faire part de vos gadgets Vista.

- page 1 de 6