Information

Auteur : Samarium
License : MIT/GPL
Version Alpha : 10 Avril
Langues du site : Français et anglais
Documentation : Anglais

Introduction

- RPG JS est un framework permettant de réaliser des RPG sur navigateur. Attention, vous devez avoir un minimum de connaissances en programmation pour utiliser le framework même si celui ci facilite grandement la tâche (scrolling, collision, mouvement ...)

- RPG JS utilise l'HTML 5 et le Javascript. Il s'appuie sur le framework EaselJS pour la manipulation des Bitmaps, Sprites, etc.

- Un script sur RPG Maker XP permet de convertir une Map vers RPG JS

- Compatibilité des navigateurs : IE9, Google Chrome, Firefox >= 3.5, Safari >= 4.0, Opera >= 10.5

Les avantages

J'ai relevé plusieurs avantages :
- Inutile de télécharger
- Possibilité de lier avec une base de données (avec des requêtes Ajax) et enregistrer des scores par exemple (non implémenté dans le framework)
- Possibilité de lier avec d'autres contenus du site (afficher des barres de vie en dehors du jeu ...)
- Possibilité de jouer avec la souris
- Ajout de commandes non existantes sur RPG Maker
- Tactical RPG intégré
- Evolution possible (vers le MMORPG)
- Jouer sur Iphone/Ipad/Archos ...
- Open Source

Utilisez RPG Maker XP pour convertir des cartes et animations





Fonctionnement

RPG JS utilise la même structure que RPG Maker. Vous chargez une Map en indiquant ses propriétés (Tileset, Musique ...) et c'est tout. En fait, vous indiquez aussi les évènements dans la Map. Ensuite, vous créez des évènements avec une apparence, des pages et des commandes d'évènement. Vous retrouvez les interrupteurs, les interrupteurs locaux et les commandes courantes comme l'affichage d'un message, le déplacement d'un personnage, etc.

Pour le moment, quelques commandes ont été programmées.

Prenons un exemple :

Code: Tout sélectionner

var rpg = new Rpg("canvas");
rpg.loadMap('Map007', {
   tileset: '006-Desert01.png',
   events:  ['Event02'],
   player:  {x: 14, y: 11}
}, mapLoad);

En quelques lignes, vous charges une Map. Les ressources sont les mêmes types de dossier que RPG Maker XP ("Graphics/Tilesets" par exemple)

L'évènement "Event02" est un fichier présent dans "Data/Events" qui comporte des propretés de l'évènement (cf ci-dessus)

Bien sûr, puisque c'est un framework, vous pouvez faire votre RPG à votre sauce avec l'API disponible. Une documentation française (et anglaise ?) sera présente.

Captures d'écran :

Dans l'ordre des images:
1) Simple affichage (base d'un RPG)
2) Interaction avec un évènement
3) Tactical RPG avec la souris (avec un léger défaut encore au niveau des superpositions)

C'est franchement très impressionnant et je suis surpris que tu n'aie que si peu de réponses.
Bonne continuation !

J'avais moi même commencé un petit truc (moins ambitieux que le tiens), basé sur le GeeX Transpose pour permettre le développement collaboratif en ligne et donc je recomposais une map et je ne la rendait pas jouable. J'utilisais Node.Js et Jquery.

Mais en tout cas, bonne chance et merci d'avance.

Merci

J'avais commencé des tests au départ sur Jquery (avant que HTML5 soit vraiment ancré dans les navigateurs). Mais je trouve ça moins convaincant pour faire des jeux puisqu'on manipule le DOM et CSS (pour les graphismes). Depuis que HTML5 est présent, ça facilite grandement la tâche .

Concernant le MMO, Node.js est pas mal mais je pense surtout me tourner vers Ajax Push Engine qui a l'air de bien manipuler le Online.

C'est plutôt original comme initiative ! Je n'imagine pas le travail fourni pour en arriver là, bravo. Ca ouvre certes des portes sur de nouvelles façons de concevoir du RPG à la sauce RMXP, quoique je suis un peu sceptique. Quelles étaient tes motivations personnelles pour faire ce projet ? De mon point de vue, pour faire des RPG sur navigateur, c'est peut-être mieux de passer par des outils éprouvés comme Flash, non ? (Je dis ca, je dis rien, je m'y connais pas)

Tu gères des ressources identiques à RMXP sans problème ? Tu gères des formats supplémentaires ?
Tu as un objectif à atteindre en terme de fonctionnalités (ie atteindre le niveau RMXP) ?
Un éditeur graphique/GUI pour faciliter l'édition est en projet ?
Sauvegardes présentes ? (En local, sur serveur, ...)


