Forums LR PRESSE

Où il est question de trains, petits et grands

  • Advertisement

PST-WEB un petit simulateur de train 2D

Echanger des trucs, construire le modélisme de demain...

Modérateur: MOD

PST-WEB un petit simulateur de train 2D

Publié: Jeu 04 Oct 2018, 20:16 
Bonjour,

J'ai créé un petit simulateur de train 2D qui permet de jouer avec des trains sur des réseaux virtuels.
Je l'ai nommé PST-WEB (Petit Simulateur de Train version Internet)
Pour jouer, il n'y a rien a installer vu qu'il s'exécute dans un navigateur internet qui supporte le JavaScript.

lien: http://udelmas.e-monsite.com/pages/pst-web.html

Pour cette première version, j'ai choisi de reproduire le magnifique réseau "Luzy" de Renaud.

capture d'écran de la gare de Luzy:

Image

capture d'écran du viaduc (celui de Renaud est rose et avec une arche centrale plus grande):

Image

Si ce projet vous intéresse, dite le moi, pour que je continue le partage. Vos remarques sont les bienvenues, ce projet est tout nouveau et il y a surement des améliorations et problèmes.

Je compte rajouter d'autres réseaux et des lignes réelles.

Si vous êtes plus créateurs, vous pouvez vous aussi, créer des réseaux, changer le matériel roulant et partager votre travail. J'expliquerai comment faire ...

Les images du matériel roulant proviennent pour la plupart de l'excellent site de Marc Le Gade qui a fait des images pour quasiment tout le matériel Français (et plus)

Je l'ai testé avec les navigateurs Mozilla Firefox; Google Chrome et Internet Explorer IE Edge. Les vieux Internet Explorer comme IE11 ne fonctionnent pas car ils ne supportent pas les class.

J'aurai bien voulu faire fonctionner le simulateur dans cette page mais le forum interdit l'usage du JavaScript et la zone d'affichage est un peu petite.

Bien entendu, cette réalisation est entièrement gratuite et "open source".
Lulu_ho
Papotier
 
Messages: 167
Inscrit le: Ven 16 Déc 2016, 12:24
Echelle pratiquée: HO
Prénom: Ulysse

Re: PST-WEB un petit simulateur de train 2D

Publié: Jeu 04 Oct 2018, 20:49 
:coeur1: :applause: :applause: :applause:
Everybody Lies....
Avatar de l’utilisateur
Personne
Causant
 
Messages: 201
Inscrit le: Lun 14 Mai 2018, 11:00
Localisation: A l ouest de Lugdunum

Re: PST-WEB un petit simulateur de train 2D

Publié: Mar 09 Oct 2018, 17:53 
Le simulateur est maintenant capable de générer des ponts et bâtiments.

Cette nouvelle version contient mon réseau. "Le réseau de Lulu, un réseau avec des modulinos" présenté dans ce forum.

Il va falloir maintenant rajouter des réseaux/lignes.
Dans un premier temps je compte rajouter:
- En HO, le réseau "projet du siècle" que j'aime bien (de Fifi)
- En réel, l'étoile de Veynes (J'y suis passé cet été, ça m'a motivé)

Capture d'écran du simulateur avec mon réseau:

Image
Lulu_ho
Papotier
 
Messages: 167
Inscrit le: Ven 16 Déc 2016, 12:24
Echelle pratiquée: HO
Prénom: Ulysse

Re: PST-WEB un petit simulateur de train 2D

Publié: Ven 12 Oct 2018, 20:17 
On continu avec la simulation du superbe réseau de Fifi "Projet du siècle"

Image

L'accroche/décrochage des wagons a été amélioré.
Il suffit maintenant de:
- sélectionner la loco
- appuyer sur la touche !
- puis cliquer sur le dernier wagons à accrocher.
Tous les wagons entre la loco et ce dernier wagons inclus seront alors accrochés et tous les autres décrochés.
Pour décrocher toute une rame, il suffit de cliquer sur la loco après la touche !
Les manœuvres sont ainsi plus faciles.

