HFS Play

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 !!

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...

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

@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>

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.

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

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

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.

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

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!

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

Le fichier .ai

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 ?

@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

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

@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

J'ai le kiki tout dur ca sors quand ?

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?

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.

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)

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) :

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 ?)

HFS Play

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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