Je suivrai ce projet avec curiosité.

On peut très bien réaliser en HTML5 ce qu'on peut faire en Flash ^^. Mais j'ai choisi HTML5 car je pense que c'est l'avenir du Web et surtout car je maîtrise plus l'HTML5 que l'ActionScript (et HTML5 m'attire + ...)



Oui. Les ressources sont les même : Tileset, Windowskin, Audio ...



Le minimum pour faire un RPG. Mon but est surtout de jouer sur les atouts du navigateur. Je souhaiterais intégrer le MMO dans ce framework, ce qui donne un véritable plus par rapport à RPG Maker



C'est RPG Maker XP



Oui, le développeur a la possibilité d'enregistrer des données dans une base de données pour effectuer des sauvegardes.

Gifs? Ogg avec loop? Ce sont par exemple 2 formats qui manquent à RMXP (du moins, les Ogg ne bouclent pas)


Pour l'édition de map, ok. Mais en fait, je faisais plutôt référence à un éditeur d'évènement. Si j'ai bien compris, les Events de RM JS n'ont pas l'air d'avoir le meme jeu d'instruction que RMXP. Un Event doit être écrit à la main dans un fichier ?

Ouais ouais, Ogg en boucle est compatible . Pour les GIF, je ne sais pas encore.



Oui, mais sa structure permet à RPG Maker d'exporter des évènements et d'avoir des évènements sans pour autant toucher au code.

Information sur l'avancement du projet.

Voici les ajouts apportés à RPG JS

- Affichage des autotiles. Les autotiles sont automatiques générés à partir de la même image que dans RPG Maker

- Possibilité d'ajouter des actions. Par exemple, on peut indiquer que le héros donne un coup d'épée lorsque le joueur appuie sur la touche A. L'animation du coup d'épée est donc affichée en prenant une autre ressource de type "Character".

- Combat en temps réel (A-RPG) - En cours de développement -. Avec les actions de ci-dessus, il est possible d'attaquer des ennemis. L'ennemi possède un champ de vision et des actions (attaque, compétence, etc.). Son déplacement a été pensé de façon qu'il s'approche du héros sans pourtant être bloqué bêtement contre un mur. Lorsque l'ennemi est éliminé, des objets peuvent être laissés sur le sol (avec des probabilités) pour ensuite permettre au héros de les récupérer. Les objets sont des évènements générés dynamiquement

Voici une capture d'écran du combat A-RPG. Remerciement à Benben pour les ressources graphiques :



(Je vais vite, très vite )

Waouh.

Déjà ce projet est très intéressant, mais en plus vu que ça vient de Samarium on est sûrs que ça ne sera pas abandonné au bout de trois semaines !

Sinon j'ai une question :

Quand tu dis programmation, c'est de l'HTML5 + JS, du Ruby ou autre chose ?
C'est pour savoir si ça sera utilisable facilement par les apprentis rubistes ou programmeurs web ou si ce sera réservé aux programmeurs aguerris ?

A part ça je te souhaite une bonne continuation avec ce nouveau projet

Merci, merci ^^



Javascript seulement. Pour l'HTML5, c'est surtout la balise "canvas".



Je pense que les apprentis développeurs Web n'auront pas de mal à utiliser RPG JS. Pour les personnes utilisant RPG Maker encore moins, puisque la structure reprend la même que RPG Maker.
La difficulté est surtout de se familiariser avec cette librairie. La documentation permettra de surmonter cette difficulté. Prenons un exemple :

- Vous voulez ajouter une animation. L'animation #007 (coup d'épée) dans la base de données de RPG Maker peut être créé de cette façon :

Code: Tout sélectionner

rpg.addAnimation({
   name: 'sword',
   graphic: '006-Weapon01.png',
   sound: '094-Attack06.ogg',
   frames: [
      [{pattern: 1, y: 8}],
      [{pattern: 2, y: 8}],
      [{pattern: 3, y: 8}],
      [{pattern: 4, y: 8}],
      [{pattern: 5, y: 8}],
      [{pattern: 5, opacity: 100, y: 8}]
   ]
});

A première vue, cela peut être compliqué mais avec un peu de bon sens, on peut comprendre comment ça marche. Cette fonction ajoute une animation nommée "sword" utilisant l'image "006-Weapon01.png" et le son "094-Attack06.ogg".
"frames" est un tableau indiquant les frames de l'animation (images par images). Chaque frame a des propriétés que vous pouvez retrouver en double cliquant sur une cellule de l'animation dans RPG Maker.

Bref, rien de bien compliqué si des tutoriels et documentations sont présents.

Remarque