[DEV in PROGRESS]Box verticale 16/9 sur Zspin

Medias, themes, and more for zspin.

Modérateurs : vik, Modérateurs

Avatar de l’utilisateur
Meth
Administrateur
Administrateur
Messages : 4541
Inscription : 19 oct. 2012 - 01:00
Localisation : Conflans-en-Jarnisy
A remercié : 989 fois
A été remercié : 2179 fois
Contact :

Re: [DEV in PROGRESS]Box verticale 16/9 sur Zspin

Message par Meth » 08 juil. 2017 - 13:31

Porko a écrit :Glop!

Test avec 3 jeux en mode portrait


[BBvideo 560,340][/BBvideo]

Si vous voulez tester:

Download l'archive et décompréssez ====> https://mega.nz/#!KRYCHRaB!hfL8lNC7bn46 ... oMC5eiQBCg
récuperez la version de Zspin qui convient à votre OS ====> releases-f115/beta-test-t7243.html#p109555
et foutez le dans le premier dossier nommé ZspinShumpBox

Lancez, parametrez et testez (ya pas de jeux c juste le frontend)

Si vous êtes en mode paysage (normal quoi) virez le plein écran et redimentionnez pour avoir les bonnes proportions (c juste plus fluide sur l'anim des wheels)

Merci @biloon pour le graphisme et l'idée orginale
Merci @camarade35 pour le chart
Merci @vik pour l'aide au code
Merci @jer570 pour le database

Pour les fucking portes faut me filer des trucs... Ca c'est pour le test, ça va pas avec le reste
Je vais voir à animer les differentes apparitions d'items
L'encart en bas à droite affichera des images en boucle instruction cards, artworks...
Et faut que j'optimise le theme pour qu'il soit léger et commenter le code

EDIT: changement du nom du sujet pour le coup

La dernière vidéo fait vraiment rêver @porko !!

Avatar de l’utilisateur
Porko
Modérateur
Modérateur
Messages : 2019
Inscription : 02 févr. 2014 - 00:00
Localisation : 26700
A remercié : 258 fois
A été remercié : 381 fois

Re: [DEV in PROGRESS]Box verticale 16/9 sur Zspin

Message par Porko » 08 juil. 2017 - 21:33

Merci!

Bah écoute je WIP encore...

Ce coup ci avec un main menu!
[BBvideo 560,340][/BBvideo]

Si ya du graphiste qui a une meilleure idée je prends ou un design qui est ambitieux je prends aussi ^^
Je suis pas convaincu de mon truc...

biloon
Connaisseur
Connaisseur
Messages : 478
Inscription : 09 août 2014 - 01:00
Localisation : Saint-Brieuc
A remercié : 58 fois
A été remercié : 23 fois

Re: [DEV in PROGRESS]Box verticale 16/9 sur Zspin

Message par biloon » 10 juil. 2017 - 13:06

Gros Noob que je suis je ne sais pas ou trouver le script à changer pour le charts...
merci pour le tuyau :)

Avatar de l’utilisateur
camarade35
Maître
Maître
Messages : 4230
Inscription : 05 sept. 2013 - 01:00
Localisation : Chevaigné
A remercié : 619 fois
A été remercié : 739 fois
Contact :

Re: [DEV in PROGRESS]Box verticale 16/9 sur Zspin

Message par camarade35 » 10 juil. 2017 - 13:20

@billon : décompresse le zip et ouvre index.html

Code : Tout sélectionner

.myChartDiv {
  position: absolute;
  width: 30vh;
  top: 63vh;
  left: 6vh;
  z-index: 4;
}
et

Code : Tout sélectionner

<div class='zspin-difficulty'></div>
<div class='zspin-visibility'></div>
<div class='zspin-graphics'></div>
<div class='zspin-speed'></div>
<div class='zspin-soundtrack'></div>
<div class="myChartDiv"style="position: absolute; height:5vh; width:15vh"><canvas id="myChart"></canvas></div>

et

Code : Tout sélectionner

<script type="text/javascript">
function putChart() {
  var diff = parseInt($('.zspin-difficulty').text());
  var visi = parseInt($('.zspin-visibility').text());
  var graph = parseInt($('.zspin-graphics').text());
  var speed = parseInt($('.zspin-speed').text());
  var sound = parseInt($('.zspin-soundtrack').text());
  var ctx = document.getElementById("myChart");

  var myChart = new Chart(ctx, {
      type: "polarArea",

      options: {
        scale:{
          display : false,
          },
        legend: {
          display: false,
          }
        },
      data: {
          labels: ["Visibilité", "Graphisme", "Rapidité", "Bande-son", "difficulté"],
          datasets: [{
                  label: "My First Dataset",
                  data: [visi, graph, speed, sound, diff],
                  borderWidth: "0",
                  borderColor: "rgb(0,0,0)",
                  backgroundColor:[
                  "rgb(0,0,204)",
                  "rgb(0,204,0)",
                  "rgb(255,128,0)",
                  "rgb(204,0,204)",
                  "rgb(204,0,0)"
                  ]

              }

          ]

      }

  });
}
setTimeout(function(){ putChart();}, 1000);