Petit défit, essayer de regrouper les 2 demie rames de céréaliers avec la BB63000 et les descendre loco en avant ...
Pour ma part, j'ai eu besoin de 19 manœuvres (une manœuvre = la BB63000 dans un sens) ...

Image

Promis, la prochaine fois, ce sera le tour d'une ligne réelle d'être simulée !
Lulu_ho
Papotier
 
Messages: 167
Inscrit le: Ven 16 Déc 2016, 12:24
Echelle pratiquée: HO
Prénom: Ulysse

Re: PST-WEB un petit simulateur de train 2D

Publié: Sam 13 Oct 2018, 20:07 
c'est super cool !! :applause:
Arnaud
Avatar de l’utilisateur
Nono13570
 
Messages: 40
Inscrit le: Ven 05 Mai 2017, 21:06
Localisation: Avignon
Âge: 17
Echelle pratiquée: HO
Prénom: Arnaud

Re: PST-WEB un petit simulateur de train 2D

Publié: Dim 14 Oct 2018, 09:20 
PST-2012 a vécu ! Vive PST-WEB !
Bug Killer
Papotier
 
Messages: 146
Inscrit le: Ven 08 Sep 2017, 11:46
Localisation: Loir et Cher
Âge: 63
Echelle pratiquée: H0
Prénom: Jean-Michel

Re: PST-WEB un petit simulateur de train 2D

Publié: Lun 15 Oct 2018, 12:29 
Salut JM, on ne peut rien te cacher ;-) Et oui il faut vivre avec son temps ...
Lulu_ho
Papotier
 
Messages: 167
Inscrit le: Ven 16 Déc 2016, 12:24
Echelle pratiquée: HO
Prénom: Ulysse

Re: PST-WEB un petit simulateur de train 2D

Publié: Lun 15 Oct 2018, 20:14 
Bravo à toi pour cette sympathique petite simulation ferroviaire :applause:

Hâte que le tutoriel sur "comment créer un réseau, changer du matériel etc..." arrive !!! :mdr:
non, c'est pô pour faire une ligne VFL :siffle: :ange3:


________________________________________________________________________________________________________________

ImageImageImageImageImage
C'est sympa ici :3
Avatar de l’utilisateur
Chuklenuts
Papotier
 
Messages: 174
Inscrit le: Jeu 04 Mai 2017, 09:29
Localisation: Quelque part dans les Landes
Âge: 18
Echelle pratiquée: HO, HOe, bientôt HOm
Prénom: Thomas
Club: Pas de club à proximité :sad:

Re: PST-WEB un petit simulateur de train 2D

Publié: Mer 17 Oct 2018, 20:47 
Bonsoir,

Comme promis et demandé, voici un petit tutoriel pour créer vos réseaux, changer le matériel ...

Le simulateur et ses données sont dans une page web (.html)
La première chose à faire est de copier la page html sur son ordinateur.
Il est préférable de prendre le dernier réseau afin d'avoir les dernières améliorations du simulateur.