</script>
préservation du patrimoine vidéoludique et de notre planète

biloon
Connaisseur
Connaisseur
Messages : 478
Inscription : 09 août 2014 - 01:00
Localisation : Saint-Brieuc
A remercié : 58 fois
A été remercié : 23 fois

Re: [DEV in PROGRESS]Box verticale 16/9 sur Zspin

Message par biloon » 10 juil. 2017 - 13:26

MERCI !
Comment reduire le nombre de variable :
Je voudrais tester avec 3 variables
Rapidité :
Visibilité :
Complexité:

J'ai mis les mains dans mazout... mais je n'arrive pas à modifier le choix et l'intulé des valeurs.

Avatar de l’utilisateur
tutor59
Virtuose
Virtuose
Messages : 1270
Inscription : 08 oct. 2014 - 01:00
A remercié : 119 fois
A été remercié : 176 fois

Re: [DEV in PROGRESS]Box verticale 16/9 sur Zspin

Message par tutor59 » 10 juil. 2017 - 19:30

Dezippes le fichiers index.html qui se trouve dans "ZspinShmupBox\Media\Main Menu\Themes".
Voici l'index modifié :

Code : Tout sélectionner

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Theme default pour Zspin</title>
  <meta name="coder avec le cul" content="un code aproximatif">
  <link rel="stylesheet" href="animate.css">
  <style type="text/css">


 html, body {
      width: 100%;
      height: 100%;
      margin: 0px;
      overflow: hidden;

    }



#bg_biloon {
      position: absolute;
      top: 0%;
      left: 0%;
      width: auto;
      height: 100%;
      z-index: 3;
}

  #vid_encart {
      position: absolute;
      top: 10.2vh;
      left: 10.2vh;
      width: 34.9vh;
      z-index: 1;
  }
.doorG {
      position: absolute;
      top: 9vh;
      left: 9.2vh;
      width: 19vh;
      z-index: 2;
  }
.doorD {
      position: absolute;
      top: 9vh;
      left: 28vh;
      width: 19vh;
      transform : rotate(180deg);
      z-index: 2;
  }
.myChartDiv {
  position: absolute;
  width: 30vh;
  top: 63vh;
  left: 6vh;
  z-index: 4;
}
.logo {
      position: absolute;
      transform-origin: center;
      top: 82vh;
      left: 35vh;
      max-width: 8hv;
      max-height: 8vh;
      z-index: 5;
    }


.year {
       position: absolute;
       top: 82.3vh;
       left: 26.6vh;
       z-index: 3;
       font-family: "alienleague";
       color: #F8F8FF;
       font-size: 1.7vh;
       background: transparent;
       text-align: center;
       text-transform: uppercase;
}
.player {
       position: absolute;
       top: 84.6vh;
       left: 24.4vh;
       z-index: 3;
       font-family: "alienleague";
       color: #FF0000;
       font-size: 1.5vh;
       background: transparent;
       text-align: center;
       text-transform: uppercase;
}
.leveltitre {
       position: absolute;
       top: 86.5vh;
       left: 24.7vh;
       z-index: 3;
       font-family: "alienleague";
       color: #87CEFA;
       font-size: 3vh;
       background: transparent;
       text-align: center;
       text-transform: uppercase;
}
.level {
       position: absolute;
       top: 90vh;
       left: 24vh;
       max-width: 8vh;
       z-index: 3;
}
.wheel {

      position: absolute;
      top: 64vh;
      left: 22vh;
      max-width: 26vh;
      max-height: 11vh;
      width: auto;
      z-index: 4;
}
.bouton-g {

      position: absolute;
      top: 11.7vh;
      left: 3vh;
      height: 2.5vh;
      width: auto;
      z-index: 4;
}
.bouton-d {

      position: absolute;
      top: 11.9vh;
      left: 50.34vh;
      height: 2.5vh;
      width: auto;
      z-index: 4;
}
/**HYDRIS DEBUT******/
.info_jeux_description {
      position: absolute;
      top: 81vh;
      left: 7.2vh;
      width: 15vh;
      height: 7vh;
      font-family: "alienleague";
      color: #F8F8FF;
      padding: 0px 0px 0px 0px;
      line-height: 1vh;
      font-size: 1vh;
      background: transparent;
      text-align: left;
      z-index: 4;

    }

    .info_jeux_description .scrollauto {
        overflow: hidden;
      height: 8vh;
      font-family: "arial";
      line-height: 0.8vh;
      font-size: 0.7vh;
      margin: 1;
      padding: 0;
    }
    /**HYDRIS FIN******/

.info_nom1 {
      position: absolute;
      top: 76.8vh;
      left: 20vh;
      width: 30vh;
      height: 25vh;
      font-family: "alienleague";
      color: #F8F8FF;
      padding: 0px 0px 0px 0px;
      line-height: 1.3 vh;
      font-size: 1.3vh;
      background: transparent;
      text-align: center;
      z-index: 4;
      overflow: hidden;
    }

.zspin_d {
      text-transform: uppercase;
    }

</style>


</head>

<body>

  <video id="vid_encart" src="Video.mp4" loop="loop" autoplay="autoplay"></video>
  <img src="background.png" id="bg_biloon">
  <img src="Artwork1.png" class="wheel">
  <img zspin-src="Other/Systems/%systems%.png" class="logo">
  <img zspin-src="Other/Level/%level%.png" class="level">
  <img src="BoutonG.png" class="bouton-g pulse animated infinite">
  <img src="BoutonD.png" class="bouton-d pulse animated infinite">
  <img src="door.jpg" class="doorG slideOutLeft animated" style="animation-delay: 700ms;">
  <img src="door.jpg" class="doorD slideOutRight animated" style="animation-delay: 700ms;">

<div class='zspin-difficulty'></div>
<div class='zspin-visibility'></div>
<div class='zspin-speed'></div>
<div class="myChartDiv"style="position: absolute; height:5vh; width:15vh"><canvas id="myChart"></canvas></div>
<div class="year zspin-year zspin_d"></div>
<div class="player zspin-players zspin_d"></div>
<div class="leveltitre">LEVEL</div>
<div class="info_nom1"><div class="zspin-description zspin_d"></div></div>
<div class="info_jeux_description">SYNOPSIS</br>
<p class="scrollauto zspin-synopsis">

<script src="Chart.min.js"></script>

<script>
function autoscroll(){
  $(".scrollauto").animate({scrollTop: $(".scrollauto")[0].scrollHeight},30000, function() {
    // Animation complete.
        $(this).animate({scrollTop: $(".scrollauto")[0].scrollHeight-$(".scrollauto")[0].scrollHeight},1000
        , function() {
          autoscroll();
        });

  });
}
setTimeout(function(){ autoscroll();}, 1000);
</script>


<script type="text/javascript">
function putChart() {
  var diff = parseInt($('.zspin-difficulty').text());
  var visi = parseInt($('.zspin-visibility').text());
  var speed = parseInt($('.zspin-speed').text());
  var ctx = document.getElementById("myChart");

  var myChart = new Chart(ctx, {
      type: "polarArea",

      options: {
        scale:{
          display : false,
          },
        legend: {
          display: false,
          }
        },
      data: {
          labels: ["Visibilité", "Rapidité", "difficulté"],
          datasets: [{
                  label: "My First Dataset",
                  data: [visi, speed, diff],
                  borderWidth: "0",
                  borderColor: "rgb(0,0,0)",
                  backgroundColor:[
                  "rgb(0,0,204)",
                  "rgb(0,204,0)",
                  "rgb(255,128,0)"
                  ]

              }

          ]

      }

  });
}
setTimeout(function(){ putChart();}, 1000);


</script>

</body>

</html>
Pour l'intitulé des valeurs, c'est directment mis dans le graphisme background.png du fichier zip
Dernière modification par tutor59 le 12 juil. 2017 - 16:15, modifié 1 fois.

Avatar de l’utilisateur
camarade35
Maître
Maître
Messages : 4230
Inscription : 05 sept. 2013 - 01:00
Localisation : Chevaigné
A remercié : 619 fois
A été remercié : 739 fois
Contact :

Re: [DEV in PROGRESS]Box verticale 16/9 sur Zspin

Message par camarade35 » 10 juil. 2017 - 19:59

en fait c'est cette partie qui va définir le nombre de labels

Code : Tout sélectionner