En ouvrant le fichier html avec un éditeur de texte, vous trouverez entre les balises script :
- le code du simulateur (Vous pouvez l'améliorer si besoin)
- les données du réseau et matériel roulant

Vous pouvez modifier ce fichier html, le sauver et l'ouvrir ensuite avec un navigateur pour contempler le résultat de votre travail.
Un conseil: tester régulièrement afin de revenir facilement en arrière si ça ne marche plus !

Pour créer votre réseau et matériel, vous renseignerez les fonctions suivantes:
- add_rails()
- add_images()
- add_trains()
- add_pictures()
- add_textes()
- draw_gen_fg()/bg()

Bien entendu comme vous avez téléchargé un réseau existant, il y aura des déjà données du réseau. Effacez ce que vous ne voulez pas conserver.

** add_rails():
Cette fonction permet d'ajouter des rails à l'aide de la fonction add_seg

Code: Tout sélectionner
function add_rails()
    {     
      //blablabla (commentaire)
      add_seg(0,50,200,50,0);
      add_seg(0,50,200,0,0);
      add_seg(200,0,700,0,0);
      add_seg(700,0,900,0,0);
      add_seg(700,0,900,-50,0);
     ...
     }
   


add_seg(x1,y1,x2,y2,type), crée un segment entre les points (x1,y1) et (x2,y2).
Les dimensions sont données en dizaine de cm car les dessins des trains sont à l'echelle 1pixel = 10cm.

Image

Ainsi pour créer un rail de 100m (en réalité) on peut faire:
add_seg(0,0,1000,0,0);

Les types sont les suivants:
Code: Tout sélectionner
    var SEG_X  = 0; // standard
    var SEG_T  = 1; // tunnel
    var SEG_P  = 2; // pont
    var SEG_QH = 3; // quai en haut
    var SEG_QB = 4; // quai en bas
    var SEG_L  = 5; // link

Les ponts sont juste représentés par un rectangle tout moche, on préférera utiliser le générateur pour faire de vrais ponts.
Les quais indiquent que le segment dessert un quai (au dessus ou en dessous du trait)
Les liens sont des segments transparents. Lorsqu'un train entre dans un segment de ce type, il en ressort aussitôt à l'autre bout pour sauter d'un bout à l'autre du réseau.

Il est interdit de créer des segments verticaux.
Si plus de 2 segments aboutissent à un même point alors un aiguillage est créé automatiquement. Il ne peut y avoir que 2 aiguillages sur un point (un de chaque coté). Les TJD sont donc possibles mais pas les aiguillages triples.

Pour savoir les coordonnées d'un point, cliquer sur l'écran el lire xc,yc qui indiquent la valeur du dernier clique. (arrondir !!!).

Vous pouvez à tout moment changer le référentiel en tapant:
Code: Tout sélectionner
x00=700; y00=0;
add_seg(0,0,900,-50,0);
...

Cela crée le segment (700,0,1600,-50,0)

Si les segments se suivent, vous pouvez ne pas spécifier x1,y1
Code: Tout sélectionner
add_seg2(950,-50,0);


Bien entendu pour les informaticiens, il est possible de concevoir des outils pour générer des lignes. J'avais créé un outil pour générer des segments avec la description des lignes disponible sur Wikipédia mais cela est plus compliqué et sort du cadre de ce post.

PST crée automatiquement 31 voies de garage entres x=-5000 et x=-500 afin de ranger vos trains (par ex pour simuler les boites ...).


** add_textes()

Pour ajouter des textes

Code: Tout sélectionner
      function add_textes()
      {
        add_txt("gare cachee de Lyon", 2500, 100);
        add_txt("gare cachee de Chalon", 26500, 100);
        add_txt("gare de Luzy", 19000, 180);
        add_txt("gare de  Marhodieu", 32200, 225);
        add_txt("depot", 14600, 950);
      }



** add_images()

Cette fonction indique à PST ou trouver les images et donne un nom plus court pour les utiliser. Vous pouvez spécifier n'importe quel type d'image comme des images de trains, bâtiments, photos ... Si les images n'existent pas, PST bloquera ...
Code: Tout sélectionner
    function add_images()
    {
        add_img("X2800", "http://www.mlgtraffic.net/images/SNCF/AD/X2800_RTC_R.gif");
        add_img("COUV-E","http://www.mlgtraffic.net/images/SNCF/W/G4_Bois.gif");

        // Certaines images sur mlgtraffic n'etaient pas transparentes, donc certains liens ont ete remplaces
        //add_img("141TA-N" , "http://www.mlgtraffic.net/images/SNCF/LV/SNCF_4_141TA_N1_Anim_R.gif");
        // add_img(("141TA-N" , "file:///C:/Users/lulu/Documents/mlg/SNCF/LV/SNCF_4_141TA_N1_Anim_R.gif");
        add_img("141TA-N" , "http://udelmas.e-monsite.com/medias/files/sncf-4-141ta-n1-l.gif");

Quelques bons liens pour trouver des images de matériel roulant:
- http://www.mlgtraffic.net/ (l'incontournable site de Marc le Gad qui repoduit pratiquement tout le materiel SNCF et bien plus)
- http://www.corpora-romanica.net/mm/
- http://pc.pxtr.de/stocke.htm (Une énorme base de donnée qui regroupe plusieurs sites)

Les formats spécifiés sont gif, jpg et png.
Préférez les images avec fond transparent. Sous Windows pour modifier des images avec fond transparent, paint.net fonctionne bien , il suffit de sélectionner une zone puis appuyer sur la touche Suppr pour rendre cette zone transparente. Si une image d'un site n'est pas transparente, vous pouvez la modifier et la sauver sur un autre site.
Evitez des images trop grosses afin de ne pas ralentir le chargement.
Pour tester, vous pouvez mettre des images sur votre ordinateur en utilisant file:// mais bien entendu cela ne marchera pas si vous partagez votre travail.

Ne pas effacer BRIQUE, PIERRE, PIEERJ et BETON qui sont des textures utilisées pour générer des ponts et bâtiments.


** add_pictures()

Cette fonction permet d'ajouter des images fixes sur le réseau comme des bâtiments ou des photos.

Code: Tout sélectionner
      function add_pictures()
      {
          //          name     x    y   fg inv
          add_picture("GARE", 19000, 150, 1, 0);
          add_picture("AILE", 19000-202, 150, 1, 1);
          add_picture("SILO", 19600, -452, 0, 0);

add_picture(nom_de_l_image, x, y, fg, inv)
x,y indique l'endroit oû inserer le milieu inférieur de l'image.
fg pour foreground (devant) indique si l'image doit s'afficher au dessus des autres éléments (ex une gare coté utilisateur afin que rails et trains s'affichent derrière) ou derrière.
inv indique si l'image doit être inversée.


** add_trains()

Cette fonction permet de créer les trains (locos et wagons) avec les images précédentes.

Code: Tout sélectionner
  function add_trains()
    {         
          add_train(      "141TA-N" , 13500,  600, 1, 1, 0);
          add_train(      "140C-N"  , 14500,  500, 1, 1, 0);
          add_train(      "141R-C-N", -4500,  -400, 1, 1, 0);
            add_train_right(      "BRUH2"  , 6, 0, 0, 1);
          add_train(      "141R-F-N", -4500,  -350, 1, 1, 0);
            add_train_right(      "ROMM12" , 1, 0, 0, 1);
            add_train_right(      "ROMM2"  , 5, 0, 0, 1);

add_train(image, x, y, inv, inv_on, attache)
x,y indique l'endroit oû inserer le milieu inférieur de l'image.
inv indique si l'image doit être inversé au démarrage.
inv_on indique si l'image sera inversé à chaque retournement.
attache indique si l'élément est a atteler à l'élément précédent.

Une loco aura certainement inv_on à 1
Image Image
alors qu'un wagon "Kronembourg" non, sinon "Kronembourg" s'affichera a l'envers !
Image Image

add_train_right(image, nb, inv, inv_on, attache) pour ajout à droite et add_train_left(image, nb, inv, inv_on, attache) pour ajout à gauche, permettent d'ajouter des éléments à doite ou gauche de l'élément précédent sans s'embêter à calculer les coordonnées. Les paramètres x,y sont remplacés par le nombre d'élément à ajouter.
Dans l'exemple on a ainsi ajouté 6 wagons romily de 2eme classe à droite de la 141R et on les a même atatchés !

Vous pouvez ainsi créer vos rames facilement !


** draw_gen_fg()/bg()

C'est dans ces fonctions que l'on peut générer des dessins en temps réel. Cela est très utile pour générer des ponts et gares sans image.
draw_gen_fg() est appelée pour dessiner en avant plan (au dessus des rails et trains)
draw_gen_fg() est appelée pour dessiner en arrière plan
Code: Tout sélectionner
    function draw_gen_fg()
    {
       // grand viaduc
        var xr=400, yr=50;
        xr = gen_draw_mur_inf(xr, yr, 0, 20, 10, 0, 902, 0);
        xr = gen_draw_arche(xr, yr, 20, 30, 10, 10, 2, 902, 555, 555, 15, 0, 1, 555);
        xr = gen_draw_arche(xr, yr, 30, 40, 10, 10, 2, 902, 555, 555, 15, 0, 1, 555);
        xr = gen_draw_arche(xr, yr, 40, 40, 10, 10, 2, 902, 555, 555, 15, 0, 1, 555);
        xr = gen_draw_arche(xr, yr, 40, 40, 10, 10, 2, 902, 555, 555, 15, 0, 1, 555);
        xr = gen_draw_arche(xr, yr, 40, 40, 10, 10, 2, 902, 555, 555, 15, 0, 1, 555);
        xr = gen_draw_arche(xr, yr, 40, 40, 10, 10, 2, 902, 555, 555, 15, 0, 1, 555);
        xr = gen_draw_arche(xr, yr, 40, 30, 10, 10, 2, 902, 555, 555, 15, 0, 1, 555);
        xr = gen_draw_arche(xr, yr, 30, 20, 10, 10, 2, 902, 555, 555, 15, 0, 1, 555);
        xr = gen_draw_mur_inf(xr, yr, 20, 0, 10, 0, 902, 0);
        xr = 400 + 10*36; yr=50+400
        xr = gen_draw_arche(xr, yr, 15, 20, 10, 10, 0, 902, 555, 555, 15, 0, 1, 555);
        xr = gen_draw_arche(xr, yr, 20, 20, 10, 10, 0, 902, 555, 555, 15, 0, 1, 555);
        xr = gen_draw_arche(xr, yr, 20, 20, 10, 10, 0, 902, 555, 555, 15, 0, 1, 555);
        xr = gen_draw_arche(xr, yr, 20, 15, 10, 10, 0, 902, 555, 555, 15, 0, 1, 555);
       
        // pont metallique
        xr = 4000;  yr = 50;
        xr = gen_draw_mur_inf(xr, yr, 0, 10, 10, 0, 902, 0);
        xr = gen_draw_metal(  xr, yr, 10, 10, 50, 50, 25, 5, 902, 0, 0, 0, 0, 1, 1);
        xr = gen_draw_metal(  xr, yr, 10, 10, 50, 50, 25, 5, 902, 0, 0, 0, 0, 1, 1);       
        xr = gen_draw_mur_inf(xr, yr, 10, 0, 10, 0, 902, 0);
       
        // mur d'observation
        xr = 15000;  yr = 50;
        xr = gen_draw_mur_inf(xr, yr,  0, 10, 10, 2, 902, 0);
        xr = gen_draw_mur_inf(xr, yr, 10, 10, 30, 2, 902, 0);
        xr = gen_draw_mur_inf(xr, yr, 10,  0, 10, 2, 902, 0);

        // BV
        var xg = 8450, yg = 85;
        if(is_in(xg, xg + 250))
        {
            draw_base(xg, yg, 100, 40, "#F0F000", p_brique, 0, 0, 30, "#800000");
            draw_huis(xg + 30, yg, 30, 15); draw_huis(xg + 100 - 30, yg, 30, 15);
            xg += 100;
            draw_base(xg, yg, 150, 75, "#F0F000", p_brique, 0, 0, 30, "#800000");
            draw_huis(xg + 30, yg, 30, 12); draw_huis(xg + 75, yg, 30, 12); draw_huis(xg + 150 - 30, yg, 30, 12);
            draw_huis(xg + 30, yg - 50, 20, 10); draw_huis(xg + 75, yg - 50, 20, 10); draw_huis(xg + 150 - 30, yg - 50, 20, 10);
            xg+=150;
            draw_base(xg,yg,50,40,"#F0F000",p_brique,0,0,30,"#800000");
            draw_huis(xg+25,yg,30,15);
        }



Image

Afin de ne pas surcharger cette présentation, je Je décrirais le générateur plus tard ...


Voila, vous en savez assez si vous souhaitez vous lancer ...
Lulu_ho
Papotier
 
Messages: 167
Inscrit le: Ven 16 Déc 2016, 12:24
Echelle pratiquée: HO
Prénom: Ulysse

Re: PST-WEB un petit simulateur de train 2D

Publié: Jeu 18 Oct 2018, 18:38 
Je vous propose aujourd'hui non plus une simulation d'un reseau HO, mais bien une ligne réelle.
Afin de commencer facilement, mon choix s'est porté sur la petite ligne 726 Bertholene-Espalion.
Cette petite ligne de 27km se situe vers Rodez dans le massif central, son but était de deservir Espalion et être prolongée au delà.
Cette ligne est maintenant deferrée et reconvertit en une agréable voie verte à parcourir a pied ou en VTT (sol en sable).

La partie Bertholene-Bozouls est plate et sans ouvrage d'envergure.
La partie Bozouls-Espalion est remarquable avec ses 6 tunnels et 5 viaducs.
Pour les touristes aux alentours: A Bozouls, vous pouvez voire un impressionant Canyon. A Espalion, les bords du Lot sont sympatiques avec le vieux pont. Cette ville a un musée du scaphandre !

Même si vous ne voulez pas jouer, le simulateur est une méthode très commode pour localiser et voire les gares, ouvrages, plan des voies ...

J'ai compressé les sections de pleines lignes car il aurait été sans intérêt de juste voire un simple trait dans le simulateur pendant des km.

Je n'ai pas d'infos sur le traffic marchandise et sur les eventuels embranchements particuliers. Si vous en avez cela permettrait de les rajouter dans le simulateur et augmenter l'intérêt du jeu.

Quelques liens:
- wikipedia: https://fr.wikipedia.org/wiki/Ligne_de_ ... 0_Espalion (j'ai utilisé le plan kilometrique de la ligne)
- sur ce forum: viewtopic.php?f=2&t=62591 ("Aubrac" s'interesse plus particulierement à la gare d'Espalion (et ses batiments en HO) ainsi qu'au materiel roulant)
- infos voie verte: https://www.af3v.org/-Fiche-VVV-.html?voie=354#
- photos : http://passes-montagnes.fr/htlm1/piste_ ... olene.html

Gare d'Espalion
Image

Viaduc de la Beaume
Image
Lulu_ho
Papotier
 
Messages: 167
Inscrit le: Ven 16 Déc 2016, 12:24
Echelle pratiquée: HO
Prénom: Ulysse

Re: PST-WEB un petit simulateur de train 2D

Publié: Jeu 18 Oct 2018, 20:25 
Bonjour Ulysse,
Je vois que tu te lances dans un nouveau challenge sur le forum, après la présentation de la centrale DCC à 10 €.
Le choix de cette ancienne ligne de Bertholène à Espalion est très judicieux avec les nombreux ouvrages d'art qui se succèdent sur une courte distance.
Bon courage pour la suite.
Avatar de l’utilisateur
Aubrac
Loquace
 
Messages: 1061
Inscrit le: Sam 24 Oct 2009, 04:38
Localisation: Tahiti
Echelle pratiquée: H0 H0m H0e
Prénom: Marcel


Retour vers Loco-Revue

Qui est en ligne ?

Utilisateur(s) parcourant actuellement ce forum : Elvis-Jagger-Abdul-Jabbar, Mortimer, Tonton Jean et 46 invité(s)