labels: ["Visibilité", "Rapidité", "difficulté"],
          datasets: [{
                  label: "My First Dataset",
                  data: [visi, speed, diff],
@tutor59 : apprends lui à pêcher, ne lui donne pas un poisson ;)
préservation du patrimoine vidéoludique et de notre planète

Avatar de l’utilisateur
zaker
Passionné
Passionné
Messages : 177
Inscription : 03 avr. 2014 - 01:00
Localisation : Limoges
A remercié : 23 fois
A été remercié : 40 fois
Contact :

Re: [DEV in PROGRESS]Box verticale 16/9 sur Zspin

Message par zaker » 08 sept. 2017 - 14:03

Super projet que vous avez là ! Le thème est vraiment sympa. il avance toujours un peu ce projet ?. Comme je vois plus de news depuis le 10/07. Je vais essayer de vous aider. çà me dis bien.

Avatar de l’utilisateur
GoryBlaster
Connaisseur
Connaisseur
Messages : 380
Inscription : 05 avr. 2017 - 10:54
A remercié : 114 fois
A été remercié : 76 fois

Re: [DEV in PROGRESS]Box verticale 16/9 sur Zspin

Message par GoryBlaster » 08 sept. 2017 - 14:51

Porko a écrit :Merci!

Bah écoute je WIP encore...

Ce coup ci avec un main menu!
[BBvideo 560,340][/BBvideo]

Si ya du graphiste qui a une meilleure idée je prends ou un design qui est ambitieux je prends aussi ^^
Je suis pas convaincu de mon truc...
J'avais pas fait gaffe à ce post... Sacré taff quand même (j'en serais totalement incapaB')
Par contre si je peux me permettre, niveau design ce qui me fait zarbe c'est le "camembert" à gauche. L'idée est très bonne mais esthétiquement je pense que ceux de type SF5 seraient plus sobre et mieux intégrés. Le truc Level avec les étoiles c'est une très bonne idée également

Avatar de l’utilisateur
Porko
Modérateur
Modérateur
Messages : 2019
Inscription : 02 févr. 2014 - 00:00
Localisation : 26700
A remercié : 258 fois
A été remercié : 381 fois

Re: [DEV in PROGRESS]Box verticale 16/9 sur Zspin

Message par Porko » 08 sept. 2017 - 15:01

Tout est possible tout est réalisable, c'est le jeux de Zspin

Amis graphistes, faites péter vos créations et ze m'en zoccupe!

Avatar de l’utilisateur
GoryBlaster
Connaisseur
Connaisseur
Messages : 380
Inscription : 05 avr. 2017 - 10:54
A remercié : 114 fois
A été remercié : 76 fois

Re: [DEV in PROGRESS]Box verticale 16/9 sur Zspin

Message par GoryBlaster » 08 sept. 2017 - 15:07

Porko a écrit :Tout est possible tout est réalisable, c'est le jeux de Zspin

Amis graphistes, faites péter vos créations et ze m'en zoccupe!
Je pars en vacances ce soir mais j'essaie de me dégager un peu de temps dès que possible. Avec plaisir !

Edit : tiens j'ai fait un truc vite fait et simpliste pour voir. Couleurs au pif etc mais si ça peut aider à faire avancer la réflexion ;)
Image
Le fichier .ai

Avatar de l’utilisateur
mens59
Mentor
Mentor
Messages : 2310
Inscription : 19 mai 2017 - 21:08
Localisation : 59000
A remercié : 603 fois
A été remercié : 367 fois

Re: [DEV in PROGRESS]Box verticale 16/9 sur Zspin

Message par mens59 » 08 sept. 2017 - 18:01

Peut-être est-ce une question bête car je n'y connais rien dans ce domaine, mais plutôt que d'avoir un décalage quand on switch de jeu, il n'est pas possible d'uniquement avoir la fermeture des portes métallique, avec le cadre qui reste fixe ? Avec toujours les infos du jeu qui apparaissent en fondu ? Tout fonctionne en HTML sur Zspin, pour animer tout ça c'est javascript qui gère j'ai bien compris ?

Avatar de l’utilisateur
Porko
Modérateur
Modérateur
Messages : 2019
Inscription : 02 févr. 2014 - 00:00
Localisation : 26700
A remercié : 258 fois
A été remercié : 381 fois

Re: [DEV in PROGRESS]Box verticale 16/9 sur Zspin

Message par Porko » 08 sept. 2017 - 18:22

@GoryBlaster
Oui on peut, je l'avais évoqué ici medias-f117/box-verticale-sur-zspin-t13 ... ml#p208223
le truc c'est que si je veux cacher la "legend" (rectangle de couleur avec le nom) j'ai un bug dans Zspin et rien ne s'affiche
il faut que je trouve une parade, je penses cacher en arrière plan

@mens59 oui mais non
Zspin n'a pas encore de transition entre theme, ce qu'il fait qu'il y a un moment de noir quand tu change de jeux. Le décalage est une parade que j'ai employer pour avoir 0 moment de noir. Si tu veux ce theme sans le décalage il suffit de remplacer les wheels qui sont un screenshot du theme

Avatar de l’utilisateur
mens59
Mentor
Mentor
Messages : 2310
Inscription : 19 mai 2017 - 21:08
Localisation : 59000
A remercié : 603 fois
A été remercié : 367 fois

Re: [DEV in PROGRESS]Box verticale 16/9 sur Zspin

Message par mens59 » 08 sept. 2017 - 18:48

@Porko Ah ok j'ai compris le principe merci pour cet éclaircissement.

Avatar de l’utilisateur
Porko
Modérateur
Modérateur
Messages : 2019
Inscription : 02 févr. 2014 - 00:00
Localisation : 26700
A remercié : 258 fois
A été remercié : 381 fois

Re: [DEV in PROGRESS]Box verticale 16/9 sur Zspin

Message par Porko » 08 sept. 2017 - 19:00

@GoryBlaster tu peux me sortir le fond de ton graph adapté pour ça?
Faut pas que ça déborde de la zone de découpe, fais donc gaffe aux annotations. Mais je penses que ça va faire rikiki

Image

J'ai donc mis le "radar" en fond

EDIT: sinon re fais un graphisme à 100% ^^ Je prends aussi si t'as des idées

Avatar de l’utilisateur
DrLobo
Gourou
Gourou
Messages : 513
Inscription : 29 mars 2016 - 10:20
A remercié : 18 fois
A été remercié : 90 fois

Re: [DEV in PROGRESS]Box verticale 16/9 sur Zspin

Message par DrLobo » 08 sept. 2017 - 19:20

J'ai le kiki tout dur ca sors quand ?

Avatar de l’utilisateur
Porko
Modérateur
Modérateur
Messages : 2019
Inscription : 02 févr. 2014 - 00:00
Localisation : 26700
A remercié : 258 fois
A été remercié : 381 fois

Re: [DEV in PROGRESS]Box verticale 16/9 sur Zspin

Message par Porko » 08 sept. 2017 - 19:23

DrLobo a écrit :J'ai le kiki tout dur ca sors quand ?
Quand on a un équipe de volontaires dessus
Perso je code à la demande

Kikiveut faire quoi?

Avatar de l’utilisateur
tetrafred
Gourou
Gourou
Messages : 930
Inscription : 10 oct. 2013 - 01:00
Localisation : La Mothe Achard
A remercié : 71 fois
A été remercié : 64 fois

Re: [DEV in PROGRESS]Box verticale 16/9 sur Zspin

Message par tetrafred » 08 sept. 2017 - 19:32

Question Porko: ca ira dans le bon sens dans nos pincab ou on aura le même problème qu'avec la crossbox? Je peut pas essayer j'ai mon pincab qui est non accessible. De mémoire on tournais à 270° mais je pense que c'est plutôt une limite de l'émulateur.

Avatar de l’utilisateur
Porko
Modérateur
Modérateur
Messages : 2019
Inscription : 02 févr. 2014 - 00:00
Localisation : 26700
A remercié : 258 fois
A été remercié : 381 fois

Re: [DEV in PROGRESS]Box verticale 16/9 sur Zspin

Message par Porko » 08 sept. 2017 - 19:35

La c'est en mode portrait de windob, c'est juste pratique pour moi.
Si on trouve un truc définitif qui claque bien je sortirai les 3 orientations (le portait inversé osef)

Avatar de l’utilisateur
GoryBlaster
Connaisseur
Connaisseur
Messages : 380
Inscription : 05 avr. 2017 - 10:54
A remercié : 114 fois
A été remercié : 76 fois

Re: [DEV in PROGRESS]Box verticale 16/9 sur Zspin

Message par GoryBlaster » 08 sept. 2017 - 21:20

Porko a écrit :@GoryBlaster tu peux me sortir le fond de ton graph adapté pour ça?
Faut pas que ça déborde de la zone de découpe, fais donc gaffe aux annotations. Mais je penses que ça va faire rikiki

J'ai donc mis le "radar" en fond

EDIT: sinon re fais un graphisme à 100% ^^ Je prends aussi si t'as des idées
Si je comprends bien, tu voulais voir un truc du genre ? (fait rapidos) :

Image

Finalement j'ai un peu modifié le graph et comme il faut les noms en bas, j'ai pensé à des "barres" de couleurs (?)

Faire un graphisme à 100% why not, mais faut que j'arrive à me dégager un peu de temps pour ça ;-)
(tu l'avais fait toi même celui-ci ?)

Répondre

Revenir à « Medias »